Otter
/
PoletMySite


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Собаки</title>
    <link rel="icon" href="img/icon.png">
    <link rel="stylesheet" href="styles/null.css">
    <link rel="stylesheet" href="styles/styles.css">
    <script src="check-form.js"></script>
</head>

<body class="main-background">
    <div class="content">
        <!-- Шапка -->
        <header class="head-location">
            <div class="location-logo">
                <img src="img/icon.png" alt="" class="head-img">
                <a class="logo-text" href="index.html">Paw <span>print</span></a>
            </div>
            <div class="location-menu">
                <a class="menu-button" href="index.html">ГЛАВНАЯ</a>
                <a class="menu-button" href="dog.html">СОБАКИ</a>
                <a class="menu-button" href="cat.html">КОШКИ</a>
                <a class="menu-button" href="blog.html">БЛОГ</a>
            </div>
            <a class="donation" href="donation.html">ОСТАВИТЬ СЛЕД</a><!-- Взять питомца или пожертвовать -->
        </header>
        <div class="location">
            <p class="title">Наши кошки</p>
            <div class="pets">
                <div class="pets-list">
                    <img src="img/cat/cat1.png" class="item-img">
                    <div class="title-text">Энви</div>
                    <div class="all-text">Эйви осторожная и старается разведать обстановку перед тем как идти на
                        контакт.
                        Путь к её сердцу лежит через желудок, ведь когда-то она тратила много сил и энергии на поиск
                        пищи и до сих пор не может наесться вдоволь.</div>
                    <button class="take" onclick="window.location.href='#openModal'"> Взять </button>
                </div>
                <div class="pets-list">
                    <img src="img/cat/cat2.png" class="item-img">
                    <div class="title-text">Шрам</div>
                    <div class="all-text">Грозный Шрам свысока смотрит на всю эту вашу человеческую суету,
                        беготню и шумные тусовки. Он давно всё про всех понял и тратить свой
                        ежедневный запас мяуканья попусту не намерен.</div>
                    <button class="take" onclick="window.location.href='#openModal'"> Взять </button>
                </div>
                <div class="pets-list">
                    <img src="img/cat/cat3.png" class="item-img">
                    <div class="title-text">Рамина</div>
                    <div class="all-text">Рамина невероятно ласковая кошка,
                        которая готова общаться с людьми 24 часа в сутки и 7 дней в неделю!</div>
                    <button class="take" onclick="window.location.href='#openModal'"> Взять </button>
                </div>
                <div class="pets-list">
                    <img src="img/cat/cat4.png" class="item-img">
                    <div class="title-text">Носси</div>
                    <div class="all-text">Неуловимый и незаметный. Носси-один из самых боязливых наших котиков
                        Но, это вовсе не повод забыть о его существовании не пытаться найти для него семью, верно?</div>
                    <button class="take" onclick="window.location.href='#openModal'"> Взять </button>
                </div>
            </div>
        </div>
        <div id="openModal" class="modal">
            <form class="decor">
                <div class="form-left-decoration"></div>
                <div class="form-right-decoration"></div>
                <div class="circle"></div>
                <div class="form-inner">
                    <div class="modal-header">
                        <h3>Укажите свои контактные данные</h3>
                        <a href="#close" class="close">x</a>
                    </div>
                    <input type="text" placeholder="Кличка животного" name="namePets" oninput="checkFields()" />
                    <fieldset class="form-radio-button">
                        <div class="radio-item">
                            <input class="radio-item-input" type="radio" name="animal" value="cat" id="cat" />
                            <label class="radio-item-label" for="cat">Кот</label>
                        </div>
                        <div class="radio-item">
                            <input class="radio-item-input" type="radio" name="animal" value="dog" id="dog" />
                            <label class="radio-item-label" for="dog">Собака</label>
                        </div>
                    </fieldset>
                    <input type="text" placeholder="Имя" name="name" required oninput="checkFields()" />
                    <input type="text" placeholder="Фамилия" name="surname" required oninput="checkFields()" />
                    <input type="tel" placeholder="Телефон для связи" name="phone" required oninput="checkFields()" />
                    <input type="submit" value="Отправить заявку" name="btn-input" onclick="submitForm()" />
                </div>
            </form>
        </div>
        <div id="openModalMessage" class="modal">
            <form class="decor">
                <div class="form-inner" style="padding: 10px;">
                    <div class="modal-header">
                        <h3>Данные отправлены</h3>
                        <a href="#close" class="close">x</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- Подвал -->
    <footer>
        <p class="menu_footer">Телефон: (862)1-162-162<br>
            ©2023 Ассоциация помощи животным PawPrint
        </p>
    </footer>
</body>

</html>