<!DOCTYPE html>
<html lang="en">

<head>
    <title>Mining Empire</title>
    <link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./styles.css" type="text/css">
</head>

<body>
    <header>
        <div class="container">
        </div>
        <nav>
            <div class="logo-container">
                <a href="#"><img src="./images/logo.png" alt=""></a>
            </div>
            <div class="menu-block">
                <ul class="main-menu">
                    <li class="nav-item"><a href="#about" class="nav-item-link">About app</a></li>
                    <li class="nav-item"><a href="#learn" class="nav-item-link">Learn with us</a></li>
                </ul>
            </div>
            <div class="header-btn">
                <a href="#download" class="download-btn">Download for free</a>
            </div>
        </nav>
    </header>
    <main>
        <section class="banner-section">
            <div class="container">
                <div class="row">
                    <div class="column">
                        <div class="banner">
                            <img src="./images/banner.png" alt="">
                        </div>
                    </div>
                    <div class="column column-offset">
                        <div class="content">
                            <h1>Start mining with us today!</h1>
                            <p>Earn gold, get rich, upgrade your level, collect achievements!</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="description-section">
            <div class="container border-bottom">
                <div class="row">
                    <div class="column">
                        <div class="content">
                            <h1>Mining Empire</h1>
                            <p>Mining Empire is an addictive incremental game where your progress accelerates the more you play.</p>
                            <p>Become a great Miner and get cash in this clicker adventure game.</p>
                        </div>
                    </div>
                    <div class="column column-offset">
                        <div class="section-image"><img src="./images/screen1.png" alt=""></div>
                    </div>
                </div>
            </div>
        </section>
        <section class="description-section">
            <div class="container">
                <div class="row">
                    <div class="column">
                        <div class="section-image">
                            <img src="./images/screen2.png" alt="">
                        </div>
                    </div>
                    <div class="column column-offset">
                        <div class="content">
                            <h1>Learn with us</h1>
                            <p>Do you want to learn how to build such an application?</p>
                            <p>Just visit our page and we will help you!</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="comments-section">
            <div class="container">
                <div class="row one-column">
                    <h2>Users are loving Mining Empire</h2>
                </div>
                <div class="row columns-view">
                    <div class="card">
                        <p>First impressions on first day of launch: stable, and has all the UI parts working fine.</p>
                        <div class="user">
                            <div class="user-image"><img src="https://i.pravatar.cc/75?u=001" alt=""></div>
                            <div class="user-name">
                                <h5>John Doe</h5>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <p>I like it it is very fun to play! Very good game, nice idea and good concept!</p>
                        <div class="user">
                            <div class="user-image"><img src="https://i.pravatar.cc/75?u=002" alt=""></div>
                            <div class="user-name">
                                <h5>Mark Simpson</h5>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <p>This game is phenomenal! It has a very simple but addicting playthrough.</p>
                        <div class="user">
                            <div class="user-image"><img src="https://i.pravatar.cc/75?u=003" alt=""></div>
                            <div class="user-name">
                                <h5>Robert The First</h5>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <p>Probably the best idle game ever. No hard pushed ads to make you buy stuff to advance to next level.</p>
                        <div class="user">
                            <div class="user-image"><img src="https://i.pravatar.cc/75?u=004" alt=""></div>
                            <div class="user-name">
                                <h5>Jade Fox</h5>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <p>It's very calming and addictive! I personally would recommend people play this game!</p>
                        <div class="user">
                            <div class="user-image"><img src="https://i.pravatar.cc/75?u=005" alt=""></div>
                            <div class="user-name">
                                <h5>Tameka Parker</h5>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <p>From what I have played, this game seems really cool! I highly recommend this game!</p>
                        <div class="user">
                            <div class="user-image"><img src="https://i.pravatar.cc/75?u=007" alt=""></div>
                            <div class="user-name">
                                <h5>Alexandra King</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="join-section">
            <div class="container">
                <div class="row one-column">
                    <h2>Join over 10,000+ happy users</h2>
                </div>
                <div class="row one-column">
                    <div class="app-buttons"></div>
                </div>
            </div>
        </section>
    </main>
</body>

</html>

@font-face {
    font-family: Jost;
    font-style: normal;
    src: url("./fonts/Jost-Regular.ttf") format('truetype');
    font-weight: 400;
}

@font-face {
    font-family: Jost;
    font-style: normal;
    src: url("./fonts/Jost-SemiBold.ttf") format('truetype');
    font-weight: 600;
}

* {
    font-family: Jost, 'sans-serif';
    box-sizing: border-box;
    margin: 0;
}

.logo-container {
    height: 60px;
}

.logo-container img {
    height: 60px;
}

header {
    background-color: #E4ECEE;
}

.container {
    max-width: 1320px;
    margin: 0 auto;
}

div.menu-block {
    display: flex;
    margin-left: auto;
}

nav {
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-menu {
    display: flex;
    padding-left: 0;
}

ul.main-menu {
    list-style: none;
}

.nav-item-link {
    display: block;
    text-decoration: none;
    padding: 35px 20px 33px 20px;
    font-size: 1rem;
    line-height: 1.5;
    color: rgb(31, 31, 31);
    letter-spacing: -0.4px;
}

.header-btn {
    display: flex;
}

.download-btn {
    display: flex;
    font-size: 1rem;
    letter-spacing: -0.4px;
    line-height: 10px;
    color: #ffffff;
    height: 40px;
    background-color: #1f1f1f;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    padding: 15px;
    margin-left: 15px;
    text-decoration: none;
}

.banner-section {
    background-color: #E4ECEE;
    padding: 25px 24px 0px 24px;
}

.row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 25px 24px 0px 24px;
}

.banner img {
    max-width: 100%;
    max-height: 550px;
}

.column-offset {
    margin-left: 8%;
}

.content {
    padding-top: 75px;
}

.content h1 {
    font-size: 70px;
    line-height: 72px;
}

.content p {
    color: #222F3F;
    letter-spacing: -0.3px;
    line-height: 36px;
    margin: 25px 0px 35px 0px;
    font-size: 24px;
}

.border-bottom {
    border-bottom: 1px solid #dee2e6;
}

.description-section {
    padding-top: 75px;
}

.section-image {
    max-height: 400px;
}

.section-image img {
    max-height: 400px;
}

.comments-section {
    background-color: #E4ECEE;
    padding-top: 50px;
    padding-bottom: 32px;
}

.comments-section h2 {
    font-size: 60px;
    text-align: center;
    line-height: 64px;
}

.comments-section .card {
    background-color: #ffffff;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.one-column {
    grid-template-columns: auto;
}

.columns-view {
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 32px;
}

.card p {
    font-size: 18px;
    line-height: 32px;
    letter-spacing: -0.1px;
    color: #1F1F1F;
    margin-bottom: 24px;
}

.card .user {
    display: flex;
}

.user-image img {
    width: 50px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    margin-right: 22px;
}

.user h5 {
    font-size: 17px;
    line-height: 28px;
    letter-spacing: -0.3px;
    color: #1F1F1F
}

В задании вообще по-другому написано, проверка не правильная.