initial commit
This commit is contained in:
74
assets/scss/components/_about-section.scss
Normal file
74
assets/scss/components/_about-section.scss
Normal file
@ -0,0 +1,74 @@
|
||||
.about {
|
||||
overflow: hidden;
|
||||
&_content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
&-thumb {
|
||||
width: 45%;
|
||||
position: relative;
|
||||
@include desktop {
|
||||
width: 100%;
|
||||
}
|
||||
.about-svg {
|
||||
position: absolute;
|
||||
top: -11%;
|
||||
left: -17%;
|
||||
z-index: -1;
|
||||
height: 150px;
|
||||
animation: move_top 4s infinite;
|
||||
@include tablet {
|
||||
top: -7%;
|
||||
left: -16%;
|
||||
}
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.about_content-thumb-image {
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
&.about_mask_svg {
|
||||
mask: url(../images/about/about-mask-svg.svg);
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
-webkit-mask-size: cover;
|
||||
-webkit-mask-position: center center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-inner {
|
||||
width: 55%;
|
||||
padding: 60px 50px;
|
||||
background: $tertiary;
|
||||
border-radius: 20px;
|
||||
margin-left: -60px;
|
||||
position: relative;
|
||||
@include desktop {
|
||||
padding: 25px;
|
||||
}
|
||||
@include desktop {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
margin-top: 30px;
|
||||
}
|
||||
&-blob {
|
||||
position: absolute;
|
||||
top: -55%;
|
||||
right: -22%;
|
||||
z-index: -1;
|
||||
width: 400.369px;
|
||||
height: 362.909px;
|
||||
svg {
|
||||
width: 140%;
|
||||
}
|
||||
@include tablet {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
109
assets/scss/components/_blog-section.scss
Normal file
109
assets/scss/components/_blog-section.scss
Normal file
@ -0,0 +1,109 @@
|
||||
.blog-preview {
|
||||
position: relative;
|
||||
margin-bottom: 30px;
|
||||
&__shape {
|
||||
position: absolute;
|
||||
top: 11%;
|
||||
right: 12%;
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
img {
|
||||
animation: rotate 25s infinite linear;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
@include desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&__header_button {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
a {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
display: inline-block;
|
||||
@include desktop {
|
||||
position: relative;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&__item {
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
@include desktop {
|
||||
margin-bottom: 130px;
|
||||
}
|
||||
&-thumb {
|
||||
width: 90%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 20px;
|
||||
@include desktop {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
&-content {
|
||||
position: absolute;
|
||||
bottom: -100px;
|
||||
left: 40px;
|
||||
padding: 30px;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0px 20px 40px 0px rgba(50, 65, 141, 0.12);
|
||||
@include desktop {
|
||||
left: 0;
|
||||
}
|
||||
span {
|
||||
color: $primary;
|
||||
margin: 0 0 20px 40px;
|
||||
position: relative;
|
||||
display: block;
|
||||
line-height: 1;
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 50%;
|
||||
left: -40px;
|
||||
height: 1px;
|
||||
width: 20px;
|
||||
background: $secondary;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.blog-preview__item-thumb img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.mobile {
|
||||
display: none;
|
||||
}
|
||||
@include desktop {
|
||||
.desktop {
|
||||
display: none;
|
||||
}
|
||||
.mobile {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
@keyframes rotate {
|
||||
from {
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
54
assets/scss/components/_blog.scss
Normal file
54
assets/scss/components/_blog.scss
Normal file
@ -0,0 +1,54 @@
|
||||
.blog-page {
|
||||
&__item {
|
||||
position: relative;
|
||||
margin-bottom: 180px;
|
||||
&-thumb {
|
||||
width: 90%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 20px;
|
||||
@include desktop {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
&-content {
|
||||
position: absolute;
|
||||
bottom: -100px;
|
||||
left: 40px;
|
||||
padding: 30px;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0px 20px 40px 0px rgba(50, 65, 141, 0.12);
|
||||
@include desktop {
|
||||
left: 0;
|
||||
}
|
||||
span {
|
||||
color: $primary;
|
||||
margin: 0 0 20px 40px;
|
||||
position: relative;
|
||||
display: block;
|
||||
line-height: 1;
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 50%;
|
||||
left: -40px;
|
||||
height: 1px;
|
||||
width: 20px;
|
||||
background: $secondary;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.blog-page__item-thumb img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
133
assets/scss/components/_case_details.scss
Normal file
133
assets/scss/components/_case_details.scss
Normal file
@ -0,0 +1,133 @@
|
||||
.case-details {
|
||||
padding: 200px 0 100px 0;
|
||||
.svg-img {
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: -7%;
|
||||
animation: move_top 5s infinite linear;
|
||||
@include desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.animate-shape {
|
||||
position: absolute;
|
||||
top: 29%;
|
||||
right: 4%;
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
svg {
|
||||
width: 100%;
|
||||
}
|
||||
@include desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.animate-pattern {
|
||||
position: absolute;
|
||||
top: 46%;
|
||||
right: 12%;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
animation: move_top 3s infinite linear;
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
@include desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&-info {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background: $secondary;
|
||||
border-radius: 20px;
|
||||
padding: 65px 0;
|
||||
margin: 70px 0 80px 0;
|
||||
@include mobile {
|
||||
flex-direction: column;
|
||||
padding: 30px 0;
|
||||
}
|
||||
.case-details-info-item {
|
||||
position: relative;
|
||||
&:not(:last-child) {
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
right: -80px;
|
||||
background: rgba($color: $white, $alpha: 0.1);
|
||||
@include desktop {
|
||||
right: -45px;
|
||||
}
|
||||
@include tablet {
|
||||
right: -15px;
|
||||
}
|
||||
@include mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@include mobile {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
h5 {
|
||||
color: $light;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
&-thumb {
|
||||
border-radius: 30px;
|
||||
overflow: hidden;
|
||||
img {
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
&-nav {
|
||||
.previous,
|
||||
.next {
|
||||
.icon {
|
||||
line-height: 0;
|
||||
}
|
||||
.content {
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
h5 {
|
||||
font-size: 20px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.social {
|
||||
@include mobile {
|
||||
display: none;
|
||||
}
|
||||
ul {
|
||||
li {
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
a {
|
||||
color: $body-color;
|
||||
display: block;
|
||||
transition: all 0.3s ease;
|
||||
&:hover {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
&:not(:last-child) {
|
||||
margin-right: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
49
assets/scss/components/_contact.scss
Normal file
49
assets/scss/components/_contact.scss
Normal file
@ -0,0 +1,49 @@
|
||||
.contact__info {
|
||||
&_item {
|
||||
box-shadow: 0px 20px 40px 0px rgba(50, 65, 141, 0.12);
|
||||
padding: 50px 40px;
|
||||
border-radius: 20px;
|
||||
&-icon {
|
||||
height: 110px;
|
||||
width: 125px;
|
||||
position: relative;
|
||||
margin-bottom: 35px;
|
||||
.icon-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
.icon {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: $body-color;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
.contact-form {
|
||||
padding: 50px 0 100px 0;
|
||||
&-input {
|
||||
.form-group {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
#map {
|
||||
border-radius: 30px;
|
||||
height: 100%;
|
||||
@include desktop {
|
||||
height: 400px;
|
||||
margin-top: 60px;
|
||||
}
|
||||
}
|
||||
&-generator {
|
||||
p,a,strong{
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
149
assets/scss/components/_footer-section.scss
Normal file
149
assets/scss/components/_footer-section.scss
Normal file
@ -0,0 +1,149 @@
|
||||
.footer {
|
||||
background: $tertiary;
|
||||
position: relative;
|
||||
margin-top: 150px;
|
||||
&__background_shape {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
svg {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
path {
|
||||
fill: $white;
|
||||
}
|
||||
}
|
||||
@include mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&__cta {
|
||||
background: $primary;
|
||||
padding: 100px 80px;
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
margin-top: -110px;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 5;
|
||||
.shape-1 {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
transform: rotate(-20deg);
|
||||
top: -43%;
|
||||
left: 2%;
|
||||
animation: moveLeft 5s infinite linear;
|
||||
svg {
|
||||
path {
|
||||
fill: #ffffff;
|
||||
opacity: 0.07;
|
||||
}
|
||||
}
|
||||
}
|
||||
.shape-2 {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
transform: rotate(80deg);
|
||||
top: 12%;
|
||||
right: -9%;
|
||||
width: 235px;
|
||||
height: 208px;
|
||||
animation: move_top 3s infinite linear;
|
||||
svg {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
path {
|
||||
fill: #ffffff;
|
||||
opacity: 0.07;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include desktop {
|
||||
padding: 70px 40px;
|
||||
}
|
||||
&_content {
|
||||
width: 60%;
|
||||
@include desktop {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
span {
|
||||
font-size: 20px;
|
||||
display: block;
|
||||
line-height: 1;
|
||||
margin: 0 0 20px 40px;
|
||||
position: relative;
|
||||
@include desktop {
|
||||
display: inline-block;
|
||||
}
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 2px;
|
||||
width: 20px;
|
||||
left: -40px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
&_action {
|
||||
width: 40%;
|
||||
@include desktop {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
a {
|
||||
float: right;
|
||||
@include desktop {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&__widget {
|
||||
padding: 100px 0;
|
||||
@include desktop {
|
||||
text-align: center;
|
||||
padding: 50px 0;
|
||||
.footer__widget_address {
|
||||
ul {
|
||||
margin-right: 2.14285714em; // match fa-lu margin
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&__footer {
|
||||
padding: 50px 0;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
||||
@include desktop {
|
||||
text-align: center;
|
||||
}
|
||||
&_social {
|
||||
ul {
|
||||
float: right;
|
||||
@include desktop {
|
||||
margin: 20px auto 0;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@keyframes moveLeft {
|
||||
0%,
|
||||
100% {
|
||||
-webkit-transform: translateX(0) rotate(-20deg);
|
||||
transform: translateX(0) rotate(-20deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: translateX(15px) rotate(-20deg);
|
||||
transform: translateX(15px) rotate(-20deg);
|
||||
}
|
||||
}
|
||||
163
assets/scss/components/_hero-section.scss
Normal file
163
assets/scss/components/_hero-section.scss
Normal file
@ -0,0 +1,163 @@
|
||||
.hero {
|
||||
padding: 200px 0;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@include desktop {
|
||||
padding: 150px 0 30px 0;
|
||||
}
|
||||
|
||||
&_background-svg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
width: 65%;
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
&_footer-svg {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: -130px;
|
||||
animation: move_top 5s infinite linear;
|
||||
@include desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&_content {
|
||||
padding: 0 20px 0 0;
|
||||
position: relative;
|
||||
@include desktop {
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.hero_blob {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: -45%;
|
||||
left: -45%;
|
||||
height: 440px;
|
||||
width: 440px;
|
||||
svg {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
@include desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
span {
|
||||
font-size: 24px;
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: 0 0 20px 30px;
|
||||
@include desktop {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
p {
|
||||
font-size: $font-size-lg;
|
||||
}
|
||||
}
|
||||
&_figure {
|
||||
width: 90%;
|
||||
margin-left: auto;
|
||||
border-radius: 20px;
|
||||
position: relative;
|
||||
@include desktop {
|
||||
width: 100%;
|
||||
}
|
||||
.figure-svg {
|
||||
position: absolute;
|
||||
top: -55px;
|
||||
left: 50%;
|
||||
-webkit-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
z-index: -1;
|
||||
height: 150px;
|
||||
animation: move_left 5s infinite linear;
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
&-popup {
|
||||
transition: all 0.3s ease;
|
||||
.thumb {
|
||||
height: 320px;
|
||||
/*border: 1px solid #707070;*/
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
.popup-button {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
background: #ffffff;
|
||||
border-radius: 50%;
|
||||
z-index: 2;
|
||||
transition: all 0.3s ease;
|
||||
svg {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 55%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
path {
|
||||
fill: $primary;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: $primary;
|
||||
svg {
|
||||
path {
|
||||
fill: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.popup-button {
|
||||
transform: translate(-50%, -50%) scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes move_left {
|
||||
0% {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(-57%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes move_top {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(15px);
|
||||
}
|
||||
}
|
||||
70
assets/scss/components/_navbar.scss
Normal file
70
assets/scss/components/_navbar.scss
Normal file
@ -0,0 +1,70 @@
|
||||
.navbar {
|
||||
padding: 40px 0;
|
||||
background: transparent;
|
||||
transition: all 0.3s ease;
|
||||
@include desktop {
|
||||
background: $white;
|
||||
}
|
||||
@include desktop {
|
||||
padding: 15px 20px;
|
||||
margin: 10px 10px 0;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.navbar-brand {
|
||||
img {
|
||||
@include desktop {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.nav__color__change {
|
||||
background: $white;
|
||||
padding: 20px 0;
|
||||
box-shadow: 0px 10px 20px 0px rgba(50, 65, 141, 0.1);
|
||||
@include desktop {
|
||||
padding: 15px 20px;
|
||||
}
|
||||
}
|
||||
@include desktop {
|
||||
.navbar-toggler {
|
||||
outline: 0;
|
||||
padding: 0;
|
||||
&-icon {
|
||||
height: 2px;
|
||||
width: 25px;
|
||||
transition: all 0.2s;
|
||||
background: $primary;
|
||||
display: block;
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
&:nth-child(1) {
|
||||
transform: rotate(45deg);
|
||||
transform-origin: 10% 10%;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
}
|
||||
&:nth-child(3) {
|
||||
transform: rotate(-45deg);
|
||||
transform-origin: 10% 90%;
|
||||
}
|
||||
}
|
||||
&.collapsed {
|
||||
.navbar-toggler-icon {
|
||||
&:nth-child(1) {
|
||||
transform: rotate(0);
|
||||
}
|
||||
&:nth-child(2) {
|
||||
opacity: 1;
|
||||
filter: alpha(opacity=1);
|
||||
}
|
||||
&:nth-child(3) {
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
66
assets/scss/components/_page-title.scss
Normal file
66
assets/scss/components/_page-title.scss
Normal file
@ -0,0 +1,66 @@
|
||||
.breadCrumb {
|
||||
padding: 200px 0 0;
|
||||
position: relative;
|
||||
.svg-img {
|
||||
position: absolute;
|
||||
bottom: -35%;
|
||||
left: -7%;
|
||||
animation: move_top 5s infinite linear;
|
||||
@include desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.animate-shape {
|
||||
position: absolute;
|
||||
bottom: -60%;
|
||||
right: 2%;
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
svg {
|
||||
width: 100%;
|
||||
}
|
||||
@include desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.animate-pattern {
|
||||
position: absolute;
|
||||
bottom: -40%;
|
||||
right: 10%;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
animation: move_top 3s infinite linear;
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
@include desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@include desktop {
|
||||
padding: 120px 0 0;
|
||||
}
|
||||
&__title {
|
||||
font-size: 48px;
|
||||
line-height: 1;
|
||||
margin: 0 0 30px 0;
|
||||
}
|
||||
.breadcrumb {
|
||||
background: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
&-item {
|
||||
a {
|
||||
color: $secondary;
|
||||
text-decoration: none;
|
||||
}
|
||||
&.active {
|
||||
color: $secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
.breadcrumb-item + .breadcrumb-item::before {
|
||||
content: "-";
|
||||
}
|
||||
}
|
||||
80
assets/scss/components/_portfolio-section.scss
Normal file
80
assets/scss/components/_portfolio-section.scss
Normal file
@ -0,0 +1,80 @@
|
||||
.portfolio {
|
||||
padding: 100px 0 135px 0;
|
||||
@include desktop {
|
||||
padding: 100px 0;
|
||||
}
|
||||
&-item {
|
||||
width: 50%;
|
||||
padding: 30px;
|
||||
@include tablet {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
&:nth-child(4n-3) {
|
||||
padding-right: 70px;
|
||||
@include tablet {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
&:nth-child(4n-1) {
|
||||
padding-left: 90px;
|
||||
@include tablet {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
&-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
&-thumb {
|
||||
transition: 0.3s ease;
|
||||
border-radius: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
&-content {
|
||||
span {
|
||||
color: #7e7e8a;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
margin: 28px 0 20px 0;
|
||||
}
|
||||
.see-more-btn {
|
||||
display: inline-block;
|
||||
color: $primary;
|
||||
position: relative;
|
||||
margin: 0 0 0 30px;
|
||||
transform: scaleY(0);
|
||||
transform-origin: bottom center;
|
||||
transition: all 0.3s ease;
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 2px;
|
||||
width: 20px;
|
||||
background: $primary;
|
||||
top: 50%;
|
||||
left: -30px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
@include tablet {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.portfolio-item-thumb {
|
||||
box-shadow: 0px 20px 40px 0px rgba(50, 65, 141, 0.12);
|
||||
}
|
||||
.portfolio-item-content {
|
||||
.see-more-btn {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
54
assets/scss/components/_preloder.scss
Normal file
54
assets/scss/components/_preloder.scss
Normal file
@ -0,0 +1,54 @@
|
||||
.preloader-wrap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: $white;
|
||||
z-index: 2000;
|
||||
text-align: center;
|
||||
height: 100vh;
|
||||
.inner {
|
||||
position: absolute;
|
||||
height: 170px;
|
||||
width: 170px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border: 1px solid $primary;
|
||||
border-top: 5px solid $primary;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s infinite linear;
|
||||
@include desktop {
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
.percentage {
|
||||
z-index: 100;
|
||||
color: $primary;
|
||||
opacity: 1;
|
||||
font-weight: 600;
|
||||
font-family: "bebasbold";
|
||||
font-size: 60px;
|
||||
letter-spacing: 5px;
|
||||
line-height: 1;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
@include desktop {
|
||||
font-size: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: translate(-50%, -50%) rotate(0);
|
||||
}
|
||||
100% {
|
||||
transform: translate(-50%, -50%) rotate(360deg);
|
||||
}
|
||||
}
|
||||
47
assets/scss/components/_resume-section.scss
Normal file
47
assets/scss/components/_resume-section.scss
Normal file
@ -0,0 +1,47 @@
|
||||
.resume{
|
||||
position: relative;
|
||||
margin-bottom: 100px;
|
||||
padding: 150px 0;
|
||||
@include desktop{
|
||||
margin-bottom: 40px;
|
||||
padding: 100px 0;
|
||||
}
|
||||
&__background{
|
||||
background: $tertiary;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: skewY(-2deg);
|
||||
}
|
||||
&__heading{
|
||||
margin-right: 100px;
|
||||
position: sticky;
|
||||
position: -webkit-sticky;
|
||||
top: 150px;
|
||||
@include desktop{
|
||||
margin-right: 0;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
span{
|
||||
&::before{
|
||||
background: $light;
|
||||
}
|
||||
}
|
||||
}
|
||||
&__education{
|
||||
&_item{
|
||||
background: $white;
|
||||
padding: 30px;
|
||||
border-radius: 20px;
|
||||
margin-bottom: 30px;
|
||||
box-shadow: 0px 20px 40px 0px rgba(50, 65, 141, 0.12);
|
||||
span{
|
||||
display: block;
|
||||
margin: 0 0 20px 30px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
112
assets/scss/components/_service-section.scss
Normal file
112
assets/scss/components/_service-section.scss
Normal file
@ -0,0 +1,112 @@
|
||||
.service {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding-bottom: 275px;
|
||||
&__background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
width: 61%;
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
&__background_shape {
|
||||
position: absolute;
|
||||
bottom: -10%;
|
||||
left: -7%;
|
||||
height: 465px;
|
||||
width: 410px;
|
||||
svg {
|
||||
width: 100%;
|
||||
}
|
||||
@include desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&__background_pattern {
|
||||
position: absolute;
|
||||
bottom: 4%;
|
||||
left: 6%;
|
||||
animation: move_top 5s infinite linear;
|
||||
@include desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&__slider {
|
||||
&_item {
|
||||
margin: 15px;
|
||||
padding: 30px;
|
||||
box-shadow: 0px 20px 40px 0px rgba(50, 65, 141, 0.12);
|
||||
border-radius: 20px;
|
||||
background: $white;
|
||||
&-icon {
|
||||
height: 110px;
|
||||
width: 125px;
|
||||
position: relative;
|
||||
.icon-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
.icon {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.slick-list {
|
||||
overflow: visible;
|
||||
}
|
||||
.slick-dots {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
justify-content: center;
|
||||
li {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
&:not(:last-child) {
|
||||
margin-right: 15px;
|
||||
}
|
||||
button {
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: #c2c8cc;
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s ease;
|
||||
display: block;
|
||||
padding: 0;
|
||||
text-indent: -9999px;
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
&:hover {
|
||||
background: $primary;
|
||||
}
|
||||
}
|
||||
&.slick-active {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
border-radius: 50%;
|
||||
button {
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.slick-slide {
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
95
assets/scss/components/_single-blog-post.scss
Normal file
95
assets/scss/components/_single-blog-post.scss
Normal file
@ -0,0 +1,95 @@
|
||||
.section {
|
||||
padding-top: 70px;
|
||||
@include desktop {
|
||||
padding: 50px 0;
|
||||
}
|
||||
.svg-img {
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: -7%;
|
||||
animation: move_top 5s infinite linear;
|
||||
@include desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.animate-shape {
|
||||
position: absolute;
|
||||
top: 29%;
|
||||
right: 4%;
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
svg {
|
||||
width: 100%;
|
||||
}
|
||||
@include desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.animate-pattern {
|
||||
position: absolute;
|
||||
top: 46%;
|
||||
right: 12%;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
animation: move_top 3s infinite linear;
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
@include desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.singleBlog {
|
||||
&__feature {
|
||||
margin: 0 100px;
|
||||
@include desktop {
|
||||
margin: 0;
|
||||
}
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
&__content {
|
||||
margin: 0 200px 0 200px;
|
||||
@include desktop {
|
||||
margin: 0;
|
||||
}
|
||||
.blog-section {
|
||||
margin-bottom: 60px;
|
||||
img {
|
||||
float: right;
|
||||
mask: url("../images/hero/hero-mask-svg.png");
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
-webkit-mask-size: contain;
|
||||
-webkit-mask-position: center center;
|
||||
@include tablet {
|
||||
width: 100%;
|
||||
float: none;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.post-meta {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding-top: 10px;
|
||||
li {
|
||||
list-style: none;
|
||||
z-index: 2;
|
||||
i {
|
||||
padding-right: 7px;
|
||||
}
|
||||
a {
|
||||
color: #7e7e8a;
|
||||
&:hover {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
95
assets/scss/components/_skill-section.scss
Normal file
95
assets/scss/components/_skill-section.scss
Normal file
@ -0,0 +1,95 @@
|
||||
.skill {
|
||||
position: relative;
|
||||
padding: 100px 0 150px 0;
|
||||
@include desktop {
|
||||
padding: 100px 0;
|
||||
}
|
||||
&__background_shape {
|
||||
position: absolute;
|
||||
bottom: 2%;
|
||||
right: 2%;
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
svg {
|
||||
width: 100%;
|
||||
}
|
||||
@include desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&__background_pattern {
|
||||
position: absolute;
|
||||
bottom: 5%;
|
||||
right: 10%;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
animation: move_top 3s infinite linear;
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
@include desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&__thumb {
|
||||
position: relative;
|
||||
@include tablet {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
&_pattern {
|
||||
position: absolute;
|
||||
top: -11%;
|
||||
left: -17%;
|
||||
z-index: -1;
|
||||
height: 150px;
|
||||
animation: move_top 4s infinite linear;
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
&_image {
|
||||
margin-right: 7%;
|
||||
@include desktop {
|
||||
margin-right: 0;
|
||||
}
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
&__progress {
|
||||
margin-left: 40px;
|
||||
@include desktop {
|
||||
margin-left: 0;
|
||||
margin-top: 30px;
|
||||
}
|
||||
&_item {
|
||||
&.js-animation {
|
||||
transition: all 0.3s ease;
|
||||
.progress {
|
||||
width: 100%;
|
||||
background: $light;
|
||||
height: 10px;
|
||||
border-radius: 5px;
|
||||
.progress-bar {
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
animation: animate-positive 3000ms;
|
||||
background: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@keyframes animate-positive {
|
||||
0% {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
121
assets/scss/components/_testimonial-section.scss
Normal file
121
assets/scss/components/_testimonial-section.scss
Normal file
@ -0,0 +1,121 @@
|
||||
.testimonial {
|
||||
background: #f1f6f9;
|
||||
position: relative;
|
||||
padding: 170px 0 150px 0;
|
||||
@include desktop {
|
||||
padding: 100px 0;
|
||||
}
|
||||
&__background_shape {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
svg {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
path {
|
||||
fill: $white;
|
||||
}
|
||||
}
|
||||
@include mobile-xs {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&__slider {
|
||||
&_item {
|
||||
background: $white;
|
||||
border-radius: 20px;
|
||||
padding: 60px 50px;
|
||||
margin: 30px 25px 60px;
|
||||
@include tablet {
|
||||
margin: 30px 0 40px;
|
||||
padding: 50px 30px;
|
||||
}
|
||||
&-rating {
|
||||
margin: 0 0 25px 0;
|
||||
padding: 0;
|
||||
li {
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
i {
|
||||
color: #ffc219;
|
||||
&.inactive {
|
||||
color: #c2c8cc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-content {
|
||||
margin: 0 0 40px 0;
|
||||
line-height: 35px;
|
||||
}
|
||||
&-author {
|
||||
margin: 0 0 0 35px;
|
||||
color: #7e7e8a;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
span {
|
||||
font-weight: bold;
|
||||
color: #282f49;
|
||||
}
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 2px;
|
||||
width: 20px;
|
||||
left: -35px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: #282f49;
|
||||
}
|
||||
}
|
||||
}
|
||||
.slick-dots {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
justify-content: center;
|
||||
li {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
&:not(:last-child) {
|
||||
margin-right: 15px;
|
||||
}
|
||||
button {
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: #c2c8cc;
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s ease;
|
||||
display: block;
|
||||
padding: 0;
|
||||
text-indent: -9999px;
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
&:hover {
|
||||
background: $primary;
|
||||
}
|
||||
}
|
||||
&.slick-active {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
border-radius: 50%;
|
||||
button {
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.slick-slide {
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user