Неверное отображение вёрстки сайта

Question

Во время вёрстки столкнулся с такой проблемой. Не отображается часть страницы, при этом, в лайв-сервере работает всё корректно.

body {
    margin: 0;

    -webkit-font-smoothing: antialiased;
    font-family: 'Raleway', sans-serif;
    font-family: 'Rambla', sans-serif;
    background-color: #fff;
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

p {
    margin: 0 0 10px;
}

/* Container */

.container {
    width: 100%;
    max-width: 1448px;
    margin: 0 auto;
    padding: 0 15px;
}

.header {
    height: 100px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 45px 0;
}

/* Nav */

.nav {
    display: flex;
    font-size: 20px;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
}

.nav__link {
    margin-left: 125px;
    text-decoration: none;
    color: #fff;
    opacity: .75;
    transition: .1s;
}

.nav__link:first-child {
    margin-left: 0;
}

.nav__link:hover {
    opacity: 1;
    color: #d69009;
}

/* Intro */

.intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 100px;
    height: 800px;
    background: url("images/background.png") no-repeat center;
    background-size: cover;
}

.intro__inner{
    width: 100%;
    max-width: 970px;
    margin: 0 auto;
    text-align: center;
}

.intro__tittle {
    font-size: 60px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
}

/* Button */

.btn {
    display: inline-block;
    vertical-align: top;
    padding: 14px 40px;

    border-radius: 3px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    transition: background 0.2s linear;
    text-align: center;
}

.btn--orange {
    background-color: #d69009;
}

.btn--orange:hover {
    background-color: #b97e06;
}

/* Info */

.info {
    flex-wrap: wrap;
    margin: 60px 0;
    display: flex;
}

.info__item {
    margin: 25px 0;
    padding: 0 40px;
    text-align: center;
    width: 33.33333%;
}

.info__icon {
    margin-bottom: 25px;
}

.info__tittle {
    color: #d69009;
    text-transform: uppercase;
    font-size: 20px;
    margin-bottom: 20px;
}

.info__text {
    font-size: 15px;
    font-family: 'Raleway';
    font-weight: 700;
    color: #837D7D;
}

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Rambla:wght@700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Cardo:400i|Open+Sans:700|Raleway:300,400,600,700&display=swap" rel="stylesheet">
    <meta name="viewport" content="width=device-width", initial-scale="1">
    <title>BloodDesert</title>
</head>
<body>

<!--Header-->
    <header class="header">
        <div class="container">
            <div class="header__inner">
                <div class="header__logo">
                    <img src="images/logo.png" alt="logo">
                </div>

                <nav class="nav">
                    <a class="nav__link" href="#">About It</a>
                    <a class="nav__link" href="#">Game</a>
                    <a class="nav__link" href="#">Team</a>
                    <a class="nav__link" href="#">Download</a>
                </nav>
            </div>
        </div>
    </header> <!--/.header-->

<!--Intro-->
    <div class="intro">
        <div class="container">
            <div class="intro__inner">
                <h1 class="intro__tittle">dive into the sands</h1>
                <a class="btn btn--orange" href="">Download</a>
            </div>
        </div>
    </div> <!--/.intro-->

<!--Info-->
    <div class="container">
        <div class="info">
            <div class="info__item">
                <img class="info__icon" src="images/platform.png" alt="">
                <h4 class="info__tittle">Platformer</h4>
                <div class="info__text">Pixel Platformer</div>
            </div>

            <div class="info__item">
                <img class="info__icon" src="images/lore.png" alt="">
                <h4 class="info__tittle">interesting story</h4>
                <div class="info__text">Immerse yourself in the world of desert mysteries</div>
            </div>

            <div class="info__item">
                <img class="info__icon" src="images/fight.png" alt="">
                <h4 class="info__tittle">Fighting</h4>
                <div class="info__text">Exterminate the enemies</div>
            </div>
        </div>
    </div>

</body>

БЛОГ НА HUSL

Неверное отображение вёрстки сайта

Ответы (0 шт):