TPS/elektronika_bagisto
TPS
/
elektronika_bagisto
6
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity
elektronika_bagisto/packages/TPS/Shop/publishable/pages/index.html

2478 lines
126 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="en">
<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>ElektronikaTM</title>
<link rel="stylesheet" href="../assets/styles/swiper-bundle.min.css">
<link rel="stylesheet" href="../assets/styles/swiper-bundle.css">
<link rel="stylesheet" href="../assets/styles/style.css" />
</head>
<body>
<!-- LOGIN/SIGNUP ====================================================================== -->
<section class="sign-up">
<div class="sign-up-container">
<div class="sign-up-wrapper">
<div class="login-form">
<div class="sign-up-title">
<p>Вход</p>
<div class="sign-up-exit-img">
<img src="../assets/icons/cancel.svg" alt="exit">
</div>
</div>
<form class="sign-up-content">
<div class="sign-up-input">
<span>Номер телефона</span>
<div class="dif-input">
<p class="pointer-ev-none">+993</p>
<input class="abs-input" type="text">
</div>
</div>
<div class="sign-up-input">
<span>Пароль</span>
<div class="dif-input">
<input type="password" class="pas">
<div class="reveal">
<img src="../assets/icons/view.svg" alt="hide">
</div>
</div>
</div>
<p class="forgot-pass">Забыли пароль?</p>
<button type="button" class="log-in">Войти</button>
<div class="sign-up-footer">
<span>Если у вас нет профиля</span>
<p class="sign-up-btn">Зарегистрируйтесь.</p>
</div>
</form>
</div>
<div class="login-form registration-form">
<div class="sign-up-title">
<p>Регистрация</p>
<div class="sign-up-exit-img">
<img src="../assets/icons/cancel.svg" alt="exit">
</div>
</div>
<form class="sign-up-content">
<div class="sign-up-input">
<span>Номер телефона</span>
<div class="dif-input">
<p class="pointer-ev-none">+993</p>
<input class="abs-input" type="text">
</div>
</div>
<div class="sign-up-input">
<span>Электронная почта</span>
<div class="dif-input">
<input type="email">
</div>
</div>
<div class="sign-up-input">
<span>Введите пароль</span>
<div class="dif-input">
<input type="password" class="pas2">
<div class="reveal2">
<img src="../assets/icons/view.svg" alt="hide">
</div>
</div>
</div>
<div class="sign-up-input">
<span>Повторите пароль</span>
<div class="dif-input">
<input type="password" class="pas2">
</div>
</div>
<button type="button" class="log-in">Зарегистрироваться</button>
<div class="sign-up-footer">
<span>Уже есть профиль?</span>
<p class="sign-up-btn sign-up-btn-return">Войдите.</p>
</div>
</form>
</div>
<div class="login-form confirm">
<div class="sign-up-title">
<p>Регистрация</p>
<div class="sign-up-exit-img">
<img src="../assets/icons/cancel.svg" alt="exit">
</div>
</div>
<form class="sign-up-content">
<div class="sign-up-input">
<span>Мы отправили SMS с шестизначным кодом подтверждения на номер +993 61 62-63-64</span>
<div class="sign-up-input"></div>
</div>
<div class="sign-up-input">
<span>Код из смс сообщения</span>
<div class="dif-input">
<input type="text">
</div>
</div>
<button type="button" class="log-in">Отправить</button>
<div class="sign-up-footer">
<span>Сообщение не пришло?</span>
<button class="sign-up-btn sign-up-btn-return">Отправить заново.</button>
</div>
</form>
</div>
<div class="login-form password-recovery-nr">
<div class="sign-up-title">
<p>Восстановление пароля</p>
<div class="sign-up-exit-img">
<img src="../assets/icons/cancel.svg" alt="exit">
</div>
</div>
<form class="sign-up-content">
<div class="sign-up-input">
<span>Ваш номер телефона</span>
<div class="dif-input">
<p class="pointer-ev-none">+993</p>
<input class="abs-input" type="text">
</div>
</div>
<button type="button" class="log-in topped sms-trigger">Отправить</button>
</form>
</div>
<div class="login-form password-recovery-sms">
<div class="sign-up-title">
<p>Восстановление пароля</p>
<div class="sign-up-exit-img">
<img src="../assets/icons/cancel.svg" alt="exit">
</div>
</div>
<form class="sign-up-content">
<div class="sign-up-input">
<span>Код из смс сообщения</span>
<div class="dif-input">
<input type="text">
</div>
</div>
<div class="sign-up-input">
<span>Введите новый пароль</span>
<div class="dif-input">
<input type="password">
</div>
</div>
<div class="sign-up-input">
<span>Повторите новый пароль</span>
<div class="dif-input">
<input type="password">
</div>
</div>
<button type="button" class="log-in topped">Отправить</button>
<div class="sign-up-footer">
<span>Сообщение не пришло?</span>
<p class="sign-up-btn resend-sms">Отправить заново.</p>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- LOGIN/SIGNUP end ================================================================== -->
<!-- HEADER ============================================================================ -->
<nav class="header">
<div class="container">
<div class="header-inner no-mobile">
<div class="header-left-side">
<div class="clock-wrapper">
<img src="../assets/icons/clock.svg" alt="clock" />
</div>
<div class="head-left-text-wrapper">
<span class="head-left-text">Пн - Пт: 09:00 - 18:00</span>
<span class="head-left-text-further">Суб: 09:00 - 13:00</span>
</div>
</div>
<div class="header-right-side">
<div class="phone-wrapper">
<img src="../assets/icons/telephone.svg" alt="telephone" />
</div>
<div class="head-right-text-wrapper">
<span class="head-right-text head-left-text">+(993) 60142251</span>
</div>
<div class="language-select">
<div class="flag-wrapper">
<img src="../assets/icons/Flag_of_Russia.svg" alt="Flag of Russia" />
</div>
<div class="language-wrapper">
<span class="language">РУС</span>
<ul class="language-list hidden">
<li class="language-el"><a href="#">Русский</a></li>
<li class="language-el"><a href="#">English</a></li>
<li class="language-el"><a href="#">Türkmençe</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
<header class="nav-block">
<div class="container">
<div class="burger-mobile">
<div class="burger-mobile-inner">
<ul class="burger-list">
<li>
<div class="burger-item-title active">
<span class="burger-item-name">Категории</span>
<div class="arrow black">
<img src="../assets/icons/burger-arrow-black.svg" alt="">
</div>
<div class="arrow white">
<img src="../assets/icons/burger-arrow-white.svg" alt="">
</div>
</div>
<div class="burger-dropdown active">
<ul class="burger-list-inner">
<li>
<div class="burger-item-title-inner">
<span class="burger-item-name">Телефоны и гаджеты
</span>
<div class="arrow black">
<img src="../assets/icons/burger-arrow-black.svg" alt="">
</div>
</div>
<div class="burger-dropdown-inner">
<ul class="burger-list-inner-inner">
<li>
<div class="burger-item-title-inner-inner biti">
<span class="burger-item-name">4K UHD телевизоры</span>
<div class="arrow black">
<img src="../assets/icons/burger-arrow-black.svg" alt="">
</div>
</div>
<div class="burger-dropdown-inner3">
<ul class="burger-list-inner-inner">
<li><a href="#">Lorem, ipsum dolor.</a></li>
<li><a href="#">Lorem, ipsum dolor.</a></li>
<li><a href="#">Lorem, ipsum dolor.</a></li>
<li><a href="#">Lorem, ipsum dolor.</a></li>
</ul>
</div>
</li>
<li>
<div class="burger-item-title-inner-inner biti">
<span class="burger-item-name">4K UHD телевизоры</span>
<div class="arrow black">
<img src="../assets/icons/burger-arrow-black.svg" alt="">
</div>
</div>
<div class="burger-dropdown-inner3">
<ul class="burger-list-inner-inner">
<li><a href="#">Lorem, ipsum dolor.</a></li>
<li><a href="#">Lorem, ipsum dolor.</a></li>
<li><a href="#">Lorem, ipsum dolor.</a></li>
<li><a href="#">Lorem, ipsum dolor.</a></li>
</ul>
</div>
</li>
<li>
<div class="burger-item-title-inner-inner biti">
<span class="burger-item-name">4K UHD телевизоры</span>
<div class="arrow black">
<img src="../assets/icons/burger-arrow-black.svg" alt="">
</div>
</div>
<div class="burger-dropdown-inner3">
<ul class="burger-list-inner-inner">
<li><a href="#">Lorem, ipsum dolor.</a></li>
<li><a href="#">Lorem, ipsum dolor.</a></li>
<li><a href="#">Lorem, ipsum dolor.</a></li>
<li><a href="#">Lorem, ipsum dolor.</a></li>
</ul>
</div>
</li>
<li>
<div class="burger-item-title-inner-inner biti">
<span class="burger-item-name">4K UHD телевизоры</span>
<div class="arrow black">
<img src="../assets/icons/burger-arrow-black.svg" alt="">
</div>
</div>
<div class="burger-dropdown-inner3">
<ul class="burger-list-inner-inner">
<li><a href="#">Lorem, ipsum dolor.</a></li>
<li><a href="#">Lorem, ipsum dolor.</a></li>
<li><a href="#">Lorem, ipsum dolor.</a></li>
<li><a href="#">Lorem, ipsum dolor.</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li>
<div class="burger-item-title-inactive">
<a href="#" class="burger-item-name">Сервисный центр</a>
</div>
</li>
<li>
<div class="burger-item-title-inactive">
<a href="#" class="burger-item-name">Предзаказ</a>
</div>
</li>
<li>
<div class="burger-item-title-inactive burger-sign-in">
<span class="burger-item-name">
<span>Войти</span>
<div class="enter">
<img src="../assets/icons/enter.svg" alt="">
</div>
</span>
</div>
</li>
<li>
<div class="burger-item-title-inactive burger-sign-up">
<span class="burger-item-name">
<span>Зарегистрироваться</span>
<div class="enter">
<img src="../assets/icons/enter.svg" alt="">
</div>
</span>
</div>
</li>
<li>
<div class="burger-item-title">
<div class="burger-item-name lang">
<span>Русский</span>
<div class="burger-lang">
<img src="../assets/icons/Flag_of_Russia.svg" alt="">
</div>
</div>
<div class="arrow black">
<img src="../assets/icons/burger-arrow-black.svg" alt="">
</div>
<div class="arrow white">
<img src="../assets/icons/burger-arrow-white.svg" alt="">
</div>
</div>
<div class="burger-dropdown">
<ul class="burger-list-inner-inner">
<li><a href="#" class="burger-item-name lang lang-second">
<span>Туркменский</span>
<div class="burger-lang">
<img src="../assets/icons/Flag_of_Turkmenistan.svg" alt="">
</div>
</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<div class="nav-inner no-mobile">
<!-- <h1 style="display: none;">Elektronika.tm</h1> -->
<a href="#" class="logo-wrapper">
<img src="../assets/icons/Logo.svg" alt="ElektronikaTM" />
</a>
<div class="search-bar">
<form>
<input type="search" placeholder="Поиск..." />
<button type="button" class="search-button">
<div class="button-content">
<img src="../assets/icons/icon (loop).svg" alt="Search" />
</div>
</button>
</form>
</div>
<div class="nav-buttons">
<div class="login logged-false logged">
<a href="#" class="nav-link">
<div class="icon-wrapper">
<img src="../assets/icons/icon (enter0.svg" alt="login" />
</div>
<span>Войти</span>
</a>
</div>
<div class="login logged-true">
<button type="button" class="nav-link">
<div class="icon-wrapper">
<img src="../assets/icons/user (1).svg" alt="user" />
</div>
<span class="profile-name">Профиль</span>
</button>
</div>
<div class="favorite">
<a href="#" class="nav-link">
<div class="icon-wrapper">
<img src="../assets/icons/icon (love).svg" alt="favorite" />
</div>
<span>Избранное</span>
</a>
</div>
<div class="cart">
<a href="#" class="nav-link">
<div class="icon-wrapper">
<img src="../assets/icons/icon (cart).svg" alt="cart" />
</div>
<span>Корзина</span>
</a>
</div>
<div class="profile-dropdown">
<a href="#" class="profile-block profile">
<div class="user-img">
<img src="../assets/icons/user (2).svg" alt="user">
</div>
<p class="profile-text user-name"></p>
</a>
<div class="horizontal"></div>
<a href="#" class="profile-block history ">
<div class="user-img">
<img src="../assets/icons/writing.svg" alt="pen">
</div>
<p class="profile-text">История заказов</p>
</a>
<div class="horizontal"></div>
<button type="button" class="profile-block logout">
<div class="user-img">
<img src="../assets/icons/logout.svg" alt="Выйти">
</div>
<p class="profile-text">Выйти</p>
</button>
</div>
</div>
</div>
<div class="nav-inner-mobile no-desktop">
<div class="nav-inner-top">
<a href="#" class="nav-link">
<div class="icon-wrapper">
<img src="../assets/icons/icon (love).svg" alt="favorite" />
</div>
</a>
<div class="logo-wrapper-mobile">
<img src="../assets/icons/Logo.svg" alt="ElektronikaTM">
</div>
<a href="#" class="nav-link">
<div class="icon-wrapper">
<img src="../assets/icons/icon (cart).svg" alt="cart" />
</div>
</a>
</div>
<div class="nav-inner-bottom">
<div class="burger">
<span class="line line-1"></span>
<span class="line line-2"></span>
<span class="line line-3"></span>
</div>
<div class="search-bar">
<form>
<input type="search" placeholder="Поиск..." />
<button type="button" class="search-button">
<div class="button-content">
<img src="../assets/icons/icon (loop).svg" alt="Search" />
</div>
</button>
</form>
</div>
</div>
</div>
</div>
</header>
<!-- HEADER end ======================================================================== -->
<!-- TOP HERO ========================================================================== -->
<nav class="top-hero">
<div class="container">
<div class="top-hero-inner no-mobile">
<ul class="link-list">
<li class="service-li active skewed edited">
<p href="#" class="categories">
<div class="burger">
<span class="line line-1"></span>
<span class="line line-2"></span>
<span class="line line-3"></span>
</div>
<span class="link-text white-text">Категории</span>
</p>
</li>
<li class="service-li skewed">
<a href="#">
<span class="link-text">Доставка</span>
</a>
</li>
<li class="service-li skewed">
<a href="#">
<span class="link-text">Сервисный центр</span>
</a>
</li>
<li class="service-li skewed">
<a href="#">
<span class="link-text">Предзаказ</span>
</a>
</li>
<li class="service-li skewed">
<a href="#">
<span class="link-text displaced-text">Помощь по сайту</span>
</a>
</li>
<li>
<div class="cat-dropdown">
<div class="cat-dropdown-inner">
<ul>
<li class="cat-li" ><span>ТВ и мультимедиа</span>
<div class="cat-arrow">
<img src="../assets/icons/arrow-dropdown.svg" alt="arrow">
</div></li>
<li class="cat-li" ><span>Смартфоны и гаджеты</span>
<div class="cat-arrow">
<img src="../assets/icons/arrow-dropdown.svg" alt="arrow">
</div></li>
<li class="cat-li" ><span>Авто товары</span>
<div class="cat-arrow">
<img src="../assets/icons/arrow-dropdown.svg" alt="arrow">
</div></li>
<li class="cat-li" ><span>Техника для дома</span>
<div class="cat-arrow">
<img src="../assets/icons/arrow-dropdown.svg" alt="arrow">
</div></li>
<li class="cat-li" ><span>Техника для кухни</span>
<div class="cat-arrow">
<img src="../assets/icons/arrow-dropdown.svg" alt="arrow">
</div></li>
<li class="cat-li" ><span>Красота и Здоровье</span>
<div class="cat-arrow">
<img src="../assets/icons/arrow-dropdown.svg" alt="arrow">
</div></li>
<li class="cat-li" ><span>Чемоданы Samsonite</span>
<div class="cat-arrow">
<img src="../assets/icons/arrow-dropdown.svg" alt="arrow">
</div></li>
</ul>
</div>
</div>
<div class="cat-data-block" data-img="../assets/images/tv.jpg">
<div class="cat-data">
<ul>
<li><h3 class="data-title">Крупная техника для кухни</h3></li>
<li><span class="data-text">Холодильники и морозильники</span></li>
<li><span class="data-text">Газовые и электроплиты</span></li>
<li><span class="data-text">Посудомоечные машины</span></li>
<li><span class="data-text">Вытяжки</span></li>
<li><span class="data-text">Кулеры для воды</span></li>
<li><span class="data-text">Водонагреватель</span></li>
</ul>
<ul>
<li><h3 class="data-title">Встраиваемая техника</h3></li>
<li><span class="data-text">Варочные панели</span></li>
<li><span class="data-text">Духовые шкафы</span></li>
<li><span class="data-text">Встраиваемые посудомоечные машины</span></li>
<li><span class="data-text">Встраиваемые вытяжки</span></li>
<li><span class="data-text">Встраиваемая микроволновая печь</span></li>
</ul>
<ul>
<li><h3 class="data-title">Кофеварки и кофемашины</h3></li>
<li><span class="data-text">Кофемашины</span></li>
<li><span class="data-text">Кофеварки</span></li>
<li><span class="data-text">Кофемолки</span></li>
</ul>
<ul>
<li><h3 class="data-title">Приготовление пищи</h3></li>
<li><span class="data-text">Блендеры</span></li>
<li><span class="data-text">Микроволновые печи</span></li>
<li><span class="data-text">Мясорубки</span></li>
<li><span class="data-text">Миксеры</span></li>
<li><span class="data-text">Кухонные комбайны</span></li>
<li><span class="data-text">Хлебопечки</span></li>
<li><span class="data-text">Пароварки</span></li>
</ul>
<ul>
<li><h3 class="data-title">Мелкая техника для кухни</h3></li>
<li><span class="data-text">Чайники электрические</span></li>
<li><span class="data-text">Соковыжималки</span></li>
<li><span class="data-text">Сушилки для овощей и фруктов</span></li>
<li><span class="data-text">Вафельницы</span></li>
<li><span class="data-text">Тостеры и сэндвич-тостеры</span></li>
<li><span class="data-text">Кухонные весы</span></li>
<li><span class="data-text">Посуда</span></li>
<li><span class="data-text">Ломтерезки</span></li>
<li><span class="data-text">Вакуумный упаковщик</span></li>
<li><span class="data-text">Пакеты для вакуумирования</span></li>
<li><span class="data-text">Подогреватель-стерилизатор</span></li>
<li><span class="data-text">Открывалка</span></li>
<li><span class="data-text">Измельчитель</span></li>
<li><span class="data-text">Генератор льда</span></li>
</ul>
</div>
</div>
<div class="cat-data-block" data-img="../assets/images/gadget.jpg">
<div class="cat-data">
<ul>
<li><h3 class="data-title">Крупная техника для кухни</h3></li>
<li><span class="data-text">Холодильники и морозильники</span></li>
<li><span class="data-text">Газовые и электроплиты</span></li>
<li><span class="data-text">Посудомоечные машины</span></li>
<li><span class="data-text">Вытяжки</span></li>
<li><span class="data-text">Кулеры для воды</span></li>
<li><span class="data-text">Водонагреватель</span></li>
</ul>
<ul>
<li><h3 class="data-title">Встраиваемая техника</h3></li>
<li><span class="data-text">Варочные панели</span></li>
<li><span class="data-text">Духовые шкафы</span></li>
<li><span class="data-text">Встраиваемые посудомоечные машины</span></li>
<li><span class="data-text">Встраиваемые вытяжки</span></li>
<li><span class="data-text">Встраиваемая микроволновая печь</span></li>
</ul>
<ul>
<li><h3 class="data-title">Кофеварки и кофемашины</h3></li>
<li><span class="data-text">Кофемашины</span></li>
<li><span class="data-text">Кофеварки</span></li>
<li><span class="data-text">Кофемолки</span></li>
</ul>
<ul>
<li><h3 class="data-title">Приготовление пищи</h3></li>
<li><span class="data-text">Блендеры</span></li>
<li><span class="data-text">Микроволновые печи</span></li>
<li><span class="data-text">Мясорубки</span></li>
<li><span class="data-text">Миксеры</span></li>
<li><span class="data-text">Кухонные комбайны</span></li>
<li><span class="data-text">Хлебопечки</span></li>
<li><span class="data-text">Пароварки</span></li>
</ul>
<ul>
<li><h3 class="data-title">Мелкая техника для кухни</h3></li>
<li><span class="data-text">Чайники электрические</span></li>
<li><span class="data-text">Соковыжималки</span></li>
<li><span class="data-text">Сушилки для овощей и фруктов</span></li>
<li><span class="data-text">Вафельницы</span></li>
<li><span class="data-text">Тостеры и сэндвич-тостеры</span></li>
<li><span class="data-text">Кухонные весы</span></li>
<li><span class="data-text">Посуда</span></li>
<li><span class="data-text">Ломтерезки</span></li>
<li><span class="data-text">Вакуумный упаковщик</span></li>
<li><span class="data-text">Пакеты для вакуумирования</span></li>
<li><span class="data-text">Подогреватель-стерилизатор</span></li>
<li><span class="data-text">Открывалка</span></li>
<li><span class="data-text">Измельчитель</span></li>
<li><span class="data-text">Генератор льда</span></li>
</ul>
</div>
</div>
<div class="cat-data-block" data-img="../assets/images/auto.jpg">
<div class="cat-data">
<ul>
<li><h3 class="data-title">Крупная техника для кухни</h3></li>
<li><span class="data-text">Холодильники и морозильники</span></li>
<li><span class="data-text">Газовые и электроплиты</span></li>
<li><span class="data-text">Посудомоечные машины</span></li>
<li><span class="data-text">Вытяжки</span></li>
<li><span class="data-text">Кулеры для воды</span></li>
<li><span class="data-text">Водонагреватель</span></li>
</ul>
<ul>
<li><h3 class="data-title">Встраиваемая техника</h3></li>
<li><span class="data-text">Варочные панели</span></li>
<li><span class="data-text">Духовые шкафы</span></li>
<li><span class="data-text">Встраиваемые посудомоечные машины</span></li>
<li><span class="data-text">Встраиваемые вытяжки</span></li>
<li><span class="data-text">Встраиваемая микроволновая печь</span></li>
</ul>
<ul>
<li><h3 class="data-title">Кофеварки и кофемашины</h3></li>
<li><span class="data-text">Кофемашины</span></li>
<li><span class="data-text">Кофеварки</span></li>
<li><span class="data-text">Кофемолки</span></li>
</ul>
<ul>
<li><h3 class="data-title">Приготовление пищи</h3></li>
<li><span class="data-text">Блендеры</span></li>
<li><span class="data-text">Микроволновые печи</span></li>
<li><span class="data-text">Мясорубки</span></li>
<li><span class="data-text">Миксеры</span></li>
<li><span class="data-text">Кухонные комбайны</span></li>
<li><span class="data-text">Хлебопечки</span></li>
<li><span class="data-text">Пароварки</span></li>
</ul>
<ul>
<li><h3 class="data-title">Мелкая техника для кухни</h3></li>
<li><span class="data-text">Чайники электрические</span></li>
<li><span class="data-text">Соковыжималки</span></li>
<li><span class="data-text">Сушилки для овощей и фруктов</span></li>
<li><span class="data-text">Вафельницы</span></li>
<li><span class="data-text">Тостеры и сэндвич-тостеры</span></li>
<li><span class="data-text">Кухонные весы</span></li>
<li><span class="data-text">Посуда</span></li>
<li><span class="data-text">Ломтерезки</span></li>
<li><span class="data-text">Вакуумный упаковщик</span></li>
<li><span class="data-text">Пакеты для вакуумирования</span></li>
<li><span class="data-text">Подогреватель-стерилизатор</span></li>
<li><span class="data-text">Открывалка</span></li>
<li><span class="data-text">Измельчитель</span></li>
<li><span class="data-text">Генератор льда</span></li>
</ul>
</div>
</div>
<div class="cat-data-block" data-img="../assets/images/computer.jpg">
<div class="cat-data">
<ul>
<li><h3 class="data-title">Крупная техника для кухни</h3></li>
<li><span class="data-text">Холодильники и морозильники</span></li>
<li><span class="data-text">Газовые и электроплиты</span></li>
<li><span class="data-text">Посудомоечные машины</span></li>
<li><span class="data-text">Вытяжки</span></li>
<li><span class="data-text">Кулеры для воды</span></li>
<li><span class="data-text">Водонагреватель</span></li>
</ul>
<ul>
<li><h3 class="data-title">Встраиваемая техника</h3></li>
<li><span class="data-text">Варочные панели</span></li>
<li><span class="data-text">Духовые шкафы</span></li>
<li><span class="data-text">Встраиваемые посудомоечные машины</span></li>
<li><span class="data-text">Встраиваемые вытяжки</span></li>
<li><span class="data-text">Встраиваемая микроволновая печь</span></li>
</ul>
<ul>
<li><h3 class="data-title">Кофеварки и кофемашины</h3></li>
<li><span class="data-text">Кофемашины</span></li>
<li><span class="data-text">Кофеварки</span></li>
<li><span class="data-text">Кофемолки</span></li>
</ul>
<ul>
<li><h3 class="data-title">Приготовление пищи</h3></li>
<li><span class="data-text">Блендеры</span></li>
<li><span class="data-text">Микроволновые печи</span></li>
<li><span class="data-text">Мясорубки</span></li>
<li><span class="data-text">Миксеры</span></li>
<li><span class="data-text">Кухонные комбайны</span></li>
<li><span class="data-text">Хлебопечки</span></li>
<li><span class="data-text">Пароварки</span></li>
</ul>
<ul>
<li><h3 class="data-title">Мелкая техника для кухни</h3></li>
<li><span class="data-text">Чайники электрические</span></li>
<li><span class="data-text">Соковыжималки</span></li>
<li><span class="data-text">Сушилки для овощей и фруктов</span></li>
<li><span class="data-text">Вафельницы</span></li>
<li><span class="data-text">Тостеры и сэндвич-тостеры</span></li>
<li><span class="data-text">Кухонные весы</span></li>
<li><span class="data-text">Посуда</span></li>
<li><span class="data-text">Ломтерезки</span></li>
<li><span class="data-text">Вакуумный упаковщик</span></li>
<li><span class="data-text">Пакеты для вакуумирования</span></li>
<li><span class="data-text">Подогреватель-стерилизатор</span></li>
<li><span class="data-text">Открывалка</span></li>
<li><span class="data-text">Измельчитель</span></li>
<li><span class="data-text">Генератор льда</span></li>
</ul>
</div>
</div>
<div class="cat-data-block" data-img="../assets/images/home.jpg">
<div class="cat-data">
<ul>
<li><h3 class="data-title">Крупная техника для кухни</h3></li>
<li><span class="data-text">Холодильники и морозильники</span></li>
<li><span class="data-text">Газовые и электроплиты</span></li>
<li><span class="data-text">Посудомоечные машины</span></li>
<li><span class="data-text">Вытяжки</span></li>
<li><span class="data-text">Кулеры для воды</span></li>
<li><span class="data-text">Водонагреватель</span></li>
</ul>
<ul>
<li><h3 class="data-title">Встраиваемая техника</h3></li>
<li><span class="data-text">Варочные панели</span></li>
<li><span class="data-text">Духовые шкафы</span></li>
<li><span class="data-text">Встраиваемые посудомоечные машины</span></li>
<li><span class="data-text">Встраиваемые вытяжки</span></li>
<li><span class="data-text">Встраиваемая микроволновая печь</span></li>
</ul>
<ul>
<li><h3 class="data-title">Кофеварки и кофемашины</h3></li>
<li><span class="data-text">Кофемашины</span></li>
<li><span class="data-text">Кофеварки</span></li>
<li><span class="data-text">Кофемолки</span></li>
</ul>
<ul>
<li><h3 class="data-title">Приготовление пищи</h3></li>
<li><span class="data-text">Блендеры</span></li>
<li><span class="data-text">Микроволновые печи</span></li>
<li><span class="data-text">Мясорубки</span></li>
<li><span class="data-text">Миксеры</span></li>
<li><span class="data-text">Кухонные комбайны</span></li>
<li><span class="data-text">Хлебопечки</span></li>
<li><span class="data-text">Пароварки</span></li>
</ul>
<ul>
<li><h3 class="data-title">Мелкая техника для кухни</h3></li>
<li><span class="data-text">Чайники электрические</span></li>
<li><span class="data-text">Соковыжималки</span></li>
<li><span class="data-text">Сушилки для овощей и фруктов</span></li>
<li><span class="data-text">Вафельницы</span></li>
<li><span class="data-text">Тостеры и сэндвич-тостеры</span></li>
<li><span class="data-text">Кухонные весы</span></li>
<li><span class="data-text">Посуда</span></li>
<li><span class="data-text">Ломтерезки</span></li>
<li><span class="data-text">Вакуумный упаковщик</span></li>
<li><span class="data-text">Пакеты для вакуумирования</span></li>
<li><span class="data-text">Подогреватель-стерилизатор</span></li>
<li><span class="data-text">Открывалка</span></li>
<li><span class="data-text">Измельчитель</span></li>
<li><span class="data-text">Генератор льда</span></li>
</ul>
</div>
</div>
<div class="cat-data-block" data-img="../assets/images/kitchen.jpg">
<div class="cat-data">
<ul>
<li><h3 class="data-title">Крупная техника для кухни</h3></li>
<li><span class="data-text">Холодильники и морозильники</span></li>
<li><span class="data-text">Газовые и электроплиты</span></li>
<li><span class="data-text">Посудомоечные машины</span></li>
<li><span class="data-text">Вытяжки</span></li>
<li><span class="data-text">Кулеры для воды</span></li>
<li><span class="data-text">Водонагреватель</span></li>
</ul>
<ul>
<li><h3 class="data-title">Встраиваемая техника</h3></li>
<li><span class="data-text">Варочные панели</span></li>
<li><span class="data-text">Духовые шкафы</span></li>
<li><span class="data-text">Встраиваемые посудомоечные машины</span></li>
<li><span class="data-text">Встраиваемые вытяжки</span></li>
<li><span class="data-text">Встраиваемая микроволновая печь</span></li>
</ul>
<ul>
<li><h3 class="data-title">Кофеварки и кофемашины</h3></li>
<li><span class="data-text">Кофемашины</span></li>
<li><span class="data-text">Кофеварки</span></li>
<li><span class="data-text">Кофемолки</span></li>
</ul>
<ul>
<li><h3 class="data-title">Приготовление пищи</h3></li>
<li><span class="data-text">Блендеры</span></li>
<li><span class="data-text">Микроволновые печи</span></li>
<li><span class="data-text">Мясорубки</span></li>
<li><span class="data-text">Миксеры</span></li>
<li><span class="data-text">Кухонные комбайны</span></li>
<li><span class="data-text">Хлебопечки</span></li>
<li><span class="data-text">Пароварки</span></li>
</ul>
<ul>
<li><h3 class="data-title">Мелкая техника для кухни</h3></li>
<li><span class="data-text">Чайники электрические</span></li>
<li><span class="data-text">Соковыжималки</span></li>
<li><span class="data-text">Сушилки для овощей и фруктов</span></li>
<li><span class="data-text">Вафельницы</span></li>
<li><span class="data-text">Тостеры и сэндвич-тостеры</span></li>
<li><span class="data-text">Кухонные весы</span></li>
<li><span class="data-text">Посуда</span></li>
<li><span class="data-text">Ломтерезки</span></li>
<li><span class="data-text">Вакуумный упаковщик</span></li>
<li><span class="data-text">Пакеты для вакуумирования</span></li>
<li><span class="data-text">Подогреватель-стерилизатор</span></li>
<li><span class="data-text">Открывалка</span></li>
<li><span class="data-text">Измельчитель</span></li>
<li><span class="data-text">Генератор льда</span></li>
</ul>
</div>
</div>
<div class="cat-data-block" data-img="../assets/images/samsonite.jpg">
<div class="cat-data">
<ul>
<li><h3 class="data-title">Крупная техника для кухни</h3></li>
<li><span class="data-text">Холодильники и морозильники</span></li>
<li><span class="data-text">Газовые и электроплиты</span></li>
<li><span class="data-text">Посудомоечные машины</span></li>
<li><span class="data-text">Вытяжки</span></li>
<li><span class="data-text">Кулеры для воды</span></li>
<li><span class="data-text">Водонагреватель</span></li>
</ul>
<ul>
<li><h3 class="data-title">Встраиваемая техника</h3></li>
<li><span class="data-text">Варочные панели</span></li>
<li><span class="data-text">Духовые шкафы</span></li>
<li><span class="data-text">Встраиваемые посудомоечные машины</span></li>
<li><span class="data-text">Встраиваемые вытяжки</span></li>
<li><span class="data-text">Встраиваемая микроволновая печь</span></li>
</ul>
<ul>
<li><h3 class="data-title">Кофеварки и кофемашины</h3></li>
<li><span class="data-text">Кофемашины</span></li>
<li><span class="data-text">Кофеварки</span></li>
<li><span class="data-text">Кофемолки</span></li>
</ul>
<ul>
<li><h3 class="data-title">Приготовление пищи</h3></li>
<li><span class="data-text">Блендеры</span></li>
<li><span class="data-text">Микроволновые печи</span></li>
<li><span class="data-text">Мясорубки</span></li>
<li><span class="data-text">Миксеры</span></li>
<li><span class="data-text">Кухонные комбайны</span></li>
<li><span class="data-text">Хлебопечки</span></li>
<li><span class="data-text">Пароварки</span></li>
</ul>
<ul>
<li><h3 class="data-title">Мелкая техника для кухни</h3></li>
<li><span class="data-text">Чайники электрические</span></li>
<li><span class="data-text">Соковыжималки</span></li>
<li><span class="data-text">Сушилки для овощей и фруктов</span></li>
<li><span class="data-text">Вафельницы</span></li>
<li><span class="data-text">Тостеры и сэндвич-тостеры</span></li>
<li><span class="data-text">Кухонные весы</span></li>
<li><span class="data-text">Посуда</span></li>
<li><span class="data-text">Ломтерезки</span></li>
<li><span class="data-text">Вакуумный упаковщик</span></li>
<li><span class="data-text">Пакеты для вакуумирования</span></li>
<li><span class="data-text">Подогреватель-стерилизатор</span></li>
<li><span class="data-text">Открывалка</span></li>
<li><span class="data-text">Измельчитель</span></li>
<li><span class="data-text">Генератор льда</span></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<div class="top-hero-inner-mobile no-desktop">
<ul class="link-list-mobile">
<li><a href="#">Телевизоры</a></li>
<li><a href="#">Аудио, видео и Hi-Fi техника</a></li>
<li><a href="#">Смартфоны, мобильные телефоны</a></li>
<li><a href="#">Аксессуары для ТВ, аудио, видео</a></li>
</ul>
</div>
</div>
</nav>
<!-- TOP HERO end ====================================================================== -->
<!-- HERO ============================================================================== -->
<section class="hero">
<div class="container hero-inner">
<!-- SLIDER 1======================================================= -->
<div class="slider slider-initial">
<!-- Slider main container -->
<div class="swiper-container mySwiper slider1">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<img src="../assets/images/Samsung Banner.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="../assets/images/Samsung Banner.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="../assets/images/Samsung Banner.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="../assets/images/Samsung Banner.jpg" alt="" />
</div>
</div>
<!-- If we need navigation buttons -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
<!-- SLIDER 1 end================================================== -->
<!-- SLIDER 2 ===================================================== -->
<div class="slider slider2">
<!-- Slider main container -->
<div class="swiper-container mySwiper1 slider2">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide swiper-slide2">
<div class="card">
<div class="card-discount-img">
<img src="../assets/icons/BG.svg" alt="" />
</div>
<p class="card-discount-text">10%</p>
<div class="card-wrapper">
<h3 class="card-title">Товар недели</h3>
<div class="card-timer">
<div class="card-timer-clock">
<img src="../assets/icons/icon (timer).svg" alt="timer" />
</div>
<div id="card-timer-div">13 : 19 : 20</div>
</div>
</div>
<div class="card-img">
<img src="../assets/images/Picture (Samsung S21 Ultra).jpg" alt="samsungphone" />
</div>
<div class="card-wrapper">
<p class="card-subtitle">Galaxy S21 Ultra 5G</p>
<div class="card-rating">
<div class="card-rating-img">
<img src="../assets/icons/icon (star).svg" alt="rating" />
</div>
<p class="card-rating-text">4.5</p>
</div>
<div class="card-price">
<div class="card-price-desc">
<p class="sale">Акция</p>
<p class="card-price-old">20 000 TMT</p>
<p class="card-price-new">18 500 TMT</p>
</div>
<button class="card-price-cart" type="button">
<img src="../assets/icons/icon (cart) 2.svg" alt="cart" />
</button>
</div>
</div>
</div>
</div>
<div class="swiper-slide swiper-slide2">
<div class="card">
<div class="card-discount-img">
<img src="../assets/icons/BG.svg" alt="" />
</div>
<p class="card-discount-text">10%</p>
<div class="card-wrapper">
<h3 class="card-title">Товар недели</h3>
<div class="card-timer">
<div class="card-timer-clock">
<img src="../assets/icons/icon (timer).svg" alt="timer" />
</div>
<div id="card-timer-div">13 : 19 : 20</div>
</div>
</div>
<div class="card-img">
<img src="../assets/images/Picture (Samsung S21 Ultra).jpg" alt="samsungphone" />
</div>
<div class="card-wrapper">
<p class="card-subtitle">Galaxy S21 Ultra 5G</p>
<div class="card-rating">
<div class="card-rating-img">
<img src="../assets/icons/icon (star).svg" alt="rating" />
</div>
<p class="card-rating-text">4.5</p>
</div>
<div class="card-price">
<div class="card-price-desc">
<p class="sale">Акция</p>
<p class="card-price-old">20 000 TMT</p>
<p class="card-price-new">18 500 TMT</p>
</div>
<button class="card-price-cart" type="button">
<img src="../assets/icons/icon (cart) 2.svg" alt="cart" />
</button>
</div>
</div>
<div class="card-dicount"></div>
</div>
</div>
<div class="swiper-slide swiper-slide2">
<div class="card">
<div class="card-discount-img">
<img src="../assets/icons/BG.svg" alt="" />
</div>
<p class="card-discount-text">10%</p>
<div class="card-wrapper">
<h3 class="card-title">Товар недели</h3>
<div class="card-timer">
<div class="card-timer-clock">
<img src="../assets/icons/icon (timer).svg" alt="timer" />
</div>
<div id="card-timer-div">13 : 19 : 20</div>
</div>
</div>
<div class="card-img">
<img src="../assets/images/Picture (Samsung S21 Ultra).jpg" alt="samsungphone" />
</div>
<div class="card-wrapper">
<p class="card-subtitle">Galaxy S21 Ultra 5G</p>
<div class="card-rating">
<div class="card-rating-img">
<img src="../assets/icons/icon (star).svg" alt="rating" />
</div>
<p class="card-rating-text">4.5</p>
</div>
<div class="card-price">
<div class="card-price-desc">
<p class="sale">Акция</p>
<p class="card-price-old">20 000 TMT</p>
<p class="card-price-new">18 500 TMT</p>
</div>
<button class="card-price-cart" type="button">
<img src="../assets/icons/icon (cart) 2.svg" alt="cart" />
</button>
</div>
</div>
<div class="card-dicount"></div>
</div>
</div>
<div class="swiper-slide swiper-slide2">
<div class="card">
<div class="card-discount-img">
<img src="../assets/icons/BG.svg" alt="" />
</div>
<p class="card-discount-text">10%</p>
<div class="card-wrapper">
<h3 class="card-title">Товар недели</h3>
<div class="card-timer">
<div class="card-timer-clock">
<img src="../assets/icons/icon (timer).svg" alt="timer" />
</div>
<div id="card-timer-div">13 : 19 : 20</div>
</div>
</div>
<div class="card-img">
<img src="../assets/images/Picture (Samsung S21 Ultra).jpg" alt="samsungphone" />
</div>
<div class="card-wrapper">
<p class="card-subtitle">Galaxy S21 Ultra 5G</p>
<div class="card-rating">
<div class="card-rating-img">
<img src="../assets/icons/icon (star).svg" alt="rating" />
</div>
<p class="card-rating-text">4.5</p>
</div>
<div class="card-price">
<div class="card-price-desc">
<p class="sale">Акция</p>
<p class="card-price-old">20 000 TMT</p>
<p class="card-price-new">18 500 TMT</p>
</div>
<button class="card-price-cart" type="button">
<img src="../assets/icons/icon (cart) 2.svg" alt="cart" />
</button>
</div>
</div>
<div class="card-dicount"></div>
</div>
</div>
</div>
<div class="swiper-button-next swiper-button-next-2"></div>
<div class="swiper-button-prev swiper-button-prev-2"></div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
<!-- SLIDER 2 end ================================================= -->
<!-- MOBILE -->
<div class="card-container-mobile no-desktop">
<div class="card_outer">
<div class="card_inner">
<div class="card">
<div class="card-discount-img">
<img src="../assets/icons/BG.svg" alt="" />
</div>
<p class="card-discount-text">10%</p>
<div class="card-wrapper">
<h3 class="card-title">Товар недели</h3>
<div class="card-timer">
<div class="card-timer-clock">
<img src="../assets/icons/icon (timer).svg" alt="timer" />
</div>
<div id="card-timer-div">13 : 19 : 20</div>
</div>
</div>
<div class="card-img">
<img src="../assets/images/Picture (Samsung S21 Ultra).jpg" alt="samsungphone" />
</div>
<div class="card-wrapper">
<p class="card-subtitle">Galaxy S21 Ultra 5G</p>
<div class="card-rating">
<div class="card-rating-img">
<img src="../assets/icons/icon (star).svg" alt="rating" />
</div>
<p class="card-rating-text">4.5</p>
</div>
<div class="card-price">
<div class="card-price-desc">
<p class="card-price-old">20 000 TMT</p>
<p class="card-price-new">18 500 TMT</p>
</div>
<button class="card-price-cart" type="button">
<img src="../assets/icons/icon (cart) 2.svg" alt="cart" />
</button>
</div>
</div>
</div>
<div class="card">
<div class="card-discount-img">
<img src="../assets/icons/BG.svg" alt="" />
</div>
<p class="card-discount-text">10%</p>
<div class="card-wrapper">
<h3 class="card-title">Товар недели</h3>
<div class="card-timer">
<div class="card-timer-clock">
<img src="../assets/icons/icon (timer).svg" alt="timer" />
</div>
<div id="card-timer-div">13 : 19 : 20</div>
</div>
</div>
<div class="card-img">
<img src="../assets/images/Picture (Samsung S21 Ultra).jpg" alt="samsungphone" />
</div>
<div class="card-wrapper">
<p class="card-subtitle">Galaxy S21 Ultra 5G</p>
<div class="card-rating">
<div class="card-rating-img">
<img src="../assets/icons/icon (star).svg" alt="rating" />
</div>
<p class="card-rating-text">4.5</p>
</div>
<div class="card-price">
<div class="card-price-desc">
<p class="card-price-old">20 000 TMT</p>
<p class="card-price-new">18 500 TMT</p>
</div>
<button class="card-price-cart" type="button">
<img src="../assets/icons/icon (cart) 2.svg" alt="cart" />
</button>
</div>
</div>
</div>
<div class="card">
<div class="card-discount-img">
<img src="../assets/icons/BG.svg" alt="" />
</div>
<p class="card-discount-text">10%</p>
<div class="card-wrapper">
<h3 class="card-title">Товар недели</h3>
<div class="card-timer">
<div class="card-timer-clock">
<img src="../assets/icons/icon (timer).svg" alt="timer" />
</div>
<div id="card-timer-div">13 : 19 : 20</div>
</div>
</div>
<div class="card-img">
<img src="../assets/images/Picture (Samsung S21 Ultra).jpg" alt="samsungphone" />
</div>
<div class="card-wrapper">
<p class="card-subtitle">Galaxy S21 Ultra 5G</p>
<div class="card-rating">
<div class="card-rating-img">
<img src="../assets/icons/icon (star).svg" alt="rating" />
</div>
<p class="card-rating-text">4.5</p>
</div>
<div class="card-price">
<div class="card-price-desc">
<p class="card-price-old">20 000 TMT</p>
<p class="card-price-new">18 500 TMT</p>
</div>
<button class="card-price-cart" type="button">
<img src="../assets/icons/icon (cart) 2.svg" alt="cart" />
</button>
</div>
</div>
</div>
<div class="card">
<div class="card-discount-img">
<img src="../assets/icons/BG.svg" alt="" />
</div>
<p class="card-discount-text">10%</p>
<div class="card-wrapper">
<h3 class="card-title">Товар недели</h3>
<div class="card-timer">
<div class="card-timer-clock">
<img src="../assets/icons/icon (timer).svg" alt="timer" />
</div>
<div id="card-timer-div">13 : 19 : 20</div>
</div>
</div>
<div class="card-img">
<img src="../assets/images/Picture (Samsung S21 Ultra).jpg" alt="samsungphone" />
</div>
<div class="card-wrapper">
<p class="card-subtitle">Galaxy S21 Ultra 5G</p>
<div class="card-rating">
<div class="card-rating-img">
<img src="../assets/icons/icon (star).svg" alt="rating" />
</div>
<p class="card-rating-text">4.5</p>
</div>
<div class="card-price">
<div class="card-price-desc">
<p class="card-price-old">20 000 TMT</p>
<p class="card-price-new">18 500 TMT</p>
</div>
<button class="card-price-cart" type="button">
<img src="../assets/icons/icon (cart) 2.svg" alt="cart" />
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- HERO end ========================================================================== -->
<!-- ITEM GALLERY / NEW ITEMS ===============================================================-->
<main class="item-gallery container">
<!-- <div class="container"> -->
<div class="gal-inner">
<div class="item-gallery-inner mb">
<div class="item-gallery-title">
<h2>Лидеры Продаж</h2>
</div>
<div class="item-gallery-wrapper">
<div class="item-gallery-block">
<span class="item-gallery-head">Новый</span>
<button type="button" class="item-gallery-fav">
<div>
<img src="../assets/icons/heart.svg" alt="fav">
</div>
</button>
<div class="item-gallery-img">
<img src="../assets/images/xiaomi.jpg" alt="xiaomiphone" />
</div>
<div class="item-gallery-block-bottom">
<p class="item-gallery-name">
Смартфон Xiaomi Redmi 9 4+64GB Carbon Grey
</p>
<div class="item-gallery-rating">
<div class="item-gallery-rating-img">
<img src="../assets/icons/icon (star).svg" alt="star" />
</div>
<p class="item-gallery-rating-text">4.5</p>
<p class="item-gallery-rating-feed">22 отзыва</p>
</div>
<div class="item-gallery-price">
<p class="item-gallery-price-new">18 500 TMT</p>
</div>
<div class="item-gallery-cart">
<button>
<div class="item-gallery-cart-img">
<img src="../assets/icons/icon (cart) 2.svg" alt="cart" />
</div>
<h3 class="item-gallery-cart-text">В корзину</h3>
</button>
</div>
<button class="empty-button">
Нет в наличии
</button>
</div>
</div>
<div class="item-gallery-block">
<span class="item-gallery-head">Новый</span>
<button type="button" class="item-gallery-fav">
<div>
<img src="../assets/icons/heart.svg" alt="fav">
</div>
</button>
<div class="item-gallery-img">
<img src="../assets/images/washingmachine.png" alt="washingmachine" />
</div>
<div class="item-gallery-block-bottom">
<p class="item-gallery-name">
Стиральная машина WW70R42PXSSDLD Samsung
</p>
<div class="item-gallery-rating">
<div class="item-gallery-rating-img">
<img src="../assets/icons/icon (star).svg" alt="star" />
</div>
<p class="item-gallery-rating-text">4.2</p>
<p class="item-gallery-rating-feed">16 отзывов</p>
</div>
<div class="item-gallery-price">
<p class="item-gallery-price-new">15 575 TMT</p>
</div>
<div class="item-gallery-cart">
<button>
<div class="item-gallery-cart-img">
<img src="../assets/icons/icon (cart) 2.svg" alt="cart" />
</div>
<h3 class="item-gallery-cart-text">В корзину</h3>
</button>
</div>
<button class="empty-button">
Нет в наличии
</button>
</div>
</div>
<div class="item-gallery-block">
<span class="item-gallery-head">Новый</span>
<button type="button" class="item-gallery-fav">
<div>
<img src="../assets/icons/heart.svg" alt="fav">
</div>
</button>
<div class="item-gallery-img">
<img src="../assets/images/iron.png" alt="iron" />
</div>
<div class="item-gallery-block-bottom">
<p class="item-gallery-name">
Philips <br />
PSG7014/10
</p>
<div class="item-gallery-rating">
<div class="item-gallery-rating-img">
<img src="../assets/icons/icon (star).svg" alt="star" />
</div>
<p class="item-gallery-rating-text">4.5</p>
<p class="item-gallery-rating-feed">16 отзывов</p>
</div>
<div class="item-gallery-price">
<p class="item-gallery-price-new">8 575 TMT</p>
</div>
<div class="item-gallery-cart">
<button>
<div class="item-gallery-cart-img">
<img src="../assets/icons/icon (cart) 2.svg" alt="cart" />
</div>
<h3 class="item-gallery-cart-text">В корзину</h3>
</button>
</div>
<button class="empty-button">
Нет в наличии
</button>
</div>
</div>
<div class="item-gallery-block">
<span class="item-gallery-head">Новый</span>
<button type="button" class="item-gallery-fav">
<div>
<img src="../assets/icons/heart.svg" alt="fav">
</div>
</button>
<div class="item-gallery-img">
<img src="../assets/images/samsungphone.png" alt="samsungphone" />
</div>
<div class="item-gallery-block-bottom">
<p class="item-gallery-name">
Samsung Galaxy S21 <br />
Ultra 5G
</p>
<div class="item-gallery-rating">
<div class="item-gallery-rating-img">
<img src="../assets/icons/icon (star).svg" alt="star" />
</div>
<p class="item-gallery-rating-text">4.7</p>
<p class="item-gallery-rating-feed">12 отзывов</p>
</div>
<div class="item-gallery-price">
<p class="item-gallery-price-new">36 200 TMT</p>
</div>
<div class="item-gallery-cart">
<button>
<div class="item-gallery-cart-img">
<img src="../assets/icons/icon (cart) 2.svg" alt="cart" />
</div>
<h3 class="item-gallery-cart-text">В корзину</h3>
</button>
</div>
<button class="empty-button">
Нет в наличии
</button>
</div>
</div>
<div class="item-gallery-block item-gallery-block-deleted">
<span class="item-gallery-head">Новый</span>
<button type="button" class="item-gallery-fav">
<div>
<img src="../assets/icons/heart.svg" alt="fav">
</div>
</button>
<div class="item-gallery-img">
<img src="../assets/images/sharptv.png" alt="sharptv" />
</div>
<div class="item-gallery-block-bottom">
<p class="item-gallery-name">
Телевизор LC-32LE280X Sharp 32" (81 cm)
</p>
<div class="item-gallery-rating">
<div class="item-gallery-rating-img">
<img src="../assets/icons/icon (star).svg" alt="star" />
</div>
<p class="item-gallery-rating-text">4.0</p>
<p class="item-gallery-rating-feed">8 отзывов</p>
</div>
<div class="item-gallery-price">
<p class="item-gallery-price-new">4 620 TMT</p>
</div>
<div class="item-gallery-cart">
<button>
<div class="item-gallery-cart-img">
<img src="../assets/icons/icon (cart) 2.svg" alt="cart" />
</div>
<h3 class="item-gallery-cart-text">В корзину</h3>
</button>
</div>
<button class="empty-button">
Нет в наличии
</button>
</div>
</div>
</div>
</div>
<a href="#" class="banner-inner">
<picture>
<source media="(min-width:1080px)" srcset="../assets/images/Banner (1) mobile.jpg">
<img src="../assets/images/banner1.png" alt="banner">
</picture>
</a>
<div class="item-gallery-inner mb">
<div class="item-gallery-title">
<h2>Новинки</h2>
</div>
<div class="item-gallery-wrapper">
<div class="item-gallery-block">
<span class="item-gallery-head">Новый</span>
<button type="button" class="item-gallery-fav">
<div>
<img src="../assets/icons/heart.svg" alt="fav">
</div>
</button>
<div class="item-gallery-img">
<img src="../assets/images/xiaomi.jpg" alt="xiaomiphone" />
</div>
<div class="item-gallery-block-bottom">
<p class="item-gallery-name">
Смартфон Xiaomi Redmi 9 4+64GB Carbon Grey
</p>
<div class="item-gallery-rating">
<div class="item-gallery-rating-img">
<img src="../assets/icons/icon (star).svg" alt="star" />
</div>
<p class="item-gallery-rating-text">4.5</p>
<p class="item-gallery-rating-feed">22 отзыва</p>
</div>
<div class="item-gallery-price">
<p class="item-gallery-price-new">18 500 TMT</p>
</div>
<div class="item-gallery-cart">
<button>
<div class="item-gallery-cart-img">
<img src="../assets/icons/icon (cart) 2.svg" alt="cart" />
</div>
<h3 class="item-gallery-cart-text">В корзину</h3>
</button>
</div>
<button class="empty-button">
Нет в наличии
</button>
</div>
</div>
<div class="item-gallery-block">
<span class="item-gallery-head">Новый</span>
<button type="button" class="item-gallery-fav">
<div>
<img src="../assets/icons/heart.svg" alt="fav">
</div>
</button>
<div class="item-gallery-img">
<img src="../assets/images/washingmachine.png" alt="washingmachine" />
</div>
<div class="item-gallery-block-bottom">
<p class="item-gallery-name">
Стиральная машина WW70R42PXSSDLD Samsung
</p>
<div class="item-gallery-rating">
<div class="item-gallery-rating-img">
<img src="../assets/icons/icon (star).svg" alt="star" />
</div>
<p class="item-gallery-rating-text">4.2</p>
<p class="item-gallery-rating-feed">16 отзывов</p>
</div>
<div class="item-gallery-price">
<p class="item-gallery-price-new">15 575 TMT</p>
</div>
<div class="item-gallery-cart">
<button>
<div class="item-gallery-cart-img">
<img src="../assets/icons/icon (cart) 2.svg" alt="cart" />
</div>
<h3 class="item-gallery-cart-text">В корзину</h3>
</button>
</div>
<button class="empty-button">
Нет в наличии
</button>
</div>
</div>
<div class="item-gallery-block">
<span class="item-gallery-head">Новый</span>
<button type="button" class="item-gallery-fav">
<div>
<img src="../assets/icons/heart.svg" alt="fav">
</div>
</button>
<div class="item-gallery-img">
<img src="../assets/images/iron.png" alt="iron" />
</div>
<div class="item-gallery-block-bottom">
<p class="item-gallery-name">
Philips <br />
PSG7014/10
</p>
<div class="item-gallery-rating">
<div class="item-gallery-rating-img">
<img src="../assets/icons/icon (star).svg" alt="star" />
</div>
<p class="item-gallery-rating-text">4.5</p>
<p class="item-gallery-rating-feed">16 отзывов</p>
</div>
<div class="item-gallery-price">
<p class="item-gallery-price-new">8 575 TMT</p>
</div>
<div class="item-gallery-cart">
<button>
<div class="item-gallery-cart-img">
<img src="../assets/icons/icon (cart) 2.svg" alt="cart" />
</div>
<h3 class="item-gallery-cart-text">В корзину</h3>
</button>
</div>
<button class="empty-button">
Нет в наличии
</button>
</div>
</div>
<div class="item-gallery-block">
<span class="item-gallery-head">Новый</span>
<button type="button" class="item-gallery-fav">
<div>
<img src="../assets/icons/heart.svg" alt="fav">
</div>
</button>
<div class="item-gallery-img">
<img src="../assets/images/samsungphone.png" alt="samsungphone" />
</div>
<div class="item-gallery-block-bottom">
<p class="item-gallery-name">
Samsung Galaxy S21 <br />
Ultra 5G
</p>
<div class="item-gallery-rating">
<div class="item-gallery-rating-img">
<img src="../assets/icons/icon (star).svg" alt="star" />
</div>
<p class="item-gallery-rating-text">4.7</p>
<p class="item-gallery-rating-feed">12 отзывов</p>
</div>
<div class="item-gallery-price">
<p class="item-gallery-price-new">36 200 TMT</p>
</div>
<div class="item-gallery-cart">
<button>
<div class="item-gallery-cart-img">
<img src="../assets/icons/icon (cart) 2.svg" alt="cart" />
</div>
<h3 class="item-gallery-cart-text">В корзину</h3>
</button>
</div>
<button class="empty-button">
Нет в наличии
</button>
</div>
</div>
<div class="item-gallery-block item-gallery-block-deleted">
<span class="item-gallery-head">Новый</span>
<button type="button" class="item-gallery-fav">
<div>
<img src="../assets/icons/heart.svg" alt="fav">
</div>
</button>
<div class="item-gallery-img">
<img src="../assets/images/sharptv.png" alt="sharptv" />
</div>
<div class="item-gallery-block-bottom">
<p class="item-gallery-name">
Телевизор LC-32LE280X Sharp 32" (81 cm)
</p>
<div class="item-gallery-rating">
<div class="item-gallery-rating-img">
<img src="../assets/icons/icon (star).svg" alt="star" />
</div>
<p class="item-gallery-rating-text">4.0</p>
<p class="item-gallery-rating-feed">8 отзывов</p>
</div>
<div class="item-gallery-price">
<p class="item-gallery-price-new">4 620 TMT</p>
</div>
<div class="item-gallery-cart">
<button>
<div class="item-gallery-cart-img">
<img src="../assets/icons/icon (cart) 2.svg" alt="cart" />
</div>
<h3 class="item-gallery-cart-text">В корзину</h3>
</button>
</div>
<button class="empty-button">
Нет в наличии
</button>
</div>
</div>
</div>
</div>
<a href="#" class="banner-inner">
<picture>
<source media="(min-width:1080px)" srcset="../assets/images/Banner (2) mobile.jpg">
<img src="../assets/images/banner2.png" alt="banner">
</picture>
</a>
<div class="item-gallery-inner mt">
<div class="item-gallery-title">
<h2>Скидки</h2>
</div>
<div class="item-gallery-wrapper">
<div class="item-gallery-block">
<span class="item-gallery-head">Новый</span>
<button type="button" class="item-gallery-fav">
<div>
<img src="../assets/icons/heart.svg" alt="fav">
</div>
</button>
<div class="item-gallery-img">
<img src="../assets/images/xiaomi.jpg" alt="xiaomiphone" />
</div>
<div class="item-gallery-block-bottom">
<p class="item-gallery-name">
Смартфон Xiaomi Redmi 9 4+64GB Carbon Grey
</p>
<div class="item-gallery-rating">
<div class="item-gallery-rating-img">
<img src="../assets/icons/icon (star).svg" alt="star" />
</div>
<p class="item-gallery-rating-text">4.5</p>
<p class="item-gallery-rating-feed">22 отзыва</p>
</div>
<div class="item-gallery-price">
<p class="item-gallery-price-new">18 500 TMT</p>
</div>
<div class="item-gallery-cart">
<button>
<div class="item-gallery-cart-img">
<img src="../assets/icons/icon (cart) 2.svg" alt="cart" />
</div>
<h3 class="item-gallery-cart-text">В корзину</h3>
</button>
</div>
<button class="empty-button">
Нет в наличии
</button>
</div>
</div>
<div class="item-gallery-block">
<span class="item-gallery-head">Новый</span>
<button type="button" class="item-gallery-fav">
<div>
<img src="../assets/icons/heart.svg" alt="fav">
</div>
</button>
<div class="item-gallery-img">
<img src="../assets/images/washingmachine.png" alt="washingmachine" />
</div>
<div class="item-gallery-block-bottom">
<p class="item-gallery-name">
Стиральная машина WW70R42PXSSDLD Samsung
</p>
<div class="item-gallery-rating">
<div class="item-gallery-rating-img">
<img src="../assets/icons/icon (star).svg" alt="star" />
</div>
<p class="item-gallery-rating-text">4.2</p>
<p class="item-gallery-rating-feed">16 отзывов</p>
</div>
<div class="item-gallery-price">
<p class="item-gallery-price-new">15 575 TMT</p>
</div>
<div class="item-gallery-cart">
<button>
<div class="item-gallery-cart-img">
<img src="../assets/icons/icon (cart) 2.svg" alt="cart" />
</div>
<h3 class="item-gallery-cart-text">В корзину</h3>
</button>
</div>
<button class="empty-button">
Нет в наличии
</button>
</div>
</div>
<div class="item-gallery-block">
<span class="item-gallery-head">Новый</span>
<button type="button" class="item-gallery-fav">
<div>
<img src="../assets/icons/heart.svg" alt="fav">
</div>
</button>
<div class="item-gallery-img">
<img src="../assets/images/iron.png" alt="iron" />
</div>
<div class="item-gallery-block-bottom">
<p class="item-gallery-name">
Philips <br />
PSG7014/10
</p>
<div class="item-gallery-rating">
<div class="item-gallery-rating-img">
<img src="../assets/icons/icon (star).svg" alt="star" />
</div>
<p class="item-gallery-rating-text">4.5</p>
<p class="item-gallery-rating-feed">16 отзывов</p>
</div>
<div class="item-gallery-price">
<p class="item-gallery-price-new">8 575 TMT</p>
</div>
<div class="item-gallery-cart">
<button>
<div class="item-gallery-cart-img">
<img src="../assets/icons/icon (cart) 2.svg" alt="cart" />
</div>
<h3 class="item-gallery-cart-text">В корзину</h3>
</button>
</div>
<button class="empty-button">
Нет в наличии
</button>
</div>
</div>
<div class="item-gallery-block">
<span class="item-gallery-head">Новый</span>
<button type="button" class="item-gallery-fav">
<div>
<img src="../assets/icons/heart.svg" alt="fav">
</div>
</button>
<div class="item-gallery-img">
<img src="../assets/images/samsungphone.png" alt="samsungphone" />
</div>
<div class="item-gallery-block-bottom">
<p class="item-gallery-name">
Samsung Galaxy S21 <br />
Ultra 5G
</p>
<div class="item-gallery-rating">
<div class="item-gallery-rating-img">
<img src="../assets/icons/icon (star).svg" alt="star" />
</div>
<p class="item-gallery-rating-text">4.7</p>
<p class="item-gallery-rating-feed">12 отзывов</p>
</div>
<div class="item-gallery-price">
<p class="item-gallery-price-new">36 200 TMT</p>
</div>
<div class="item-gallery-cart">
<button>
<div class="item-gallery-cart-img">
<img src="../assets/icons/icon (cart) 2.svg" alt="cart" />
</div>
<h3 class="item-gallery-cart-text">В корзину</h3>
</button>
</div>
<button class="empty-button">
Нет в наличии
</button>
</div>
</div>
<div class="item-gallery-block item-gallery-block-deleted">
<span class="item-gallery-head">Новый</span>
<button type="button" class="item-gallery-fav">
<div>
<img src="../assets/icons/heart.svg" alt="fav">
</div>
</button>
<div class="item-gallery-img">
<img src="../assets/images/sharptv.png" alt="sharptv" />
</div>
<div class="item-gallery-block-bottom">
<p class="item-gallery-name">
Телевизор LC-32LE280X Sharp 32" (81 cm)
</p>
<div class="item-gallery-rating">
<div class="item-gallery-rating-img">
<img src="../assets/icons/icon (star).svg" alt="star" />
</div>
<p class="item-gallery-rating-text">4.0</p>
<p class="item-gallery-rating-feed">8 отзывов</p>
</div>
<div class="item-gallery-price">
<p class="item-gallery-price-new">4 620 TMT</p>
</div>
<div class="item-gallery-cart">
<button>
<div class="item-gallery-cart-img">
<img src="../assets/icons/icon (cart) 2.svg" alt="cart" />
</div>
<h3 class="item-gallery-cart-text">В корзину</h3>
</button>
</div>
<button class="empty-button">
Нет в наличии
</button>
</div>
</div>
</div>
</div>
</div>
<!-- </div> -->
</main>
<!-- ITEM GALLERY / NEW ITEMS end ===========================================================-->
<!-- REVIEWS ============================================================================ -->
<section class="reviews-section">
<div class="container">
<div class="reviews-inner">
<div class="reviews-top">
<h2 class="reviews-title">Отзывы</h2>
<a href="./reviews.html" class="reviews-top-link"><span>все отзывы</span>
<img src="../assets/icons/chevron-right.svg" alt="">
</a>
</div>
<div class="reviews-content">
<div class="review-card">
<div class="review-rating">
<svg class="review-card-star--active" data-index="1" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
</svg>
<svg class="review-card-star--active" data-index="2" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
</svg>
<svg class="review-card-star--active" data-index="3" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
</svg>
<svg class="review-card-star" data-index="4" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
</svg>
<svg class="review-card-star" data-index="5" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
</svg>
</div>
<div class="review-details">
<p class="review-text">Приобрела смартфон в данном интернет-магазине - доставка прошла быстро и без задержек. Упаковка была надежной, все комплектующие на месте. Впечатлена качеством обслуживания и работой магазина в целом.</p>
<div class="review-data">
<h3 class="reviewer-name">Марина Кравец</h3>
<div class="review-date">12.06.2024</div>
</div>
</div>
</div>
<div class="review-card">
<div class="review-rating">
<svg class="review-card-star--active" data-index="1" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
</svg>
<svg class="review-card-star--active" data-index="2" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
</svg>
<svg class="review-card-star--active" data-index="3" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
</svg>
<svg class="review-card-star--active" data-index="4" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
</svg>
<svg class="review-card-star" data-index="5" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
</svg>
</div>
<div class="review-details">
<p class="review-text">Приобрела смартфон в данном интернет-магазине - доставка прошла быстро и без задержек. Упаковка была надежной, все комплектующие на месте. Впечатлена качеством обслуживания и работой магазина в целом.</p>
<div class="review-data">
<h3 class="reviewer-name">Марина Кравец</h3>
<div class="review-date">12.06.2024</div>
</div>
</div>
</div>
<div class="review-card">
<div class="review-rating">
<svg class="review-card-star--active" data-index="1" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
</svg>
<svg class="review-card-star--active" data-index="2" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
</svg>
<svg class="review-card-star" data-index="3" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
</svg>
<svg class="review-card-star" data-index="4" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
</svg>
<svg class="review-card-star" data-index="5" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
</svg>
</div>
<div class="review-details">
<p class="review-text">Приобрела смартфон в данном интернет-магазине - доставка прошла быстро и без задержек. Упаковка была надежной, все комплектующие на месте. Впечатлена качеством обслуживания и работой магазина в целом.</p>
<div class="review-data">
<h3 class="reviewer-name">Марина Кравец</h3>
<div class="review-date">12.06.2024</div>
</div>
</div>
</div>
<div class="review-card">
<div class="review-rating">
<svg class="review-card-star--active" data-index="1" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
</svg>
<svg class="review-card-star--active" data-index="2" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
</svg>
<svg class="review-card-star--active" data-index="3" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
</svg>
<svg class="review-card-star--active" data-index="4" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
</svg>
<svg class="review-card-star--active" data-index="5" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
</svg>
</div>
<div class="review-details">
<p class="review-text">Приобрела смартфон в данном интернет-магазине - доставка прошла быстро и без задержек. Упаковка была надежной, все комплектующие на месте. Впечатлена качеством обслуживания и работой магазина в целом.</p>
<div class="review-data">
<h3 class="reviewer-name">Марина Кравец</h3>
<div class="review-date">12.06.2024</div>
</div>
</div>
</div>
</div>
<button id="openReviewPopupBtn" class="add-review-button">Напиши свой отзыв!</button>
<div id="review-popup" class="review-popup">
<div class="review-popup-content">
<span id="closeReviewPopupBtn" class="close-review-popup">&times;</span>
<h2 class="review-popup-title">Написать отзыв</h2>
<div class="review-popup-input-block">
<label for="name">Как вас зовут?</label>
<input id="name" type="text" placeholder="Введите ваше имя">
</div>
<div class="review-popup-input-block">
<label for="review">Ваш отзыв</label>
<textarea name="review" id="review" rows="10" placeholder="Оставьте свой отзыв здесь"></textarea>
</div>
<div class="review-popup-start-block">
<h3>Оцените нас</h3>
<div class="review-rating--popup">
<svg class="review-card-star" data-index="1" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
</svg>
<svg class="review-card-star" data-index="2" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
</svg>
<svg class="review-card-star" data-index="3" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
</svg>
<svg class="review-card-star" data-index="4" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
</svg>
<svg class="review-card-star" data-index="5" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
</svg>
</div>
</div>
<button class="review-popup-button" disabled>Отправить отзыв</button>
</div>
<div class="review-popup-content hidden">
<span id="closeReviewPopupBtn2" class="close-review-popup">&times;</span>
<h2 class="review-popup-title review-popup-title--green">Отзыв добавлен успешно</h2>
<h3 class="close-review-popup-button" id="closeReviewPopupText">Закрыть окно</h3>
</div>
</div>
</div>
</div>
</section>
<!-- REVIEWS end ======================================================================== -->
<!-- FOOTER ================================================================================ -->
<footer class="footer">
<div class="container">
<div class="footer-inner ">
<div class="assist-block footer-block">
<div class="footer-title-wrapper active">
<h2 class="footer-title">Помощь по сайту</h2>
<div class="footer-title-arrow">
<img src="../assets/icons/arrow-downside.svg" alt="arrow">
</div>
</div>
<div class="hr-lines">
<div class="bright-line"></div>
<div class="dim-line"></div>
</div>
<div class="assist-block-content footer-content visible">
<ul class="footer-links-list">
<li class="footer-list-el"><a href="#">Как зарегистрироваться</a></li>
<li class="footer-list-el"><a href="#">Как оформить заказ</a></li>
<li class="footer-list-el"><a href="#">Информация о доставке</a></li>
<li class="footer-list-el"><a href="#">Обмен и возврат товара</a></li>
<li class="footer-list-el"><a href="#">Сервисный центр</a></li>
</ul>
</div>
</div>
<div class="contacts-block footer-block">
<div class="footer-title-wrapper">
<h2 class="footer-title">Контакты</h2>
<div class="footer-title-arrow">
<img src="../assets/icons/arrow-downside.svg" alt="arrow">
</div>
</div>
<div class="hr-lines">
<div class="bright-line"></div>
<div class="dim-line"></div>
</div>
<div class="contacts-block-content footer-content">
<div class="contacts-block-address">
<span class="contacts-block-dim-text">Адрес:</span>
<p class="contacts-block-bright-text">183, Проспект Битарап <br> Туркменистан, Ашхабад.</p>
</div>
<div class="contacts-block-number">
<span class="contacts-block-dim-text">Мобильный номер :</span>
<p class="contacts-block-bright-text">+99360142251</p>
</div>
</div>
</div>
<div class="soon-block footer-block">
<div class="footer-title-wrapper">
<h2 class="footer-title">Скоро будет</h2>
<div class="footer-title-arrow">
<img src="../assets/icons/arrow-downside.svg" alt="arrow">
</div>
</div>
<div class="hr-lines">
<div class="bright-line"></div>
<div class="dim-line"></div>
</div>
<div class="soon-block-content footer-content">
<div class="soon-download">
<div class="download-icon">
<img src="../assets/icons/apple.svg" alt="appstore">
</div>
<div class="download-text">
<span class="download-text-dim">Download on the</span>
<p class="download-text-bright">App Store</p>
</div>
</div>
<div class="soon-download">
<div class="download-icon">
<img src="../assets/icons/google-play.svg" alt="googleplay">
</div>
<div class="download-text">
<span class="download-text-dim">Download on the</span>
<p class="download-text-bright">Google Play</p>
</div>
</div>
</div>
</div>
<div class="social-block footer-block">
<div class="footer-title-wrapper">
<h2 class="footer-title">Соц. сети</h2>
<div class="footer-title-arrow">
<img src="../assets/icons/arrow-downside.svg" alt="arrow">
</div>
</div>
<div class="hr-lines">
<div class="bright-line"></div>
<div class="dim-line"></div>
</div>
<div class="social-block-content footer-content">
<div class="social-block-content-wrapper">
<a href="#" class="social-facebook social-icon">
<img src="../assets/icons/facebook.svg" alt="facebook">
</a>
<a href="#" class="social-twitter social-icon">
<img src="../assets/icons/twitter.svg" alt="twitter">
</a>
<a href="#" class="social-instagram social-icon">
<img src="../assets/icons/instagram.svg" alt="instagram">
</a>
<a href="#" class="social-google social-icon">
<img src="../assets/icons/google-plus.svg" alt="google-plus">
</a>
</div>
</div>
</div>
</div>
</div>
<div class="hr-line"></div>
<div class="container">
<div class="footer-bottom footer-bottom-inner">
<span class="footer-bottom-text">&copy All rights reserved. Made by <a href="#">TPS Digital</a></span>
</div>
</div>
</footer>
<!-- Popup-cart -->
<div class="popup-cart-overlay" id="popup-cart-overlay">
<div class="popup-cart-content" id="popup-cart-content">
<h2 class="popup-cart-title">Товар добавлен в корзину</h2>
<div class="popup-cart-item-list">
<div class="popup-cart-item">
<div class="popup-cart-item-img">
<img src="../assets/images/popup-cart-item-img.png" alt="">
</div>
<div class="popup-cart-item-block">
<div class="popup-cart-item-header">
<h4>Телевизор LG OLED 77C2RLA, 77"</h4>
<img src="../assets/icons/red-trash.svg" alt="">
</div>
<div class="popup-cart-item-header">
<div class="popup-cart-item-counter">
<div class="popup-cart-item-plus">-</div>
<div class="">1</div>
<div class="popup-cart-item-minus">+</div>
</div>
<div class="popup-cart-item-price">58 410,50 m.</div>
</div>
<div class="popup-cart-item-footer">58 410,50 м. / шт.</div>
</div>
</div>
<div class="popup-cart-footer-line"></div>
</div> <!--Popup-cart-item-list-->
<div class="popup-cart-footer">
<div class="popup-cart-footer-results">
<div class="">В корзине 2 товара</div>
<div class="">Итого: 69 521,61 м.</div>
</div>
<div class="popup-cart-footer-line"></div>
<div class="popup-cart-footer-results">
<div class="">Оформить заказ</div>
<button type="button" class="popup-cart-btn" id="popup-cart-btn">Продолжить покупки 🠆</button>
</div>
</div>
</div>
</div>
<!-- FOOTER end ============================================================================ -->
<script src="../assets/scripts/swiper-bundle.js"></script>
<script src='../assets/scripts/swiper-bundle.min.js'></script>
<script src="../assets/scripts/script.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
// Review popup start =======================================
const popup = document.getElementById('review-popup');
const openReviewPopupBtn = document.getElementById('openReviewPopupBtn');
const closeReviewPopupBtn = document.getElementById('closeReviewPopupBtn');
const closeReviewPopupBtn2 = document.getElementById('closeReviewPopupBtn2');
const closeReviewPopupText = document.getElementById('closeReviewPopupText');
const firstPopupContent = document.querySelector(".review-popup-content:nth-child(1)");
const secondPopupContent = document.querySelector(".review-popup-content:nth-child(2)");
const sendReviewButton = document.querySelector(".review-popup-button");
const nameInput = document.getElementById("name");
const reviewInput = document.getElementById("review");
// Create the loader element ==============================================================
const loader = document.createElement("div");
loader.className = "loader";
const openPopup = () => {
popup.style.display = 'flex';
document.body.classList.add('no-scroll');
// Reset popup contents
firstPopupContent.style.display = 'flex';
secondPopupContent.style.display = 'none';
loader.remove();
resetStars();
resetInputs();
checkFormCompletion();
};
const closePopup = () => {
popup.style.display = 'none';
document.body.classList.remove('no-scroll');
resetStars();
resetInputs();
};
const resetStars = () => {
const stars = document.querySelectorAll(".review-card-star");
stars.forEach(star => {
star.classList.remove("hovered", "clicked");
});
};
const resetInputs = () => {
const inputs = document.querySelectorAll("#name, #review");
inputs.forEach(input => {
input.value = "";
});
};
const checkFormCompletion = () => {
const isNameFilled = nameInput.value.trim() !== "";
const isReviewFilled = reviewInput.value.trim() !== "";
const isStarSelected = document.querySelectorAll(".review-card-star.clicked").length > 0;
if (isNameFilled && isReviewFilled && isStarSelected) {
sendReviewButton.removeAttribute("disabled");
} else {
sendReviewButton.setAttribute("disabled", true);
}
};
nameInput.addEventListener("input", checkFormCompletion);
reviewInput.addEventListener("input", checkFormCompletion);
openReviewPopupBtn.addEventListener('click', openPopup);
closeReviewPopupText.addEventListener('click', closePopup);
closeReviewPopupBtn.addEventListener('click', closePopup);
closeReviewPopupBtn2.addEventListener('click', closePopup);
window.addEventListener('click', (event) => {
if (event.target === popup) {
closePopup();
}
});
// Review rating click effect start ============================================
const ratingContainers = document.querySelectorAll(".review-rating--popup");
ratingContainers.forEach(container => {
const stars = container.querySelectorAll(".review-card-star");
let clickedIndex = 0;
stars.forEach(star => {
star.addEventListener("mouseover", function() {
const index = parseInt(this.getAttribute("data-index"));
for (let i = 0; i < index; i++) {
stars[i].classList.add("hovered");
}
});
star.addEventListener("mouseout", function() {
stars.forEach(star => star.classList.remove("hovered"));
});
star.addEventListener("click", function() {
const index = parseInt(this.getAttribute("data-index"));
if (index === clickedIndex) {
clickedIndex = 0;
stars.forEach(star => star.classList.remove("clicked", "hovered"));
} else {
clickedIndex = index;
stars.forEach(star => {
const starIndex = parseInt(star.getAttribute("data-index"));
if (starIndex <= index) {
star.classList.add("clicked");
} else {
star.classList.remove("clicked");
}
});
}
checkFormCompletion(); // Check form completion after selecting stars
});
});
});
// Send review ========================================================================
sendReviewButton.addEventListener("click", function() {
// Hide the first popup content
firstPopupContent.style.display = 'none';
// Show the loader
firstPopupContent.parentNode.insertBefore(loader, firstPopupContent.nextSibling);
// Wait for 3 seconds before showing the second popup content
setTimeout(() => {
// Remove the loader
loader.remove();
// Show the second popup content
secondPopupContent.style.display = "block";
}, 3000);
});
// Optionally, add event listeners to close buttons to close the popup
const closeButtons = document.querySelectorAll(".close-review-popup");
closeButtons.forEach(button => {
button.addEventListener("click", function() {
// Hide the entire popup
closePopup();
});
});
// Add an event listener to the "Закрыть окно" text to close the popup
const closePopupTextElement = document.getElementById("closeReviewPopupText");
closePopupTextElement.addEventListener("click", function() {
// Hide the entire popup
closePopup();
});
// Add to cart popup start ====================================================
const addtoCartBtns = document.querySelectorAll('.item-gallery-cart')
const popupOverlay = document.getElementById('popup-cart-overlay')
const cartPopup = document.getElementById("popup-cart-content")
const popupCartBtn = document.getElementById("popup-cart-btn")
addtoCartBtns.forEach(button => {
button.addEventListener('click', () => {
popupOverlay.classList.add('active');
document.body.classList.add('no-scroll')
});
});
popupCartBtn.addEventListener("click", () => {
popupOverlay.classList.remove('active');
document.body.classList.remove('no-scroll')
})
window.addEventListener('click', (event) => {
if (event.target === popupOverlay) {
popupOverlay.classList.remove('active');
document.body.classList.remove('no-scroll')
}
});
// Add to cart popup end ====================================================
});
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink