Untitled

unknown
plain_text
2 years ago
3.7 kB
Indexable
Never
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="/style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header class="site-header">
        <div class="container">
          <div class="logo">
            <a href="#">Собачьи стрижки</a>
          </div>
          <nav class="main-nav">
            <ul>
              <li><a href="#">Главная</a></li>
              <li><a href="#">Услуги</a></li>
              <li><a href="#">Контакты</a></li>
            </ul>
          </nav>
        </div>
      </header>
<section id="services">
  <h2>Наши услуги</h2>
  <p>Мы предлагаем широкий спектр услуг по уходу за вашими питомцами:</p>
  <ul>
    <li>Стрижка</li>
    <li>Купание</li>
    <li>Мытье шерсти и кожи</li>
    <li>Резка когтей</li>
    <li>Чистка ушей</li>
  </ul>
  <a href="#contact" class="button">Записаться на услуги</a>
</section>
<section id="gallery">
  <h2>Галерея</h2>
  <p>Посмотрите наши лучшие работы:</p>
  <div class="gallery">
    <img src="path/to/image1.jpg" alt="Собака 1">
    <img src="path/to/image2.jpg" alt="Собака 2">
    <img src="path/to/image3.jpg" alt="Собака 3">
    <img src="path/to/image4.jpg" alt="Собака 4">
    <img src="path/to/image5.jpg" alt="Собака 5">
    <img src="path/to/image6.jpg" alt="Собака 6">
  </div>
</section>
<section id="about">
  <h2>О нас</h2>
  <p>Мы являемся лучшими в своей области и предлагаем только качественные услуги для ваших питомцев. Все наши мастера имеют профессиональное образование и большой опыт работы.</p>
  <p>Вы можете быть уверены, что ваш питомец находится в надежных руках.</p>
</section>
<section id="contact">
  <h2>Контакты</h2>
  <p>Свяжитесь с нами для записи на услуги или если у вас есть воп

</body>
</html>

.container {
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 20px; /* добавляем отступы слева и справа для удобства чтения */
}

h1 {
    color: #f6d3d3;
    font-size: 36px;
    margin-bottom: 20px;
  }
  
  h2 {
    color: #f2f2f2;
    font-size: 24px;
    margin-bottom: 10px;
  }
.button {
  background-color: #b5a0a0;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #6d6875;
}

.site-header {
  background-color: #f6d3d3;
  padding: 20px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo a {
  color: #6d6875;
  font-size: 24px;
  text-decoration: none;
  font-weight: bold;
}

.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.main-nav li {
  margin: 0 10px;
}

.main-nav a {
  color: #6d6875;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  transition: color 0.3s ease;
}

.main-nav a:hover {
  color: #b5a0a0;
}