Init
This commit is contained in:
62
themes/agico-hugo/assets/scss/templates/_banner.scss
Executable file
62
themes/agico-hugo/assets/scss/templates/_banner.scss
Executable file
@@ -0,0 +1,62 @@
|
||||
// banner css start
|
||||
section.hero-area {
|
||||
padding: 200px 0 175px;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
background-position: bottom center !important;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
@include mobile-xs {
|
||||
padding: 190px 0 100px;
|
||||
}
|
||||
|
||||
@include desktop-xl {
|
||||
padding: 190px 0 155px;
|
||||
}
|
||||
|
||||
p {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
h1 {
|
||||
line-height: 68px;
|
||||
z-index: 1;
|
||||
font-size: 50px;
|
||||
|
||||
@include mobile-xs {
|
||||
font-size: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.watermark {
|
||||
position: absolute;
|
||||
opacity: 0.07;
|
||||
top: 20px;
|
||||
left: 0;
|
||||
font-size: 200px;
|
||||
font-weight: 600;
|
||||
z-index: -1;
|
||||
color: inherit;
|
||||
|
||||
@include mobile {
|
||||
top: 0;
|
||||
font-size: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.watermark-sm {
|
||||
position: absolute;
|
||||
opacity: 0.07;
|
||||
top: -40px;
|
||||
left: 0;
|
||||
font-size: 110px;
|
||||
font-weight: 600;
|
||||
color: inherit;
|
||||
|
||||
@include mobile {
|
||||
top: 0;
|
||||
font-size: 100px;
|
||||
}
|
||||
}
|
||||
97
themes/agico-hugo/assets/scss/templates/_blog.scss
Executable file
97
themes/agico-hugo/assets/scss/templates/_blog.scss
Executable file
@@ -0,0 +1,97 @@
|
||||
/* sidebar */
|
||||
.widget {
|
||||
padding: 40px 30px 0;
|
||||
ul {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.tag-list {
|
||||
li {
|
||||
a {
|
||||
padding: 12px 15px;
|
||||
display: block;
|
||||
border-radius: 40px;
|
||||
|
||||
&:hover {
|
||||
background: $btn-gradient-primary;
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* sidebar */
|
||||
|
||||
.pagination .page-item .page-link {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: $color-primary;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: 600;
|
||||
transition: .3s ease;
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
margin: 10px;
|
||||
width: 50px;
|
||||
line-height: 33px;
|
||||
box-shadow: 0px 5px 15px 0px rgba(51, 77, 128, 0.12)
|
||||
}
|
||||
|
||||
.pagination .page-item.active .page-link {
|
||||
background: $btn-gradient-primary;
|
||||
color: $white;
|
||||
box-shadow: 0px 15px 15px 0px rgba(8, 18, 109, 0.1)
|
||||
}
|
||||
|
||||
.pagination .page-item .page-link:hover {
|
||||
box-shadow: 0px 15px 15px 0px rgba(8, 18, 109, 0.1)
|
||||
}
|
||||
|
||||
/* blog single */
|
||||
|
||||
blockquote {
|
||||
box-shadow: inset 0px 7px 0px 0px rgba(255, 255, 255, 0.596);
|
||||
padding: 34px 40px 37px 40px;
|
||||
background-image: $bg-gradient-secondary;
|
||||
border-radius: 10px;
|
||||
margin: 40px 0;
|
||||
|
||||
p {
|
||||
position: relative;
|
||||
font-style: italic;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
h6 {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.article {
|
||||
display: flex;
|
||||
|
||||
img {
|
||||
height: 75px;
|
||||
width: 75px;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
textarea {
|
||||
height: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
/* /blog single */
|
||||
53
themes/agico-hugo/assets/scss/templates/_bootstrap.scss
Normal file
53
themes/agico-hugo/assets/scss/templates/_bootstrap.scss
Normal file
@@ -0,0 +1,53 @@
|
||||
// Bootstrap 5.3.0
|
||||
|
||||
@import "../bootstrap/mixins/banner";
|
||||
@include bsBanner("");
|
||||
|
||||
// scss-docs-start import-stack
|
||||
// Configuration
|
||||
@import "../bootstrap/functions";
|
||||
@import "../bootstrap/variables";
|
||||
@import "../bootstrap/variables-dark";
|
||||
@import "../bootstrap/maps";
|
||||
@import "../bootstrap/mixins";
|
||||
@import "../bootstrap/utilities";
|
||||
|
||||
// Layout & components
|
||||
@import "../bootstrap/root";
|
||||
@import "../bootstrap/reboot";
|
||||
@import "../bootstrap/type";
|
||||
@import "../bootstrap/images";
|
||||
@import "../bootstrap/containers";
|
||||
@import "../bootstrap/grid";
|
||||
@import "../bootstrap/tables";
|
||||
@import "../bootstrap/forms";
|
||||
@import "../bootstrap/buttons";
|
||||
@import "../bootstrap/transitions";
|
||||
@import "../bootstrap/dropdown";
|
||||
// @import "../bootstrap/button-group";
|
||||
@import "../bootstrap/nav";
|
||||
@import "../bootstrap/navbar";
|
||||
@import "../bootstrap/card";
|
||||
@import "../bootstrap/accordion";
|
||||
@import "../bootstrap/breadcrumb";
|
||||
@import "../bootstrap/pagination";
|
||||
// @import "../bootstrap/badge";
|
||||
// @import "../bootstrap/alert";
|
||||
// @import "../bootstrap/progress";
|
||||
// @import "../bootstrap/list-group";
|
||||
// @import "../bootstrap/close";
|
||||
// @import "../bootstrap/toasts";
|
||||
@import "../bootstrap/modal";
|
||||
// @import "../bootstrap/tooltip";
|
||||
// @import "../bootstrap/popover";
|
||||
// @import "../bootstrap/carousel";
|
||||
// @import "../bootstrap/spinners";
|
||||
// @import "../bootstrap/offcanvas";
|
||||
// @import "../bootstrap/placeholders";
|
||||
|
||||
// Helpers
|
||||
@import "../bootstrap/helpers";
|
||||
|
||||
// Utilities
|
||||
@import "../bootstrap/utilities/api";
|
||||
// scss-docs-end import-stack
|
||||
226
themes/agico-hugo/assets/scss/templates/_card.scss
Executable file
226
themes/agico-hugo/assets/scss/templates/_card.scss
Executable file
@@ -0,0 +1,226 @@
|
||||
.card{
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.card-img-sm {
|
||||
max-width: 60px;
|
||||
max-height: 60px;
|
||||
}
|
||||
|
||||
.card-date {
|
||||
padding-left: 40px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 1px;
|
||||
width: 30px;
|
||||
background: $text-color;
|
||||
left: 0;
|
||||
top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-active{
|
||||
background: $bg-gradient-primary;
|
||||
*{
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.hover-bg-primary {
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
@extend .transition;
|
||||
background: $bg-gradient-primary;
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
transition: .3s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: transparent;
|
||||
&:before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
* {
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-border-bottom {
|
||||
&:hover {
|
||||
&:after {
|
||||
width: 94%;
|
||||
border-radius: 0 0 20px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 170px;
|
||||
height: 4px;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 45px;
|
||||
background: $bg-gradient-secondary;
|
||||
@extend .transition;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-quote {
|
||||
border: 4px solid #e5e6e8;
|
||||
height: 40px;
|
||||
padding: 8px;
|
||||
border-radius: 10px;
|
||||
font-size: 20px;
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.icon-lg {
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
.icon-bg-circle {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
top: -20px;
|
||||
left: 15px;
|
||||
border-radius: 50%;
|
||||
background: inherit;
|
||||
opacity: .1;
|
||||
z-index: -1;
|
||||
}
|
||||
&::before{
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-bg-square {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -55px;
|
||||
left: 73%;
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
transform: rotate(50deg) scale(0.8) skew(-1deg, -15deg) translateX(16px) translateY(97px);
|
||||
background: #f5f6f7;
|
||||
z-index: -1;
|
||||
@extend .rounded-sm;
|
||||
}
|
||||
|
||||
&::before {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-primary {
|
||||
color: #207495;
|
||||
}
|
||||
|
||||
.icon-yellow{
|
||||
color: #f6a622;
|
||||
}
|
||||
|
||||
.icon-purple{
|
||||
color: #7952f5;
|
||||
}
|
||||
|
||||
.icon-cyan{
|
||||
color: #02d0a1;
|
||||
}
|
||||
|
||||
.icon-red {
|
||||
color: #ff4949;
|
||||
}
|
||||
|
||||
.icon-orange{
|
||||
color: #ff7c17;
|
||||
}
|
||||
|
||||
.icon-green{
|
||||
color: #66cc33;
|
||||
}
|
||||
|
||||
.icon-blue{
|
||||
color: #3682ff;
|
||||
}
|
||||
|
||||
.icon-bg-primary{
|
||||
&::after{
|
||||
background: #207495;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-bg-yellow{
|
||||
&::after{
|
||||
background: #f6a622;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-bg-purple{
|
||||
&::after{
|
||||
background: #7952f5;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-bg-cyan{
|
||||
&::after{
|
||||
background: #02d0a1;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-bg-red{
|
||||
&::after{
|
||||
background: #ff4949;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-bg-green{
|
||||
&::after{
|
||||
background: #66cc33;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-bg-orange{
|
||||
&::after{
|
||||
background: #ff7c17;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-bg-blue{
|
||||
&::after{
|
||||
background: #3682ff;
|
||||
}
|
||||
}
|
||||
95
themes/agico-hugo/assets/scss/templates/_footer.scss
Executable file
95
themes/agico-hugo/assets/scss/templates/_footer.scss
Executable file
@@ -0,0 +1,95 @@
|
||||
footer {
|
||||
&>div:first-child {
|
||||
/* border-bottom: 1px solid $border-light; */
|
||||
|
||||
}
|
||||
}
|
||||
.copyright {
|
||||
a {
|
||||
color: $text-light;
|
||||
|
||||
&:hover {
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* subscription */
|
||||
.subscription {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
||||
@include desktop {
|
||||
background: $bg-gradient-secondary;
|
||||
position: static;
|
||||
}
|
||||
|
||||
&.bg-white {
|
||||
background: none !important;
|
||||
|
||||
.subscription-wrapper {
|
||||
&::before {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@include desktop {
|
||||
background: $white;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border: 1px solid #ebebeb !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-wrapper {
|
||||
position: relative;
|
||||
top: -40px;
|
||||
|
||||
@include desktop {
|
||||
top: 0;
|
||||
padding: 50px 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
border-radius: 24px;
|
||||
border: 4px solid white;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
left: 0;
|
||||
background: $bg-gradient-secondary;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
@extend .shadow;
|
||||
|
||||
@include desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control {
|
||||
height: 60px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 45px;
|
||||
|
||||
&:focus {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
outline: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $gray;
|
||||
}
|
||||
|
||||
&.text-white {
|
||||
|
||||
&::placeholder {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
74
themes/agico-hugo/assets/scss/templates/_homepage.scss
Executable file
74
themes/agico-hugo/assets/scss/templates/_homepage.scss
Executable file
@@ -0,0 +1,74 @@
|
||||
// video css start
|
||||
.video-thumb {
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
// testimonial css start
|
||||
.swiper {
|
||||
padding: 0px 20px;
|
||||
|
||||
@include mobile-xs {
|
||||
padding: 0px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-shape-triangles {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
// testimonial css end
|
||||
|
||||
// pricing css end
|
||||
|
||||
|
||||
.floating-video {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.play-icon {
|
||||
font-size: 18px;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
text-align: center;
|
||||
line-height: 90px;
|
||||
background: $white;
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
|
||||
.fa-play {
|
||||
z-index: 1;
|
||||
margin-left: 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pulse-svg {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-center {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
214
themes/agico-hugo/assets/scss/templates/_navigation.scss
Executable file
214
themes/agico-hugo/assets/scss/templates/_navigation.scss
Executable file
@@ -0,0 +1,214 @@
|
||||
.navigation {
|
||||
transition: none;
|
||||
|
||||
background: $bg-gradient-secondary;
|
||||
|
||||
@include desktop {
|
||||
background: $bg-gradient-secondary;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
&.nav-bg {
|
||||
background: $bg-gradient-secondary;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
&.navigation-white {
|
||||
&.nav-bg {
|
||||
background: $white;
|
||||
box-shadow: 0px 10px 20px 0px rgba(0, 141, 236, 0.1);
|
||||
|
||||
.btn {
|
||||
color: $color-primary !important;
|
||||
|
||||
&:hover {
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include desktop {
|
||||
background: $white;
|
||||
|
||||
.btn {
|
||||
color: $color-primary !important;
|
||||
|
||||
&:hover {
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
&-menu {
|
||||
background: $white;
|
||||
}
|
||||
|
||||
&-item {
|
||||
color: $text-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar {
|
||||
.navbar-toggler {
|
||||
&[aria-expanded="true"] {
|
||||
.fa-times {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.fa-bars {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.fa-times,
|
||||
.fa-bars {
|
||||
color: $white !important;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.fa-times {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
|
||||
.nav-link {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
padding: 20px 22px;
|
||||
//font-family: $font-primary;
|
||||
transition: all ease 0.3s;
|
||||
|
||||
@include desktop-lg {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
|
||||
@include desktop {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $white !important;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
&:hover {
|
||||
.dropdown-menu {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
&-menu {
|
||||
border: 0;
|
||||
top: 50px;
|
||||
opacity: 0;
|
||||
left: -20px;
|
||||
padding: 15px;
|
||||
display: block;
|
||||
border-radius: 0;
|
||||
visibility: hidden;
|
||||
border-radius: 10px;
|
||||
transition: .3s ease;
|
||||
margin: 0px;
|
||||
transform: scale(.8);
|
||||
background: $bg-gradient-secondary;
|
||||
box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.12);
|
||||
border: 1px solid white;
|
||||
|
||||
@include desktop {
|
||||
display: none;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: scale(1);
|
||||
transform-origin: unset;
|
||||
}
|
||||
|
||||
&.show {
|
||||
visibility: hidden;
|
||||
|
||||
@include desktop {
|
||||
visibility: visible;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-item {
|
||||
position: relative;
|
||||
color: $white;
|
||||
transition: .2s ease;
|
||||
//font-family: $font-primary;
|
||||
|
||||
@include desktop {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $white !important;
|
||||
text-decoration: underline;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#langDropdown {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: $white;
|
||||
font-size: 16px;
|
||||
border-radius: 50px;
|
||||
appearance: none;
|
||||
padding: 12px;
|
||||
width: auto !important;
|
||||
min-width: 0 !important;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
option {
|
||||
color: black;
|
||||
min-width: 0;
|
||||
}
|
||||
&:hover {
|
||||
color:$white !important;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu-lang {
|
||||
min-width: 0 !important;
|
||||
width: auto;
|
||||
white-space: nowrap;
|
||||
padding: 4px;
|
||||
background: $white !important;
|
||||
appearance: none;
|
||||
--bs-dropdown-min-width: 0;
|
||||
--bs-dropdown-link-active-bg: #79ACBF; /* background of selected item */
|
||||
--bs-dropdown-link-active-color: #fff; /* text color of selected item */
|
||||
}
|
||||
|
||||
.navbar .dropdown > .dropdown-menu.dropdown-menu-lang {
|
||||
width: max-content !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
73
themes/agico-hugo/assets/scss/templates/_team.scss
Executable file
73
themes/agico-hugo/assets/scss/templates/_team.scss
Executable file
@@ -0,0 +1,73 @@
|
||||
.team-member {
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
.team-member-content {
|
||||
&::before {
|
||||
height: 100%;
|
||||
transition: .3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.team-member-name,
|
||||
.team-member-designation {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
transition-delay: .1s;
|
||||
}
|
||||
|
||||
.team-member-social {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
bottom: 0;
|
||||
transition-delay: .4s;
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
position: absolute;
|
||||
height: 32%;
|
||||
width: 80%;
|
||||
left: 10%;
|
||||
bottom: 10%;
|
||||
z-index: 1;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 0;
|
||||
width: 100%;
|
||||
transition: .5s ease;
|
||||
background: $bg-gradient-primary;
|
||||
bottom: 0;
|
||||
border-radius: 10px;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
&-name {
|
||||
transform: translateY(100px);
|
||||
opacity: 0;
|
||||
transition: .4s ease;
|
||||
transition-delay: .0s;
|
||||
}
|
||||
|
||||
&-designation {
|
||||
transform: translateY(100px);
|
||||
opacity: 0;
|
||||
transition: .4s ease;
|
||||
transition-delay: .0s;
|
||||
}
|
||||
|
||||
&-social {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -10%;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: .3s ease;
|
||||
transition-delay: .0s;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user