Задать вопрос
MaminProgrammist
@MaminProgrammist
Я слава беброу
html

Почему сайт ломается при открытии index.html, но когда ты открываешь сайт через live server в vs code всё нормально?

Всем привет! Учусь HTML, CSS, JS. Делаю сайт для учёбы. Перейду к делу - как мне починить навигационную панель?
Дело в том, что при открытии Index.html она ломается и выглядит так:
62bacfee41064152940675.png

Но когда я открываю его через Live server в visual studio code (vs code), все выглядит нормально:
62bad0228f9ed318543328.png

Помогите разобраться с этим

Исходный код (может сильней поможет):
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mountain</title>
    <link rel="stylesheet" href="css/reset.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/media.css">
    <script src="js/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
    crossorigin="anonymous"></script>
</head>
<body>
    <header>
        <div id="carouselExampleInterval slide" class="carousel slide header__slider" data-bs-ride="carousel">
            <div class="carousel-inner">
              <div class="carousel-item carousel-item-1 active" data-bs-interval="10000">
              </div>
              <div class="carousel-item carousel-item-2" data-bs-interval="2000">
              </div>
              <div class="carousel-item carousel-item-3">
              </div>
            </div>
        </div>
        <div class="header__content">
            <a href="#" class="logo__link"><div class="logo">
                Moun
            </div></a>
            <div class="nav">
                <div class="nav__dropdown">
                    <div class="nav__arrow-block"><i class="nav__arrow"></i></div>
                    <ul class="nav__list">
                        <li class="nav__item">
                            <a href="#slide" class="nav__link">MAIN SLIDE</a>
                        </li>
                        <li class="nav__item">
                            <a href="#gallery" class="nav__link">GALLERY</a>
                        </li>
                        <li class="nav__item">
                            <a href="#clients" class="nav__link">CLIENTS SAY</a>
                        </li>
                        <li class="nav__item">
                            <a href="#contacts" class="nav__link">CONTACTS</a>
                        </li>
                    </ul>
                </div>
                <a href="#" class="header__btn">CALL US</a>
            </div>
        </div>
    </header>
    <main>
        <div class="title title-1" id="gallery">
            GALLERY
        </div>
        <div class="gallery">
            <div class="gallery__block-1">
                <div class="gallery__item">
                    <img src="img/gallery__img-1.png" alt="" class="gallery__photo">
                </div>
                <div class="gallery__item">
                    <img src="img/gallery__img-2.jpg" alt="" class="gallery__photo">
                </div>
                <div class="gallery__item">
                    <img src="img/gallery__img-3.jpg" alt="" class="gallery__photo">
                </div>
            </div>
            <div class="gallery__block-2">
                <div class="gallery__item">
                    <img src="img/gallery__img-4.jpg" alt="" class="gallery__photo">
                </div>
                <div class="gallery__item">
                    <img src="img/gallery__img-5.jpg" alt="" class="gallery__photo">
                </div>
                <div class="gallery__item">
                    <img src="img/gallery__img-6.jpg" alt="" class="gallery__photo">
                </div>
            </div>
        </div> 
        <div class="social-networks">
            <div class="social-networks__content">
                <div class="social-networks__social-network">
                    <img src="img/svg/contacts__slack.svg" alt="slack" width="28px"><a href="#"><span>s</span><span>l</span><span>a</span><span>c</span><span>k</span></a>
                </div>
                <div class="social-networks__social-network">
                    <a href="#"><svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 133.46 118.11"><polygon class="cls-1" points="84.13 0 133.46 0 133.46 118.11 84.13 0"/><polygon class="cls-1" points="49.37 0 0 0 0 118.11 49.37 0"/><polygon class="cls-1" points="66.75 43.53 98.18 118.11 77.58 118.11 68.18 94.36 45.18 94.36 66.75 43.53"/></svg></a>
                </div>
                <div class="social-networks__social-network">
                    <a href="#"><span>G</span><span>o</span><span>o</span><span>g</span><span>l</span><span>e</span></a>
                </div>
                <div class="social-networks__social-network">
                    <a href="#">facebook</a>
                </div>
                <div class="social-networks__social-network">
                    <svg xmlns="http://www.w3.org/2000/svg" class="bi bi-spotify" viewBox="0 0 16 16"> <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.669 11.538a.498.498 0 0 1-.686.165c-1.879-1.147-4.243-1.407-7.028-.77a.499.499 0 0 1-.222-.973c3.048-.696 5.662-.397 7.77.892a.5.5 0 0 1 .166.686zm.979-2.178a.624.624 0 0 1-.858.205c-2.15-1.321-5.428-1.704-7.972-.932a.625.625 0 0 1-.362-1.194c2.905-.881 6.517-.454 8.986 1.063a.624.624 0 0 1 .206.858zm.084-2.268C10.154 5.56 5.9 5.419 3.438 6.166a.748.748 0 1 1-.434-1.432c2.825-.857 7.523-.692 10.492 1.07a.747.747 0 1 1-.764 1.288z" fill="#cbcccb"></path></svg><a href="#">Spotify</a>
                </div>
                <div class="social-networks__social-network">
                    <a href="#"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Nike</title><path d="M24 7.8L6.442 15.276c-1.456.616-2.679.925-3.668.925-1.12 0-1.933-.392-2.437-1.177-.317-.504-.41-1.143-.28-1.918.13-.775.476-1.6 1.036-2.478.467-.71 1.232-1.643 2.297-2.8a6.122 6.122 0 00-.784 1.848c-.28 1.195-.028 2.072.756 2.632.373.261.886.392 1.54.392.522 0 1.11-.084 1.764-.252L24 7.8z"></path></svg></a>
                </div>
            </div>
        </div>
        <div class="title title-2" id="clients">
            OUR CLIENTS SAY
        </div>
        <div class="cards">
            <div class="cards__card">
                <div class="cards__title title">
                    “
                </div>
                <div class="cards__text">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do  enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                </div>
                <div class="cards__contacts">
                    <a href="#" class="cards__user-contacts">
                        <div class="cards__photo">
                            <img src="img/client__photo-1.png" alt="client__photo-1">
                        </div>
                        <div class="cards__link cards__link-1">
                            <span>Pavliv Yaroslav</span> Web designer
                        </div>
                    </a>
                </div>
            </div>
            <div class="cards__card">
                <div class="cards__title title">
                    “
                </div>
                <div class="cards__text">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                </div>
                <div class="cards__contacts" id="contacts">
                    <a href="#" class="cards__user-contacts">
                        <div class="cards__photo">
                            <img src="img/client__photo-2.png" alt="client__photo-2">
                        </div>
                        <div class="cards__link cards__link-2">
                            <span>John Scott</span> The Fringe
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div class="main__background"></div>
        <div class="contact-card">
            <div class="contact-card__title">
                CONTACTS
            </div>
            <div class="contact-card__text">
                Sign up for our newsletter to receive updates
            </div>
            <form class="contact-card__form">
                <input type="text" class="contact-card__input" placeholder="Name"></input>
                <input type="text" class="contact-card__input" placeholder="Phone"></input>
                <input type="email" class="contact-card__input" placeholder="E-mail"></input>
            </form>
            <a href="#" class="contact-card__link"><div class="contact-card__btn">
                <p>SEND</p>
            </div></a>
        </div>
    </main>
</body>
</html>
  • Вопрос задан
  • 529 просмотров
4 комментария
Подписаться 1 Средний 4 комментария
Решения вопроса 1
@Andryjka
Веб-программист
Дело в построении путей к изображениям\стилям\скриптам. Добавь слэш в начале пути /css/styles.css
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 2
sasmoney
@sasmoney
не хватает каких-то стилей
Ответ написан
2 комментария
2 комментария
SagePtr
@SagePtr
Еда - это святое
В браузере можно нажать F12 и посмотреть на вкладке Console, на что конкретно ругается. Вангую, что на пути к некоторым файлам. Смотрите в коде и правьте.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Доработка индикатора
25 апр. 2024, в 14:05
2000 руб./за проект
Разработать дизайн карточки для маркетплейсов
25 апр. 2024, в 14:01
3000 руб./за проект
Веб-приложения "Афиша" и "Бронирование":
25 апр. 2024, в 13:59
20000 руб./за проект
Ещё заказы