https://pastein.ru/t/wjS
Загрузка данных
<!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">
<article class="card"
data-title="Demon Eater"
data-hero="Shadow Fiend"
data-price="24.99 $"
data-desc="Легендарный предмет для Shadow Fiend. Полностью меняет модель героя, добавляет уникальные эффекты при использовании способностей и особую анимацию атаки. Редкость: Immortal."
data-img="https://images.unsplash.com/photo-1542751371-adc38448a05e?auto=format&fit=crop&w=600&q=80">
<img src="https://images.unsplash.com/photo-1542751371-adc38448a05e?auto=format&fit=crop&w=600&q=80" alt="Игровой предмет" title="Demon Eater">
<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>
</article>
<article class="card"
data-title="Manifold Paradox"
data-hero="Phantom Assassin"
data-price="18.50 $"
data-desc="Мифический предмет для Phantom Assassin. Меняет внешний вид оружия, добавляет новые эффекты критических ударов и уникальную иконку способности."
data-img="https://images.unsplash.com/photo-1511512578047-dfb367046420?auto=format&fit=crop&w=600&q=80">
<img src="https://images.unsplash.com/photo-1511512578047-dfb367046420?auto=format&fit=crop&w=600&q=80" alt="Игровой предмет" title="Manifold Paradox">
<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>
</article>
<article class="card"
data-title="Frost Avalanche"
data-hero="Crystal Maiden"
data-price="12.90 $"
data-desc="Редкий предмет для Crystal Maiden. Изменяет модель героя и эффекты способностей на ледяные, добавляет новую анимацию ходьбы."
data-img="https://images.unsplash.com/photo-1550745165-9bc0b252726f?auto=format&fit=crop&w=600&q=80">
<img src="https://images.unsplash.com/photo-1550745165-9bc0b252726f?auto=format&fit=crop&w=600&q=80" alt="Игровой предмет" title="Frost Avalanche">
<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>
</article>
<article class="card"
data-title="Bladeform Legacy"
data-hero="Juggernaut"
data-price="21.00 $"
data-desc="Immortal-предмет для Juggernaut. Полностью заменяет маску героя, добавляет уникальные эффекты при использовании Omnislash и Blade Fury."
data-img="https://images.unsplash.com/photo-1493711662062-fa541adb3fc8?auto=format&fit=crop&w=600&q=80">
<img src="https://images.unsplash.com/photo-1493711662062-fa541adb3fc8?auto=format&fit=crop&w=600&q=80" alt="Игровой предмет" title="Bladeform Legacy">
<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>
</article>
<article class="card"
data-title="The Magus Cypher"
data-hero="Rubick"
data-price="15.75 $"
data-desc="Мифический предмет для Rubick. Меняет внешний вид посоха, добавляет эффекты при краже способностей и уникальную анимацию."
data-img="https://images.unsplash.com/photo-1560253023-3ec5d502959f?auto=format&fit=crop&w=600&q=80">
<img src="https://images.unsplash.com/photo-1560253023-3ec5d502959f?auto=format&fit=crop&w=600&q=80" alt="Игровой предмет" title="The Magus Cypher">
<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>
</article>
<article class="card"
data-title="Dread Requisition"
data-hero="Drow Ranger"
data-price="9.99 $"
data-desc="Редкий предмет для Drow Ranger. Изменяет модель лука, добавляет ледяные эффекты стрел и новую анимацию прицеливания."
data-img="https://images.unsplash.com/photo-1605870445919-838d190e8e1b?auto=format&fit=crop&w=600&q=80">
<img src="https://images.unsplash.com/photo-1605870445919-838d190e8e1b?auto=format&fit=crop&w=600&q=80" alt="Игровой предмет" title="Dread Requisition">
<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>
</article>
</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>
<!-- Модальное окно с описанием товара -->
<div class="modal" id="product-modal" aria-hidden="true">
<div class="modal-overlay" data-close></div>
<div class="modal-window" role="dialog" aria-modal="true" aria-labelledby="modal-title">
<button class="modal-close" type="button" data-close aria-label="Закрыть">×</button>
<img class="modal-img" id="modal-img" src="" alt="">
<div class="modal-body">
<h2 id="modal-title"></h2>
<p class="modal-hero" id="modal-hero"></p>
<p class="modal-desc" id="modal-desc"></p>
<div class="modal-bottom">
<strong id="modal-price"></strong>
<button class="button" type="button">Купить</button>
</div>
</div>
</div>
</div>
<script>
const modal = document.getElementById('product-modal');
const mImg = document.getElementById('modal-img');
const mTitle = document.getElementById('modal-title');
const mHero = document.getElementById('modal-hero');
const mDesc = document.getElementById('modal-desc');
const mPrice = document.getElementById('modal-price');
function openModal(card) {
mImg.src = card.dataset.img;
mImg.alt = card.dataset.title;
mTitle.textContent = card.dataset.title;
mHero.textContent = 'Герой: ' + card.dataset.hero;
mDesc.textContent = card.dataset.desc;
mPrice.textContent = card.dataset.price;
modal.classList.add('is-open');
modal.setAttribute('aria-hidden', 'false');
document.body.classList.add('modal-open');
}
function closeModal() {
modal.classList.remove('is-open');
modal.setAttribute('aria-hidden', 'true');
document.body.classList.remove('modal-open');
}
document.querySelectorAll('.card').forEach(card => {
card.addEventListener('click', () => openModal(card));
});
modal.querySelectorAll('[data-close]').forEach(el => {
el.addEventListener('click', closeModal);
});
document.addEventListener('keydown', e => {
if (e.key === 'Escape' && modal.classList.contains('is-open')) {
closeModal();
}
});
// Чтобы клик по кнопке "Купить" не открывал модалку
document.querySelectorAll('.card button, .modal-bottom button').forEach(btn => {
btn.addEventListener('click', e => e.stopPropagation());
});
</script>
</body>
</html>