body{
margin: 0;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
line-height: 1.6;
color: #333;
}
*,
*,:after,
*:before{
box-sizing: border-box;
}
/* container */
.container{
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
h1,h2,h3,h4,h5,h6{
margin: 0;
}
hr{
display: block;
width: 100%;
height: 1px;
border: 0;
margin: 40px 0;
background-color: #e5e5e5;
}
/* intro */
.intro{
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 100vh;
background: url("../images/MoGo_FREE_Template_by_Laaqiq_01.jpg") center
no-repeat;
-webkit-background-size: cover;
background-size: cover;
}
.intro__title{
color: #fff;
font-size: 150px;
font-weight: 700;
text-transform: uppercase;
line-height: 1;
}
.intro__title:after{
content: "";
display: block;
width: 60px;
height: 3px;
margin: 60px auto 60px;
background-color: #fff;
}
.intro__inner{
text-align: center;
width: 100%;
max-width: 880px;
margin: 0 auto;
}
.intro__suptitle{
margin-bottom: 20px;
font-size: 72px;
color: #fff;
font-family: 'Kaushan Script', cursive;
}
/* header */
.header{
width: 100%;
padding-top: 30px;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 1000;
}
.header__inner{
display: flex;
justify-content: space-between;
align-items: center;
}
.header__logo{
font-size: 30px;
font-weight: 700;
color: #fff;
}
/* nav */
.nav{
font-size: 14px;
text-transform: uppercase;
}
.nav__link:after{
content: "";
display: block;
width: 100%;
height: 3px;
display: none;
background-color: #fce38a;
opacity: 0;
position: absolute;
top: 100%;
left: 0;
z-index: 1;
}
.nav__link{
display: inline-block;
vertical-align: top;
margin: 0 15px;
position: relative;
color: #fff;
text-decoration: none;
transition: color .2s linear;
}
.nav__link:hover{
color: #fce38a;
}
.nav__link:hover:after
.nav__link.active:after{
opacity: 1;
}
.nav__link.active{
color: #fce38a;
}
/* BTN */
.btn{
display: inline-block;
vertical-align: top;
padding: 8px 30px;
font-size: 14px;
font-weight: 700;
border: 3px solid #fff;
color: #fff;
text-transform: uppercase;
text-decoration: none;
transition: background .1s
linear, color .1s linear;
}
.btn:hover{
background-color: #fff;
color: #333;
}
/* Slider */
.slider{
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
width: 100%;
}
.slider__inner{
display: flex;
justify-content: space-between;
}
.slider__item{
width: 23%;
padding: 20px 0;
position: relative;
border-top: 2px solid #fff;
opacity: .7;
font-size: 18px;
color: #fff;
text-transform: uppercase;
}
.slider__item.active{
opacity: 1;
}
.slider__item.active:before{
content: "";
display: block;
height: 3px;
width: 70px;
background-color: #f38181;
position: absolute;
top: -3px;
left: 0;
z-index: 1;
}
.slider__num{
font-size: 24px;
font-weight: 700;
}
/* section */
.section{
padding: 80px 0;
}
.section--devices{
margin-bottom: 40px;
padding-bottom: 0;
background: url("../images/devices-bg.jpg")
center no-repeat;
-webkit-background-size: cover;
background-size: cover;
}
.section--gray{
background-color: #f8f8f8;
}
.section__header{
width: 100%;
max-width: 950px;
margin: 0 auto 50px;
text-align: center;
}
.section__suptitle{
font-size: 24px;
color: #333;
font-family: 'Kaushan Script',
cursive;
}
.section__title{
font-size: 30px;
font-weight: 700;
color: #333;
text-transform: uppercase;
}
.section__title:after{
content: "";
display: block;
width: 60px;
height: 3px;
margin: 30px auto 0;
background-color: #f38181;
}
.section__text{
font-size: 15px;
color: #999;
}
/* about */
.about{
margin-top: 80px;
display: flex;
justify-content: space-between;
}
.about__item{
position: relative;
background-color: #95e1d3;
width: 380px;
}
.about__item:hover .about__text{
opacity: 1;
}
.about__item:hover .about__img{
transform: translate3d(-10px, -10px, 0);
}
.about__item:hover .about__img img{
opacity: .1;
}
.about__img{
background: linear-gradient(to bottom, #f38181, #fce38a);
transition: transform .1s linear;
}
.about__img img{
display: block;
transition: opacity .1s linear;
}
.about__text{
opacity: 0;
width: 100%;
font-size: 18px;
color: #fff;
text-transform: uppercase;
font-weight: 700;
text-align: center;
position: absolute;
top: 50%;
left: 0;
z-index: 2;
transform: translate3d(0, -50%, 0);
transition: opacity .2s linear;
}
/* statistics */
.statistics{
background-color: #95e1d3;
}
.stat{
display: flex;
}
.stat__item{
flex: 1 1 0;
padding: 70px 25px;
border-left: 1px solid #b5eae0;
text-align: center;
color: #fff;
}
.stat__item:last-child{
border-right: 1px solid #b5eae0;
}
.stat__count{
margin-bottom: 10px;
font-size: 72px;
font-weight: 700;
line-height: 1;
}
.stat__text{
font-size: 14px;
text-transform: uppercase;
}
/* services */
.services{
display: flex;
}
.services__item{
flex: 1 1 0;
padding-left: 90px;
position: relative;
}
.services__icon{
position: absolute;
top: 0;
left: 36px;
z-index: 1;
}
.services__title{
font-size: 14px;
color: #333;
text-transform: uppercase;
margin-bottom: 10px;
}
.services__text{
font-size: 15px;
color: #999;
}
/* devices */
.devices{
width: 100%;
max-width: 600px;
margin: 0 auto;
position: relative;
}
.devices__item{
display: block;
}
.devices__item--iphone{
position: absolute;
bottom: -70px;
right: 0;
z-index: 1;
}
/* wedo */
.wedo{
display: flex;
}
.wedo__item{
width: 50%;
}
/* accordion */
.accordion__item{
margin-bottom: 7px;
border: 1px solid #e5e5e5;
}
.accordion__item.active
.accordion__content{
display: block;
}
.accordion__item.active
.accordion__header:after{
border-bottom-color: 1px solid #e5e5e5;
}
.accordion__item.active
.accordion__header:after{
transform: translateY(50%)
rotate(-45deg);
margin-top: 5px;
}
.accordion__header{
padding: 15px 20px 15px 65px;
position: relative;
border-bottom: 1px solid #transparent;
cursor: pointer;
}
.accordion__icon{
position: absolute;
top: 0;
left: 20px;
z-index: 1;
transform: translateY(30%);
}
.accordion__header:after{
content: "";
display: block;
width: 13px;
height: 13px;
border-top: 2px solid #ccc;
border-right: 2px solid #ccc;
position: absolute;
top: 28%;
right: 20px;
z-index: 1;
transform: translateY(50%)
rotate(135deg);
}
.accordion__content{
padding: 20px;
display: none;
font-size: 15px;
color: #999;
font-weight: 300;
font-style: italic;
}
.accordion__title{
font-size: 14px;
color: #333;
text-transform: uppercase;
}
/* reviews */
.reviews{
padding: 0 110px;
}
.reviews__item{
padding-left: 205px;
position: relative;
}
.reviews__photo{
position: absolute;
top: 0;
left: 0;
z-index: 1;
border: 2px solid #95e1d3;
}
.reviews__text{
margin-bottom: 15px;
font-size: 24px;
font-style: italic;
font-weight: 300;
color: #999;
}
.reviews__author{
font-size: 24px;
color: black;
font-family: 'Kaushan Script', cursive;
}
.reviews__author:before{
content: "";
display: inline-block;
vertical-align: middle;
width: 60px;
height: 3px;
margin-right: 10px;
background-color: #f38181;
}
.reviews__btn{
font-size: 0;
color: transparent;
position: absolute;
top: 50%;
z-index: 2;
transform: translateY(-50%);
}
.reviews__btn:after{
content: "";
display: block;
width: 16px;
height: 16px;
border-top: 2px solid blue;
border-left: 2px solid blue;
transform:rotate(45deg);
}
.reviews__btn--prev{
left: 0;
}
.reviews__btn--next{
right: 0;
}
Простой
Средний
