одностатичный сайт на тему машинки
body {font-family: Arial, sans-serif;margin: 0;padding: 0;}header {background-color: #333;color: white;text-align: center;padding: 10px0;}section {margin: 20px;}form {display: grid;gap: 10px;}button {padding: 5px10px;background-color: #333;color: white;border: none;cursor: pointer;}/* Стили для шапки сайта */header {background-color: #333;color: white;padding: 10px0;}.container {display: flex;justify-content: space-between;align-items: center;max-width: 1200px;margin: 0auto;padding: 020px;}.logoimg {max-height: 50px;}navul {list-style: none;padding: 0;margin: 0;display: flex;}navulli {margin-right: 20px;}navullia {text-decoration: none;color: white;}.cta.button {padding: 8px20px;background-color: #ffcc00;color: #333;text-decoration: none;border-radius: 5px;}.car-card {display: flex;border: 1pxsolid#ccc;border-radius: 5px;margin: 10px;}.car-cardimg {max-width: 200px;border-radius: 5px005px;}.car-details {padding: 10px;}.car-detailsh2 {margin-top: 0;}.car-detailsbutton {padding: 5px10px;background-color: #333;color: white;border: none;cursor: pointer;}footer {background-color: #333;color: white;padding: 20px0;}.footer-container {display: flex;justify-content: space-around;max-width: 1200px;margin: 0auto;}.footer-section {flex: 1;}.footer-sectionh3 {margin-bottom: 10px;}.footer-sectionul {list-style: none;padding: 0;}.footer-sectionulli {margin-bottom: 5px;}.footer-sectionform {display: flex;}.footer-sectionforminput {padding: 5px;margin-right: 10px;}.footer-sectionformbutton {padding: 5px10px;background-color: #ffcc00;border: none;color: #333;cursor: pointer;}/* Стили для заголовков */h1, h2, h3 {font-family: 'Arial', sans-serif;color: #333;margin-bottom: 10px;}/* Стили для кнопок */button, .button {padding: 10px20px;background-color: #ffcc00;border: none;color: #333;cursor: pointer;border-radius: 5px;}/* Стили для формы подписки */input[type="email"] {padding: 10px;border: 1pxsolid#ccc;border-radius: 5px;}/* Стили для ссылок */a {color: #007bff;text-decoration: none;transition: color0.3s;}a:hover {color: #0056b3;}/* Стили для общего контейнера */.container {max-width: 1200px;margin: 0auto;padding: 020px;}/* Стили для секций */section {margin-bottom: 40px;}/* Медиазапросы для адаптивного дизайна */@media (max-width: 768px) {.footer-container {flex-direction: column; }.footer-section {text-align: center;margin-bottom: 20px; }}body {font-family: Arial, sans-serif;margin: 0;padding: 0;}header {background-color: #333;color: white;padding: 10px0;}navul {padding: 0;list-style: none;display: flex;justify-content: space-around;}nava {text-decoration: none;color: #fff;padding: 10px15px;transition: background-color 0.3s;}nava:hover {background-color: #555;}nava:hover {text-decoration: none;}
<!DOCTYPEhtml><htmllang="ru"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Продажа автомобилей</title><linkrel="stylesheet"href="styles.css"></head><body><header><divclass="container"><divclass="logo"><imgsrc="stejk-lososya-s-zapechenoj-kartoshkoj-i-salatom-na-blyude.jpg"alt="Логотип автосалона"></div><nav><ul><li><ahref="#cars">Автомобили</a></li><li><ahref="#services">Услуги</a></li><li><ahref="#specials">Акции</a></li><li><ahref="#contact">Контакты</a></li></ul></nav><divclass="cta"><ahref="registration.html"class="button">Регистрация</a><ahref="login.html"class="button">Вход</a></div></div></header><sectionid="cars"><divclass="car-card"><imgsrc="stejk-lososya-s-zapechenoj-kartoshkoj-i-salatom-na-blyude.jpg"alt="Car 1"><divclass="car-details"><h2>Марка и модель автомобиля</h2><p>Цена: $20,000</p><p>Описание: Очень красивое и описательное описание автомобиля. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><button>Подробнее</button></div></div><divclass="car-card"><imgsrc="stejk-lososya-s-zapechenoj-kartoshkoj-i-salatom-na-blyude.jpg"alt="Car 1"><divclass="car-details"><h2>Марка и модель автомобиля</h2><p>Цена: $20,000</p><p>Описание: Очень красивое и описательное описание автомобиля. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><button>Подробнее</button></div></div><divclass="car-card"><imgsrc="stejk-lososya-s-zapechenoj-kartoshkoj-i-salatom-na-blyude.jpg"alt="Car 1"><divclass="car-details"><h2>Марка и модель автомобиля</h2><p>Цена: $20,000</p><p>Описание: Очень красивое и описательное описание автомобиля. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><button>Подробнее</button></div></div><divclass="car-card"><imgsrc="stejk-lososya-s-zapechenoj-kartoshkoj-i-salatom-na-blyude.jpg"alt="Car 1"><divclass="car-details"><h2>Марка и модель автомобиля</h2><p>Цена: $20,000</p><p>Описание: Очень красивое и описательное описание автомобиля. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><button>Подробнее</button></div></div></section><sectionid="contact"><h2>Свяжитесь с нами</h2><p>Для запросов заполните форму ниже:</p><formid="contact-form"><labelfor="name">Имя:</label><inputtype="text"id="name"name="name"required><labelfor="email">Email:</label><inputtype="email"id="email"name="email"required><labelfor="message">Сообщение:</label><textareaid="message"name="message"required></textarea><buttontype="submit">Отправить</button></form></section><footer><divclass="footer-container"><divclass="footer-section"><h3>Контакты</h3><p>Телефон: +7 (XXX) XXX-XX-XX</p><p>Адрес: Город, Улица, Дом</p></div><divclass="footer-section"><h3>Полезные ссылки</h3><ul><li><ahref="about.html">О нас</a></li><li><ahref="services.html">Наши услуги</a></li><li><ahref="contact.html">Обратная связь</a></li></ul></div><divclass="footer-section"><h3>Подписаться на новости</h3><form><inputtype="email"placeholder="Ваш email"><buttontype="submit">Подписаться</button></form></div></div></footer><scriptsrc="script.js"></script></body></html>
<!DOCTYPEhtml><htmllang="ru"><header><divclass="container"><divclass="logo"><ahref="index.html"><imgsrc="stejk-lososya-s-zapechenoj-kartoshkoj-i-salatom-na-blyude.jpg"alt="Логотип"></a></div><nav><ul><li><ahref="index.html">Главная</a></li><li><ahref="services.html">Услуги</a></li><li><ahref="contact.html">Контакты</a></li></ul></nav></div></header><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Регистрация</title><linkrel="stylesheet"href="styles.css"></head><body><h2>Регистрация</h2><formid="registration-form"><labelfor="username">Имя пользователя:</label><inputtype="text"id="username"name="username"required><labelfor="email">Email:</label><inputtype="email"id="email"name="email"required><labelfor="password">Пароль:</label><inputtype="password"id="password"name="password"required><buttontype="submit">Зарегистрироваться</button></form><scriptsrc="registration.js"></script></body><footer><divclass="footer-container"><divclass="footer-section"><h3>Контакты</h3><p>Телефон: +7 (XXX) XXX-XX-XX</p><p>Адрес: Город, Улица, Дом</p></div><divclass="footer-section"><h3>Полезные ссылки</h3><ul><li><ahref="about.html">О нас</a></li><li><ahref="services.html">Наши услуги</a></li><li><ahref="contact.html">Обратная связь</a></li></ul></div></div></footer></html>
<!DOCTYPEhtml><htmllang="ru"><header><divclass="container"><divclass="logo"><ahref="index.html"><imgsrc="stejk-lososya-s-zapechenoj-kartoshkoj-i-salatom-na-blyude.jpg"alt="Логотип"></a></div><nav><ul><li><ahref="index.html">Главная</a></li><li><ahref="services.html">Услуги</a></li><li><ahref="contact.html">Контакты</a></li></ul></nav></div></header><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Вход</title><linkrel="stylesheet"href="styles.css"></head><body><h2>Вход</h2><formid="login-form"><labelfor="email">Email:</label><inputtype="email"id="email"name="email"required><labelfor="password">Пароль:</label><inputtype="password"id="password"name="password"required><buttontype="submit">Войти</button></form><footer><divclass="footer-container"><divclass="footer-section"><h3>Контакты</h3><p>Телефон: +7 (XXX) XXX-XX-XX</p><p>Адрес: Город, Улица, Дом</p></div><divclass="footer-section"><h3>Полезные ссылки</h3><ul><li><ahref="about.html">О нас</a></li><li><ahref="services.html">Наши услуги</a></li><li><ahref="contact.html">Обратная связь</a></li></ul></div></div></footer><scriptsrc="login.js"></script></body></html>