Nextia/roxo-hugo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Initial Release

Browse Source
This commit is contained in:
kausarpial
2020-03-09 12:43:11 +06:00
commit b5ca79fc51
132 changed files with 7658 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
assets/scss/_buttons.scss Executable file
View File

@@ -0,0 +1,77 @@
.btn{
font-family: $secondary-font;
border: none;
color: $white !important;
padding: 20px 45px;
border-radius: 0;
&:focus{
box-shadow: none;
}
@include desktop{
padding: 17px 40px;
}
.btn-area{
display: block;
overflow: hidden;
span{
position: relative;
display: block;
padding: 2px 0;
transition: transform .9s cubic-bezier(.19,1,.22,1);
transform-origin: left center;
&::after{
content: attr(data-text);
position: absolute;
top: 150%;
left: 0;
transform: skewY(30deg);
transform-origin: left center;
transition: transform .9s cubic-bezier(.19,1,.22,1);
}
}
}
&:hover{
.btn-area{
span{
transform: translateY(-150%) skewY(7deg);
&::after{
transform: skewY(-7deg);
}
}
}
}
&:visited{
.btn-area{
span{
transform: translateY(-150%) skewY(7deg);
&::after{
transform: skewY(-7deg);
}
}
}
}
}
.btn-sm{
padding: 15px 40px !important;
}
.btn-sm-rounded{
border-radius: 40px;
}
.btn-primary{
background: $primary-color;
color: $white;
&:hover{
background: darken($color: $primary-color, $amount: 10);
}
}
.btn-secondary{
background: $secondary-color;
color: $white;
&:hover{
background: darken($color: $secondary-color, $amount: 10);
}
}

70
assets/scss/_common.scss Executable file
View File

@@ -0,0 +1,70 @@
// html{
// scroll-behavior: smooth;
// }
body {
background: $body-color;
}
.section-title{
margin-bottom: 70px;
@include desktop{
text-align: center;
}
h2{
font-weight: 300;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 15px;
@include desktop{
font-size: 40px;
}
}
p{
font-size: 20px;
font-weight: 300;
}
}
.form-control{
background: transparent;
border-radius: 0;
margin-bottom: 30px;
padding: 0 0 10px 0;
border-width: 0 0 1px 0;
border-color: $primary-color;
font-weight: 300;
letter-spacing: 1px;
-webkit-appearance: none;
height: 42px;
&:focus{
box-shadow: none;
background: transparent;
border-color: $text-color;
}
}
select.form-control{
height: 42px !important;
position: relative;
}
.select-wrapper{
position: relative;
&::before{
content: '';
position: absolute;
width: 16px;
height: 10px;
background: url('../images/angle-down-select.svg');
background-size: contain;
background-repeat: no-repeat;
right: 15px;
top: 50%;
transform: translateY(-80%);
}
}
textarea.form-control{
height: auto;
}

42
assets/scss/_mixins.scss Executable file
View File

@@ -0,0 +1,42 @@
@mixin mobile-xs{
@media(max-width:400px){
@content;
}
}
@mixin mobile{
@media(max-width:575px){
@content;
}
}
@mixin tablet{
@media(max-width:767px){
@content;
}
}
@mixin desktop{
@media(max-width:991px){
@content;
}
}
@mixin desktop-lg{
@media(max-width:1200px){
@content;
}
}
@mixin desktop-xl{
@media(max-width:1400px){
@content;
}
}
@mixin desktop-4k{
@media(min-width:2000px){
@content;
}
}
@mixin size($size){
width: $size; height: $size;
}

43
assets/scss/_typography.scss Executable file
View File

@@ -0,0 +1,43 @@
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,600,700|Montserrat:300,400,500,600,700&display=swap');
body{
font-family: $primary-font;
font-size: 16px;
color: $text-color;
}
h1, h2, h3, h4, h5, h6{
font-family: $secondary-font;
font-weight: 600;
color: $text-color-dark;
}
p{
font-size: 16px;
color: $text-color;
}
h1{
font-size: 60px;
}
h2{
font-size: 50px;
}
h3{
font-size: 30px;
}
h4{
font-size: 25px;
}
h5{
font-size: 18px;
}
h6{
font-size: 15px;
font-weight: 300;
}

17
assets/scss/_variables.scss Executable file
View File

@@ -0,0 +1,17 @@
//site color variables
$body-color: #fff;
$primary-color: #EAA4A4;
$secondary-color: #ADD6D2;
$text-color: #9D9EA5;
$text-color-dark: #00113E;
$site-ease: cubic-bezier(0.36, 0.03, 0, 0.91);
$gray: #F7F9FF;
$dark-gray: #646569;
// solid colors
$white: #fff;
$black: #000;
// Font Variables
$primary-font: 'Josefin Sans', sans-serif;
$secondary-font: 'Montserrat', sans-serif;

45
assets/scss/components/_about.scss Normal file
View File

@@ -0,0 +1,45 @@
.site-about{
&-header{
padding-top: 80px;
background-color: $gray;
@include mobile{
padding-top: 60px;
text-align: center;
}
}
&-wrapper{
display: flex;
align-items: center;
flex-wrap: wrap;
}
&-company{
background: $primary-color;
width: 40%;
padding: 70px 38px;
@include desktop{
width: 100%;
margin-bottom: 20px;
}
h1{
color: $white;
font-weight: 400;
font-size: 25px;
line-height: 60px;
text-transform: uppercase;
letter-spacing: 1px;
}
}
&-description{
width: 60%;
padding-left: 50px;
@include desktop{
width: 100%;
padding: 0 38px;
}
p{
font-size: 25px;
font-weight: 300;
margin-bottom: 0;
}
}
}

89
assets/scss/components/_blog.scss Normal file
View File

@@ -0,0 +1,89 @@
.site{
&-blog{
@extend .site-project;
@include mobile{
padding: 70px 0;
}
&.details{
padding: 150px 0 80px;
@include tablet{
padding: 100px 0 60px;
}
}
&-header{
padding: 150px 0 0;
@include mobile{
padding: 100px 0 0;
}
h1{
font-weight: 700;
text-transform: uppercase;
letter-spacing: 10px;
margin-bottom: 20px;
@include mobile{
font-size: 35px;
}
}
p{
line-height: 28px;
margin-bottom: 0;
}
}
&-pagination{
@extend .site-project-pagination;
}
&-post{
@extend .site-project-item;
&-thumb{
@extend .site-project-item-thumb;
}
&-content{
@extend .site-project-item-content;
@include mobile{
padding: 15px 25px 40px;
}
span{
font-size: 14px;
}
h3{
margin-bottom: 15px;
@include mobile{
font-size: 20px;
}
}
a.read-more{
color: $primary-color;
letter-spacing: 2px;
@include mobile{
transform: translateY(22px);
}
}
}
}
&-details{
img{
max-width: 100%;
margin-bottom: 20px;
}
.blog-title{
font-size: 40px;
}
.feature-image{
margin: 20px 0 30px;
}
h2,h3,h4,h5,h6{
margin-bottom: 15px;
}
blockquote{
p{
color: $text-color-dark;
font-size: 18px;
}
}
cite{
margin-top: 10px;
display: block;
}
}
}
}

24
assets/scss/components/_client.scss Normal file
View File

@@ -0,0 +1,24 @@
.site-client{
padding: 100px 0 50px;
.section-title{
margin-bottom: 100px;
}
&-wrapper{
display: flex;
flex-wrap: wrap;
@include desktop{
justify-content: center;
}
}
&-item{
text-align: center;
width: 20%;
margin-bottom: 50px;
@include desktop{
width: 33.33%;
}
@include mobile{
width: 50%;
}
}
}

31
assets/scss/components/_contact.scss Normal file
View File

@@ -0,0 +1,31 @@
.site-contact{
padding: 150px 0 100px;
background: $gray;
@include mobile{
padding: 120px 0 100px;
}
&-title{
font-weight: 700;
@include tablet{
font-size: 40px;
}
span{
color: $primary-color;
}
}
&-form{
margin-top: 20px;
h4{
font-weight: 300;
text-transform: uppercase;
margin-bottom: 50px;
letter-spacing: 3px;
@include tablet{
font-size: 20px;
}
@include desktop{
margin-bottom: 70px;
}
}
}
}

27
assets/scss/components/_counter.scss Normal file
View File

@@ -0,0 +1,27 @@
.site-counter{
padding: 85px 0;
color: $white;
background: $secondary-color;
.section-title{
margin-bottom: 40px;
}
@include mobile{
padding: 50px 0;
}
&-item{
@include desktop{
margin-bottom: 30px;
text-align: center;
}
&-title{
font-size: 20px;
font-weight: 300;
}
&-number{
color: $white;
font-size: 60px;
margin-bottom: 0;
font-weight: 700;
}
}
}

49
assets/scss/components/_cta.scss Normal file
View File

@@ -0,0 +1,49 @@
.site-cta{
padding: 130px 0;
background-size: cover;
background-position: center center;
@include desktop{
padding: 100px 0;
}
&-title{
font-size: 70px;
font-weight: 700;
letter-spacing: 10px;
margin-bottom: 60px;
@include desktop{
letter-spacing: 5px;
}
@include desktop-lg{
font-size: 50px;
margin-bottom: 40px;
}
@include mobile{
font-size: 40px;
letter-spacing: 1;
}
}
&-buttons{
margin: 0;
padding: 0;
li{
display: inline-block;
@include mobile{
display: block;
}
&:not(:last-child){
margin-right: 40px;
@include mobile{
margin-right: 0;
margin-bottom: 20px;
}
}
.btn{
@include mobile{
display: block;
width: 90%;
margin: 0 auto;
}
}
}
}
}

21
assets/scss/components/_expertise.scss Normal file
View File

@@ -0,0 +1,21 @@
.site-expertise{
padding: 100px 0;
background: $gray;
&-list{
padding: 0;
margin: 10px 0 0 20px;
@include mobile{
text-align: center;
margin: 0;
}
li{
list-style: none;
font-size: 25px;
font-weight: 300;
color: $text-color-dark;
&:not(:last-child){
margin-bottom: 10px;
}
}
}
}

64
assets/scss/components/_footer.scss Normal file
View File

@@ -0,0 +1,64 @@
.site-footer{
background: $secondary-color;
padding: 100px 0;
&-logo{
margin-bottom: 50px;
@include mobile{
text-align: center;
}
}
&-widget{
@include desktop{
margin-bottom: 40px;
}
@include mobile{
text-align: center;
}
&-title{
color: $white;
margin-bottom: 30px;
@include desktop{
margin-bottom: 20px;
}
}
&-description{
color: $white;
line-height: 30px;
a{
color: $white;
}
}
&-links{
margin: 0;
padding: 0;
li{
list-style: none;
a{
color: $white;
transition: all 0.3s $site-ease;
display: block;
}
&:not(:last-child){
a{
padding-bottom: 9px;
}
}
}
}
&-top{
@include mobile{
text-align: center;
display: block;
}
img{
margin-bottom: 20px;
}
p{
color: $white;
}
&:hover{
text-decoration: none;
}
}
}
}

58
assets/scss/components/_hero.scss Normal file
View File

@@ -0,0 +1,58 @@
.site-hero{
position: relative;
height: 100vh;
background-size: cover;
background-position: center center;
display: flex;
align-items: center;
justify-content: center;
@include desktop{
height: auto;
padding: 200px 0;
}
@include mobile{
padding: 150px 0;
}
&-content{
h1{
margin-bottom: 75px;
@include desktop-lg{
font-size: 50px;
margin-bottom: 50px;
}
@include mobile{
font-size: 40px;
}
}
&-buttons{
margin: 0;
padding: 0;
li{
display: inline-block;
@include mobile{
display: block;
}
&:not(:last-child){
margin-right: 30px;
@include mobile{
margin-right: 0;
margin-bottom: 20px;
}
}
.btn{
font-weight: 600;
@include mobile{
width: 90%;
margin: 0 auto;
display: block;
}
}
}
}
}
&-scroll{
position: absolute;
left: 50%; bottom: 70px;
transform: translateX(-50%);
}
}

89
assets/scss/components/_navigation.scss Normal file
View File

@@ -0,0 +1,89 @@
.site-navigation{
padding: 20px 0;
background: $white;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
@include desktop{
background: $white;
margin: 10px;
border-radius: 5px;
top: 0;
width: calc(100% - 20px);
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.09);
}
@include mobile{
padding: 15px;
}
.navbar-brand{
padding: 0;
margin: 0;
img{
max-width: 78px;
}
}
.nav-item{
@include desktop{
text-align: center;
}
.nav-link{
font-family: $secondary-font;
color: $text-color-dark;
transition: all .3s ease;
padding: 15px 18px;
position: relative;
}
&:last-child{
margin-left: 15px;
}
}
.navbar-toggler{
outline: 0;
padding: 0;
.icon-bar {
height: 2px;
width: 25px;
transition: all 0.2s;
background: $primary-color;
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{
.icon-bar{
&:nth-child(1){
transform: rotate(0);
}
&:nth-child(2){
opacity: 1;
filter: alpha(opacity=1);
}
&:nth-child(3){
transform: rotate(0);
}
}
}
}
&.nav-bg{
padding: 12px 0;
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.09);
@include mobile{
padding: 15px;
}
}
}

257
assets/scss/components/_project.scss Normal file
View File

@@ -0,0 +1,257 @@
.site-project{
padding: 120px 0;
overflow: hidden;
&-item{
position: relative;
margin-bottom: 30px;
transition: all 0.3s ease-in;
&-thumb{
img{
width: 100%;
}
}
&-content{
position: absolute;
background: $gray;
width: 100%;
padding: 45px 50px;
bottom: 0;
transition: all .3s $site-ease;
@include tablet{
padding: 30px;
padding-bottom: 75px;
}
span{
font-family: $secondary-font;
color: $primary-color;
display: block;
margin-bottom: 10px;
}
h3{
margin-bottom: 0;
a{
color: $text-color-dark;
transition: 0.3s ease;
&:hover{
text-decoration: none;
color: $primary-color;
}
}
}
a.read-more{
position: absolute;
bottom: 40px;
display: block;
width: 100%;
color: $text-color;
opacity: 0;
transform: translateY(20px);
transition: all 0.3s $site-ease;
@include tablet{
transform: translateY(0);
opacity: 1;
}
}
}
&:hover{
box-shadow:
0px 30px 45px 0px rgba(0, 0, 0, 0.01),
0px 30px 45px 0px rgba(0, 0, 0, 0.02),
0px 30px 45px 0px rgba(0, 0, 0, 0.03),
0px 30px 45px 0px rgba(0, 0, 0, 0.04);
.site-project-item-content{
a{
transform: translateY(0);
opacity: 1;
}
padding-bottom: 75px;
}
}
}
&-cta{
margin-top: 30px;
display: inline-block;
position: relative;
font-family: $secondary-font;
font-size: 18px;
font-weight: 500;
color: $primary-color;
&::before{
content: '';
position: absolute;
height: 2px;
width: 100%;
background: $primary-color;
bottom: -2px;
transition: transform 0.3s $site-ease;
transform-origin: right;
transform: scaleX(0);
}
&:hover{
color: $primary-color;
text-decoration: none;
&::before{
transform: scaleX(1);
transform-origin: left;
}
}
}
&-header{
padding: 170px 0 100px;
background: $gray;
@include tablet{
padding: 120px 0 80px;
}
&-content{
h1{
font-size: 55px;
span{
color: $primary-color;
}
@include tablet{
font-size: 40px;
}
}
@include desktop{
text-align: center;
margin-bottom: 30px;
}
}
&-action{
display: block;
text-align: center;
span{
display: block;
font-size: 30px;
font-weight: 300;
color: $text-color-dark;
margin-bottom: 20px;
@include tablet{
font-size: 25px;
}
}
img{
width: 66px;
@include tablet{
width: 40px;
}
}
&:hover{
text-decoration: none;
}
}
}
&-pagination{
margin-top: 40px;
.pagination{
justify-content: center;
.page-item{
&:not(:last-child){
margin-right: 10px;
}
.page-link{
font-size: 24px;
border-radius: 0;
border: none;
padding: 12px 20px;
color: $text-color-dark;
font-weight: 300;
transition: all 0.3s ease;
}
&.active{
.page-link{
background-color: $primary-color;
color: $white;
}
}
&.disabled{
opacity: 0.3;
cursor: not-allowed;
}
}
}
}
&-single{
&-section{
padding: 250px 0 100px;
@include tablet{
padding: 100px 0;
}
}
h1{
font-size: 40px;
font-weight: 500;
margin-bottom: 40px;
}
&-image{
display: flex;
flex-wrap: wrap;
margin-bottom: 30px;
img{
width: 48%;
&:nth-child(2n){
margin-left: auto;
}
@include tablet{
width: 100%;
}
}
}
&-description{
margin-bottom: 50px;
p{
margin-bottom: 30px;
}
}
&-action{
a{
position: relative;
font-size: 24px;
font-weight: 300;
color: $text-color-dark;
display: flex;
margin-left: auto;
justify-content: flex-end;
@include mobile{
transform: translateX(-10px);
}
.link-area{
display: inline-block;
overflow: hidden;
span{
position: relative;
display: block;
padding: 2px 0;
transition: transform .9s cubic-bezier(.19,1,.22,1);
transform-origin: left center;
&::after{
content: attr(data-text);
position: absolute;
top: 150%;
left: 0;
transform: skewY(30deg);
transform-origin: left center;
transition: transform .9s cubic-bezier(.19,1,.22,1);
}
}
}
&:hover{
text-decoration: none;
.link-area{
span{
transform: translateY(-150%) skewY(7deg);
&::after{
transform: skewY(-7deg);
}
}
}
}
}
img{
filter: invert(1);
transform: rotate(90deg);
margin-left: 30px;
}
}
}
}

51
assets/scss/components/_team.scss Normal file
View File

@@ -0,0 +1,51 @@
.site-team{
padding: 100px 0;
&-member{
background: $gray;
padding: 65px 30px 30px;
margin: 50px 0 30px;
position: relative;
@include tablet{
text-align: center;
}
&-image{
position: absolute;
width: 100px; height: 100px;
border-radius: 50%;
overflow: hidden;
left: 30px; top: 0;
transform: translateY(-50%);
@include tablet{
left: 50%;
transform: translate(-50%, -50%);
}
}
&-content{
h3{
font-size: 20px;
color: $primary-color;
margin-bottom: 10px;
font-weight: 500;
}
p{
font-size: 18px;
color: $text-color-dark;
margin-bottom: 20px;
font-weight: 300;
}
}
&-social{
margin: 0;
padding: 0;
li{
display: inline-block;
a{
color: $text-color-dark;
}
&:not(:last-child){
margin-right: 10px;
}
}
}
}
}

42
assets/scss/components/_testimonial.scss Normal file
View File

@@ -0,0 +1,42 @@
.site-testimonial{
background: $gray;
padding: 100px 0;
overflow: hidden;
&-item{
background: $white;
padding: 30px;
margin-bottom: 30px;
transition: all 0.3s ease-in;
&.active{
box-shadow: 0px 30px 45px 0px rgba(0, 0, 0, 0.05);
}
&.inactive{
opacity: 0.4;
}
&-header{
display: flex;
align-items: center;
margin-bottom: 20px;
.thumb{
width: 80px;
img{
width: 100%;
}
margin-right: 15px;
}
.person{
h5{
margin-bottom: 5px;
}
p{
margin-bottom: 0;
color: $dark-gray;
}
}
}
&-body{
margin-bottom: 0;
font-weight: 300;
}
}
}

36
assets/scss/style.scss Executable file
View File

@@ -0,0 +1,36 @@
@import "variables";
@import "typography";
@import "mixins";
@import "buttons";
@import "common";
@import "components/navigation";
@import "components/hero";
@import "components/counter";
@import "components/project";
@import "components/blog";
@import "components/testimonial";
@import "components/cta";
@import "components/about";
@import "components/expertise";
@import "components/client";
@import "components/team";
@import "components/contact";
@import "components/footer";