advogrand-grid/index.html
2019-08-21 17:15:15 +03:00

687 lines
37 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Advogrand Grid CSS</title>
<!-- Styles CSS -->
<link rel="stylesheet" href="src/styles/style.css">
<link rel="stylesheet" href="src/styles/media.css">
<!-- Owl Carousel CSS -->
<link rel="stylesheet" href="src/styles/owl.carousel.min.css">
<link rel="stylesheet" href="src/styles/owl.theme.default.min.css">
</head>
<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">
<nav>
<ul>
<li class="header-telephone"><a href="#">+7 499 322-85-80</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>
<li><a href="#">Контакты</a></li>
<li style="padding: 0;margin:0;"><button class="header-btn_call btn-red">Перезвоните
мне</button>
</li>
</ul>
</nav>
</div>
<div class="header-content_bottom">
<div class="header-bottom_logo">
<img src="src/img/header-logo.png" alt="Advogrand">
</div>
<div class="header-bottom_text">
<span>Ваш личный юрист всегда на связи</span>
</div>
<div class="header-bottom_info">
<a href="#">+7 499 322-85-80</a>
<div class="android">
<a href="#"></a>
</div>
<div class="apple">
<a href="#"></a>
</div>
</div>
</div>
</div>
</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">
<h1>Годовой абонемент на услуги <br><span>«личного юриста»</span></h1>
<p>
24 часа в сутки Ваш личный юрист<br> – <b>Advogrand</b> на связи<br>
всего <b>за 12 рублей в день</b>
</p>
<form action="#">
<button type="submit" class="btn-red">Хочу «личного юриста»!</button>
</form>
</div>
</div>
</section>
<section id="services">
<div class="container">
<h2>Услуги предоставляемые сервисом Advogrand</h2>
<div class="section-services_wrap">
<div>
<p>Устные <br>консультации</p>
</div>
<div>
<p>Звонок <br>юриста</p>
</div>
<div>
<p>Модели <br>договора</p>
</div>
<div>
<p>Устные <br>бизнес-консультации</p>
</div>
<div>
<p>Содействие <br>в переговорах</p>
</div>
<div>
<p>Обзор изменений <br> в законодательстве</p>
</div>
<div>
<p>Письменные <br>консультации</p>
</div>
<div>
<p>Консультации <br>в отношении третьих лиц</p>
</div>
<div>
<p>Все области <br>права</p>
</div>
</div>
</div>
</section>
<section id="about">
<div class="container">
<h2>О сервисе Advogrand</h2>
<p>
В составе нашей команды трудятся профессионалы, имеющие огромный опыт реальной юридической практики.
Благодаря этому мы всегда можем найти юридически верное решение, защищающее интересы, сглаживающее
конфликтные ситуации.
Наше абонентское обслуживание позволяет сохранить нашим клиентам время, деньги и душевное
спокойствие,
ведь ваши интересы находятся под круглосуточной защитой «личного адвоката».
</p>
<p>
Наше абонентское обслуживание позволяет сохранить нашим клиентам время, деньги и душевное
спокойствие,
ведь ваши интересы находятся под круглосуточной защитой «личного адвоката».
</p>
<div class="section-about_wrap">
<div class="section-about_feature">
<p><span>9</span><br>лет на российском<br> рынке</p>
</div>
<div class="section-about_feature">
<p><span>289</span><br>квалифицированных<br> специалистов</p>
</div>
<div class="section-about_feature">
<p><span>>2,5 млн.</span><br>решенных вопросов</p>
</div>
<div class="section-about_feature">
<p><span>3</span><br>работаем<br> в 3-х странах мира</p>
</div>
</div>
</div>
</section>
<section id="turn">
<div class="container">
<h2>Как называется услуга</h2>
<div class="section-turn_wrap">
<div class="section-turn_feature">
<div class="wrap-img_feature">
<img src="src/img/turn/1.png" alt="#">
</div>
<p>
Появился вопрос –
звоните по бесплатному номеру
</p>
</div>
<div class="section-turn_feature">
<div class="wrap-img_feature">
<img src="src/img/turn/2.png" alt="#">
</div>
<p>
Описываете ситуацию –
получаете ответ в течении 15 минут
</p>
</div>
<div class="section-turn_feature">
<div class="wrap-img_feature">
<img src="src/img/turn/3.png" alt="#">
</div>
<p>
<b>Ваш вопрос решен!</b>
</p>
</div>
</div>
</div>
</section>
<section id="advantage">
<div class="container">
<h2>
Преимущество сервиса Advogrand <br>
по сравнению с другими юридическими компаниями
</h2>
<div class="section-advantage_wrap">
<div class="advantage-cards">
<div class="card-info">
<div class="card-content">
<ul>
<li>Одна консультация</li>
<li>Дополнительные услуги</li>
<li>Решение вопроса</li>
<li>Время работы</li>
<li>Оплата</li>
</ul>
</div>
</div>
<div class="card-advogrand">
<div class="card-title">
<span>Advogrand</span>
</div>
<div class="card-content">
<ul>
<li>От 120 руб</li>
<li>Входят в абонемент</li>
<li>По телефону</li>
<li>Круглосуточно</li>
<li>Всего 1 раз в год</li>
</ul>
</div>
</div>
<div class="card-other">
<div class="card-title">
<span>Юридические компании</span>
</div>
<div class="card-content">
<ul>
<li>Более 1000 руб</li>
<li>Оплачиваются отдельно</li>
<li>В офисе</li>
<li>С 9:00 до 18:00</li>
<li>Каждый раз при обращении</li>
</ul>
</div>
</div>
</div>
<div class="advantage-users">
<div class="users-title">
<span>Нашими услугами уже пользуются:</span>
</div>
<div class="users-list">
<ul>
<li><span>208 000</span> - мужчин</li>
<li><span>137 000</span> - женщин</li>
<li><span>63 000</span> - семейных пар</li>
<li><span>13 500</span> - предпринимателей</li>
</ul>
</div>
<form action="#">
<button type="submit" class="btn-red">Узнать больше!</button>
</form>
</div>
</div>
</div>
</section>
<section id="apps">
<div class="container">
<div class="section-apps_wrap">
<div class="section-apps_info">
<h2>Хотите получить бесплатную <br>юридическую консультацию?</h2>
<p>
<span>1.</span>Скачайте наше приложение Reworld для iOS или Android<br>
<span>2.</span>Посмотрите один из 150 познавательных видеороликов.<br>
<span>3.</span>Введите Ваш номер телефона и с Вами свяжется юрист для консультации
</p>
</div>
<div class="section-apps_download">
<a href="#"><img src="src/img/apps/apps-android.png" alt="Скачать приложение для Android"></a>
<a href="#"><img src="src/img/apps/apps-ios.png" alt="Скачать приложение для IOS"></a>
</div>
</div>
</div>
</section>
<section id="comments">
<div class="container">
<h2>Отзывы</h2>
<div class="section-comments_wrap">
<div class="comments-tab_links">
<ul>
<li><a href="#">Здравохранение</a></li>
<li><a class="active" 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 class="comments-tab_content">
<!-- Второй Таб Начало -->
<div class="owl-carousel comments owl-theme tab">
<div class="item">
<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 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 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 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 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>
<!-- Второй Таб Конец -->
</div>
</div>
</div>
</section>
<section id="partners">
<div class="container">
<h2>Партнеры Advogrand</h2>
<div class="section-partners_wrap">
<div class="owl-carousel partners owl-theme tab">
<div class="item-partner">
<div class="partner-info">
<p>
Что-то еще 1
</p>
</div>
<img src="src/img/partners/1.png" alt="#">
</div>
<div class="item-partner">
<div class="partner-info">
<p>
Что-то еще 2
</p>
</div>
<img src="src/img/partners/2.png" alt="#">
</div>
<div class="item-partner">
<div class="partner-info">
<p>
«Глобэкс» — российский коммерческий банк. Основан в 1992 году. В 2012 году банк
«Глобэкс» вошёл в ежегодный рейтинг надёжности Forbes. Банк попал в группу «Высокая
надёжность», заняв 30-е место с рейтингом 4 балла из 5-ти
</p>
</div>
<img src="src/img/partners/3.png" alt="#">
</div>
<div class="item-partner">
<div class="partner-info">
<p>
Что-то еще 4
</p>
</div>
<img src="src/img/partners/4.png" alt="#">
</div>
<div class="item-partner">
<div class="partner-info">
<p>
Что-то еще 5
</p>
</div>
<img src="src/img/partners/1.png" alt="#">
</div>
<div class="item-partner">
<div class="partner-info">
<p>
Что-то еще 6
</p>
</div>
<img src="src/img/partners/1.png" alt="#">
</div>
</div>
</div>
</div>
</section>
<section id="price">
<div class="container">
<h2>Выберите тариф</h2>
<div class="about-card">
<p>
Вы можете оформить карту и начать пользоваться услугами уже сейчас!<br>
Оформление займёт всего 10 минут
</p>
</div>
<div class="choose-card">
<div class="choose-title">
<p>Выберите годовую карту, которая Вам подходит: </p>
</div>
<div class="tabs-card">
<span id="compare">Сравнить тарифы</span>
<span class="active" id="tariffs">Тарифы</span>
</div>
</div>
<div class="section-price_wrap compare">
<div class="card">
<div class="card-title">
<h3>Персональная карта<br><span>для Вас</span></h3>
</div>
<div class="card-image">
<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">
<div class="card-title">
<h3>Персональная карта<br><span>для всей семьи</span></h3>
</div>
<div class="card-image">
<img src="src/img/price/family-standard-2.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>
<li>Сервис для всей семьи</li>
</ul>
</div>
<div class="card-cost">
<p>Цена: <br><span>65$ за год</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">
<div class="card-title">
<h3>Персональная карта<br><span>для бизнеса</span></h3>
</div>
<div class="card-image">
<img src="src/img/price/business-standat-1.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>
<li>Бизнес-косультации</li>
<li>Рекомендуемая модель договора</li>
<li>Обзор изменения в законодательстве</li>
</ul>
</div>
<div class="card-cost">
<p>Цена: <br><span>65$ за год</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 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 -->
<script src="src/js/owl.carousel.min.js"></script>
<!-- Index JS -->
<script src="src/js/index.js"></script>
</body>
</html>