js-dom/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Мой магазин</title>
    <!-- Styles CSS -->
    <link rel="stylesheet" href="styles/style.css">
    <link rel="stylesheet" href="styles/media.css">
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap" rel="stylesheet">
</head>

<body>
    <header>
        <div class="container">
            <div class="header-content">
                <div class="header-title">
                    <h1>мой магазин</h1>
                </div>
                <div class="cart">
                    <span class="cart-link">
                        <a href="#">Моя корзина</a>
                    </span>
                    <span class="counter">0</span>
                </div>
            </div>
        </div>
    </header>
    <main>
        <div class="container">
            <h2>Список товаров:</h2>
            <div class="main-content">
                <div class="card">
                    <div class="card-img">
                        <img src="https://cdn1.ozone.ru/multimedia/c400/1033180284.jpg" alt="#">
                    </div>
                    <div class="card-price">
                        <h5>33990 ₽</h5>
                    </div>
                    <div class="card-info">
                        <span>Игровая приставка Sony PlayStation 4 Pro</span>
                    </div>
                    <div class="card-btn">
                        <button class="btn-add">В корзину</button>
                    </div>
                </div>
                <div class="card">
                    <div class="card-img">
                        <img src="https://cdn1.ozone.ru/multimedia/c400/1027495663.jpg" alt="#">
                    </div>
                    <div class="card-price">
                        <h5>16499 ₽</h5>
                    </div>
                    <div class="card-info">
                        <span>Игровая приставка Sony PlayStation 3 Super Slim</span>
                    </div>
                    <div class="card-btn">
                        <button class="btn-add">В корзину</button>
                    </div>
                </div>
                <div class="card">
                    <div class="card-img">
                        <img src="https://cdn1.ozone.ru/multimedia/c400/1024358491.jpg" alt="#">
                    </div>
                    <div class="card-price">
                        <h5>23411 ₽</h5>
                    </div>
                    <div class="card-info">
                        <span>Игровая приставка Xbox One S</span>
                    </div>
                    <div class="card-btn">
                        <button class="btn-add">В корзину</button>
                    </div>
                </div>
                <div class="card">
                    <div class="card-img">
                        <img src="https://cdn1.ozone.ru/multimedia/c400/1021386685.jpg" alt="#">
                    </div>
                    <div class="card-price">
                        <h5>24751 ₽</h5>
                    </div>
                    <div class="card-info">
                        <span>Игровая приставка Nintendo Switch</span>
                    </div>
                    <div class="card-btn">
                        <button class="btn-add">В корзину</button>
                    </div>
                </div>
                <div class="card">
                    <div class="card-img">
                        <img src="https://cdn1.ozone.ru/multimedia/c400/1024928305.jpg" alt="#">
                    </div>
                    <div class="card-price">
                        <h5>3624 ₽</h5>
                    </div>
                    <div class="card-info">
                        <span>Игровая приставка Sega Retro Genesis HD</span>
                    </div>
                    <div class="card-btn">
                        <button class="btn-add">В корзину</button>
                    </div>
                </div>
                <div class="card">
                    <div class="card-img">
                        <img src="https://cdn1.ozone.ru/multimedia/c400/1026748248.jpg" alt="#">
                    </div>
                    <div class="card-price">
                        <h5>1279 ₽</h5>
                    </div>
                    <div class="card-info">
                        <span>Коврик для мыши Orico MPA9040</span>
                    </div>
                    <div class="card-btn">
                        <button class="btn-add">В корзину</button>
                    </div>
                </div>
                <div class="card">
                    <div class="card-img">
                        <img src="https://cdn1.ozone.ru/multimedia/c400/1015773076.jpg" alt="#">
                    </div>
                    <div class="card-price">
                        <h5>3990 ₽</h5>
                    </div>
                    <div class="card-info">
                        <span>1С:Предприятие 8.3. Версия для обучения программированию</span>
                    </div>
                    <div class="card-btn">
                        <button class="btn-add">В корзину</button>
                    </div>
                </div>
                <div class="card">
                    <div class="card-img">
                        <img src="https://cdn1.ozone.ru/multimedia/c400/1025053907.jpg" alt="#">
                    </div>
                    <div class="card-price">
                        <h5>4959 ₽</h5>
                    </div>
                    <div class="card-info">
                        <span>Коврик для мыши Trust GXT 760 Glide RGB</span>
                    </div>
                    <div class="card-btn">
                        <button class="btn-add">В корзину</button>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <!-- Modal Cart -->
    <div class="cart-modal">
        <div class="container">
            <div class="cart-wrapper">
                <div class="close-cart">
                    <img src="img/close.svg" alt="#">
                </div>
                <h1>Ваша корзина:</h1>
                <span class="total-price">Общая сумма: 0 рублей</span>
                <div class="cart-content">
                    <div class="cart-title_info">
                        <span>Ваша корзина пока пуста</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Script JS -->
    <script src="js/index.js"></script>
</body>

</html>