index.html

<!DOCTYPE html>
<head>
    <title>Проект</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <header>
            <p>
                <img src="logo.png" alt="Logo" width="188" height="82">
                <nav>
                    <a href="#">Головна</a>
                    <a href="#">Каталог</a>
                    <a href="#">Контакти</a>
                </nav>
                
                <button class="login-button">Вхід</button>
            </p>
            <div class="menu-container">
                <button class="menu-button">Меню</button>
                <ul class="dropdown-menu">
                    <li><a href="#">Головна</a></li>
                    <li><a href="#">Каталог</a></li>
                    <li><a href="#">Контакти</a></li>
                </ul>
            </div>
        </header>

        <main>
            <section>
                <article class="card">
                    <img src="1.webp" 
                        alt="Product Image" width="150" height="250">
                    <h1>Манґа Химерні пригоди ДжоДжо <br>Частина 1: Фантомна Кров Том 1</h1>
                    <p>Перший том, в якому зібрані 1-8 розділи манги</p>
                    <p class="product-price">300₴</p>
                    <button class="buy-button">Замовити</button>
                    
                </article>

                <article class="product-card">
                    <img src="2.webp" 
                        alt="Product Image" width="150" height="250">
                    <h1>Манґа Химерні пригоди ДжоДжо <br>Частина 2: Жага Крові!</h1>
                    <p>Другий том, в якому зібрані 9-17 розділи манги</p>
                    <p class="product-price">300₴</p>
                    <button class="buy-button">Замовити</button>
                </article>

                <article class="product-card">
                    <img src="3.webp" 
                        alt="Product Image" width="150" height="250">
                    <h1>Манґа Химерні пригоди ДжоДжо <br>Частина 3: Темні лицарі</h1>
                    <p>Третій том, в якому зібрані 18-27 розділи манги</p>
                    <p class="product-price">300₴</p>
                    <button class="buy-button">Замовити</button>
                </article>

                <article class="product-card">
                    <img src="4.webp" 
                        alt="Product Image" width="150" height="250">
                    <h1>Манґа Химерні пригоди ДжоДжо <br>Частина 4: Кімната Двоголового Дракона</h1>
                    <p>Четвертий том, в якому зібрані 28-37 розділи манги</p>
                    <p class="product-price">300₴</p>
                    <button class="buy-button">Замовити</button>
                </article>
            </section>
        </main>
    </div>
</body>
</html>