Я могу помочь тебе с шаблоном HTML/CSS для простого сайта о машинах. Вот пример базового кода, который ты можешь использовать и развивать:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Крутой сайт о машинах</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Крутой сайт о машинах</h1>
<nav>
<ul>
<li><a href="#about">О сайте</a></li>
<li><a href="#cars">Машины</a></li>
<li><a href="#contact">Контакты</a></li>
</ul>
</nav>
</header>
<section id="about">
<h2>О сайте</h2>
<p>Здесь вы найдете информацию о различных марках и моделях автомобилей, их характеристиках и интересные факты.</p>
</section>
<section id="cars">
<h2>Модели автомобилей</h2>
<div class="car">
<h3>Модель 1</h3>
<p>Описание модели 1. Её характеристики, цены и особенности.</p>
</div>
<div class="car">
<h3>Модель 2</h3>
<p>Описание модели 2. Её характеристики, цены и особенности.</p>
</div>
<div class="car">
<h3>Модель 3</h3>
<p>Описание модели 3. Её характеристики, цены и особенности.</p>
</div>
</section>
<section id="contact">
<h2>Контакты</h2>
<p>Если у вас есть вопросы, напишите нам на email: <a href="mailto:info@carwebsite.com">info@carwebsite.com</a></p>
</section>
<footer>
<p>© 2023 Крутой сайт о машинах. Все права защищены.</p>
</footer>
</body>
</html>
Стили (styles.css):
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background: #333;
color: #fff;
padding: 10px 0;
}
header h1 {
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 15px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
section {
margin: 20px;
padding: 20px;
background: #fff;
border: 1px solid #ccc;
}
.car {
margin-bottom: 15px;
}
footer {
text-align: center;
padding: 10px;
background: #333;
color: #fff;
position: absolute;
width: 100%;
bottom: 0;
}
Как использовать этот код:
- Создай два файла:
index.htmlиstyles.css. - Скопируй HTML-код в
index.html, а CSS-код вstyles.css. - Открой
index.htmlв браузере, чтобы увидеть результат.
Ты можешь настраивать содержимое и стили по своему усмотрению!
