<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Все по 5к</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header id="main">
        <div class="logo">
            <img src="logo.png" alt="logo">
        </div>
        <h1>Все по 5к</h1>
        <div class="img1">
            <ul>
                <li><a href="#main">Главная</a></li>
                <li><a href="#items">Товары</a></li>
                <li><a href="https://ktk-45.ru/document/110941">О сайте</a></li>
                <li><a href="#"><img src="../УП.05 Задание/3081822.png"></a></li>
                <li><a href="#"><img src="e79fb99288e6e8ebcf0579d19497b2f5.png"><br>User</a></li>
            </ul>
        </div>
    </header>

    <div class="y1" id="items"><br>
        <h1>Список товаров</h1>
        <div class="y11">
            <div class="h1">
                <div>
                    <img src="А112Т4.png" alt="1">
                    <h3>"Серьги Lux"</h3>
                    <h3>Категория: серьги</h3>
                    <p>Серьги серебряные в позолоте продёвки на цепочке "Звезда"</p>
                    <p>Цена: 5 000 руб.</p>
                    <input type="button" id="123" value="Добавить">
                </div>
                <div>
                    <img src="G843Y6.jpg" alt="2">
                    <h3>"Подвеска Silv"</h3>
                    <h3>Категория: подвеска</h3>
                    <p>Подвеска серебряная с фианитами 2138729/9 Ювелир Карат</p>
                    <p>Цена: 5 000 руб.</p>
                    <input type="button" id="123" value="Добавить">
                </div>
                <div>
                    <img src="G836H6.jpg" alt="3">
                    <h3>"Подвеска King"</h3>
                    <h3>Категория: подвеска</h3>
                    <p>Подвеска серебряная в позолоте с фианитами 2139189/9п Ювелир Карат</p>
                    <p>Цена: 5 000 руб.</p>
                    <input type="button" id="123" value="Добавить">
                </div>
            </div>
            <div class="h2">
                <div>
                    <img src="S648N6.png" alt="4">
                    <h3>"Серьги Butter"</h3>
                    <h3>Категория: серьги</h3>
                    <p>Серьги "Бабочки" в позолоте</p>
                    <p>Цена: 5 000 руб.</p>
                    <input type="button" id="123" value="Добавить">
                </div>
                <div>
                    <img src="D493Y7.jpg" alt="2">
                    <h3>"Ожерелье Loop"</h3>
                    <h3>Категория: ожерелье</h3>
                    <p>Ожерелье Cordelia муассанит, 11шт, 3,5мм, круг, BS Regular, 40см</p>
                    <p>Цена: 5 000 руб.</p>
                    <input type="button" id="123" value="Добавить">
                </div>
                <div>
                    <img src="D936R6.png" alt="3">
                    <h3>"Серьги Ty"</h3>
                    <h3>Категория: серьги</h3>
                    <p>Серьги со стразами Swarovski 2129919/96П Ювелир Карат</p>
                    <p>Цена: 5 000 руб.</p>
                    <input type="button" id="123" value="Добавить">
                </div>
            </div>
            <div class="h3">
                <div>
                    <img src="S395J7.jpg" alt="4">
                    <h3>"Серьги Ref"</h3>
                    <h3>Категория: серьги</h3>
                    <p>Серьги из золота 029038</p>
                    <p>Цена: 5 000 руб.</p>
                    <input type="button" id="123" value="Добавить">
                </div>
                <div>
                    <img src="C635R4.jpg" alt="2">
                    <h3>"Ожерелье Few"</h3>
                    <h3>Категория: ожерелье</h3>
                    <p>Ожерелье Lace муассанит, круг, BS Regular, 6,5мм, 2 муассанит Кр-57 6мм</p>
                    <p>Цена: 5 000 руб.</p>
                    <input type="button" id="123" value="Добавить">
                </div>
                <div>
                    <img src="F735H6.jpg" alt="3">
                    <h3>"Серьги Deq"</h3>
                    <h3>Категория: серьги</h3>
                    <p>Серьги из золота с эмалью</p>
                    <p>Цена: 5 000 руб.</p>
                    <input type="button" id="123" value="Добавить">
                </div>
            </div>
            <div class="h4">
                <div></div>
                <div>
                    <img src="S538J7.jpg" alt="3">
                    <h3>"Серьги Syt"</h3>
                    <h3>Категория: серьги</h3>
                    <p>Серьги с 4 фианитами из серебра с позолотой</p>
                    <p>Цена: 5 000 руб.</p>
                    <input type="button" id="123" value="Добавить">
                </div>
                <div></div>
            </div><br>
        </div>
    </div>
    <footer>
        <div class="img2"><br>
                    <ul>
                        <li><a href="#main">Главная</a></li>
                        <li><a href="#items">Товары</a></li>
                        <li><a href="https://ktk-45.ru/document/110941">О сайте</a></li>
                        <li>Email: <a href="allfor5k@localhost">allfor5k@localhost</a></li>
                    </ul>        
        </div><br>
    </footer>
</body>
</html> css:body{
    text-align: center;
    background-color:bisque;
    font-family:Georgia, 'Times New Roman', Times, serif;
}

.img1 li, a{
    text-decoration: none;
    list-style: none;
    font-size: 10px;
    color:black;
}

.img2 li, a{
    text-decoration: none;
    list-style: none;
    font-size: 20px;
    color:black;
}

.img1 img{
    height: 40px;
}

.logo img{
    height: 200px;
}

header{
    display: grid; grid-template-columns: 1fr 1fr 1fr;
}

header h1{
    font-size: 50px;
}

.y1{
    background-color:navajowhite;
}

.y11 img{
    height: 200px; width: 200px;
}

.h1{
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    margin-bottom: 10px;
}

.h2{
    display: grid; grid-template-columns: 1fr 1fr 1fr;margin-bottom: 10px; border-top: solid; padding-top: 10px;
}

.h3{
    display: grid; grid-template-columns: 1fr 1fr 1fr;margin-bottom: 10px;border-top: solid; padding-top: 10px;
}

.h4{
    display: grid; grid-template-columns: 1fr 1fr 1fr;margin-bottom: 10px;border-top: solid; padding-top: 10px;
}

footer ul {
    padding: 0;
    margin: 0;
}

footer ul li {
    display: inline;
    margin-right: 20px;
}

 footer ul li:last-child {
    margin-right: 0;
}

.y1 img{
    border-radius: 20px;

}
переделай на bootstrap