<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<div class="bg">
<header>
<div class="container">
<div class="header">
<img
class="logo"
width="70px"
height="25px"
src="./images/Seqty.png"
alt="logo"
/>
<nav class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Programs</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</nav>
<button class="button">Security Estimate</button>
</div>
</div>
</header>
<section class="main">
<div class="container main">
<div class="first__block">
<h1>DIY Home Security Systems & WiFi Security Cameras</h1>
<p>
Top-rated smart home security systems and security cameras that<br />
offer everything you need to keep your family or business safe.
Set<br />
up in minutes with no tools required.
</p>
<button class="play">
<img class="play__button" src="./images/play.png" alt=" " />
<a class="play__text">Watch Overview</a>
</button>
</div>
<div class="second__block">
<img class="Camera" src="./images/Camera_RGB.png" alt="Камера" />
</div>
</section>
</div>
<section class="about__smartphones">
<div class="container__second-lpx">
<div class="text-content">
<h2>More than home security.
Full smart home integrations.
</h2>
<img src="" alt="">
</div>
</div>
</section>
</body>
</html>
<code lang="css">
</code>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
border: 0;
}
button {
outline: 0;
background: none;
cursor: pointer;
}
a {
text-decoration: none;
color: black;
}
.bg {
background-image: url(../images/Vector.png);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: top center;
}
.container {
max-width: 1520px;
margin: 0 auto;
}
.container__second-lpx {
max-width: 1440px;
margin: 0 auto;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 50px;
}
.header .menu ul {
display: flex;
list-style: none;
}
.header .menu ul li {
padding: 0 15px;
}
.header .menu ul li a {
font-size: 18px;
line-height: 28px;
color: #f4f6f8;
}
.button {
font-size: 18px;
line-height: 27px;
color: #f4f6f8;
padding: 15px 30px;
border: 1px solid white;
border-radius: 28px;
}
.main {
display: flex;
justify-content: space-between;
}
.main h1 {
font-size: 74px;
line-height: 130%;
color: #f4f6f8;
max-width: 680px;
margin-bottom: 24px;
}
.main p {
font-size: 20px;
line-height: 180%;
color: #ffffff;
max-width: 680px;
margin-bottom: 60px;
}
.play {
font-size: 20px;
line-height: 100%;
color: #fff;
background: #636363;
opacity: 0.5;
border-radius: 33px;
vertical-align: middle;
}
.play__text {
padding: 0px 40px 0px 20px;
vertical-align: middle;
}
.play__button {
vertical-align: middle;
padding: 15px 0px 15px 20px;
}
.first__block {
margin-top: 132px;
}
.second__block {
margin-top: 100px;
}