/
thebeardenis
/
test_task
Обзор
Документация
Войти
/
thebeardenis
/
test_task
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
index.html
220 строк
13 KB
thebeardenis
init
08 июн 2026, 20:03
Верифицирован
08 июн 2026, 20:03
b90ac66
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SHOPGUIDE</title> <link rel="stylesheet" href="css/main.css"> </head> <body> <header class="header"> <ul class="header__socials"> <li class="header__social-item"> <a href="#" class="header__social-link" aria-label="Вконтакте"> <img src="images/header/vk.png" alt="" class="header__icon"> </a> </li> <li class="header__social-item"> <a href="#" class="header__social-link" aria-label="Твиттер"> <img src="images/header/twitter.png" alt="" class="header__icon"> </a> </li> <li class="header__social-item"> <a href="#" class="header__social-link" aria-label="Инстаграм"> <img src="images/header/instagram.png" alt="" class="header__icon"> </a> </li> <li class="header__social-item"> <a href="#" class="header__social-link" aria-label="Фейсбук"> <img src="images/header/facebook.png" alt="" class="header__icon"> </a> </li> <li class="header__social-item"> <a href="#" class="header__social-link" aria-label="Одноклассники"> <img src="images/header/ok.png" alt="" class="header__icon"> </a> </li> </ul> <button class="header__button" type="button">Стать партнером</button> </header> <main> <section class="banner"> <div class="banner__content"> <button class="banner__badge-btn" type="button"> <img src="images/banner/badge.png" alt="" class="banner__badge-img"> </button> <div class="banner__inner-frame"> <div class="banner__title-block"> <h1 class="banner__title">SHOP<span class="banner__title--bold">GUIDE</span></h1> <div class="banner__divider"> <span class="banner__line banner__line--left"></span> <span class="banner__divider-text">загрузить</span> <span class="banner__line banner__line--right"></span> </div> </div> <div class="banner__apps"> <a href="#" class="banner__app-link"> <img src="images/banner/appstore.png" alt="App Store" class="banner__app-img"> </a> <a href="#" class="banner__app-link"> <img src="images/banner/googleplay.png" alt="Google Play" class="banner__app-img"> </a> </div> </div> </div> <div class="banner__phone"> <img src="images/banner/phone.png" alt="" class="banner__phone-body"> <div class="banner__phone-screen"> <img src="images/banner/screen.png" alt=""> </div> </div> <button class="banner__scroll-down" type="button"> <span>вниз</span> <span class="banner__scroll-arrow"></span> <span>вниз</span> </button> </section> <section class="features"> <div class="features__grid"> <div class="features__card feature-card feature-card--1"> <img src="images/features/shape1.png" alt="" class="feature-card__icon feature-card__icon--1"> <div class="feature-card__content feature-card__content--1"> <h3 class="feature-card__title feature-card__title--1">Только лучшие</h3> <p class="feature-card__desc feature-card__desc--1">Всегда актуальные акции у вас в телефоне</p> </div> </div> <div class="features__card feature-card feature-card--2"> <img src="images/features/shape2.png" alt="" class="feature-card__icon feature-card__icon--2"> <div class="feature-card__content feature-card__content--2"> <h3 class="feature-card__title feature-card__title--2">Всегда рядом</h3> <p class="feature-card__desc feature-card__desc--2">Находите ближайшие акции на карте рядом с вами</p> </div> </div> <div class="features__card feature-card feature-card--3"> <img src="images/features/shape3.png" alt="" class="feature-card__icon feature-card__icon--3"> <div class="feature-card__content feature-card__content--3"> <h3 class="feature-card__title feature-card__title--3">Уведомления</h3> <p class="feature-card__desc feature-card__desc--3">Подписывайтесь только на то, что вас интересует и всегда будьте в курсе новых акций.</p> </div> </div> <div class="features__card feature-card feature-card--4"> <img src="images/features/shape4.png" alt="" class="feature-card__icon feature-card__icon--4"> <div class="feature-card__content feature-card__content--4"> <h3 class="feature-card__title feature-card__title--4">Каталог</h3> <p class="feature-card__desc feature-card__desc--4">Огромный каталог с информацией о магазинах, брендах и ТЦ всегда под рукой.</p> </div> </div> </div> </section> <section class="phone-like"> <div class="phone-like__bg"></div> <div class="phone-like__wrapper"> <span class="phone-like__tab phone-like__tab--left">Избранное</span> <div class="phone-like__visual"> <div class="phone-like__mockup"> <img src="images/phone-like/phone.png" alt="" class="phone-like__phone-body"> <div class="phone-like__phone-screen"> <img src="images/phone-like/stock.png" alt=""> </div> </div> <div class="phone-like__shadow"></div> </div> <div class="phone-like__content"> <div class="phone-like__tabs-nav"> <div class="phone-like__tab-wrapper phone-like__tab-wrapper--active"> <span class="phone-like__tab">Профиль акции</span> <span class="phone-like__nav-line"></span> </div> <span class="phone-like__tab">Подписки</span> <span class="phone-like__tab">Карта</span> <span class="phone-like__tab">Моя лента</span> </div> <p class="phone-like__desc"> Вы всегда получите полную информацию об акции: подробное описание, бренд, магазины и торговые центры где проходит акция. <br><br>Также доступна возможность сразу перейти на сайт товара и купить в рамках действующей акции. </p> </div> </div> </section> <section class="stocks"> <div class="stocks__bg"> <div class="container"> <div class="stocks__wrapper"> <div class="stocks__content"> <h2 class="stocks__title">Наши Акции</h2> <p class="stocks__desc"> Каждый день в Москве проходят распродажи. В акциях и скидках дня могут принимать участие любые группы товаров. Особо популярны распродажи одежды и обуви, распродажи мебели, распродажи смуок. </p> </div> <div class="stocks__visual"> <div class="stocks__phone stocks__phone--nexus"> <img src="images/stocks/nexus.png" alt="" class="stocks__phone-img"> </div> <div class="stocks__phone stocks__phone--iphone"> <img src="images/stocks/iphone5.png" alt="" class="stocks__phone-img"> </div> </div> </div> </div> </div> </section> <section class="logos"> <h2 class="logos__title">Наши партнёры</h2> <div class="logos__bar"> <div class="logos__wrapper"> <button class="logos__arrow logos__arrow--left" type="button" aria-label="Назад"> <img src="images/logos/left.png" alt="" class="logos__arrow-img"> </button> <div class="logos__viewport"> <div class="logos__track"> <div class="logos__item logos__item--prada"><img src="images/logos/Prada.png" alt="Prada" class="logos__img"></div> <div class="logos__item logos__item--nike"><img src="images/logos/Nike.png" alt="Nike" class="logos__img"></div> <div class="logos__item logos__item--tsum"><img src="images/logos/TSUM.png" alt="ЦУМ" class="logos__img"></div> <div class="logos__item logos__item--adidas logos__item--active"> <img src="images/logos/Adidas.png" alt="Adidas" class="logos__img"> <img src="images/logos/hyperlink.png" alt="" class="logos__cursor-pointer"> </div> <div class="logos__item logos__item--gum"><img src="images/logos/GUM.png" alt="ГУМ" class="logos__img"></div> <div class="logos__item logos__item--zara"><img src="images/logos/Zara.png" alt="Zara" class="logos__img"></div> <div class="logos__item logos__item--pazolini"><img src="images/logos/Pazolini.png" alt="Pazolini" class="logos__img"></div> </div> </div> <button class="logos__arrow logos__arrow--right" type="button" aria-label="Вперед"> <img src="images/logos/right.png" alt="" class="logos__arrow-img"> </button> </div> </div> <div class="logos__footer"> <div class="container"> <div class="logos__cta-box"> <span class="logos__cta-question">Хотите стать партнёром?</span> <p class="logos__cta-text">Напишите нам и про ваши акции узнают все.</p> </div> <button class="logos__cta-button" type="button">Стать партнером</button> </div> </div> </section> </main> <footer class="footer"> <div class="footer__meta"> <div class="footer__copyright">2016 © SHOPGUIDE</div> <div class="footer__links"> <a href="#" class="footer__link">Политика конфиденциальности</a> <a href="#" class="footer__link">Правила пользования</a> </div> </div> <button class="footer__button" type="button"> <img src="images/footer/message.png" alt="" class="footer__btn-icon"> <span class="footer__btn-text">Связаться с нами</span> </button> </footer> </body> </html>