Собственно вот такая верстка получилась.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Poppins:wght@400;500&display=swap"
rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<title>Hello, world!</title>
</head>
<body>
<main>
<section class="section-top">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container d-flex">
<a class="navbar-brand" href="#">
<div class="logo">
<svg width="72" height="72" viewBox="0 0 72 72" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle cx="36" cy="36" r="36" fill="#C8C8C8" />
<g filter="url(#filter0_d)">
<path
d="M16.2012 27.4043C20.153 27.1113 22.7311 26.9648 23.9355 26.9648C25.1465 26.9648 26.1003 27.0788 26.7969 27.3066C27.5 27.528 28.1283 27.8372 28.6816 28.2344C29.7559 28.9961 30.5664 30.0085 31.1133 31.2715C31.6667 32.5345 31.9434 33.8138 31.9434 35.1094C31.9434 36.4049 31.7318 37.5378 31.3086 38.5078C30.8919 39.4714 30.3125 40.2852 29.5703 40.9492C28.0534 42.3229 26.0905 43.0065 23.6816 43H16.2012V27.4043ZM22.2754 32.3555V38.3027C22.6204 38.0098 22.9948 37.7201 23.3984 37.4336C24.9479 36.3203 25.7227 35.1549 25.7227 33.9375C25.7227 33.3451 25.5469 32.7982 25.1953 32.2969C24.8438 31.7891 24.3848 31.5352 23.8184 31.5352C23.2585 31.5352 22.7441 31.8086 22.2754 32.3555ZM39.1211 27.4043L40.9082 32.9609L44.8047 27.7363C44.9349 27.5605 45.0326 27.4466 45.0977 27.3945C45.1628 27.3424 45.2604 27.3164 45.3906 27.3164C45.5208 27.3164 45.6868 27.4564 45.8887 27.7363L49.5215 32.9023L51.2793 27.4043H56.8652L51.7676 42.5996C51.5462 43.2507 51.1719 43.5762 50.6445 43.5762C50.1172 43.5762 49.6452 43.2767 49.2285 42.6777L44.8633 36.3789L40.166 42.6973C39.7428 43.2572 39.2708 43.5371 38.75 43.5371C38.2292 43.5371 37.8483 43.2116 37.6074 42.5605L32.1191 27.4043H39.1211Z"
fill="white" />
</g>
<defs>
<filter id="filter0_d" x="12.2012" y="22.9648" width="52.6641" height="28.6113"
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feOffset dx="2" dy="2" />
<feGaussianBlur stdDeviation="3" />
<feColorMatrix type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow"
result="shape" />
</filter>
</defs>
</svg>
</div>
<span class="logo-text">Dreammaker</span>
</a>
<div class="d-flex align-items-center">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Service</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Setting</a>
</li>
</ul>
<button class="btn-lilac nav-item">Contact us</button>
</div>
</div>
</nav>
<div class="header-top-info-container container">
<h1>
Your awesome Dream <br>
maker consultant
</h1>
<div class="text">
The occupational traffic permit is one of the most important things in the company<br>
when carrying out freight transport. In fact, it is a prerequisite for<br>
doing business traffic at all.
</div>
<button class="btn-lilac">Get started</button>
</div>
</section>
<section class="section-2">
<div class="info-container">
<h2>
We provide great Service
</h2>
<div class="text">
The occupational traffic permit is one of the most important things in the company<br>
when carrying out freight transport. In fact, it is a<br>
prerequisite for doing business traffic at all.
</div>
</div>
<div class="service-items container">
<div class="row">
<div class="col-3">
<div class="service-item">
<div class="icon">
<img src="/images/screen.svg" alt="">
</div>
<h3>Web design</h3>
<div class="text">
Here you can find all
web design and all of yours
designing meterials
</div>
</div>
</div>
<div class="col-3">
<div class="service-item">
<div class="icon">
<img src="/images/doctor.svg" alt="">
</div>
<h3>Health and study</h3>
<div class="text">
Here you can find all
your primary health your
good health and education
</div>
</div>
</div>
<div class="col-3">
<div class="service-item">
<div class="icon">
<img src="/images/box.svg" alt="">
</div>
<h3>Packaging</h3>
<div class="text">
Consistency in packaging
matter a lot. Give your attention
match design elements
</div>
</div>
</div>
<div class="col-3">
<div class="service-item">
<div class="icon">
<img src="/images/pencil.svg" alt="">
</div>
<h3>Content writing</h3>
<div class="text">
It can be understood
that your fonts, sizes, headings,
sub-headings, and button
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section-3">
<div class="container">
<div class="row">
<div class="col">
<div class="info-container">
<h2>
The People are quick turnaround here
</h2>
<div class="text">
The occupational traffic permit is one of the most <br>
things in the company How do you do when <br>
a commercial traffic permit for freight <br>
transport to your business?
</div>
</div>
</div>
<div class="col">
<img src="/images//people_network.svg" alt="">
</div>
</div>
</div>
</section>
<section class="section-4">
<div class="container">
<div class="row">
<div class="col">
<div class="question-item">
<div> When is a professional traffic permit needed?</div>
<i>></i>
</div>
<div class="question-item">
<div> Where to look for a traffic permit?</div>
<i>></i>
</div>
<div class="question-item">
<div> Are there differences between a traffic permit and a professional traffic permit?</div>
<i>></i>
</div>
<div class="question-item">
<div> How much does a commercial traffic permit cost for goods?</div>
<i>></i>
</div>
<div class="question-item">
<div> How to plug in for the traffic permit test?</div>
<i>></i>
</div>
<div class="question-item">
<div> How is the sample for a professional traffic permit booked?</div>
<i>></i>
</div>
</div>
<div class="col under-the-man">
<div class="question-item">
<div> When is a professional traffic permit needed?</div>
<i>></i>
</div>
<div class="question-item">
<div> Where to look for a traffic permit?</div>
<i>></i>
</div>
<div class="question-item">
<div> Are there differences between a traffic permit and a professional traffic permit?</div>
<i>></i>
</div>
<div class="question-item">
<div> How much does a commercial traffic permit cost for goods?</div>
<i>></i>
</div>
<div class="question-item">
<div> How to plug in for the traffic permit test?</div>
<i>></i>
</div>
<div class="question-item">
<div> How is the sample for a professional traffic permit booked?</div>
<i>></i>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"></script>
</body>
</html>
body {
font-family: 'Poppins';
}
/* TOP SECTION */
.navbar {
height: 116px;
background: rgba(196, 196, 196, 0.1);
}
.section-top {
background-image: url("/images/bg01.jpg");
height: 737px;
background-repeat: no-repeat;
background-position-x: center;
}
.navbar-brand {
margin: 0;
padding: 0;
display: flex;
align-items: center;
}
.navbar-nav {
flex-direction: row;
}
.navbar-brand .logo-text {
margin-left: 21px;
}
.nav-item {
margin-left: 58px;
padding: 0;
}
.navbar-light .navbar-nav .nav-link {
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 27px;
color: #717784;
}
.btn-lilac {
width: 234px;
height: 60px;
background: #9B9BCA;
border-radius: 10px;
border: 0;
font-style: normal;
font-size: 18px;
line-height: 27px;
/* identical to box height */
color: #FFFFFF;
transition: all .3s;
}
.btn-lilac:hover {
background: #9e75cc;
}
.header-top-info-container {
margin-top: 196px;
}
.header-top-info-container > h1 {
font-family: DM Serif Display;
font-style: normal;
font-weight: normal;
font-size: 56px;
line-height: 100%;
/* or 56px */
color: #696A86;
}
.header-top-info-container > .text {
font-size: 18px;
line-height: 27px;
color: #696A86;
}
.header-top-info-container > * {
margin-top: 30px;
}
/* SECTION 2 */
.section-2 .info-container {
margin-top: 95px;
text-align: center;
width: 780px;
margin-left: auto;
margin-right: auto;
}
.section-2 .info-container > h2 {
font-family: Poppins;
font-style: normal;
font-weight: 500;
font-size: 26px;
line-height: 39px;
color: #626780;
}
.section-2 .info-container > .text {
margin-top: 23px;
font-size: 18px;
line-height: 26px;
color: #626780;
}
.section-2 .service-items {
margin-top: 139px;
}
.section-2 .service-items .service-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 250px;
border: 1px solid #9d9d9d00;
box-sizing: border-box;
border-radius: 5px;
transition: all .3s;
cursor: pointer;
position: relative;
overflow: hidden;
}
.section-2 .service-items .service-item::after {
position: absolute;
height: 7px;
left: 0px;
right: 0px;
bottom: 0px;
background: #c4c4c400;
transition: all .3s;
content: "";
}
.section-2 .service-items .service-item:hover {
border: 1px solid #9D9D9D;
}
.section-2 .service-items .service-item:hover::after {
background: #C4C4C4;
}
.section-2 .service-items .service-item h3 {
margin-top: 21px;
font-weight: 500;
font-size: 22px;
line-height: 40px;
color: #626780;
}
.section-2 .service-items .service-item .text {
margin-top: 12px;
text-align: center;
font-size: 16px;
line-height: 20px;
text-align: center;
color: #626780;
}
.section-3 {
margin-top: 192px;
}
.section-3 .row {
align-items: center;
}
.section-3 .info-container h2 {
font-weight: 500;
font-size: 26px;
line-height: 39px;
color: #626780;
}
.section-3 .info-container .text {
font-size: 18px;
line-height: 30px;
color: #626780;
}
.section-4 {
margin-top: 150px;
background: url("/images/big-circle.svg");
background-repeat: no-repeat;
background-position-x: 877px;
}
.section-4 .container {
background: url("/images/man.png");
background-position-x: 577px;
background-repeat: no-repeat;
overflow: visible;
height: 1030px;
}
.section-4 .container .under-the-man {
margin-top: 730px;
}
.section-4 .question-item {
padding: 25px 34px 25px 34px;
background: #FFFFFF;
box-shadow: 0px 20px 40px #F5F5FF;
border-radius: 23px;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
НЕОБЯЗАТЕЛЬНОЕ
Задача, собственно, доверстать шаблон до конца. В видео я начинаю верстать шаблон. Можете найти какой-нибудь свой шаблон. Я рассматриваю на следующем примере 657_Travel%20Website Landing Page (Community).fig.
Чтобы открыть шаблон в Figma, надо на странице проектов https://www.figma.com/files/recent тыкнуть сюда и выбрать файл
либо просто перетянуть его в окно бразуера.