Придумай рассказ на 2-3 минуты про сайт "Онлайн зоомагазин" от том что он из себя представляет, что он содержит и тд. html: <!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Онлайн зоомагазин</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <div class="header" id="mainer">
            <div class="logo">
                <img src="media/лого.jpg" alt="logo">
                <h1>Деловой кот</h1>
            </div>
            <div class="navigation">
                <a href="#mainer">Главная</a>
                <a href="#aboutus">О нас</a>
                <a href="#products">Товары</a>
                <a href="#services">Услуги</a>
                <a href="#deals">Акции</a>
                <a href="#news">Новости</a>
                <a href="#textus">Напишите нам</a>
                <a href="#contacts">Контакты</a>
                <a href="#enter">Вход/регистрация</a>
            </div>
        </div>
    </header>
    
    <main>
        <section id="aboutus">
            <h2>О нас</h2>
            <p>Зоомагазин "Деловой кот" - ваш лучший выбор для заботы о ваших питомцах.<br> Мы предлагаем широкий ассортимент продуктов высокого качества, включая корма, лакомства, игрушки и аксессуары для домашних животных всех размеров и пород.<br> Наша миссия - сделать жизнь домашних животных максимально удобной и приятной.<br> Мы предлагаем услуги по уходу и содержанию домашних животных, чтобы каждый владелец мог обеспечить своему питомцу прекрасную жизнь без лишних хлопот.</p>
        </section>

        <section class="block1">
            <section id="products">
                <h2>Товары</h2>
                <div class="prod">
                    <nav class="pr1">
                        <div>
                            <img src="media/игрушки для котов.jpg" alt="p1">
                            <h3>Игрушки для котов</h3>
                            <p>Цена: 1000 руб.</p>
                        </div>
                        <div>
                            <img src="media/игрушки для собак.png" alt="p2">
                            <h3>Игрушки для собак</h3>
                            <p>Цена: 1050 руб.</p>
                        </div>
                    </nav>
                    <nav class="pr2">
                        <div>
                            <img src="media/корм кошачий.jpg" alt="p3">
                            <h3>Кошачий корм</h3>
                            <p>Цена: 750 руб.</p>
                        </div>
                        <div>
                            <img src="media/корм собачий.jpg" alt="p4">
                            <h3>Собачий корм</h3>
                            <p>Цена: 800 руб.</p>
                        </div>
                    </nav>
                    <nav class="pr3">
                        <div>
                            <img src="media/ошейник для котов.jpg" alt="p5">
                            <h3>Ошейник для котов</h3>
                            <p>Цена: 2000 руб.</p>
                        </div>
                        <div>
                            <img src="media/ошейник для собак.jpg" alt="p6">
                            <h3>Ошейник для собак</h3>
                            <p>Цена: 2450 руб.</p>
                        </div>
                    </nav>
                </div>
            </section>
    
            <section id="services">
                <h2>Услуги</h2>
                <div class="serv">
                    <div>
                        <img src="media/уход.jpg" alt="s1">
                        <h3>Уход за животными</h3>
                        <p>Стрижка и укладка шерсти, купание, стрижка когтей, очистка ушей и зубов</p><br>
                        <p>от 1000 руб.</p>
                    </div>
        
                    <div>
                        <img src="media/домик.jpg" alt="s2">
                        <h3>Гостиница для животных</h3>
                        <p>Временное содержание домашних животных</p><br>
                        <p>300 руб. день</p>
                    </div>
        
                    <div>
                        <img src="media/питание.jpg" alt="s3">
                        <h3>Консультации по питанию</h3>
                        <p>Предоставление рекомендаций по питанию домашних животных</p><br>
                        <p>900 руб.</p>
                    </div>
                </div>
            </section>

            

        </section>
             
        <section class="block2">

            <sectoin id="textus">
                <h2>Напишите нам</h2>
                <form>
                    <div style="margin-bottom: 20px;">
                        <label for="name">Имя:</label><br>
                        <input type="text" id="name" name="name" required>
                    </div>
                    
                    <div style="margin-bottom: 20px;">
                        <label for="email">Электронная почта:</label><br>
                        <input type="email" id="email" name="email" required>
                    </div>
                    
                    <div style="margin-bottom: 20px;">
                        <label for="message">Сообщение:</label><br>
                        <textarea id="message" name="message" required style="width: calc(100% - 22px);"></textarea>
                    </div>
                    
                    <input type="submit" value="Отправить">
                </form>
            </sectoin>

            <section id="contacts">
                <h2>Контакты</h2>
                <div class="cont">
                    <p>Телефон: +7(3522)436-89-45 <br>+7(3522)871-76-32</br> <br>Эл.почта: <PRESIDIO_ANONYMIZED_EMAIL_ADDRESS></br> <br>Адрес: г.Курган, ул.Омская, 72г</p>
                </div>
            </section>

        </section>

        <section class="block3">

            <section id="deals">
                <h2>Акции</h2>

                <nav class="actiongame">
                    <h3>Сыграйте в игру и испытайте свою удачу!</h3>

                    <p>Выберите 1 из 9 лапок и попрубуйте выйграть приз!</p>

                    <div id="gameboard"></div>
                    
                    <script>
                    function setupGame() {
                        const gameboard = document.getElementById('gameboard');
                        gameboard.innerHTML = '';
                    
                        const prizeCard = Math.floor(Math.random() * 9) + 1;
                    
                        for (let i = 1; i <= 9; i++) {
                            const card = document.createElement('div');
                            const img = document.createElement('img');
                            
                            img.src = 'media/лапка.jpg';
                            img.style.width = '100px';
                            img.style.height = '100px';
                            
                            card.className = 'card';
                            card.id = 'card-' + i;
                    
                            if (i === prizeCard) {
                                card.dataset.prize = true;
                            }
                    
                            card.appendChild(img);
                            card.onclick = function() { revealPrize(card); };
                            gameboard.appendChild(card);
                        }
                    }
                    
                    function revealPrize(card) {
                        const img = card.querySelector('img');
                        if (card.dataset.prize) {
                            img.src = 'media/зеленая лапа.jpg';
                            alert('Поздравляем! Вы выиграли бесплатный купон!');
                        } else {
                            img.src = 'media/красная лапа.jpg';
                            alert('К сожалению, вам не повезло...');
                        }
                        disableCards();
                    }
                    
                    function disableCards() {
                        const cards = document.querySelectorAll('.card');
                        cards.forEach(card => {
                            card.onclick = null;
                        });
                    }
                                
                    setupGame();
                    </script>
                </nav>
            </section>

            <section id="news">
                <h2>Новости</h2>

                <div class="news-item" id="news1">
                    <img src="media/новости пицца.jpg" alt="n1">
                    <div class="news-text">
                        <h3>Открылась новая пицеррия</h3>
                        <p>На против нашего магазина открылась новая пицеррия, которая обещает перевернуть ваш взгляд о классической итальянаской пицце! Приходите, попробуйте сами и убедитесь! <a href="#">Читать далее</a></p>
                    </div>
                </div>

                <div class="news-item" id="news2">
                    <img src="media/новости наводнеие.jpeg" alt="n2">
                    <div class="news-text">
                        <h3>Наводнение</h3>
                        <p>Город столкнулся с серьезной проблемой - наводнением, в связи с чем многие районы города оказались под водой, оставив тысячи жителей без домов. В ответ на непредвиденную катастрофу местные власти и сообщества мобилизовались для предоставления помощи пострадавшим. <a href="#">Читать далее</a></p>
                    </div>
                </div>

                <div class="news-item" id="news3">
                    <img src="media/новости группа.jpg" alt="n3">
                    <div class="news-text">
                        <h3>Новая музыкальная группа "Эхо Времени"</h3>
                        <p>На музыкальной сцене нашего города появилось новое имя, которое уже успело привлечь внимание поклонников и критиков. Молодая группа "Эхо Времени" дала свой первый концерт, и это событие можно смело называть взрывным дебютом. <a href="#">Читать далее</a></p>
                    </div>
                </div>

            </section>

        </section>

        <section class="blockform">
            <section id="enter">
                <h2>Вход</h2>
                <form action="/login" method="POST">
                    <div>
                        <label for="username">Логин:</label>
                        <input type="text" id="username" name="username" class="form-input" required>
                    </div>
                    <div>
                        <label for="password">Пароль:</label>
                        <input type="password" id="password" name="password" class="form-input" required>
                    </div>
                    <div>
                        <button type="submit" class="form-button">Войти</button>
                    </div>
                </form>
            </section>
            
            <section id="registration">
                <h2>Регистрация</h2>
                <form>
                    <p>
                        <label for="username">Имя пользователя:</label>
                        <input type="text" id="username" name="username" required>
                    </p>
                    <p>
                        <label for="email">Электронная почта:</label>
                        <input type="email" id="email" name="email" required>
                    </p>
                    <p>
                        <label for="password">Пароль:</label>
                        <input type="password" id="password" name="password" required>
                    </p>
                    <p>
                        <label for="password-confirm">Подтвердите пароль:</label>
                        <input type="password" id="password-confirm" name="password-confirm" required>
                    </p>
                    <p>
                        <input type="submit" value="Регистрация">
                    </p>
                </form>
            </section>
        </section>

    </main>
    
    <footer>
        <address>
            <p>Телефон: +7(3522)436-89-45 <br>+7(3522)871-76-32</br><br>Адрес: г.Курган, ул.Омская, 72г</p>
        </address>
    </footer>
</body>
</html> css: @font-face {
    font-family: MyFont;
    src: url(../fonts/MultiroundPro.otf);
}

body, h2, ul, p {
    margin: 0;
    padding: 0;
}

body{
    font-family: MyFont;
    background-image: url(../media/фон7.jpg);
}

.header {
    display: flex;
    flex-direction: column; 
    align-items: center;
    background: #ffffff;
    padding: 10px;
}

.header{
    width: 80%;
      margin: 20px auto;
      padding: 20px; 
      border: 1px solid #000;
      border-radius: 15px;
      box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
}

.header h1{
    font-size: 70px;
}

.logo {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.logo img {
    width: auto;
    height: 150px;
    margin-right: 10px;
}
.navigation {
    display: flex;
}
.navigation a {
    color: #000000;
    text-decoration: none;
    padding: 0 10px;
    margin-right: 5px;
    font-size: 22px;
    border: 1px solid black;
    border-radius: 10px;
}

.navigation a:hover{
    background-color: black;
    color: white;
}

main h2{
    font-size: 42px;
}

main h3{
    font-size: 25px ;
}

main p{
    font-size: 24px;
}

#aboutus{
    width: 70%;
    margin: 20px auto;
    padding: 20px;
    background: #ffffff;
    text-align: center;
    border: 0px solid #ffffff;
      border-radius: 15px;
      box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
    line-height: 1.6;
}

.block1{
    width: 70%;
    margin: 20px auto;
    padding: 20px;
    background: #ffffff;
    text-align: center;
    border: 0px solid #ffffff;
      border-radius: 15px;
      box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
}

.block2{
    width: 27%;
    margin: 20px auto;
    padding: 20px;
    background: #ffffff;
    text-align: center;
    border: 0px solid #ffffff;
      border-radius: 15px;
      box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
}

.block3{
    width: 70%;
    margin: 20px auto;
    padding: 20px;
    background: #ffffff;
    text-align: center;
    border: 0px solid #ffffff;
      border-radius: 15px;
      box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
}

.blockform{
    width: 27%;
    margin: 20px auto;
    padding: 20px;
    background: #ffffff;
    text-align: center;
    border: 0px solid #ffffff;
      border-radius: 15px;
      box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
}

#textus{
    font-size: 25px;
}

#services{
    padding-top:40px ;
}

#services p{
    font-size: 20px;
}

.serv{
    display: grid; grid-template-columns:  1fr 1fr 1fr;
}

.serv img{
    height: 235px;
    width: auto;
    border-radius: 20px;
}

.serv div{
    width: 80%;
      margin: 20px auto;
      padding: 20px; 
      border: 2px solid #000;
      border-radius: 15px;
      box-shadow: 0px 0px 10px rgba(0,0,0,0.5); 
}

.pr1{
    display: grid; grid-template-columns:  1fr 1fr;
}

.pr2{
    display: grid; grid-template-columns:  1fr 1fr;
}

.pr3{
    display: grid; grid-template-columns:  1fr 1fr;
}

.prod div{
    width: 80%;
      margin: 20px auto;
      padding: 20px; 
      border: 2px solid #000;
      border-radius: 15px;
      box-shadow: 0px 0px 10px rgba(0,0,0,0.5); 
}

.prod img{
    height: 200px;
    width: auto;
    border-radius: 20px;
}

#contacts{
    padding-top: 40px;
}

.cont{
    width: 80%;
    margin: 20px auto;
    padding: 20px;
    background: #f9f9f9;
    text-align: center;
    border: 1px solid #ccc;
      border-radius: 5px;
}

#registration{
    padding-top: 40px;
}

form {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
}

input[type="text"],
input[type="email"],
input[type="password"] {
    width: calc(100% - 22px);
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

input[type="submit"] {
    background-color: #7c7c7c;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

input[type="submit"]:hover {
    background-color: #007025;
}

#enter {
    font-size: 25px;
 }

 .form-input {
    margin-bottom: 10px;
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
 }
 .form-button {
    width: 30%;
    padding: 10px;
    border: none;
    background-color: #7c7c7c;
    color: white;
    border-radius: 4px;
    cursor: pointer;
 }
 .form-button:hover {
    background-color: #007025;
 }

 #news{
    padding-top: 40px;
 }

 .news-item {
    display: flex;
    margin-bottom: 20px;
    align-items: flex-start;
}
.news-item img {
    margin-right: 15px;
    width: 300px;
    height: auto;
    border-radius: 10px;
}
.news-text {
    flex: 1;
}
.news-text h3 {
    margin-top: 0;
}

#news1{
    width: 95%;
    margin: 20px auto;
    padding: 20px;
    background: #f9f9f9;
    text-align: center;
    border: 1px solid #ccc;
      border-radius: 5px;
}

#news2{
    width: 95%;
    margin: 20px auto;
    padding: 20px;
    background: #f9f9f9;
    text-align: center;
    border: 1px solid #ccc;
      border-radius: 5px;
}

#news3{
    width: 95%;
    margin: 20px auto;
    padding: 20px;
    background: #f9f9f9;
    text-align: center;
    border: 1px solid #ccc;
      border-radius: 5px;
}

.actiongame{
    width: 95%;
    margin: 20px auto;
    padding-bottom: 20px;
    background: #f9f9f9;
    text-align: center;
    border: 1px solid #ccc;
      border-radius: 5px;
}

.card {
    width: 100px;
    height: 100px;
    display: inline-block;
    background-color: #f0f0f0;
    margin: 10px;
    text-align: center;
    line-height: 100px;
    font-size: 24px;
    cursor: pointer;
    user-select: none;
}

.card {
    background-size: cover;
    background-position: center;
}

.hidden {
    visibility: hidden;
}

  footer {
    background: #ffffff;
    color: rgb(0, 0, 0);
    text-align: center;
    padding: 10px 0;
    font-size: 20px;
}