Pastein: <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>VERSALE DETAILING</title> <style> * { box

Загрузка данных
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>VERSALE DETAILING</title>

<style>

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: #080808;
    color: white;
    font-family: Arial, sans-serif;
}

header {
    background: #0d0d0d;
    border-bottom: 1px solid #292929;
    padding: 20px 50px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    position: sticky;
    top: 0;
    z-index: 10;
}

.logo {
    font-size: 25px;
    font-weight: bold;
    letter-spacing: 6px;
}

nav a {
    color: #aaa;
    text-decoration: none;
    margin-left: 25px;
}

nav a:hover {
    color: white;
}

.button {
    background: white;
    color: black;
    border: none;
    padding: 13px 22px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
}

.button:hover {
    opacity: 0.8;
}


/* ГЛАВНЫЙ ЭКРАН */

.hero {
    min-height: 650px;

    display: flex;
    align-items: center;

    padding: 60px;

    background:
    linear-gradient(
        rgba(0,0,0,0.6),
        rgba(0,0,0,0.8)
    ),

    /* СЮДА МОЖНО ПОСТАВИТЬ ФОНОВУЮ КАРТИНКУ */
    url("https://images.unsplash.com/photo-1503376780353-7e6692767b70");

    background-size: cover;
    background-position: center;
}

.hero-content {
    max-width: 700px;
}

.hero h1 {
    font-size: 80px;
    margin: 0;
    letter-spacing: -5px;
}

.hero p {
    color: #aaa;
    font-size: 20px;
    line-height: 1.6;
}

.hero-buttons {
    margin-top: 30px;
}


/* ОБЩИЕ СЕКЦИИ */

section {
    padding: 90px 50px;
    max-width: 1200px;
    margin: auto;
}

.title {
    font-size: 40px;
    margin-bottom: 10px;
}

.description {
    color: #888;
}


/* УСЛУГИ */

.services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.service {
    background: #111;
    border: 1px solid #292929;
    border-radius: 15px;
    padding: 30px;
}

.service h3 {
    font-size: 22px;
}

.service p {
    color: #888;
    line-height: 1.5;
}

.price {
    font-size: 22px;
    font-weight: bold;
    margin-top: 20px;
}


/* РАБОТЫ */

.works {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.work {
    background: #111;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid #292929;
}

.work img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.work-text {
    padding: 20px;
}

.work-text span {
    color: #777;
}


/* ГАЛЕРЕЯ */

.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 40px;
}

.gallery img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid #292929;
}


/* КОНТАКТЫ */

.contacts {
    background: #111;
    max-width: none;
}

.contact-content {
    max-width: 1100px;
    margin: auto;
}

.contact-box {
    border: 1px solid #292929;
    border-radius: 15px;
    padding: 30px;
    margin-top: 30px;
}

.contact-box p {
    color: #999;
}


/* ПОДВАЛ */

footer {
    text-align: center;
    padding: 30px;
    color: #555;
    border-top: 1px solid #222;
}


/* АДАПТАЦИЯ ТЕЛЕФОНА */

@media(max-width: 800px) {

    header {
        padding: 20px;
    }

    nav {
        display: none;
    }

    .hero {
        padding: 30px;
    }

    .hero h1 {
        font-size: 55px;
    }

    section {
        padding: 60px 25px;
    }

    .services {
        grid-template-columns: 1fr;
    }

    .works {
        grid-template-columns: 1fr;
    }

    .gallery {
        grid-template-columns: 1fr;
    }

}

</style>

</head>


<body>


<!-- ============================= -->
<!-- ШАПКА САЙТА -->
<!-- ============================= -->

<header>

<div class="logo">
VERSALE
</div>

<nav>

<a href="#services">Услуги</a>

<a href="#works">Работы</a>

<a href="#gallery">Галерея</a>

<a href="#contacts">Контакты</a>

<button class="button">
Войти
</button>

</nav>

</header>



<!-- ============================= -->
<!-- ГЛАВНЫЙ ЭКРАН -->
<!-- ============================= -->

<div class="hero">

<div class="hero-content">

<p>PREMIUM DETAILING • ANAPA</p>

<h1>
VERSALE
</h1>

<p>
Профессиональный детейлинг автомобилей.
Уход за кузовом, салоном и защитные покрытия.
</p>

<div class="hero-buttons">

<a href="#services">
<button class="button">
НАШИ УСЛУГИ
</button>
</a>

</div>

</div>

</div>



<!-- ============================= -->
<!-- УСЛУГИ -->
<!-- ============================= -->

<section id="services">

<h2 class="title">
Наши услуги
</h2>

<p class="description">
Профессиональный уход за вашим автомобилем
</p>


<div class="services">


<div class="service">

<h3>
Комплексная мойка
</h3>

<p>
Деликатная мойка кузова,
колес и труднодоступных мест.
</p>

<div class="price">
от 1 500 ₽
</div>

</div>



<div class="service">

<h3>
Химчистка салона
</h3>

<p>
Глубокая очистка сидений,
пластика, ковров и потолка.
</p>

<div class="price">
от 4 000 ₽
</div>

</div>



<div class="service">

<h3>
Полировка кузова
</h3>

<p>
Удаление мелких царапин
и восстановление блеска.
</p>

<div class="price">
от 7 000 ₽
</div>

</div>



<div class="service">

<h3>
Керамическое покрытие
</h3>

<p>
Защита кузова от внешних
воздействий и грязи.
</p>

<div class="price">
от 12 000 ₽
</div>

</div>



<div class="service">

<h3>
Детейлинг салона
</h3>

<p>
Полный уход за интерьером
автомобиля.
</p>

<div class="price">
от 5 000 ₽
</div>

</div>



<div class="service">

<h3>
Комплекс VERSALE
</h3>

<p>
Полный уход за кузовом
и салоном автомобиля.
</p>

<div class="price">
от 10 000 ₽
</div>

</div>


</div>

</section>



<!-- ============================= -->
<!-- ДО / ПОСЛЕ -->
<!-- ============================= -->

<section id="works">

<h2 class="title">
До / После
</h2>

<p class="description">
Примеры выполненных работ
</p>


<div class="works">


<div class="work">

<!-- СЮДА ВСТАВЬ ССЫЛКУ НА ФОТО ДО -->

<img src="ССЫЛКА_НА_ФОТО_ДО">

<div class="work-text">

<b>
Кузов автомобиля
</b>

<br>

<span>
До полировки
</span>

</div>

</div>



<div class="work">

<!-- СЮДА ВСТАВЬ ССЫЛКУ НА ФОТО ПОСЛЕ -->

<img src="ССЫЛКА_НА_ФОТО_ПОСЛЕ">

<div class="work-text">

<b>
Кузов автомобиля
</b>

<br>

<span>
После полировки
</span>

</div>

</div>


</div>

</section>



<!-- ============================= -->
<!-- БОЛЬШАЯ ГАЛЕРЕЯ -->
<!-- ============================= -->

<section id="gallery">

<h2 class="title">
Галерея работ
</h2>

<p class="description">
Больше фотографий автомобилей VERSALE
</p>


<div class="gallery">


<!-- ФОТО 1 -->

<img src="ССЫЛКА_НА_ФОТО_1">


<!-- ФОТО 2 -->

<img src="ССЫЛКА_НА_ФОТО_2">


<!-- ФОТО 3 -->

<img src="ССЫЛКА_НА_ФОТО_3">


<!-- ФОТО 4 -->

<img src="ССЫЛКА_НА_ФОТО_4">


<!-- ФОТО 5 -->

<img src="ССЫЛКА_НА_ФОТО_5">


<!-- ФОТО 6 -->

<img src="ССЫЛКА_НА_ФОТО_6">


<!-- ФОТО 7 -->

<img src="ССЫЛКА_НА_ФОТО_7">


<!-- ФОТО 8 -->

<img src="ССЫЛКА_НА_ФОТО_8">


<!-- ФОТО 9 -->

<img src="ССЫЛКА_НА_ФОТО_9">


<!-- ФОТО 10 -->

<img src="ССЫЛКА_НА_ФОТО_10">


<!-- ФОТО 11 -->

<img src="ССЫЛКА_НА_ФОТО_11">


<!-- ФОТО 12 -->

<img src="ССЫЛКА_НА_ФОТО_12">


</div>

</section>



<!-- ============================= -->
<!-- КОНТАКТЫ -->
<!-- ============================= -->

<section class="contacts" id="contacts">

<div class="contact-content">

<h2 class="title">
Контакты
</h2>


<div class="contact-box">

<p>
АДРЕС
</p>

<h3>
г. Анапа, ул. Объездная, 55
</h3>

</div>



<div class="contact-box">

<p>
ТЕЛЕФОН
</p>

<h3>
8 908 672-12-04
</h3>

<a href="tel:+79086721204">

<button class="button">
ПОЗВОНИТЬ
</button>

</a>

</div>


</div>

</section>



<!-- ============================= -->
<!-- FOOTER -->
<!-- ============================= -->

<footer>

VERSALE DETAILING © 2026

<br>

Анапа

</footer>


</body>

</html>
Больше возможностей при регистрации:
