amati На этапе 10 снова застряли)
<!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>
</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;
}
