<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section class="section feature miscree" id="feature">
<div class="container">
<div class="row">
<div class="col-12">
<div class="section-title">
<h2>Продвижение сайтов начинается с SEO</h2>
<p class="underhead">SEO продвижение сайта позволяет занять верхние строчки результатов поиска в поиске без рекламы</p>
</div>
</div>
</div>
<div class="row bg-elipse">
<div class="col-lg-4 align-self-center text-center text-lg-right">
<!-- Feature Item -->
<div class="feature-item">
<!-- Icon -->
<div class="icon">
<i class="tf-circle-compass"></i>
</div>
<!-- Content -->
<div class="content">
<h5>Оптимизация контента</h5>
<p>Мы бережно подготовим Ваш сайт к требованиям поисковых систем GOOGLE и YANDEX</p>
</div>
</div>
<!-- Feature Item -->
<div class="feature-item">
<!-- Icon -->
<div class="icon">
<i class="tf-tools-2"></i>
</div>
<!-- Content -->
<div class="content">
<h5>Привлечение посетителей на Ваш сайт</h5>
<p>Мы приложим все усилия для того, чтобы Ваши страницы смогли занять ТОП, от куда больше всего приходят клиенты</p>
</div>
</div>
<div class="feature-item">
<!-- Icon -->
<div class="icon">
<i class="tf-tools-2"></i>
</div>
<!-- Content -->
<div class="content">
<h5>Увеличение посетителей в Конверсии</h5>
<p>Мы создадим все условия для того чтобы посетителю было комортно на сайте и он стал Вашим клиентом</p>
</div>
</div>
</div>
<div class="col-lg-4 text-center">
<!-- Feature Item -->
<div class="feature-item mb-0">
<!-- Icon -->
<div class="icon">
<i class="tf-chat"></i>
</div>
<!-- Content -->
<div class="content">
<h5>SEO продвижение</h5>
<p>Вот с чего должно начинаться продвижение сайтов в поиске Google и Yandex</p>
</div>
</div>
<div class="app-screen">
<div class="rocket">
<div class="rocket-body">
<div class="body"></div>
<div class="fin fin-left"></div>
<div class="fin fin-right"></div>
<div class="window"></div>
</div>
<div class="exhaust-flame"></div>
<ul class="exhaust-fumes">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="star">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 text-center text-lg-left align-self-center">
<!-- Feature Item -->
<div class="feature-item">
<!-- Icon -->
<div class="icon">
<i class="tf-mobile"></i>
</div>
<!-- Content -->
<div class="content">
<h5>Персональный менеджер</h5>
<p>Для Вашего удобства, у Вас будет персональный менеджер, который будет в курсе всех дел</p>
</div>
</div>
<!-- Feature Item -->
<div class="feature-item">
<!-- Icon -->
<div class="icon">
<i class="tf-layers"></i>
</div>
<!-- Content -->
<div class="content">
<h5>Команда первоклассных мастеров</h5>
<p>Копирайтер и контент менеджер создадут множество интересных страниц которые увидят на странице поиска</p>
</div>
</div><!-- Feature Item -->
<div class="feature-item">
<!-- Icon -->
<div class="icon">
<i class="tf-layers"></i>
</div>
<!-- Content -->
<div class="content">
<h5>Техническая поддержка бонусом</h5>
<p>Нам очень важно, чтобы Ваш сайт был всегда в тонусе и привлекал новых посетителей всегда</p>
</div>
</div>
</div>
</div>
</div>
</section>
/*=== MEDIA QUERY ===*/
@import url("https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,600,700|Open+Sans:400,400i,700");
body {
font-family: "Open Sans", sans-serif;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Open Sans", sans-serif;
color: #5e5e5e;
font-weight: 400;
line-height: 1;
width:100%;
text-align:center;
}
.underhead{width:100%; text-align:center; margin-top:20px;}
h1 {
font-size: 60px;
}
h2 {
font-size: 48px;
}
h3 {
font-size: 36px;
}
h4 {
font-size: 30px;
}
h5 {
font-size: 20px;
}
h6 {
font-size: 16px;
}
.miscree{
min-height: 100vh;
background: linear-gradient(to bottom, #f5f5f5 0%, #e1eff7 70%, #818b91 100%);
overflow: hidden;
}
.section-title h2, .underhead {color:#666;}
.feature .feature-item .icon {
margin-bottom: 25px;
}
.feature .feature-item .icon i {
font-size: 48px;
color: #7d71d3;
}
.feature .feature-item .content h5 {
text-transform: uppercase;
font-weight: 600;
margin-bottom: 15px;
}
.feature .feature-item:not(:last-child) {
margin-bottom: 80px;
}
@media (max-width: 768px) {
.feature .feature-item {
margin-bottom: 80px;
}
}
.feature .app-screen {
margin: 40px 0;
}
.feature .feature-content h2, .feature .feature-content p {
margin-bottom: 25px;
}
@media (max-width: 768px) {
.feature .feature-content h2, .feature .feature-content p {
text-align: center;
}
}
@media (max-width: 768px) {
.feature .testimonial {
text-align: center;
}
}
.feature .testimonial p {
font-family: "Josefin Sans", sans-serif;
margin-bottom: 10px;
font-style: italic;
color: #242424;
}
.feature .testimonial ul.meta li {
font-size: 12px;
margin-right: 10px;
}
.feature .testimonial ul.meta li img {
height: 40px;
width: 40px;
border-radius: 100%;
}
.rocket {
position: relative;
margin-top: 50%;
height:100%;
width: 100%;
left: 50%;
zoom:0.9;
}
.rocket .rocket-body {
width: 80px;
left: calc(50% - 50px);
animation: bounce 0.5s infinite;
}
.rocket .rocket-body .body {
background-color: #dadada;
height: 180px;
left: calc(50% - 50px);
border-top-right-radius: 100%;
border-top-left-radius: 100%;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
border-top: 5px solid #f5f5f5;
}
.rocket .rocket-body:before {
content: '';
position: absolute;
left: calc(50% - 24px);
width: 48px;
height: 13px;
background-color: #554842;
bottom: -13px;
border-bottom-right-radius: 60%;
border-bottom-left-radius: 60%;
}
.rocket .window {
position: absolute;
width: 40px;
height: 40px;
border-radius: 100%;
background-color: #a75248;
left: calc(50% - 25px);
top: 40px;
border: 5px solid #b4b2b2;
}
.rocket .fin {
position: absolute;
z-index: -100;
height: 55px;
width: 50px;
background-color: #a75248;
}
.rocket .fin-left {
left: -30px;
top: calc(100% - 55px);
border-top-left-radius: 80%;
border-bottom-left-radius: 20%;
}
.rocket .fin-right {
right: -30px;
top: calc(100% - 55px);
border-top-right-radius: 80%;
border-bottom-right-radius: 20%;
}
.rocket .exhaust-flame {
position: absolute;
top: 90%;
width: 28px;
background: linear-gradient(to bottom, transparent 10%, #f5f5f5 100%);
height: 150px;
left: calc(50% - 14px);
animation: exhaust 0.2s infinite;
}
.rocket .exhaust-fumes li {
width: 60px;
height: 60px;
background-color: #f5f5f5;
list-style: none;
position: absolute;
border-radius: 100%;
}
.rocket .exhaust-fumes li:first-child {
width: 200px;
height: 200px;
bottom: -300px;
animation: fumes 5s infinite;
}
.rocket .exhaust-fumes li:nth-child(2) {
width: 150px;
height: 150px;
left: -120px;
top: 260px;
animation: fumes 3.2s infinite;
}
.rocket .exhaust-fumes li:nth-child(3) {
width: 120px;
height: 120px;
left: -40px;
top: 330px;
animation: fumes 3s 1s infinite;
}
.rocket .exhaust-fumes li:nth-child(4) {
width: 100px;
height: 100px;
left: -170px;
animation: fumes 4s 2s infinite;
top: 380px;
}
.rocket .exhaust-fumes li:nth-child(5) {
width: 130px;
height: 130px;
left: -120px;
top: 350px;
animation: fumes 5s infinite;
}
.rocket .exhaust-fumes li:nth-child(6) {
width: 200px;
height: 200px;
left: -60px;
top: 280px;
animation: fumes2 10s infinite;
}
.rocket .exhaust-fumes li:nth-child(7) {
width: 100px;
height: 100px;
left: -100px;
top: 320px;
}
.rocket .exhaust-fumes li:nth-child(8) {
width: 110px;
height: 110px;
left: 70px;
top: 340px;
}
.rocket .exhaust-fumes li:nth-child(9) {
width: 90px;
height: 90px;
left: 200px;
top: 380px;
animation: fumes 20s infinite;
}
.star li {
list-style: none;
position: absolute;
}
.star li:before, .star li:after {
content: '';
position: absolute;
background-color: #f5f5f5;
}
.star li:before {
width: 10px;
height: 2px;
border-radius: 50%;
}
.star li:after {
height: 8px;
width: 2px;
left: 4px;
top: -3px;
}
.star li:first-child {
top: -30px;
left: -210px;
animation: twinkle 0.4s infinite;
}
.star li:nth-child(2) {
top: 0;
left: 60px;
animation: twinkle 0.5s infinite;
}
.star li:nth-child(2):before {
height: 1px;
width: 5px;
}
.star li:nth-child(2):after {
width: 1px;
height: 5px;
top: -2px;
left: 2px;
}
.star li:nth-child(3) {
left: 120px;
top: 220px;
animation: twinkle 1s infinite;
}
.star li:nth-child(4) {
left: -100px;
top: 200px;
animation: twinkle 0.5s ease infinite;
}
.star li:nth-child(5) {
left: 170px;
top: 100px;
animation: twinkle 0.4s ease infinite;
}
.star li:nth-child(6) {
top: 87px;
left: -79px;
animation: twinkle 0.2s infinite;
}
.star li:nth-child(6):before {
height: 1px;
width: 5px;
}
.star li:nth-child(6):after {
width: 1px;
height: 5px;
top: -2px;
left: 2px;
}
@keyframes fumes {
50% {
transform: scale(1.5);
background-color: transparent;
}
51% {
transform: scale(0.8);
}
100% {
background-color: #f5f5f5;
transform: scale(1);
}
}
@keyframes bounce {
0% {
transform: translate3d(0px, 0px, 0);
}
50% {
transform: translate3d(0px, -4px, 0);
}
100% {
transform: translate3d(0px, 0px, 0);
}
}
@keyframes exhaust {
0% {
background: linear-gradient(to bottom, transparent 10%, #f5f5f5 100%);
}
50% {
background: linear-gradient(to bottom, transparent 8%, #f5f5f5 100%);
}
75% {
background: linear-gradient(to bottom, transparent 12%, #f5f5f5 100%);
}
}
@keyframes fumes2 {
50% {
transform: scale(1.1);
}
}
@keyframes twinkle {
80% {
transform: scale(1.1);
opacity: 0.7;
}
}
/*# sourceMappingURL=maps/style.css.map */
