Untitled
unknown
plain_text
2 years ago
3.7 kB
2
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; }