CSS настройки сайта
/* Общие настройки */
body {
background-color: #1a1a1a; /* Темный фон */
color: #ffffff;
font-family: Arial, sans-serif;
margin: 0;
}
/* Шапка */
header {
background-color: #333;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid #ff4500; /* Оранжевый акцент */
}
nav ul {
list-style: none;
display: flex;
}
nav ul li {
margin-left: 20px;
}
nav ul li a {
color: white;
text-decoration: none;
font-weight: bold;
}
/* Сетка товаров (как в PowerPoint) */
.category-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
padding: 40px;
}
.card {
background-color: #2a2a2a;
padding: 15px;
text-align: center;
border-radius: 8px;
transition: 0.3s;
}
.card img {
max-width: 100%;
height: auto;
}
.card:hover {
transform: scale(1.05);
box-shadow: 0 0 15px #ff4500;
}
/* Подвал */
footer {
background-color: #111;
text-align: center;
padding: 20px;
margin-top: 50px;
border-top: 1px solid #444;
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>АвтоЗапчасти - Главная</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="logo">
<a href="index.html"><img src="logo.png" alt="Логотип АвтоЗапчасти"></a>
</div>
<nav>
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="about.html">О компании</a></li>
<li><a href="catalog.html">Каталог</a></li>
<li><a href="news.html">Новости</a></li>
<li><a href="promos.html">Акции</a></li>
<li><a href="feedback.html">Связь</a></li>
<li><a href="contacts.html">Контакты</a></li>
<li><a href="login.html">Вход</a></li>
</ul>
</nav>
</header>
<main>
<section class="hero">
<h1>Добро пожаловать в магазин автозапчастей</h1>
<p>Лучшие детали для вашего авто здесь.</p>
</section>
<div class="category-grid">
<div class="card">
<img src="tires.jpg" alt="Шины">
<h3>Шины и диски</h3>
</div>
<div class="card">
<img src="engine.jpg" alt="Двигатель">
<h3>Запчасти двигателя</h3>
</div>
</div>
</main>
<footer>
<div class="footer-content">
<p>Название сайта: <strong>AutoPart Pro</strong></p>
<p>Копирайт © 2026</p>
<p>Организация: ООО "Аммар"</p>
<p>Год разработки: 2026</p>
</div>
</footer>
</body>
</html>