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

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;
}
}
}