GTC
/
Frontend


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
							<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>    
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="doctors_carousel.css" />
    <link rel="stylesheet" href="polaroid-pets.css" />
    <link rel="shortcut icon" href="img/icon.svg" type="image/svg">
    <title>Хвостатый дом</title>
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Commissioner:wght@100..900&display=swap');
      @import url('https://fonts.googleapis.com/css2?family=Abhaya+Libre:wght@400;500;600;700;800&family=Commissioner:wght@100..900&display=swap');
      html {
        height: 100%; 
        overflow-x:  hidden;
        } 
        body {
            background: 
            url(img/pinkCirclesMain.png) right -1vw top no-repeat, 
            url(img/yellowFigureMain.png) left top 12vw no-repeat,
            url(img/crossesMain.png) right top 50vw no-repeat;            
            position: absolute;
        }        
    </style>
    <script src="main.js"></script>
  </head>
  <body class="main-unregistered">
    <div class="intro">
      <div class="heads-intro">
        <div class="text-head">Хвостатый дом</div>
        <div class="text-subhead">Тепло в добрые руки</div>
        <img class="image-intro-pets" src="img/image-2.png" />
      </div>

      <div class="menu">
        <button class="text-menu" id="glavnaya" onclick="scrollToTop()">Главная</button>
        <button class="text-menu" id="uslugi" onclick="document.location='services-unreg.html'">Услуги</button>
        <button class="text-menu" id="vrachi" onclick="document.location='doctors.html'">Наши врачи</button>
        <button class="text-menu" id="pryut" onclick="document.location='shelter.html'">Приют</button>
        <button class="text-menu" id="voiti" onclick="document.location='authorization_form.html'">Войти</button>
      </div>

    </div>
    <div class="miniinfo">
      <div class="subminiinfo">
        <img class="miniinfo-img" src="img/image-3.png">
        <div>
          <p class="text-miniinfo-head">Мы - Хвостатый дом</p>
          <p class="text-miniinfo-subhead">
            Мы предоставляем ветеринарные услуги для домашних и бездомных животных, помогая им получить необходимое
            лечение и уход. <br /><br />Мы заботимся о здоровье и благополучии всех наших подопечных, обеспечивая им
            любовь, заботу и благополучие.
          </p>
        </div>
      </div>
    </div>

    <div class="services">
      <div class="text-services-head">Популярные услуги</div>
      <div class="subservices">
        <div class="services-part" onmouseover="changeImage1('img/obsledovanie-hovered.png')" onmouseout="changeImage1('img/obsledovanie.png')">
          <div class="for-services-img"><div class="services-img"><img id="obsledovanie" src="img/obsledovanie.png"/></div></div>
          <div class="text-services">Клинический осмотр</div>
        </div>
        <div class="services-part" onmouseover="changeImage2('img/vakcinaciya-hovered.png')" onmouseout="changeImage2('img/vakcinaciya.png')">
          <div class="for-services-img"><div class="services-img"><img id="vakcinaciya" src="img/vakcinaciya.png" /></div></div>
          <div class="text-services">Вакцинация кошек</div>
        </div>
        <div class="services-part" onmouseover="changeImage3('img/analizy-hovered.png')" onmouseout="changeImage3('img/analizy.png')">
          <div class="for-services-img"><div class="services-img"><img id="analizy" src="img/analizy.png" /></div></div>
          <div class="text-services">Анализ крови</div>
        </div>
      </div>
      <div class="subservices">
        <div class="services-part" onmouseover="changeImage4('img/stomatologiya-hovered.png')" onmouseout="changeImage4('img/stomatologiya.png')">
          <div class="for-services-img"><div class="services-img"><img id="stomatologiya" src="img/stomatologiya.png" /></div></div>
          <div class="text-services">Ультразвуковая чистка</div>
        </div>
        <div class="services-part" onmouseover="changeImage5('img/gruming-hovered.png')" onmouseout="changeImage5('img/gruming.png')">
          <div class="for-services-img"><div class="services-img"><img id="gruming" src="img/gruming.png" /></div></div>
          <div class="text-services">Гигиеническая стрижка</div>
        </div>
        <div class="services-part" onmouseover="changeImage6('img/operaciya-hovered.png')" onmouseout="changeImage6('img/operaciya.png')">
          <div class="for-services-img"><div class="services-img"><img id="operaciya" src="img/operaciya.png" /></div></div>
          <div class="text-services">Кесарево сечение</div>
        </div>
      </div>
    </div>

    <div class="doctors">
      <p class="doctors-head">Наши лучшие специалисты</p>
      <div class="container">
        <input type="radio" name="slider" id="item-1" checked>
        <input type="radio" name="slider" id="item-2">
        <input type="radio" name="slider" id="item-3">
      <div class="cards">
        <label class="card" for="item-1" id="doc-1">
            <img class="img_doc" src="img/novikova.png" alt="Новикова Вера">
        </label>
        <label class="card" for="item-2" id="doc-2">
          <img class="img_doc" src="img/korolev.png" alt="Королев Михаил">
        </label>
        <label class="card" for="item-3" id="doc-3">
          <img class="img_doc" src="img/kirillov.png" alt="Кириллов Федор">
        </label>
      </div>
      <div class="player">
        <div class="upper-part">
          <div class="info-area" id="test">
            <label class="song-info" id="song-info-1">
              <div class="title">Новикова Вера</div>
              <div class="sub-line">
                <div class="subtitle">терапевт</div>
              </div>
            </label>
            <label class="song-info" id="song-info-2">
              <div class="title">Королев Михаил</div>
              <div class="sub-line">
                <div class="subtitle">ЛОР-офтальмолог</div>
              </div>
            </label>
            <label class="song-info" id="song-info-3">
              <div class="title">Кириллов Федор</div>
              <div class="sub-line">
                <div class="subtitle">лаборант и процедурный медбрат</div>
              </div>
            </label>
          </div>
        </div> 
      </div>
    </div>
    </div>

    <div class="pets">
      <div class="pets-head">Наши питомцы</div>
      <div class="subpets">
        <div class="gallery">
        <img class="pets-img" src="img/britain.jpg" alt="Луна">
        <img class="pets-img" src="img/bulldog.jpg" alt="Белла">
        <img class="pets-img" src="img/hamster.jpg" alt="Марципан">
        <img class="pets-img" src="img/siamese.jpg" alt="Томас">
        </div>
        <div class="pets-part-background">
          <p class="pets-parts-text">Наши питомцы - наша ответственность. Мы стремимся найти каждому из них тёплый дом и заботливую семью. 
            Может,  вы станете следующим счастливым обладателем хвостатого соседа?</p>
        </div>
      </div>
    </div>

    <div class="podval">
      <div class="podval-str1">
        <div class="podval-text-col1">По всем вопросам по телефону:</div>
        <div class="podval-text-col2">+79625062815</div>
      </div>
      <div class="podval-str2">
        <div class="podval-text-col1">Либо по адресу:</div>
        <div class="podval-text-col2">Н. Новгород, Южное ш., 2Г <br />Пн-Сб 9:00-20:00</div>
      </div>
    </div>
  </body>
</html>