From 5da7743417b14e5fe092ed2319909fa31093ff0f Mon Sep 17 00:00:00 2001
From: Sergey <32025367+sergeyyarkov@users.noreply.github.com>
Date: Wed, 21 Aug 2019 17:15:15 +0300
Subject: [PATCH] Add files via upload

---
 index.html | 226 ++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 214 insertions(+), 12 deletions(-)

diff --git a/index.html b/index.html
index 8107fba..dbeddc2 100644
--- a/index.html
+++ b/index.html
@@ -16,6 +16,25 @@
 
 <body>
     <header>
+        <!-- Navigation Mobile -->
+        <div class="navigation-mobile">
+            <div class="wrap-nav">
+                <div class="btn-nav">
+                    <span></span>
+                </div>
+                <div class="nav-content">
+                    <ul>
+                        <li><a href="#">Как мы работаем</a></li>
+                        <li><a href="#">Преимущества</a></li>
+                        <li><a href="#">Отзывы</a></li>
+                        <li><a href="#">Тарифы</a></li>
+                        <li><a href="#">Партнеры</a></li>
+                        <li><a href="#">Контакты</a></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+
         <div class="container">
             <div class="header-content">
                 <div class="header-content_top">
@@ -28,7 +47,8 @@
                             <li><a href="#">Тарифы</a></li>
                             <li><a href="#">Партнеры</a></li>
                             <li><a href="#">Контакты</a></li>
-                            <li style="padding: 0;margin:0;"><button class="header-btn_call">Перезвоните мне</button>
+                            <li style="padding: 0;margin:0;"><button class="header-btn_call btn-red">Перезвоните
+                                    мне</button>
                             </li>
                         </ul>
                     </nav>
@@ -54,6 +74,56 @@
         </div>
     </header>
     <main>
+        <!-- Modal Phone -->
+        <div class="modal-phone-wrap">
+            <div class="modal">
+                <div class="modal-content">
+                    <div class="modal-close">
+                        <span></span>
+                        <span></span>
+                    </div>
+                    <div class="modal-title">
+                        <h3>Оставьте свой номер и мы свяжемся с вами</h3>
+                    </div>
+                    <div class="modal-form">
+                        <form action="#">
+                            <label>Введите свое имя</label>
+                            <input type="text">
+                            <label>Ваш номер телефона</label>
+                            <input type="text">
+                            <button id="btn-modal" type="submit">Заказать звонок консультанта</button>
+                        </form>
+                        <p>Перезвоним вам в течении 5 минут</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Modal Contact -->
+        <div class="modal-contact-wrap">
+            <div class="modal modal-contact">
+                <div class="modal-content">
+                    <div class="modal-close">
+                        <span></span>
+                        <span></span>
+                    </div>
+                    <div class="modal-title">
+                        <h3>Напишите нам письмо или задайте свой вопрос</h3>
+                    </div>
+                    <div class="modal-form">
+                        <form action="#">
+                            <label>Введите свое имя</label>
+                            <input type="text">
+                            <label>Ваш номер телефона</label>
+                            <input type="text">
+                            <label>Сообщение или вопрос</label>
+                            <textarea></textarea>
+                            <button type="submit">Заказать звонок консультанта</button>
+                        </form>
+                        <p>Перезвоним вам в течении 5 минут</p>
+                    </div>
+                </div>
+            </div>
+        </div>
         <section id="first">
             <div class="container">
                 <div class="section-first_wrap">
@@ -273,27 +343,33 @@
                         <!-- Второй Таб Начало -->
                         <div class="owl-carousel comments owl-theme tab">
                             <div class="item">
-                                <img src="src/img/comments/1.jpg" alt="#">
+                                <img class="play-button" src="./src/img/comments/icon-play.png" alt="Play">
+                                <a href="#"><img src="src/img/comments/1.jpg" alt="#"></a>
                                 <p><a href="#">Длинное название видеоролика в две строки просто длинное</a></p>
                             </div>
                             <div class="item">
-                                <img src="src/img/comments/2.jpg" alt="#">
+                                <img class="play-button" src="./src/img/comments/icon-play.png" alt="Play">
+                                <a href="#"><img src="src/img/comments/2.jpg" alt="#"></a>
+                                <p><a href="#">Название видеоролика</a></p>
+                            </div>
+                            <div class="item">
+                                <img class="play-button" src="./src/img/comments/icon-play.png" alt="Play">
+                                <a href="#"><img src="src/img/comments/3.jpg" alt="#"></a>
                                 <p><a href="#">Длинное название видеоролика в две строки просто длинное</a></p>
                             </div>
                             <div class="item">
-                                <img src="src/img/comments/3.jpg" alt="#">
+                                <img class="play-button" src="./src/img/comments/icon-play.png" alt="Play">
+                                <a href="#"><img src="src/img/comments/1.jpg" alt="#"></a>
                                 <p><a href="#">Длинное название видеоролика в две строки просто длинное</a></p>
                             </div>
                             <div class="item">
-                                <img src="src/img/comments/1.jpg" alt="#">
+                                <img class="play-button" src="./src/img/comments/icon-play.png" alt="Play">
+                                <a href="#"><img src="src/img/comments/1.jpg" alt="#"></a>
                                 <p><a href="#">Длинное название видеоролика в две строки просто длинное</a></p>
                             </div>
                             <div class="item">
-                                <img src="src/img/comments/1.jpg" alt="#">
-                                <p><a href="#">Длинное название видеоролика в две строки просто длинное</a></p>
-                            </div>
-                            <div class="item">
-                                <img src="src/img/comments/1.jpg" alt="#">
+                                <img class="play-button" src="./src/img/comments/icon-play.png" alt="Play">
+                                <a href="#"><img src="src/img/comments/1.jpg" alt="#"></a>
                                 <p><a href="#">Длинное название видеоролика в две строки просто длинное</a></p>
                             </div>
                         </div>
@@ -375,8 +451,8 @@
                         <p>Выберите годовую карту, которая Вам подходит: </p>
                     </div>
                     <div class="tabs-card">
-                        <a href="#">Сравнить тарифы</a>
-                        <a href="#">Тарифы</a>
+                        <span id="compare">Сравнить тарифы</span>
+                        <span class="active" id="tariffs">Тарифы</span>
                     </div>
                 </div>
                 <div class="section-price_wrap compare">
@@ -471,9 +547,135 @@
                         </div>
                     </div>
                 </div>
+                <div class="section-price_wrap tariffs">
+                    <div class="card-tariff">
+                        <div class="card-title_tariff">
+                            <h3>Персональная карта<br><span>для Вас</span></h3>
+                            <img src="./src/img/price/personal-standard-3.png" alt="#">
+                        </div>
+                        <div class="card-list_info">
+                            <ul>
+                                <li>Устные консультации <span>2 в месяц</span></li>
+                                <li>Консультации в отношении 3-х лиц <span>2 в год</span> </li>
+                                <li>Письменные консультации <span>2 в квартал</span> </li>
+                                <li>Звонок юриста <span>1 в год</span></li>
+                                <li>Содействие в переговорах <span>1 в месяц</span> </li>
+                            </ul>
+                        </div>
+                        <div class="card-cost">
+                            <p>Цена: <br><span>65$ за год</span></p>
+                            <div class="card-buttons">
+                                <form action="#">
+                                    <button class="btn-orange">Консультация</button>
+                                </form>
+                                <form action="#">
+                                    <button class="btn-grey">Купить</button>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="card-tariff">
+                        <div class="card-title_tariff">
+                            <h3>Персональная карта<br><span>для всей семьи</span></h3>
+                            <img src="./src/img/price/family-standard-2.png" alt="#">
+                        </div>
+                        <div class="card-list_info">
+                            <ul>
+                                <li>Устные консультации <span>3 в месяц</span></li>
+                                <li>Консультации в отношении 3-х лиц <span>4 в год</span> </li>
+                                <li>Письменные консультации <span>3 в квартал</span> </li>
+                                <li>Звонок юриста <span>4 в год</span></li>
+                                <li>Содействие в переговорах <span>2 в месяц</span> </li>
+                                <li><b>Сервис для всей семьи</b></li>
+                            </ul>
+                        </div>
+                        <div class="card-cost">
+                            <p>Цена: <br><span>130$ за год</span></p>
+                            <div class="card-buttons">
+                                <form action="#">
+                                    <button class="btn-green">Консультация</button>
+                                </form>
+                                <form action="#">
+                                    <button class="btn-grey">Купить</button>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="card-tariff">
+                        <div class="card-title_tariff">
+                            <h3>Персональная карта<br><span>для бизнеса</span></h3>
+                            <img src="./src/img/price/business-standat-1.png" alt="#">
+                        </div>
+                        <div class="card-list_info">
+                            <ul>
+                                <li>Устные консультации <span>неогранчено</span></li>
+                                <li>Консультации в отношении 3-х лиц <span>4 в год</span> </li>
+                                <li>Письменные консультации <span>3 в квартал</span> </li>
+                                <li>Звонок юриста <span>4 в год</span></li>
+                                <li>Содействие в переговорах <span>неогранчено</span> </li>
+                                <li><b>Рекомендуемая модель договора</b></li>
+                            </ul>
+                        </div>
+                        <div class="card-cost">
+                            <p>Цена: <br><span>265$ за год</span></p>
+                            <div class="card-buttons">
+                                <form action="#">
+                                    <button class="btn-blue">Консультация</button>
+                                </form>
+                                <form action="#">
+                                    <button class="btn-grey">Купить</button>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <section id="contacts">
+            <div class="section-contacts_wrap">
+                <div class="contact-form_wrap">
+                    <div class="contact-form_content">
+                        <h3>Напишите нам письмо или задайте <br>свой вопрос</h3>
+                        <form action="#">
+                            <label>Введите своё имя</label>
+                            <input type="text">
+                            <label>Ваш номер телефона</label>
+                            <input type="text">
+                            <label>Сообщение или вопрос</label>
+                            <textarea></textarea>
+                            <button type="submit">Заказать звонок консультанта</button>
+                        </form>
+                        <p>Перезвоним вам в течении 5 минут</p>
+                    </div>
+                </div>
+                <div class="contact-info_wrap">
+                    <div class="contact-info_content">
+                        <h3>Контакты</h3>
+                        <span>Телефон для покупки карт:</span><br>
+                        <a href="#">+7 499 322-85-80</a>
+                        <span>Email:</span><br>
+                        <a href="#">info@advogrand.net</a>
+                        <span>Время работы:</span><br>
+                        <p>
+                            С понедельника по пятницу:<br>
+                            9:00 — 22:00<br><br>
+
+                            В праздничные и выходные дни:<br>
+                            только телефонные консультации<br>
+                            10:00 — 20:00
+                        </p>
+                    </div>
+                </div>
             </div>
         </section>
     </main>
+    <footer>
+        <div class="container">
+            <div class="footer-logo">
+                <img src="./src/img/footer-logo.png" alt="Advogrand">
+            </div>
+        </div>
+    </footer>
     <!-- jQuery 3.4.1 -->
     <script src="src/js/jquery-3.4.1.min.js"></script>
     <!-- Owl Carousel JS -->