<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Сайи</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div class="header">
<div class="header-left">
<div class="text-head">
<h2>Product name</h2>
</div>
<div class="description-head">
<h2>Put on this page information about your product</h2>
<h2>A detailed description of your product</h2>
<h2>Tell us about the advantages and merits</h2>
<h2>Associate the page with the payment system</h2>
</div>
</div>
<div class="header-right">
<div>
<img src="image/Shape-9.png">
</div>
</div>
</div>
</header>
<section>
<div class="section">
<div class="section-left">
<h1 class="section-text-main">About your product</h1>
<h2 class="section-description1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis facilis fuga, illo at. Natus eos, eligendi illum rerum omnis porro ex, magni, explicabo veniam incidunt in quam sapiente ut ipsum.
</h2>
<h2 class="section-description2">
Pariatur iure ab sunt nesciunt, quibusdam odio iste cumque itaque, ipsa vel exercitationem ullam quos aut nostrum cupiditate fuga quaerat quam animi dolores. Sequi itaque, unde perferendis nemo debitis dolor.
</h2>
</div>
<div class="section-right">
<div class="section-video">
<img src="image/video.png">
</div>
</div>
</div>
</section>
</body>
</html>*{
margin: 0;
padding: 0;
}
header{
background: #445162;
height: 378px;
color: white;
}
.header{
padding: 50px;
display: flex;
width: 100%;
position: fixed;
}
.text-head{
font-size: 35px;
}
.header-left{
width: 60%;
}
.header-right{
display: flex;
justify-content: flex-end;
align-items: center;
}
.description-head{
margin-top: 50px;
line-height: 50px;
}
.section{
width: 100%;
padding: 50px;
color: #333333;
display: flex;
position: fixed;
}
.section-left{
width: 62%;
}
.section.right{
display: flex;
justify-content: flex-end;
align-items: center;
}
.section-text-main{
color: #445161;
font-size: 40px;
margin-bottom: 38px;
}
.section-description1{
width: 1000px;
margin-bottom: 20px;
}
.section-description2{
width: 1000px;
}
<script src="https://kit.fontawesome.com/d4fbb21366.js" crossorigin="anonymous"></script><style media="all" id="fa-v4-font-face"><i class="fas fa-check"></i><i class="fas fa-check"></i> <h2>Put on this page information about your product</h2>
<i class="fas fa-check"></i> <h2>A detailed description of your product</h2>
<i class="fas fa-check"></i> <h2>Tell us about the advantages and merits</h2>
<i class="fas fa-check"></i> <h2>Associate the page with the payment system</h2>
Простой
Простой
Средний
Простой
