index.html

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
<!--    <meta name="viewport" content="width=device-width, initial-scale=1">-->
    <title>GllacyShop - Главная</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900&subset=cyrillic,latin" rel="stylesheet" type="text/css">
    <link href="css/normalize.css" rel="stylesheet">
    <link href="css/style.min.css" rel="stylesheet">
  </head>
  <body>
    <input type="radio" class="slide1" id="slide1" name="toggle" checked>
    <input type="radio" class="slide2" id="slide2" name="toggle">
    <input type="radio" class="slide3" id="slide3" name="toggle">
    <div class="wrap">
    <header class="main-header">
      <div class="wrapper">
        <div class="container clearfix">
          <a class="logo">
            <img src="img/gllacy-logo.svg" width="153" height="63" alt="Логотип GllacyShop">
          </a>
            <nav class="main-nav">
              <ul class="main-menu">
                <li class="main-inner">
                  <a href="catalog.html">Каталог</a>
                  <ul class="sub-menu">
                    <li class="sub-inner"><a href="#"><b>Новинки</b></a></li>
                    <li class="sub-inner"><a href="catalog.html">Сливочное</a></li>
                    <li class="sub-inner"><a href="#">Щербеты</a></li>
                    <li class="sub-inner"><a href="#">Фруктовый лед</a></li>
                    <li class="sub-inner"><a href="#">Мелорин</a></li>
                  </ul>
                </li>
                <li class="main-inner">
                  <a href="#">Доставка и оплата</a>
                </li>
                <li class="main-inner">
                  <a href="#">О Компании</a>
                </li>
              </ul>
            </nav>
          <div class="user-block">
            <div class="search">
              <a href="#">
                <i class="search-icon"></i>
              </a>
              <div class="search-field">
                <form action="https://echo.htmlacademy.ru/" method="get">
                <div class="input-wrap">
                  <input type="text" name="search" id="search" placeholder="Что ищем?" required>
                  <label for="search">Что ищем?</label>
                </div>
                </form>
              </div>
            </div>
            <div class="login">
              <a href="#">Вход
                <i class="login-icon"></i>
              </a>
              <div class="login-field">
                <form action="https://echo.htmlacademy.ru/" method="post">
                  <div class="input-wrap">
                    <input type="text" name="login" id="login" placeholder="Электронная почта" required>
                    <label for="login">Электронная почта</label>
                  </div>
                  <div class="input-wrap">
                    <input type="password" name="password" id="password" placeholder="Пароль" required>
                    <label for="password">Пароль</label>
                  </div>
                  <button class="btn login-btn" type="submit">Войти</button>
                </form>
                <p><a class="link-black" href="#">Забыли пароль?</a></p>
                <p><a class="link-black" href="#">Новая регистрация</a></p>
              </div>
            </div>
            <div class="cart">
              <a href="#">Пусто
                <i class="cart-icon"></i>
              </a>
            </div>
          </div>
          <div class="call-us">
            <p>С 10 до 20, ежедневно</p>
            <b>8 812 450-25-25</b>
          </div>
        </div>
      </div>
    </header>
    <main>
      <div class="wrapper">
        <div class="container clearfix">
          <div class="slider">
            <div class="slider-inner">
              <div class="slide1">
                <p>Крем-брюле и пломбир с малиновым джемом</p>
                <a class="btn" href="#">Давайте оба!</a>
              </div>
              <div class="slide2">
                <p>Шоколадный пломбир и лимонный шербет</p>
                <a class="btn" href="#">Давайте оба!</a>
              </div>
              <div class="slide3">
                <p>Пломбир с помадкой и клубничный щербет</p>
                <a class="btn" href="#">Давайте оба!</a>
              </div>
            </div>
            <div class="slider-controls">
              <label for="slide1"></label>
              <label for="slide2"></label>
              <label for="slide3"></label>
            </div>
          </div>
          <div class="promo-block clearfix">
            <div class="promo-left">
              <h1>Малинка даром!</h1>
              <p class="promo-text">При покупке 2 кг любого фруктового мороженого, добавим в ваш заказ банку малинового варенья бесплатно.</p>
              <a class="btn promo-btn" href="#">Хочу варенье!</a>
            </div>
            <div class="promo-right">
              <h1>Шоколадки даром!</h1>
              <p>При покупке 2 кг пломбира, добавим в ваш заказ упаковку вкуснейшей шоколадной присыпки совершенно бесплатно.</p>
              <a class="btn promo-btn" href="#">Хочу шоколадки!</a>
            </div>
          </div>
          <section class="items-popular">
            <div class="item">
              <div class="item-hover">
                <a class="btn quick-show" href="#">Быстрый просмотр</a>
              </div>
              <div class="item-img-price"> <!-- Хит продаж #1 -->
                <img class="item-img" src="img/items/jam-citrus.jpg" width="267" height="267" alt="Мороженое Сливочное с апельсиновым джемом и цитрусовой стружкой">
                <p><b>310</b>/кг</p>
              </div>
              <div class="item-link-box">
                <a class="link" href="#">Сливочное с апельсиновым джемом и цитрусовой стружкой</a>
              </div>
            </div>
            <div class="item">
              <div class="item-hover">
                <a class="btn quick-show" href="#">Быстрый просмотр</a>
              </div>
              <div class="item-img-price"> <!-- Хит продаж #2 -->
                <img class="item-img" src="img/items/coffee-chocolate.jpg" width="267" height="267" alt="Мороженое Сливочно-кофейное с кусочками шоколада">
                <p><b>380</b>/кг</p>
                </div>
              <div class="item-link-box">
                <a class="link" href="#">Сливочно-кофейное с кусочками шоколада</a>
              </div>
            </div>
            <div class="item">
              <div class="item-hover">
                <a class="btn quick-show" href="#">Быстрый просмотр</a>
              </div>
              <div class="item-img-price"> <!-- Хит продаж #3 -->
                <img class="item-img" src="img/items/strawberry-chocolate.jpg" width="267" height="267" alt="Мороженое Сливочно-клубничное с присыпкой из белого шоколада">
                <p><b>355</b>/кг</p>
              </div>
              <div class="item-link-box">
                <a class="link" href="#">Сливочно-клубничное с присыпкой из белого шоколада</a>
              </div>
            </div>
            <div class="item">
              <div class="item-hover">
                <a class="btn quick-show" href="#">Быстрый просмотр</a>
              </div>
              <div class="item-img-price"> <!-- Хит продаж #4 -->
                <img class="item-img" src="img/items/cream-caramel.jpg" width="267" height="267" alt="Мороженое Сливочное крем-брюле с карамельной подливкой">
                <p><b>415</b>/кг</p>
              </div>
              <div class="item-link-box">
                <a class="link" href="#">Сливочное крем-брюле с карамельной подливкой</a>
              </div>
            </div>
          </section>
          <div class="advantages clearfix">
            <h1>Магазин Глейси &nbsp;— это онлайн и офлайн магазин по продаже мороженого собственного производства на развес</h1>
            <div class="advantage-left">
              <img class="icon-ice" src="img/icons/ice-icon.svg" width="48" height="48" alt="Мороженко">
              <p>Все наше мороженое изготавливается на собственном производстве, с использованием современного оборудования и проверенных временем технологий.</p>
              <img class="icon-leaf" src="img/icons/leaf-icon.svg" width="48" height="48" alt="Листик">
              <p>Для приготовления мороженого используются настоящие сливки и молоко высочайшего качества. Все дополнительные ингредиенты и добавки произведены из натурального, экологически чистого сырья.</p>
            </div>
            <div class="advantage-right">
              <img class="icon-cow" src="img/icons/cow-icon.svg" width="48" height="48" alt="Корова">
              <p>Закупка ингредиентов производится только у проверенных фермерских хозяйств и компаний, с которыми нас связывает долговременное сотрудничество.</p>
              <img class="icon-temp" src="img/icons/temp-icon.svg" width="48" height="48" alt="Градусник">
              <p>Доставка нашего мороженого до заказчиков осуществляется в специальном термопаке, который не дает мороженому растаять в пути и позволяет ему сохранить свой превосходный вкус.</p>
            </div>
          </div>
          <div class="blog-news">
            <h2>Новое в нашем блоге</h2>
            <p><a href="#">10 способов сервировки фруктовых щербетов к&nbsp;столу</a></p>
          </div>
          <div class="subscribe">
            <div class="subscribe-content-bg">
            <p>Подпишитесь на нашу сладкую рассылку и будете всегда в курсе всего самого вкусного, что у нас происходит. Обещаем не спамить и не слать всякой не нужной ерунды. Честно =)</p>
            <form action="https://echo.htmlacademy.ru/" method="post">
              <button class="btn btn-subscribe" type="submit">Отправить</button>
              <div class="input-email-subscribe-fix">
                <div class="input-wrap">
                  <input type="text" name="email-sub" id="email-sub" placeholder="Электронная почта" required>
                  <label for="email-sub">Электронная почта</label>
                </div>
              </div>
            </form>
            </div>
          </div>
        </div>
      </div>
      <div class="map-block">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1998.6038542528563!2d30.32367173672196!3d59.938715370197784!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4696310fca5ba729%3A0xea9c53d4493c879f!2z0JHQvtC70YzRiNCw0Y8g0JrQvtC90Y7RiNC10L3QvdCw0Y8g0YPQuy4sIDE5LCDQodCw0L3QutGCLdCf0LXRgtC10YDQsdGD0YDQsywgMTkxMTg2!5e0!3m2!1sru!2sru!4v1462126210658"></iframe>
        <div class="wrapper">
          <div class="container clearfix">
            <div class="contacts">
              <p class="address">
                Адрес главного офиса и<br>
                офлайн магазина:
                <b>
                  ул. Большая Конюшенная
                  19/8, Санкт-Петербург
                </b>
              </p>
              <p class="tel">
                Для заказов по телефону:
                <b>8 812 450-25-25</b>
                <span>(с 10 до 20 ежедневно)</span>
              </p>
              <a class="btn feedback-btn" href="feedback.html">Форма обратной связи</a>
            </div>
          </div>
        </div>
      </div>
    </main>
    <footer class="main-footer">
      <div class="wrapper">
        <div class="container clearfix">
          <div class="social-block clearfix">
            <a class="social-btn twit" href="#"></a>
            <a class="social-btn inst" href="#"></a>
            <a class="social-btn fb" href="#"></a>
            <a class="social-btn vk" href="#"></a>
          </div>
          <div class="footer-menu">
            <div class="footer-menu-left">
              <p><a class="link heart" href="#">Для поставщиков</a></p>
              <p><a class="link" href="#">О производстве</a></p>
            </div>
            <div class="footer-menu-right">
              <p><a class="link" href="#">Наши документы</a></p>
              <p><a class="link" href="#">Экологические стандарты</a></p>
            </div>
          </div>
          <div class="made-in">
            <a class="htmla-logo" href="https://htmlacademy.ru/">
              <img src="img/htmla-logo.svg" width="108" height="37" alt="Логотип HTML Academy">
            </a>
            <p>Сделано в <a class="link" href="https://htmlacademy.ru/">HTML Academy</a> &copy; 2016</p>
          </div>
        </div>
      </div>
    </footer>
    <div class="overlay">
      <div class="popup-feedback">
        <p>Мы обязательно вам ответим!</p>
        <form class="form-feedback" action="https://echo.htmlacademy.ru/" method="post">
          <div class="input-wrap">
            <input class="name" type="text" name="name" id="name" placeholder="Как вас зовут?" required>
            <label for="name">Как вас зовут?</label>
          </div>
          <div class="input-wrap">
            <input class="email" type="text" name="email" id="email" placeholder="Ваша почта для ответа?" required>
            <label for="email">Ваша почта для ответа?</label>
          </div>
          <div class="input-wrap">
            <textarea class="comment" name="comment" id="comment" placeholder=" Напишите что-нибудь..." required></textarea>
            <label for="comment">Напишите что-нибудь...</label>
          </div>
          <button class="btn" type="submit">Отправить</button>
        </form>
        <a class="close-btn">Закрыть</a>
      </div>
    </div>
    </div>
    <script src="js/script.min.js"></script>
  </body>
</html>