Как правильно расположить елементы?
html {
box-sizing: border-box;
}
body {
font-family: 'Signika';
font-style: normal;
font-size: 16px;
line-height: 1.2;
font-weight: normal;
color: #260041;
;
}
*, *::before, *::after {
box-sizing:inherit;
}
.wrapper { // Выравнивание контенат по центру
max-width: 950px;
margin: 0 auto;
}
/* Header styles start*/
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.header__wrapper {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
padding-top: 45px;
}
.header__list {
display: flex;
flex-wrap: wrap;
}
.header__item {
margin-right: 50px;
}
.header__item {
&:last-child {
margin-right: 0;
}
&:first-child {
font-weight: 500;
color: #4A99D3;
}
}
.header__link {
font-size: 18px;
line-height: 19px;
color: #0F001A;
text-decoration: none;
&:hover, :focus, :active {
opacity: 0.50;
}
}
/* Header styles end*/
/* Intro styles start*/
.intro {
min-height: 100vh;
background: url(../img/intro_bg.jpg) no-repeat center;
background-size: cover;
padding-top: 233px;
}
.intro__title {
font-weight: 500;
font-size: 50px;
line-height: 70px;
letter-spacing: 0.02em;
color: #260041;
max-width: 500px;
margin-bottom: 14px;
}
.intro__subtitle {
font-weight: 400;
font-size: 20px;
line-height: 36px;
max-width: 550px;
color: #260041;
margin-bottom: 60px;
}
.intro__button {
width: 180px;
height: 60px;
border-radius: 5px;
}
.intro__button-apple{
background: url(../img/Group\ 52.jpg) no-repeat bottom left;
}
.intro__button-google {
background: url(../img/Group\ 51.jpg) no-repeat bottom left;
margin-right: 20px;
}
.intro__picture {
position: absolute;
background: url(../img/svg/Mockup.svg) no-repeat;
left: 913px;
top: 158px;
width: 441px;
height: 534.78px;
margin-left: 80px;
}
/* Intro styles end*/
/* Blocks Styles start */
.blocks__cards {
width: 950px;
height: 1175px;
background-color: white;
position: relative;
}
.blocks__title {
color: white;
font-weight: 500;
font-size: 36px;
line-height: 46px;
letter-spacing: 0.05em;
color: #260041;
max-width: 380px;
}
.blocks__card1 {
position: absolute;
width: 380px;
height: 525px;
left: 570px;
top: 12px;
background-color: #FFFFFF;
box-shadow: 5px 20px 50px rgba(74, 153, 211, 0.2);
border-radius: 10px;
}
.blocks__card2 {
position: absolute;
width: 380px;
height: 525px;
top: 308px;
left: 85px;
background: #FFFFFF;
box-shadow: 5px 20px 50px rgba(74, 153, 211, 0.2);
border-radius: 10px;
}
.blocks__card3 {
position: absolute;
width: 380px;
height: 525px;
top: 650px;
left: 570px;
background: #FFFFFF;
box-shadow: 5px 20px 50px rgba(74, 153, 211, 0.2);
border-radius: 10px;
}
.blocks__card__title {
font-weight: 500;
font-size: 20px;
line-height: 30px;
letter-spacing: 0.02em;
color: #0F001A;
position: absolute;
width: 54px;
height: 30px;
left: 48px;
top: 246px;
}
.blocks__card__p {
position: absolute;
width: 284px;
height: 103px;
top: 292px;
left: 48px;
}
.blocks__card1__picture {
background-image: url(..//img/svg/block_1.svg);
position: absolute;
width: 250px;
height: 197px;
left: 65px;
bottom: 350px;
}
.blocks__card2__picture {
background-image: url(..//img/svg/block_2.svg);
position: absolute;
width: 202px;
height: 132px;
top: 48px;
left: 60px;
}
.blocks__card3__picture {
background-image: url(..//img/svg/block_3.svg);
position: absolute;
width: 170px;
height: 131px;
top: 49px;
right: 124px;
}
.dots {
background: url(..//img/svg/Group\ 72.svg);
position: absolute;
width: 153.44px;
height: 153.44px;
left: 1160px;
}
/* Blocks Styles end */<!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>New E-commerce App
best for You</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
<div class="wrapper">
<div class="header__wrapper">
<div class="header__logo">
<a href="/" class="header__logo-link">
<img src="img/svg/logo.svg" alt="image description" class="header_logo-pic">
</a>
</div>
<nav class="header__nav">
<ul class="header__list">
<li class="header__item">
<a href="#!" class="header__link">Home</a>
</li>
<li class="header__item">
<a href="#!" class="header__link">About</a>
</li>
<li class="header__item">
<a href="#!" class="header__link">Contact Us</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<main class="main">
<!-- Intro Start -->
<section class="intro">
<div class="wrapper">
<h1 class="intro__title">
New E-commerce App
best for You
</h1>
<p class="intro__subtitle">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Amet sed vulputate vitae velit dictum
cursus amet. Turpis donec ut velit quis. Cursus commodo, eget urna, sapien amet.
</p>
<button type="submit" class="intro__button intro__button-google"></button>
<button type="submit" class="intro__button intro__button-apple"></button>
</div>
<section class="intro__picture">
</section>
</section>
<!-- Intro End -->
<!-- Blocks Start -->
<section class="blocks">
<div class="dots">
</div>
<div class="wrapper">
<div class="blocks__cards">
<h2 class="blocks__title">
What we do to help
our customers in
digital era.
</h2>
<div class="blocks__card1">
<div class="blocks__card1__picture">
</div>
<h3 class="blocks__card__title">
Send
</h3>
<p class="blocks__card__p">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="blocks__card2">
<div class="blocks__card2__picture">
</div>
<h3 class="blocks__card__title">
Send
</h3>
<p class="blocks__card__p">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="blocks__card3">
<div class="blocks__card3__picture">
</div>
<h3 class="blocks__card__title">
Send
</h3>
<p class="blocks__card__p">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
</section>
<!-- Blocks End -->
</main>
</body>
</html>Не могу нормально разместить точки и квадратные рамки, перепробовал все, что знаю.
Нужно вот так