<section id="banner">
<div class="banner-content">
<img src="#" id="woman-photo" alt="">
<div class="banner-text-content">
<h2>Лето 2021</h2>
<a href="#">Узнать подробнее</a>
</div>
</div>
</section>width и margin: 0 auto;;<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrapp {
width: 1166px;
max-width: 100%;
padding: 0 10px;
margin: 0 auto;
}
.work_wrap {
display: grid;
grid-template-columns: repeat(4, auto);
grid-gap: 10px 10px;
justify-content: space-between;
margin-top: 50px;
list-style: none;
}
.work_item {
margin-top: -28px;
width: 279px;
height: 205px;
border-radius: 30px;
background-color: #3DDABE;
}
.work_item-mark {
position: relative;
top: -14px;
left: -13px;
width: 15px;
height: 15px;
border-radius: 20px;
background: #3DDABE;
}
.work_wrap li:nth-child(5) {
opacity: 0;
}
</style>
</head>
<body>
<div class="wrapp">
<ul class="work_wrap">
<li class="work_item"></li>
<li class="work_item"></li>
<li class="work_item"></li>
<li class="work_item"></li>
<li class="work_item-mark"></li>
<li class="work_item-mark"></li>
<li class="work_item-mark"></li>
<li class="work_item-mark"></li>
<li class="work_item"></li>
<li class="work_item"></li>
<li class="work_item"></li>
<li class="work_item"></li>
</ul>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
box-sizing: border-box;
}
div {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin: 0 auto;
width: 300px;
height: 35px;
border-radius: 18px;
background: #e9e9e9;
}
img {
padding: 8px;
width: 35px;
height: 35px;
border-radius: 16px;
background: orange;
}
h4 {
padding-right: 45px;
}
</style>
</head>
<body>
<div>
<img
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnN2Z2pzPSJodHRwOi8vc3ZnanMuY29tL3N2Z2pzIiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgeD0iMCIgeT0iMCIgdmlld0JveD0iMCAwIDUxMS45OTgyOCA1MTEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTIiIHhtbDpzcGFjZT0icHJlc2VydmUiIGNsYXNzPSIiPjxnPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJzdXJmYWNlMSI+CjxwYXRoIGQ9Ik0gNTExLjgzOTg0NCAyMjYuNzgxMjUgTCA1MTEuODM5ODQ0IDIyNi43NzczNDQgQyA1MTEuMDAzOTA2IDIxOC44MDA3ODEgNTA2Ljg3MTA5NCAyMTEuNDQ5MjE5IDUwMC41MDM5MDYgMjA2LjU3ODEyNSBMIDQ3MS4zNjMyODEgMTgzLjg5MDYyNSBMIDQ4Mi4zMTY0MDYgMTQ3Ljc1IEMgNDg0LjY1MjM0NCAxNDAuMDM5MDYyIDQ4My42ODM1OTQgMTMxLjYxMzI4MSA0NzkuNjU2MjUgMTI0LjYyODkwNiBDIDQ3NS42MjUgMTE3LjY0ODQzOCA0NjguODEyNSAxMTIuNTk3NjU2IDQ2MC45NjQ4NDQgMTEwLjc2MTcxOSBMIDQyNC4zMDQ2ODggMTAyLjIwMzEyNSBMIDQxOS42MjUgNjQuODUxNTYyIEMgNDE4LjYyMTA5NCA1Ni44NTE1NjIgNDE0LjMwODU5NCA0OS41NDY4NzUgNDA3Ljc5Mjk2OSA0NC44MjAzMTIgQyA0MDEuMjY5NTMxIDQwLjA3NDIxOSAzOTIuOTg0Mzc1IDM4LjIyNjU2MiAzODUuMDc0MjE5IDM5Ljc1IEwgMzQ4LjEwMTU2MiA0Ni44Mzk4NDQgTCAzMjguNjI4OTA2IDE0LjYxNzE4OCBDIDMyMC44Nzg5MDYgMS43OTI5NjkgMzA0LjYwNTQ2OSAtMy4wNTA3ODEgMjkwLjc4NTE1NiAzLjMzOTg0NCBDIDI4OS44MTI1IDMuNzg5MDYyIDI4OC44NzUgNC4zMjgxMjUgMjg4LjA1ODU5NCA0LjkwNjI1IEwgMjU1Ljk2ODc1IDI3LjI1NzgxMiBMIDIyNS4wNzQyMTkgNS43MzgyODEgQyAyMTguNDYwOTM4IDEuMTM2NzE5IDIxMC4xNTIzNDQgLTAuNTM5MDYyIDIwMi4yNjk1MzEgMS4xMzI4MTIgQyAxOTQuMzg2NzE5IDIuODA0Njg4IDE4Ny40NzI2NTYgNy43MjY1NjIgMTgzLjMwNDY4OCAxNC42MjUgTCAxNjMuODM5ODQ0IDQ2Ljg0Mzc1IEwgMTI2Ljg2MzI4MSAzOS43NSBDIDExOC45NDUzMTIgMzguMjM0Mzc1IDExMC42Njc5NjkgNDAuMDgyMDMxIDEwNC4xNTYyNSA0NC44MTY0MDYgQyA5Ny42MzI4MTIgNDkuNTU0Njg4IDkzLjMyMDMxMiA1Ni44NTkzNzUgOTIuMzIwMzEyIDY0Ljg1MTU2MiBMIDg3LjY0MDYyNSAxMDIuMjA3MDMxIEwgNDguODY3MTg4IDExMS4yNTc4MTIgTCA0Ny4wNDY4NzUgMTExLjg1MTU2MiBMIDQ2LjM3NSAxMTIuMTQ0NTMxIEMgMzIuMjg5MDYyIDExOC4zMDQ2ODggMjUuMjQyMTg4IDEzMy4yODEyNSAyOS42MjUgMTQ3Ljc1IEwgNDAuNTc0MjE5IDE4My44OTA2MjUgTCAxMC4xODM1OTQgMjA3LjUzMTI1IEwgOC40MjE4NzUgMjA5LjA2MjUgTCA3LjkyNTc4MSAyMDkuNjA1NDY5IEMgLTIuMjczNDM4IDIyMC43NDYwOTQgLTIuNjcxODc1IDIzNy41OTc2NTYgNi45NzY1NjIgMjQ4Ljg2MzI4MSBMIDMwLjc2OTUzMSAyNzcuMzE2NDA2IEwgMTEuNDg0Mzc1IDMxMi4zMTI1IEwgMTAuNzE0ODQ0IDMxNC4wNjI1IEwgMTAuNDkyMTg4IDMxNC43MTQ4NDQgQyA1LjY4MzU5NCAzMjkuMDg1OTM4IDEyLjIzNDM3NSAzNDQuNzAzMTI1IDI1LjcyNjU2MiAzNTEuMDM1MTU2IEwgNTkuODA0Njg4IDM2Ny4wMjczNDQgTCA1Ni42MTMyODEgNDA0LjUzNTE1NiBDIDU1LjkyOTY4OCA0MTIuNTcwMzEyIDU4LjYzMjgxMiA0MjAuNjEzMjgxIDY0LjAyMzQzOCA0MjYuNTk3NjU2IEMgNjkuNDE0MDYyIDQzMi41ODU5MzggNzcuMTI4OTA2IDQzNi4xMTMyODEgODUuMTkxNDA2IDQzNi4yNzczNDQgTCAxMjIuODI4MTI1IDQzNy4wMjczNDQgTCAxMzUuMTcxODc1IDQ3Mi41ODU5MzggQyAxMzcuODEyNSA0ODAuMjAzMTI1IDE0My41NTA3ODEgNDg2LjQ1MzEyNSAxNTAuOTEwMTU2IDQ4OS43MjY1NjIgQyAxNTguMjY5NTMxIDQ5My4wMDM5MDYgMTY2Ljc1IDQ5My4wODk4NDQgMTc0LjE4NzUgNDg5Ljk2MDkzOCBMIDIwOC44Nzg5MDYgNDc1LjMzOTg0NCBMIDIzNi4xMDkzNzUgNTA0LjM5ODQzOCBMIDIzNy41MzUxNTYgNTA1LjY2Nzk2OSBMIDIzOC4wODU5MzggNTA2LjA3ODEyNSBDIDI0My40NjQ4NDQgNTEwLjA1MDc4MSAyNDkuNzUgNTExLjk5NjA5NCAyNTUuOTc2NTYyIDUxMS45OTYwOTQgQyAyNjMuODU1NDY5IDUxMS45OTYwOTQgMjcxLjYzNjcxOSA1MDguODc4OTA2IDI3Ny4zMjgxMjUgNTAyLjgwNDY4OCBMIDMwMy4wNzAzMTIgNDc1LjMzOTg0NCBMIDMzNy43NjU2MjUgNDg5Ljk2NDg0NCBDIDM0NS4xODc1IDQ5My4wODk4NDQgMzUzLjY2NDA2MiA0OTMuMDAzOTA2IDM2MS4wMjM0MzggNDg5LjczMDQ2OSBDIDM2OC4zOTA2MjUgNDg2LjQ1MzEyNSAzNzQuMTI4OTA2IDQ4MC4yMDMxMjUgMzc2Ljc2OTUzMSA0NzIuNTg5ODQ0IEwgMzg5LjExNzE4OCA0MzcuMDI3MzQ0IEwgNDI4LjkyOTY4OCA0MzYuMjM0Mzc1IEwgNDMwLjgyMDMxMiA0MzYuMDI3MzQ0IEwgNDMxLjUgNDM1Ljg5MDYyNSBDIDQ0Ni4zNDM3NSA0MzIuODYzMjgxIDQ1Ni41ODk4NDQgNDE5LjM4MjgxMiA0NTUuMzI4MTI1IDQwNC41MzkwNjIgTCA0NTIuMTQwNjI1IDM2Ny4wMjczNDQgTCA0ODYuMjIyNjU2IDM1MS4wMzUxNTYgQyA0OTMuNTE1NjI1IDM0Ny42MTMyODEgNDk5LjEyODkwNiAzNDEuMjUzOTA2IDUwMS42MjEwOTQgMzMzLjU4NTkzOCBDIDUwNC4xMDkzNzUgMzI1LjkyMTg3NSA1MDMuMzA4NTk0IDMxNy40NzY1NjIgNDk5LjQxNzk2OSAzMTAuNDE3OTY5IEwgNDgxLjE3NTc4MSAyNzcuMzE2NDA2IEwgNTA0Ljk3MjY1NiAyNDguODYzMjgxIEMgNTEwLjE3MTg3NSAyNDIuNzg5MDYyIDUxMi42NzU3ODEgMjM0Ljc1IDUxMS44Mzk4NDQgMjI2Ljc4MTI1IFogTSA0NTIuNzk2ODc1IDI2NC40NDkyMTkgQyA0NDguMDgyMDMxIDI3MC4wMTU2MjUgNDQ3LjI3NzM0NCAyNzguMDE5NTMxIDQ1MC44MDQ2ODggMjg0LjQxNDA2MiBMIDQ3Mi43MzA0NjkgMzI0LjIwMzEyNSBMIDQzMS42MDE1NjIgMzQzLjUwMzkwNiBDIDQyNC45MzM1OTQgMzQ2LjYzNjcxOSA0MjAuODc1IDM1My42NzE4NzUgNDIxLjQ5NjA5NCAzNjEuMDExNzE5IEwgNDI1LjM0Mzc1IDQwNi4yNzczNDQgTCAzNzkuOTIxODc1IDQwNy4xODM1OTQgQyAzNzIuNTU4NTk0IDQwNy4zMzIwMzEgMzY1Ljk4NDM3NSA0MTIuMTA1NDY5IDM2My41NzAzMTIgNDE5LjA2NjQwNiBMIDM0OC42NzE4NzUgNDYxLjk4NDM3NSBMIDMwNi44MTI1IDQ0NC4zMzk4NDQgQyAzMDAuMDIzNDM4IDQ0MS40ODA0NjkgMjkyLjA3ODEyNSA0NDMuMTY0MDYyIDI4Ny4wMzUxNTYgNDQ4LjU0Mjk2OSBMIDI1NS45Njg3NSA0ODEuNjkxNDA2IEwgMjI0LjkwMjM0NCA0NDguNTM5MDYyIEMgMjIxLjUgNDQ0LjkwNjI1IDIxNi43Njk1MzEgNDQyLjk2MDkzOCAyMTEuOTY0ODQ0IDQ0Mi45NjA5MzggQyAyMDkuNjU2MjUgNDQyLjk2MDkzOCAyMDcuMzMyMDMxIDQ0My40MTAxNTYgMjA1LjEzMjgxMiA0NDQuMzM5ODQ0IEwgMTYzLjI2NTYyNSA0NjEuOTg0Mzc1IEwgMTQ4LjM3MTA5NCA0MTkuMDc4MTI1IEMgMTQ1Ljk2MDkzOCA0MTIuMTEzMjgxIDEzOS4zODY3MTkgNDA3LjMzMjAzMSAxMzIuMDE1NjI1IDQwNy4xODM1OTQgTCA4Ni41ODk4NDQgNDA2LjI3NzM0NCBMIDkwLjQzNzUgMzYxLjAxMTcxOSBDIDkxLjA2MjUgMzUzLjY3MTg3NSA4NyAzNDYuNjM2NzE5IDgwLjMzMjAzMSAzNDMuNTAzOTA2IEwgMzkuMjA3MDMxIDMyNC4yMDMxMjUgTCA2MS4xMzI4MTIgMjg0LjQxNzk2OSBDIDY0LjY2NDA2MiAyNzguMDE1NjI1IDYzLjg1NTQ2OSAyNzAuMDE1NjI1IDU5LjEzNjcxOSAyNjQuNDQ1MzEyIEwgMzAuMjc3MzQ0IDIyOS45MzM1OTQgTCA2NS42MzY3MTkgMjAyLjQyNTc4MSBDIDcxLjQyNTc4MSAxOTcuOTYwOTM4IDczLjg4NjcxOSAxOTAuMjg5MDYyIDcxLjc2MTcxOSAxODMuMjk2ODc1IEwgNTguNTg5ODQ0IDEzOS44MjAzMTIgTCAxMDIuODM1OTM4IDEyOS40ODQzNzUgQyAxMTAuMDAzOTA2IDEyNy44MDg1OTQgMTE1LjQzNzUgMTIxLjc3NzM0NCAxMTYuMzU5Mzc1IDExNC40NjQ4NDQgTCAxMjIuMDA3ODEyIDY5LjM4NjcxOSBMIDE2Ni42MzI4MTIgNzcuOTQ1MzEyIEMgMTczLjg2NzE4OCA3OS4zMjgxMjUgMTgxLjI4MTI1IDc2LjAyMzQzOCAxODUuMDkzNzUgNjkuNzIyNjU2IEwgMjA4LjU4NTkzOCAzMC44Mzk4NDQgTCAyNDUuODYzMjgxIDU2LjgwMDc4MSBDIDI1MS45MTAxNTYgNjEuMDExNzE5IDI2MC4wMzUxNTYgNjEuMDE1NjI1IDI2Ni4wNzgxMjUgNTYuODAwNzgxIEwgMzAzLjM1NTQ2OSAzMC44MzU5MzggTCAzMjYuODUxNTYyIDY5LjcxMDkzOCBDIDMzMC42NTYyNSA3Ni4wMTk1MzEgMzM4LjA4NTkzOCA3OS4zMjgxMjUgMzQ1LjMyMDMxMiA3Ny45NDE0MDYgTCAzODkuOTM3NSA2OS4zODI4MTIgTCAzOTUuNTg1OTM4IDExNC40NTcwMzEgQyAzOTYuNSAxMjEuNzY1NjI1IDQwMS45MzM1OTQgMTI3LjgwNDY4OCA0MDkuMTEzMjgxIDEyOS40ODQzNzUgTCA0NTMuMzU1NDY5IDEzOS44MTY0MDYgTCA0NDAuMTc5Njg4IDE4My4yOTI5NjkgQyA0MzguMDU4NTk0IDE5MC4zMDA3ODEgNDQwLjUyMzQzOCAxOTcuOTY4NzUgNDQ2LjMxMjUgMjAyLjQyOTY4OCBMIDQ4MS42NTYyNSAyMjkuOTQ5MjE5IFogTSA0NTIuNzk2ODc1IDI2NC40NDkyMTkgIiBzdHlsZT0iIiBmaWxsPSIjZmZmZmZmIiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBjbGFzcz0iIj48L3BhdGg+CjxwYXRoIGQ9Ik0gMjU3LjU2MjUgMTI4Ljc4MTI1IEMgMTg3LjI2MTcxOSAxMjguNzgxMjUgMTMwLjA2NjQwNiAxODUuOTcyNjU2IDEzMC4wNjY0MDYgMjU2LjI3NzM0NCBDIDEzMC4wNjY0MDYgMzI2LjU3ODEyNSAxODcuMjYxNzE5IDM4My43NzM0MzggMjU3LjU2MjUgMzgzLjc3MzQzOCBDIDMyNy44NjcxODggMzgzLjc3MzQzOCAzODUuMDYyNSAzMjYuNTc4MTI1IDM4NS4wNjI1IDI1Ni4yNzczNDQgQyAzODUuMDYyNSAxODUuOTcyNjU2IDMyNy44NjMyODEgMTI4Ljc4MTI1IDI1Ny41NjI1IDEyOC43ODEyNSBaIE0gMjU3LjU2MjUgMzUzLjc1IEMgMjAzLjgxNjQwNiAzNTMuNzUgMTYwLjA4NTkzOCAzMTAuMDIzNDM4IDE2MC4wODU5MzggMjU2LjI3NzM0NCBDIDE2MC4wODU5MzggMjAyLjUyNzM0NCAyMDMuODE2NDA2IDE1OC44MDA3ODEgMjU3LjU2MjUgMTU4LjgwMDc4MSBDIDMxMS4zMTI1IDE1OC44MDA3ODEgMzU1LjAzOTA2MiAyMDIuNTI3MzQ0IDM1NS4wMzkwNjIgMjU2LjI3NzM0NCBDIDM1NS4wMzkwNjIgMzEwLjAyMzQzOCAzMTEuMzEyNSAzNTMuNzUgMjU3LjU2MjUgMzUzLjc1IFogTSAyNTcuNTYyNSAzNTMuNzUgIiBzdHlsZT0iIiBmaWxsPSIjZmZmZmZmIiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBjbGFzcz0iIj48L3BhdGg+CjxwYXRoIGQ9Ik0gMjk0LjIxMDkzOCAyMTYuNjkxNDA2IEwgMjM0Ljk4ODI4MSAyNzUuOTEwMTU2IEwgMjE4LjkxNzk2OSAyNTkuODM1OTM4IEMgMjEzLjA1NDY4OCAyNTMuOTc2NTYyIDIwMy41NTA3ODEgMjUzLjk3NjU2MiAxOTcuNjkxNDA2IDI1OS44MzU5MzggQyAxOTEuODI4MTI1IDI2NS42OTkyMTkgMTkxLjgyODEyNSAyNzUuMjAzMTI1IDE5Ny42OTE0MDYgMjgxLjA2NjQwNiBMIDIyNC4zNzUgMzA3Ljc1IEMgMjI3LjMwNDY4OCAzMTAuNjgzNTk0IDIzMS4xNDg0MzggMzEyLjE0ODQzOCAyMzQuOTg4MjgxIDMxMi4xNDg0MzggQyAyMzguODI4MTI1IDMxMi4xNDg0MzggMjQyLjY3MTg3NSAzMTAuNjgzNTk0IDI0NS42MDE1NjIgMzA3Ljc1IEwgMzE1LjQzNzUgMjM3LjkxNzk2OSBDIDMyMS4yOTY4NzUgMjMyLjA1NDY4OCAzMjEuMjk2ODc1IDIyMi41NTA3ODEgMzE1LjQzNzUgMjE2LjY5MTQwNiBDIDMwOS41NzQyMTkgMjEwLjgyODEyNSAzMDAuMDcwMzEyIDIxMC44MjgxMjUgMjk0LjIxMDkzOCAyMTYuNjkxNDA2IFogTSAyOTQuMjEwOTM4IDIxNi42OTE0MDYgIiBzdHlsZT0iIiBmaWxsPSIjZmZmZmZmIiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBjbGFzcz0iIj48L3BhdGg+CjwvZz4KPC9nPjwvc3ZnPg==" />
<h4>#1 Editiors Choice App of 2020</h4>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
section {
display: flex;
flex-direction: row;
align-items: center;
}
.left-block {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.right-block {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-end;
}
</style>
</head>
<body>
<section>
<div class="left-block">
<h1>Product name</h1>
<ul class="list">
<li>Put on this page information about your product</li>
<li>A detailed description of your product</li>
<li>Tell us about the advantages and merits</li>
<li>Associate the page with the payment system</li>
</ul>
</div>
<div class="right-block">
<img src="image/Shape-9.png" width="300" height="150">
</div>
</section>
</body>
</html>