<wordpress> done

css/style.css

@@ -0,0 +1,396 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+.container {
+    position: relative;
+    width: 1140px;
+    margin: 0 auto;
+}
+
+.promo {
+    height: 800px;
+    background: url("../img/bg/main_bg.png") center center/cover no-repeat;
+    padding: 39px 0 62px 0;
+}
+
+.logo .logo_img {
+    display: block;
+    margin: 0 auto;
+}
+
+.logo .logo_text {
+    color: #ffffff;
+    font-family: Roboto;
+    font-size: 15px;
+    font-weight: 500;
+    line-height: 15px;
+    text-transform: uppercase;
+    text-align: center;
+    margin-top: 14px;
+}
+
+ h1 {
+    margin-top: 53px;
+ }   
+
+.title {
+    color: #f9bf3b;
+    font-family: "Roboto - Black";
+    font-size: 41px;
+    font-weight: 400;
+    text-align: center;
+    line-height: 41px;
+    text-transform: uppercase;
+}
+
+h2.title {
+    margin-top: 30px;
+}
+
+.simple .title_big {
+    color: #ffffff;
+    font-family: "Roboto - Black";
+    font-size: 80px;
+    line-height: 80px;
+    font-weight: 400;
+    text-align: center;
+    text-transform: uppercase;
+    margin-top: 21px;
+}
+
+.promo .promo_text {
+    padding: 0 111px;
+    margin-top: 23px;
+    color: #ffffff;
+    font-size: 21px;
+    font-weight: 300;
+    line-height: 21px;
+    text-align: center;
+    font-family: "Roboto Light";
+}
+
+.promo .promo_text span {
+    color: #f9bf3b;
+    font-family: "Roboto - Bold";
+    font-weight: 700;
+}
+
+.promo .promo_btn {
+    display: block;
+    margin: 0 auto;
+    margin-top: 73px;
+    width: 313px;
+    height: 72px;
+    box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.18);
+    border: 4px solid rgba(0, 0, 0, 0.23);
+    background-image: linear-gradient(to top, #2798b9 0%, #3ab6da 100%);
+    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.22);
+    color: #ffffff;
+    font-family: "Roboto Condensed";
+    font-size: 21px;
+    font-weight: 400;
+    line-height: 21px;
+    text-align: center;
+    text-transform: uppercase;
+    cursor: pointer;
+    outline: none;
+}
+
+.more {
+    margin-top: 73px;
+   }
+
+.more .more_text {
+    color: #ffffff;
+    font-family: "Roboto - Thin";
+    font-size: 15px;
+    font-weight: 400;
+    text-align: center;
+    line-height: 15px;
+    text-transform: uppercase;
+}
+
+.more .more_img {
+    display: block;
+    margin: 0 auto;
+    margin-top: 13px;
+}
+
+.waiting {
+    min-height: 604px;
+    background-color: #efefef;
+    padding: 85px 0 75px 0;
+}
+
+.waiting .waiting_header, .finish .finish_header {
+    color: #252525;
+    font-family: Roboto;
+    font-size: 30px;
+    font-weight: 400;
+    text-align: center;
+    text-transform: uppercase;
+    line-height: 30px;
+}
+
+.finish .finish_header {
+    color: #fff;
+}
+
+.waiting .waiting_divider, .finish .finish_divider {
+    width: 217px;
+    height: 4px;
+    background-color: #f9bf3b;
+    margin: 0 auto;
+    margin-top: 18px;
+}
+
+.waiting .waiting_subheader {
+    margin-top: 17px;
+    color: #4a4a4a;
+    font-family: Roboto;
+    font-size: 23px;
+    font-weight: 400;
+    text-align: center;
+    line-height: 23px;
+}
+
+.waiting .waiting_wrapper {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 45px;
+}
+
+.waiting .waiting_wrapper .waiting_item {
+    width: 339px;
+    text-align: center;
+}
+
+.waiting .waiting_wrapper .waiting_item .waiting_img {
+    width: 100%;
+}
+
+.waiting .waiting_wrapper .waiting_item .waiting_descr {
+    margin-top: 33px;
+    color: #4a4a4a;
+    font-family: Roboto;
+    font-size: 15px;
+    font-weight: 300;
+    line-height: 15px;
+    text-align: center;
+}
+
+@font-face {
+    font-family: "Roboto - Black";
+    src: url("../fonts/Roboto-Black.ttf");
+    font-style: normal;
+    font-weight: normal;
+}
+@font-face {
+    font-family: "Roboto Light";
+    src: url("../fonts/Roboto-Light.ttf");
+    font-style: normal;
+    font-weight: normal;
+}
+@font-face {
+    font-family: "Roboto";
+    src: url("../fonts/Roboto-Regular.ttf");
+    font-style: normal;
+    font-weight: normal;
+}
+@font-face {
+    font-family: "Roboto - Thin";
+    src: url("../fonts/Roboto-Thin.ttf");
+    font-style: normal;
+    font-weight: normal;
+}
+
+.optimization {
+    min-height: 550px;
+    padding: 102px 0 107px 0 ;
+}
+
+
+.optimization .optimization_header {
+    margin-left: 391px;
+    color: #299cbd;
+    font-family: "Roboto - Black";
+    font-size: 29px;
+    font-weight: 400;
+    line-height: 29px;
+    text-transform: uppercase;
+}
+
+.optimization .optimization_text {
+    margin-top: 25px;
+    margin-left: 391px;
+    width: 750px;
+    color: #4a4a4a;
+    font-size: 17px;
+    font-weight: 300;
+    line-height: 17px;
+    font-family: "Roboto Light";
+    font-weight: 300;
+}
+
+.optimization .optimization_text span {
+    font-family: "Roboto - Bold";
+    font-weight: 700;
+}
+
+.optimization .optimization_img {
+  position: absolute;
+  top: -54px;
+  left: -240px;
+  z-index: -1;
+}
+
+.finish {
+    min-height: 447px;
+    padding: 86px 0 79px 0;
+    background: url("../img/bg/second_bg.png") center center/cover no-repeat
+}
+
+.finish .finish_wrapper {
+    margin-top: 41px;
+    display: flex;
+    justify-content: space-between;
+}
+
+.finish .finish_wrapper .finish_item {
+width: 204px;
+}
+
+.finish .finish_wrapper .finish_item .finish_round {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 115px;
+    margin: 0 auto;
+    height: 115px;
+    background-color: #b4e2ff;
+    border-radius: 100%;
+}
+
+.finish .finish_wrapper .finish_item .finish_descr {
+    margin-top: 25px;
+    text-align: center;
+    color: #efefef;
+    font-family: Roboto;
+    font-size: 17px;
+    font-weight: 300;
+    line-height: 17px;
+}
+
+.icons_item .logo_gift {
+    display: block;
+    margin: 0 auto;
+}
+
+.gift .logo_gift {
+    margin-top: 147px;
+}
+
+.gift .icons_text {
+    margin-top: 42px;
+    color: #252525;
+    font-family: Roboto;
+    font-size: 30px;
+    font-weight: 400;
+    line-height: 30px;
+    text-align: center;
+}
+
+.gift .gift_btn {
+    display: block;
+    margin: 0 auto;
+    margin-top: 52px;
+    width: 313px;
+    height: 72px;
+    box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.18);
+    border: 4px solid rgba(0, 0, 0, 0.23);
+    background-image: linear-gradient(to top, #2798b9 0%, #3ab6da 100%);
+    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.22);
+    color: #ffffff;
+    font-family: "Roboto Condensed";
+    font-size: 21px;
+    font-weight: 400;
+    line-height: 21px;
+    text-align: center;
+    text-transform: uppercase;
+    cursor: pointer;
+    outline: none;
+}
+
+.webinar_item .webinar_icon {
+    display: block;
+    margin: 0 auto;
+}
+
+.date .webinar_icon {
+    margin-top: 89px;
+}
+
+h2.text_first {
+    margin-top: 37px;
+    color: #252525;
+    font-family: Roboto;
+    font-size: 30px;
+    font-weight: 400;
+    line-height: 30px;
+    text-align: center;
+}
+
+h2.text_second {
+    margin-top: 30px;
+    color: #299cbd;
+    font-family: "Roboto - Black";
+    font-size: 36px;
+    font-weight: 400;
+    line-height: 36px;
+    text-transform: uppercase;
+    text-align: center;
+}
+
+.date .little_text {
+    margin-top: 25px;
+    color: #4a4a4a;
+    font-family: Roboto;
+    font-size: 23px;
+    font-weight: 400;
+    line-height: 23px;
+    text-align: center;
+}
+
+footer {
+    margin-top: 64px;
+    min-height: 166px;
+    background-color: #1a1a1a;
+    padding: 61px 0 69px 0;
+}
+
+.info {
+    margin: 0 auto;
+    width: 377px;
+    text-align: center;
+    color: #888888;
+    font-family: Roboto;
+    font-size: 15px;
+    font-weight: 300;
+    line-height: 21px;
+}
+
+footer a {
+    color: #888888;
+    font-family: Roboto;
+    font-size: 15px;
+    font-weight: 300;
+    line-height: 21px;
+    text-decoration: none;
+}
+
+.underlined {
+    text-decoration: underline;
+}  

index.html

@@ -0,0 +1,170 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Wordpress intencive</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+    <section class="promo">
+        <div class="conteiner">
+            <div class="logo">
+                <img src="icons/logo/owl_logo.png" alt="logo" class="logo_img">
+                <div class="logo_text">WordPress интенсив</div>
+            </div>
+
+            <h1 class="title">Создать свой сайт на WordPress</h1>
+            <div class="simple">
+               <h2 class="title_big">это просто!</h2>
+               <div class="line"></div>
+            </div>
+            <h2 class="title">Куда сложнее сделать это правильно!</h2>
+
+            <div class="promo_text">
+               Ежедневно в России появляется более 5 000 новых сайтов.<br>
+               И только единицы из них становятся популярными и приносят ощутимую прибыль.
+               В чем секрет? В чем формула успеха? Узнайте на предстоящем двухдневном
+               <span>БЕСПЛАТНОМ</span> интенсиве!
+            </div>
+
+            <button class="promo_btn">Записаться на интенсив!</button>
+
+            <div class="more">
+               <div class="more_text">узнать больше об интенсиве</div>
+               <img src="icons/logo/arrow_down.png" alt="down" class="more_img">
+            </div>
+
+        </div>
+    </section>
+
+    <section class="waiting">
+        <div class="container">
+            <h2 class="waiting_header">Что вас ждет в нашем интенсиве?</h2>
+            <div class="waiting_divider"></div>
+            <div class="waiting_subheader">2 бесплатных полноценных обучающих вебинара, 
+            где:</div>
+
+            <div class="waiting_wrapper">
+                <div class="waiting_item">
+                    <img src="img/waiting/Layer_12.png" alt="1" class="waiting_img">
+                    <div class="waiting_descr">Всего за два бесплатных вебинара мы научим 
+                    вас, как создать свой сайт на WordPress. </div>
+                </div>
+                <div class="waiting_item">
+                    <img src="img/waiting/Layer_10.png" alt="2" class="waiting_img">
+                    <div class="waiting_descr">Покажем, как правильно оптимизировать сайт
+                     и сделать его привлекательным для поисковых систем. Только свежая,
+                     профессиональная и актуальная информация!</div>
+                </div>
+                <div class="waiting_item">
+                    <img src="img/waiting/Layer_7.png" alt="3" class="waiting_img">
+                    <div class="waiting_descr">Вы узнаете, что такое «хорошая индексация»,
+                         «высокая посещаемость», «стабильный прирост посетителей», «ТОП по
+                         запросам» и, что намного важнее, как добиться всех этих 
+                         показателей!</div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="optimization">
+        <div class="container">
+            <h2 class="optimization_header">Что такое оптимизация и зачем она нужна?</h2>
+            <div class="optimization_text">
+                    <br>На просторах интернета несчетное количество действующих и даже заброшенных сайтов. 
+                    Большинство из них совпадает не только по категориям, но и по
+                    содержанию.<br>
+                    <br>Представьте себе тысячи сайтов, на которых тем или иным образом предоставляется одна и та же 
+                    информация или продается одна и та же услуга. И попасть на эти сайты можно лишь по 
+                    тематическим запросам в поисковых системах.<br>
+                    <br>Но как вам быть, если ваш сайт похож на сотню или тысячу таких же, а на одной странице гугла 
+                    или яндекса всего 10 позиций? Как привести посетителей страницы своего ресурса? Именно для
+                    этого и нужна оптимизация – для вывода вашего сайта на первую страницу поиска!<br>
+                    <br><span>Мы научим вас, как сделать ваш сайт привлекательным для поисковых 
+                    систем и посоветуем, как вывести его на первые страницы, обходя всех 
+                    конкурентов.</span><br>
+             </div>
+             <img src="img/bg/woman_bg.jpg" alt="woman" class="optimization_img">
+        </div>
+    </section>
+
+    <section class="finish">
+        <div class="container">
+           <h2 class="finish_header">По окончании обучения Вы сможете!</h2>
+           <div class="finish_divider"></div>
+
+           <div class="finish_wrapper">
+               <div class="finish_item">
+                   <div class="finish_round">
+                       <img src="icons/finish/Layer_1.png" alt="1" class="finish_icon">
+                   </div>
+                   <div class="finish_descr">Создать свой сайт или блог</div>
+                </div>
+                <div class="finish_item">
+                    <div class="finish_round">
+                       <img src="icons/finish/Layer_2.png" alt="2" class="finish_icon">
+                    </div>
+                    <div class="finish_descr">Правильно его оптимизировать</div>
+                </div>
+                <div class="finish_item">
+                    <div class="finish_round">
+                       <img src="icons/finish/Layer_3.png" alt="3" class="finish_icon">
+                    </div>
+                    <div class="finish_descr">Обеспечить ему медленный, но верный рост в ТОП</div>
+                </div>
+                <div class="finish_item">
+                    <div class="finish_round">
+                       <img src="icons/finish/Layer_4.png" alt="4" class="finish_icon">
+                    </div>
+                    <div class="finish_descr">Достигнуть стабильного прироста посетителей</div>
+                </div>
+                <div class="finish_item">
+                    <div class="finish_round">
+                       <img src="icons/finish/Layer_5.png" alt="5" class="finish_icon">
+                    </div>
+                    <div class="finish_descr">Получать ощутимую прибыль</div>
+                </div>
+            </div>       
+        </div>
+
+    </section>
+
+    <section class="gift">
+        <div class="container">
+            <div class="icons_item">
+                <img src="icons/logo/gift.png" alt="gift" class="logo_gift">
+            </div>
+                 <div class="icons_text">Для всех участников интенсива предусмотрены бонусы и подарки. Нажимайте на
+                кнопку ниже, принимайте участие в вебинарах и забирайте свой приз по
+                окончании обучения!
+            </div>
+            <button class="gift_btn">Записаться на интенсив!</button>
+        </div>
+    </section>
+
+    <section class="date">
+         <div class="container">
+            <div class="webinar_item">
+               <img src="img/first_webinar/Layer_20.png" alt="webinar" class="webinar_icon">
+            </div>
+                <h2 class="text_first">Первый вебинар состоится:</h2>
+                <h2 class="text_second">10 сентября в 20:00 по Москве</h2>
+                <div class="little_text">Успейте записаться, количество мест ограничено!</div>
+        </div>
+    </section>
+    <footer>
+        <div class="info">
+            <div class="info_links">
+                <a href="#" class="underlined">Служба поддержки</a>
+                |
+                <a href="#" class="underlined">Политика конфиденциальности</a>
+            </div>
+            Позвоните нам <a href="tel:+88005550121">8-800-555-01-21</a> 
+        </div>
+    </footer>
+       
+</body>
+</html>