Pastein: <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3d studio

Загрузка данных
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3d studio - Creative Designs</title>
    <!-- Подключаем внешний файл стилей CSS -->
    <link rel="stylesheet" href="style.css">
    <!-- Для иконок соцсетей в футере -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>

    <!-- ШАПКА САЙТА (HEADER) -->
    <header>
        <div class="container header-content">
            <!-- Логотип/название слева -->
            <div class="logo">3d studio | Creative Designs</div>
            
            <!-- Навигационные гиперссылки справа -->
            <nav>
                <ul class="nav-links">
                    <li><a href="#" class="active">Главная</a></li>
                    <li><a href="#">Ученик</a></li>
                    <li><a href="#">Помощь</a></li>
                    <li><a href="#" class="btn-login">Вход / Регистрация</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- ГЛАВНЫЙ БАННЕР -->
    <section class="hero">
        <div class="container hero-content">
            <h1>Добро пожаловать в 3d studio</h1>
            <p>Создаем будущее в трехмерном пространстве.</p>
            <a href="#" class="btn-main">Начать обучение</a>
        </div>
    </section>

    <!-- !!! ПУСТОЙ БЛОК ДЛЯ СКРОЛЛА !!! -->
    <!-- Удали его в реальном проекте и добавь свой контент -->
    <div class="scroll-filler">
        <p>Крути вниз, чтобы увидеть подвал ↓</p>
    </div>

    <!-- ПОДВАЛ (FOOTER) -->
    <footer class="footer">
        
        <!-- Черная полоска выше подвала -->
        <div class="footer-divider"></div>
        
        <div class="container footer-content">
            <!-- Разделенный текст в колонках -->
            <div class="footer-grid">
                
                <!-- Колонка 1: Лого и текст -->
                <div class="footer-col about">
                    <div class="logo">3d studio</div>
                    <p>Онлайн-платформа для обучения 3D-графике, архитектурной визуализации и дизайну интерьеров.</p>
                </div>
                
                <!-- Колонка 2: Навигация -->
                <div class="footer-col links">
                    <h4>Навигация</h4>
                    <ul>
                        <li><a href="#">Главная</a></li>
                        <li><a href="#">Курсы</a></li>
                        <li><a href="#">Преподаватели</a></li>
                        <li><a href="#">Блог</a></li>
                    </ul>
                </div>
                
                <!-- Колонка 3: Помощь -->
                <div class="footer-col help">
                    <h4>Помощь</h4>
                    <ul>
                        <li><a href="#">Контакты</a></li>
                        <li><a href="#">FAQ</a></li>
                        <li><a href="#">Поддержка</a></li>
                        <li><a href="#">Договор оферты</a></li>
                    </ul>
                </div>
                
                <!-- Колонка 4: Соцсети -->
                <div class="footer-col social">
                    <h4>Следите за нами</h4>
                    <div class="social-icons">
                        <a href="#"><i class="fab fa-vk"></i></a>
                        <a href="#"><i class="fab fa-telegram-plane"></i></a>
                        <a href="#"><i class="fab fa-youtube"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>

            </div>
            
            <!-- Копирайт -->
            <div class="footer-bottom">
                <p>© 2026 3D Studio Creative Designs. Все права защищены.</p>
            </div>
        </div>
    </footer>

</body>
</html>
/* --- СБРОС СТИЛЕЙ И БАЗОВЫЕ НАСТРОЙКИ --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f7f6;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- ШАПКА САЙТА (HEADER) --- */
header {
    background-color: #1a252f; /* Темно-синий фон */
    color: #fff;
    padding: 15px 0;
    position: sticky; /* Фиксированная шапка */
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.header-content {
    display: flex;
    justify-content: space-between; /* Лого слева, меню справа */
    align-items: center;
}

.logo {
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.nav-links {
    display: flex;
    list-style: none;
    align-items: center;
}

.nav-links li {
    margin-left: 25px;
}

.nav-links li a {
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: color 0.3s;
}

.nav-links li a:hover,
.nav-links li a.active {
    color: #1abc9c; /* turquoise hover/active */
}

.btn-login {
    display: inline-block;
    background-color: #fff;
    color: #1a252f !important;
    padding: 8px 18px;
    border-radius: 4px;
    font-weight: bold !important;
}

.btn-login:hover {
    background-color: #f4f7f6;
}

/* --- ГЛАВНЫЙ БАННЕР (HERO) --- */
.hero {
    background: linear-gradient(rgba(26, 37, 47, 0.85), rgba(26, 37, 47, 0.85)), 
                url('https://picsum.photos/1920/1080?architecture') no-repeat center center/cover;
    color: #fff;
    height: 70vh;
    display: flex;
    align-items: center;
    text-align: center;
}

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

.hero h1 {
    font-size: 48px;
    margin-bottom: 15px;
    line-height: 1.2;
}

.hero p {
    font-size: 20px;
    margin-bottom: 30px;
    opacity: 0.9;
}

.btn-main {
    display: inline-block;
    background-color: #1abc9c;
    color: #fff;
    padding: 12px 30px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    font-size: 17px;
    transition: background 0.3s;
}

.btn-main:hover {
    background-color: #16a085;
}

/* --- БЛОК ДЛЯ ПРОКРУТКИ (ДЕМОНСТРАЦИЯ) --- */
.scroll-filler {
    height: 100vh; /* Высота равна высоте экрана */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #95a5a6;
    font-size: 24px;
}

/* --- ПОДВАЛ (FOOTER) --- */
.footer {
    background-color: #1a252f; /* Тот же фон, что и у шапки */
    color: #bdc3c7; /* Светло-серый текст */
    position: relative;
    margin-top: 40px;
}

/* Чёрная полоска ВЫШЕ подвала */
.footer-divider {
    height: 4px;
    background-color: #000; /* Чёрная */
    position: absolute;
    top: -4px; /* Прижимаем к верхнему краю футера */
    left: 0;
    width: 100%;
}

.footer-content {
    padding: 60px 0 30px 0;
}

/* Сетка футера для разделенного текста */
.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-col .logo {
    color: #fff;
    margin-bottom: 15px;
}

.footer-col h4 {
    color: #fff;
    font-size: 18px;
    margin-bottom: 20px;
}

.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col ul li a {
    color: #bdc3c7;
    text-decoration: none;
    font-size: 15px;
    transition: color 0.3s;
}

.footer-col ul li a:hover {
    color: #1abc9c;
}

/* Иконки соцсетей */
.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background-color: rgba(255,255,255,0.08);
    color: #bdc3c7;
    border-radius: 4px;
    text-decoration: none;
    font-size: 18px;
    transition: background 0.3s, color 0.3s;
}

.social-icons a:hover {
    background-color: #1abc9c;
    color: #fff;
}

/* Копирайт */
.footer-bottom {
    text-align: center;
    padding-top: 25px;
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size: 14px;
}

/* АДАПТИВНОСТЬ (МОБИЛЬНЫЕ) */
@media (max-width: 768px) {
    header .container header-content {
        flex-direction: column;
        padding: 10px;
    }
    
    .logo {
        margin-bottom: 10px;
    }
    
    .nav-links {
        margin-top: 10px;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .nav-links li {
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 10px;
    }

    .hero h1 {
        font-size: 32px;
    }
    
    .scroll-filler {
        font-size: 18px;
    }
}
Больше возможностей при регистрации:
