index.html - master - IT-Legion/TestTask_vanger

index.html
197 строк6 KB
IT-Legion
промежуток
02 мар 2026, 19:34
02 мар 2026, 19:340aaf3ff
<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Космическое агентство</title>
    <!-- Подключаем Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background-color: black;
            color: white;


        }


        .welcome-text {
            box-sizing: border-box;
            text-align: center;
            color: #C3CDDD;
        }
        /* Десктоп-стили */
        @media only screen and (min-width: 769px) {
            .content-block {
                width: 750px;
                height: 168px;
                gap: 10px;
            }

            h1 {
                width: 745px;
                height: 68px;
                font-family: 'Montserrat', sans-serif;
                font-weight: 700;
                font-size: 56px;
                line-height: 100%;
                letter-spacing: 2%;
                text-align: center;
            }
        }
        /* Мобильные стили */
        @media only screen and (max-width: 768px) {
            .content-block {
                width: 335px;
                height: 271px;
                gap: 15px;
            }

            h1 {
                width: 335px;
                height: 88px;
                font-family: 'Montserrat', sans-serif;
                font-weight: 700;
                font-size: 36px;
                line-height: 100%;
                letter-spacing: 2%;
                text-align: center;
            }
        }













        /* Дополнительные стили для кастомизации */
        .custom-header {
            background-color: #0D0F12;
            color: #fff;
            padding: 20px 0;
        }

        .section-title {
            font-size: 2rem;
            margin-bottom: 20px;
            text-align: center;
        }

        .icons img {
            width: 50px;
            height: 50px;
        }

        .slider-images img {
            width: 100%;
            height: auto;
        }

        .slider-container {
            display: flex;
            gap: 10px;
            overflow-x: auto;
            padding: 20px 0;
        }

        .slider-container img {
            max-width: 300px;
            border-radius: 8px;
        }

        /* Мобильные стили */
        @media (max-width: 768px) {
            .icons img {
                width: 40px;
                height: 40px;
            }
        }
    </style>
</head>

<body>
    <!-- Шапка -->
    <header class="custom-header">
        <div class="container">
            <div class="row align-items-center">
                <!-- Логотип (слева) -->
                <div class="col-6 col-md-3">
                    <img src="your-logo.png" alt="Логотип" class="logo" width="150">
                </div>

                <!-- Навигация (по центру) -->
                <div class="col-6 col-md-6 text-center">
                    <nav class="d-flex justify-content-center">
                        <a href="#benefits" class="text-white mx-3">Преимущества</a>
                        <a href="#photos" class="text-white mx-3">Фотографии</a>
                    </nav>
                </div>

                <!-- Кнопка Вход (справа) -->
                <div class="col-md-3 text-end">
                    <a href="#" class="btn btn-danger">Вход</a>
                </div>
            </div>
        </div>
    </header>

    <!-- Основной контент -->
    <section class="container my-5">
        <div>
            <div class="welcome-text">
                <h1 class="section-title">Космическое агентство</h1>
                <p class="text-center">Национальное управление по аэронавтике и исследованию космического пространства —
                    федеральное агентство, относящееся к федеральному правительству США и подчиняющееся непосредственно
                    президенту США.</p>

            </div>
            <div class="row text-center icons">
                <div class="col-md-3">
                    <img src="icon1.png" alt="Иконка 1">
                    <p>Скетч спутников — пилотируемые корабли</p>
                </div>
                <div class="col-md-3">
                    <img src="icon2.png" alt="Иконка 2">
                    <p>Лучшее телескопическое оборудование</p>
                </div>
                <div class="col-md-3">
                    <img src="icon3.png" alt="Иконка 3">
                    <p>Исследовательские станции на Луне — шаг к новым открытиям</p>
                </div>
                <div class="col-md-3">
                    <img src="icon4.png" alt="Иконка 4">
                    <p>Золотая медаль по научным исследованиям</p>
                </div>

            </div>
        </div>

    </section>
    <section class="container my-5">
        <div class="row my-5">
            <div class="col-12">
                <h2 class="section-title">Фотографии</h2>
                <div class="slider-container">
                    <img src="image1.jpg" alt="Фото 1">
                    <img src="image2.jpg" alt="Фото 2">
                    <img src="image3.jpg" alt="Фото 3">
                    <img src="image4.jpg" alt="Фото 4">
                </div>
            </div>
        </div>
    </section>

    <!-- Подключаем JS и Popper для Bootstrap -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>

</html>