Кодирование по учебнику и результат не тот же - PullRequest
Новая
       4

Кодирование по учебнику и результат не тот же

0 голосов
/ 31 марта 2020

Итак, я начал веб-разработку и прошел курс Udemy с самым высоким рейтингом. Теперь я дошел до того места, где он создает фиктивный сайт под названием «Музей конфет» (для тех, кто знаком с курсом). Я пишу, но результат не тот. Обычно я мог найти ошибку, но на этот раз я продолжаю прочесывать и сравнивать два кода, но не могу определить, где проблема.

  1. Первая проблема: есть эта сэндвич-кнопка, которая не показывает предметы внутри него, когда я нажимаю на него. В видео он показывает три элемента внутри.

Вот часть в заголовке для bootstrap версии: 

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;700&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" 
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
        crossorigin="anonymous">
    <link rel="stylesheet" href="app.css">

А вот и рассматриваемый код: 

    <nav id="mainNavbar" class="navbar navbar-dark navbar-expand-md py-0 fixed-top">
        <a href="#" class="navbar-brand">CANDY</a>
        <button class="navbar-toggler" data-toggle="collapse" data-target="navLinks" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navLinks">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="#" class="nav-link">HOME</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">ABOUT</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">TICKETS</a>
                </li>
            </ul>
        </div>
    </nav>

Я создал контейнер с двумя столбцами по 6 в каждом. Однако, когда я вставляю изображение и назначаю его отзывчивым, оно не масштабируется. Он просто прилипает к левой стороне экрана, а когда достигается точка останова, он смещается вправо и показывает текст, который находится в левой ячейке. Один и тот же код в видео ведет себя по-разному. Вот мой код: 

<section class="container-fluid px-0">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <div id="headingGroup" class="text-white text-center d-none d-lg-block mt-5">
                    <h1 class="">MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
                    </div>
                </div>
                <div class="col-lg-6">
                    <img class="img-fluid" src="imgs/candy1.png" alt="Responsive image">

                </div>
            </div>
</section>

Вот часть CSS: 

body {
    background: #f5d9df;
    font-family: "Nunito", sans-serif;
}

#mainNavbar {
    font-size: 1.5rem;
    font-weight: 100;
}

#mainNavbar .nav-link {
    color: white;
}

#mainNavbar .nav-link:hover {
    color: #EA1C2C;
}

#mainNavbar .navbar-brand {
    color: #EA1C2C;
    font-size: 1.5rem;
}


#headingGroup span {
    color: #ea1c2c
}

#headingGroup h1 {
    font-weight: 100;
    font-size: 4rem;
}

@media (maxwidth: 1200px) {
    #headingGroup h1
        font-weight: 100;
        font-size: 3rem;
}
...