Otter
/
PoletMySite


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
							<!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/dog/dog1.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/dog/dog2.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/dog/dog3.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/dog/dog4.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/dog/dog5.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/dog/dog6.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/dog/dog7.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/dog/dog8.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/dog/dog9.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/dog/dog10.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/dog/dog11.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/dog/dog12.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>