https://pastein.ru/t/bjS
Загрузка данных
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DotaSkins — магазин скинов Dota 2</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header">
<div class="container header-inner">
<a class="logo" href="#">DotaSkins</a>
<nav class="nav">
<a href="#catalog">Каталог</a>
<a href="#about">О магазине</a>
<a href="#contacts">Контакты</a>
</nav>
<div>Корзина: 0</div>
</div>
</header>
<main>
<section class="hero">
<div class="container">
<h1>Скины для Dota 2</h1>
<p>Простой каталог популярных предметов для героев.</p>
<a class="button" href="#catalog">Смотреть каталог</a>
</div>
</section>
<section class="catalog container" id="catalog">
<aside class="filters">
<h2>Фильтр</h2>
<form>
<fieldset>
<legend>Редкость</legend>
<label><input type="checkbox" name="rarity"> Rare</label>
<label><input type="checkbox" name="rarity"> Immortal</label>
</fieldset>
<fieldset>
<legend>Цена</legend>
<label for="price">До:</label>
<input id="price" type="number" min="1" max="500" step="1" value="100">
</fieldset>
<button class="button" type="submit">Применить</button>
</form>
</aside>
<div class="products">
<div class="products-top">
<h2>Популярные скины</h2>
<form class="search">
<label for="skin-search">Поиск:</label>
<input id="skin-search" type="text" list="skins" placeholder="Название скина" required>
<datalist id="skins">
<option value="Demon Eater">
<option value="Manifold Paradox">
<option value="Frost Avalanche">
<option value="Bladeform Legacy">
</datalist>
</form>
</div>
<div class="product-grid">
<!-- Карточка 1 -->
<input type="checkbox" id="card-1" class="card-toggle" hidden>
<label class="card" for="card-1">
<img src="https://images.unsplash.com/photo-1542751371-adc38448a05e?auto=format&fit=crop&w=600&q=80" alt="Игровой предмет">
<div class="card-content">
<h3>Demon Eater</h3>
<p>Предмет для Shadow Fiend.</p>
<div class="card-bottom">
<strong>24.99 $</strong>
<button type="button">Купить</button>
</div>
</div>
</label>
<div class="modal">
<label class="modal-overlay" for="card-1"></label>
<div class="modal-window">
<label class="modal-close" for="card-1" aria-label="Закрыть">×</label>
<img class="modal-img" src="https://images.unsplash.com/photo-1542751371-adc38448a05e?auto=format&fit=crop&w=600&q=80" alt="Demon Eater">
<div class="modal-body">
<h2>Demon Eater</h2>
<p class="modal-hero">Герой: Shadow Fiend</p>
<p class="modal-desc">Легендарный предмет для Shadow Fiend. Полностью меняет модель героя, добавляет уникальные эффекты при использовании способностей и особую анимацию атаки. Редкость: Immortal.</p>
<div class="modal-bottom">
<strong>24.99 $</strong>
<button class="button" type="button">Купить</button>
</div>
</div>
</div>
</div>
<!-- Карточка 2 -->
<input type="checkbox" id="card-2" class="card-toggle" hidden>
<label class="card" for="card-2">
<img src="https://images.unsplash.com/photo-1511512578047-dfb367046420?auto=format&fit=crop&w=600&q=80" alt="Игровой предмет">
<div class="card-content">
<h3>Manifold Paradox</h3>
<p>Предмет для Phantom Assassin.</p>
<div class="card-bottom">
<strong>18.50 $</strong>
<button type="button">Купить</button>
</div>
</div>
</label>
<div class="modal">
<label class="modal-overlay" for="card-2"></label>
<div class="modal-window">
<label class="modal-close" for="card-2" aria-label="Закрыть">×</label>
<img class="modal-img" src="https://images.unsplash.com/photo-1511512578047-dfb367046420?auto=format&fit=crop&w=600&q=80" alt="Manifold Paradox">
<div class="modal-body">
<h2>Manifold Paradox</h2>
<p class="modal-hero">Герой: Phantom Assassin</p>
<p class="modal-desc">Мифический предмет для Phantom Assassin. Меняет внешний вид оружия, добавляет новые эффекты критических ударов и уникальную иконку способности.</p>
<div class="modal-bottom">
<strong>18.50 $</strong>
<button class="button" type="button">Купить</button>
</div>
</div>
</div>
</div>
<!-- Карточка 3 -->
<input type="checkbox" id="card-3" class="card-toggle" hidden>
<label class="card" for="card-3">
<img src="https://images.unsplash.com/photo-1550745165-9bc0b252726f?auto=format&fit=crop&w=600&q=80" alt="Игровой предмет">
<div class="card-content">
<h3>Frost Avalanche</h3>
<p>Предмет для Crystal Maiden.</p>
<div class="card-bottom">
<strong>12.90 $</strong>
<button type="button">Купить</button>
</div>
</div>
</label>
<div class="modal">
<label class="modal-overlay" for="card-3"></label>
<div class="modal-window">
<label class="modal-close" for="card-3" aria-label="Закрыть">×</label>
<img class="modal-img" src="https://images.unsplash.com/photo-1550745165-9bc0b252726f?auto=format&fit=crop&w=600&q=80" alt="Frost Avalanche">
<div class="modal-body">
<h2>Frost Avalanche</h2>
<p class="modal-hero">Герой: Crystal Maiden</p>
<p class="modal-desc">Редкий предмет для Crystal Maiden. Изменяет модель героя и эффекты способностей на ледяные, добавляет новую анимацию ходьбы.</p>
<div class="modal-bottom">
<strong>12.90 $</strong>
<button class="button" type="button">Купить</button>
</div>
</div>
</div>
</div>
<!-- Карточка 4 -->
<input type="checkbox" id="card-4" class="card-toggle" hidden>
<label class="card" for="card-4">
<img src="https://images.unsplash.com/photo-1493711662062-fa541adb3fc8?auto=format&fit=crop&w=600&q=80" alt="Игровой предмет">
<div class="card-content">
<h3>Bladeform Legacy</h3>
<p>Предмет для Juggernaut.</p>
<div class="card-bottom">
<strong>21.00 $</strong>
<button type="button">Купить</button>
</div>
</div>
</label>
<div class="modal">
<label class="modal-overlay" for="card-4"></label>
<div class="modal-window">
<label class="modal-close" for="card-4" aria-label="Закрыть">×</label>
<img class="modal-img" src="https://images.unsplash.com/photo-1493711662062-fa541adb3fc8?auto=format&fit=crop&w=600&q=80" alt="Bladeform Legacy">
<div class="modal-body">
<h2>Bladeform Legacy</h2>
<p class="modal-hero">Герой: Juggernaut</p>
<p class="modal-desc">Immortal-предмет для Juggernaut. Полностью заменяет маску героя, добавляет уникальные эффекты при использовании Omnislash и Blade Fury.</p>
<div class="modal-bottom">
<strong>21.00 $</strong>
<button class="button" type="button">Купить</button>
</div>
</div>
</div>
</div>
<!-- Карточка 5 -->
<input type="checkbox" id="card-5" class="card-toggle" hidden>
<label class="card" for="card-5">
<img src="https://images.unsplash.com/photo-1560253023-3ec5d502959f?auto=format&fit=crop&w=600&q=80" alt="Игровой предмет">
<div class="card-content">
<h3>The Magus Cypher</h3>
<p>Предмет для Rubick.</p>
<div class="card-bottom">
<strong>15.75 $</strong>
<button type="button">Купить</button>
</div>
</div>
</label>
<div class="modal">
<label class="modal-overlay" for="card-5"></label>
<div class="modal-window">
<label class="modal-close" for="card-5" aria-label="Закрыть">×</label>
<img class="modal-img" src="https://images.unsplash.com/photo-1560253023-3ec5d502959f?auto=format&fit=crop&w=600&q=80" alt="The Magus Cypher">
<div class="modal-body">
<h2>The Magus Cypher</h2>
<p class="modal-hero">Герой: Rubick</p>
<p class="modal-desc">Мифический предмет для Rubick. Меняет внешний вид посоха, добавляет эффекты при краже способностей и уникальную анимацию.</p>
<div class="modal-bottom">
<strong>15.75 $</strong>
<button class="button" type="button">Купить</button>
</div>
</div>
</div>
</div>
<!-- Карточка 6 -->
<input type="checkbox" id="card-6" class="card-toggle" hidden>
<label class="card" for="card-6">
<img src="https://images.unsplash.com/photo-1605870445919-838d190e8e1b?auto=format&fit=crop&w=600&q=80" alt="Игровой предмет">
<div class="card-content">
<h3>Dread Requisition</h3>
<p>Предмет для Drow Ranger.</p>
<div class="card-bottom">
<strong>9.99 $</strong>
<button type="button">Купить</button>
</div>
</div>
</label>
<div class="modal">
<label class="modal-overlay" for="card-6"></label>
<div class="modal-window">
<label class="modal-close" for="card-6" aria-label="Закрыть">×</label>
<img class="modal-img" src="https://images.unsplash.com/photo-1605870445919-838d190e8e1b?auto=format&fit=crop&w=600&q=80" alt="Dread Requisition">
<div class="modal-body">
<h2>Dread Requisition</h2>
<p class="modal-hero">Герой: Drow Ranger</p>
<p class="modal-desc">Редкий предмет для Drow Ranger. Изменяет модель лука, добавляет ледяные эффекты стрел и новую анимацию прицеливания.</p>
<div class="modal-bottom">
<strong>9.99 $</strong>
<button class="button" type="button">Купить</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="about container" id="about">
<h2>Почему DotaSkins?</h2>
<div class="advantages">
<div><h3>Большой выбор</h3><p>Популярные предметы для разных героев.</p></div>
<div><h3>Простой каталог</h3><p>Можно быстро найти нужный скин.</p></div>
<div><h3>Удобная покупка</h3><p>Цена и кнопка покупки находятся на карточке.</p></div>
</div>
</section>
</main>
<footer class="footer" id="contacts">
<div class="container footer-inner">
<div><h2>DotaSkins</h2><p>Учебный сайт магазина скинов Dota 2.</p></div>
<form class="subscribe">
<label for="email">Получить новости:</label>
<input id="email" type="email" placeholder="Ваш email" required>
<button type="submit">Подписаться</button>
</form>
</div>
</footer>
</body>
</html>