/
peling-dev
/
Cards
Обзор
Документация
Войти
/
peling-dev
/
Cards
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
index.html
128 строк
7 KB
peling-dev
Update: index.html
13 июн 2026, 14:27
Верифицирован
13 июн 2026, 14:27
d2b2e1d
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <title>7 карточек | Стекло + изумруд</title> <link rel="stylesheet" href="css/main.css"> <link rel="icon" type="image/x-icon" href="images/power1.jpg"> </head> <body> <header class="main-header"> <div class="logo">⚡ PowerBank Collection</div> <nav class="main-nav"> <a href="#">Главная</a> <a href="#">Каталог</a> <a href="#">Контакты</a> </nav> </header> <div class="container"> <h1>⚡ ПАУЭРБАНК — коллекция карточек ⚡</h1> <div class="cards-grid"> <!-- 1. Вертикальная карточка --> <div class="card card-vertical"> <div class="card-vertical-img"> <img src="images/power1.jpg" alt="пауэрбанк"> </div> <div class="card-title">PowerBank SwiftCharge</div> <div class="card-desc">10000 mAh, быстрая зарядка 22.5W, 2 порта USB-A + USB-C</div> <div class="price-row"> <span class="current-price">3 290 ₽</span> <button class="btn btn-primary">Купить</button> </div> <div class="badge">🔥 Хит продаж</div> </div> <!-- 2. Горизонтальная карточка --> <div class="card card-horizontal"> <div class="card-horizontal-left"> <img src="images/power2.jpg" alt="пауэрбанк"> </div> <div class="card-horizontal-right"> <div class="card-title">PowerBank SteelCore</div> <div>Ёмкость: 20000 mAh | Вход: 18W | Выход: 22.5W</div> <div class="price-row"><span class="current-price">4 490 ₽</span><button class="btn btn-primary">В корзину</button></div> <div>⚡ Металлический корпус, индикатор заряда</div> </div> </div> <!-- 3. Карточка-палатка (выезжающий блок) --> <div class="card card-tent"> <div class="card-title">PowerBank FlexPack</div> <div class="price-row"><span class="current-price">3 990 ₽</span><span class="badge">бесплатная доставка</span></div> <div class="tent-extra"> 📦 Комплектация: пауэрбанк, кабель Type-C, мешочек, инструкция. <br> 🔋 Ещё 5000 mAh в подарок по акции. </div> <button class="btn btn-primary" style="margin-top:0.8rem;">Подробнее</button> <div style="font-size:0.7rem; margin-top:0.4rem;">⬆️ наведи курсор для деталей</div> </div> <!-- 4. Компактная карточка (для списка) --> <div class="card card-compact"> <div class="compact-img"><img src="images/power4.jpg" style="width:100%; border-radius:16px 32px;"></div> <div class="compact-info"> <div class="card-title" style="font-size:1.2rem;">PowerBank Nano</div> <div>5000 mAh, ultra compact</div> <div class="current-price" style="font-size:1.3rem;">1 490 ₽</div> </div> <button class="btn btn-secondary">Выбрать</button> </div> <!-- 5. Со скидкой --> <div class="card card-vertical"> <div class="card-vertical-img"><img src="images/power3.jpg" alt="скидка"></div> <div class="card-title">PowerBank SolarEdge</div> <div class="price-row"> <span class="current-price">2 990 ₽</span> <span class="old-price">4 990 ₽</span> <span class="badge">-40%</span> </div> <button class="btn btn-primary">Заказать со скидкой</button> </div> <!-- 6. Карточка-превью (маркетплейс) рейтинг, отзывы --> <div class="card card-vertical"> <div class="card-vertical-img"><img src="images/power5.jpg" alt="превью"></div> <div class="card-title">PowerBank Leader X3</div> <div class="rating"><span class="stars">★★★★★</span> 4.9 · 128 отзывов</div> <div class="price-row"><span class="current-price">5 290 ₽</span><button class="btn btn-primary">В магазин</button></div> <div class="badge">🏆 ТОП-3 месяца</div> </div> <!-- 7. Интерактивная с переключением ёмкости (без сложного JS, только смена цены) --> <div class="card card-vertical" id="interactiveCard"> <div class="card-vertical-img"><img src="images/power6.jpg" alt="интерактив"></div> <div class="card-title">PowerBank AdaptIQ</div> <div class="capacity-switch"> <div data-cap="5000" data-price="1990" class="cap-btn active">5000 mAh</div> <div data-cap="10000" data-price="3290" class="cap-btn">10000 mAh</div> <div data-cap="20000" data-price="4990" class="cap-btn">20000 mAh</div> </div> <div class="price-row"><span class="current-price" id="dynamicPrice">1 990 ₽</span><button class="btn btn-primary">Выбрать</button></div> <div>⚡ выбери ёмкость — цена обновится</div> </div> </div> <hr> <div style="text-align:center; margin-top:1.5rem; opacity:0.6;">✨ Все карточки имеют border-radius: 32px 64px ✨<br>Стекло + Изумруд & Золотисто-медовый</div> </div> <footer class="main-footer"> <p>© 2026 PowerBank Collection. Все права защищены.</p> </footer> <script> // интерактив для карточки №7: переключение ёмкости const capBtns = document.querySelectorAll('.cap-btn'); const priceSpan = document.getElementById('dynamicPrice'); capBtns.forEach(btn => { btn.addEventListener('click', function() { capBtns.forEach(b => b.classList.remove('active')); this.classList.add('active'); const newPrice = this.getAttribute('data-price'); if (newPrice) priceSpan.innerText = parseInt(newPrice).toLocaleString() + ' ₽'; }); }); </script> </body> </html>