<!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
}
В задании вообще по-другому написано, проверка не правильная.
