Создание нового блока посередине сайта
Проблема заключается в том, что новый блок создаётся не в конце сайта, а в промежутках посередине сайта.
. При надобности могу прикрепить код css файла.
Как вы думаете в чём проблема?
<!DOCTYPE html>
<html lang="ru">
<head>
<title>пример</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=KoHo&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<meta name='viewport' content='width=device-width,initial-scale=1'/>
<meta content='true' name='HandheldFriendly'/>
<meta content='width' name='MobileOptimized'/>
<meta content='yes' name='apple-mobile-web-app-capable'/>
</head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<!-- Header -->
<div class="container">
<div class="header">
<div class="header-top">
<nav class="nav">
<div class="nav_logo"></div>
<img src="images/Icon Design Company.png">
<ul class="nav-list">
<li><a href="#!" class="active">Home</a></li>
<li><a href="#!">Our Work</a></li>
<li><a href="#!">Services</a></li>
<li><a href="#!">Partners</a></li>
</ul>
<div class="nav-Contact"></div>
<button class="btn-1">Contact us</button>
</nav>
</div>
<div class="header_row">
<div class="header_content">
<h2 class="header_title">Create <span class="colortext">the best</span> digital product with us</h2>
<div class="header_text">
<p>Whether it is to increase enquiries, generate more sales or<p>imporve your digital strategy, our passion is creating digital<p>excellence</p>
</div>
</div>
<div class="header_img">
<img src="images/Image.png">
</div>
</div>
</div>
<section class="destination">
<div class="container-left">
Because our patform has done a long reset with everal<br> other user and has done a reset with seniors so that<br>user can use our platform easily, and comfortably
</div>
<div class="container-right">
<strong><h2>Why should you choose our platform and use it every day?</h2></strong>
</div>
</section>
<section class="destination2">
<div class="container-top">
<div class="left_part_beadg">
<a>OUR WORK</a>
</div>
<div class="left_part_1">
<h1>We are on a mission to<br> help businesses grow<br> faster than ever</h1>
</div>
<div class="right_part">
<img src="images/rocket.png">
</div>
<div class="right_part_stars">
<img src="images/stars.png">
</div>
<div class="right_part_trophy">
<img src="images/trophy.png">
</div>
<div class="right_part_text">
<a>Marketing strategy simplifield. DesignCompany is a one-stop shop that provides your company with a skilled marketing staff, expertise, and resources for endless development.</ф>
</div>
</div>
<div class="container_row">
<div class="box1">
<div class="img_card">
<div class="head_text_box1">
<p>95%</p>
</div>
<div class="low_text_box1">
<p>ROAS has increased in comparison to prior findings</p>
</div>
<img src="images/名片_id-card 1.png">
</div>
</div>
<div class="box2">
<div class="head_text_box2">
<p>350%</p>
</div>
<div class="low_text_box2">
<p>Average annual growth rate among our clientele</p>
</div>
<div class="img_tree">
<img src="images/松树_christmas-tree-one 1.png">
</div>
</div>
<div class="box3">
<div class="head_text_box3">
<p>25$+</p>
<div class="low_text_box3">
<p>Revenue that can be tracked across our portfolio</p>
</div>
</div>
<div class="img_money">
<img src="images/Money Icon.png">
</div>
</div>
</div>
</section>
<section class="service_container">
<div class="right_sec">
<div class="right_sec_head">
<P>Core values we always live by</P>
</div>
<div class="right_sec_photo">
<img src="images/Image pallete.png">
</div>
</div>
<div class="left_sec">
<div class="left_sec_1">
<div class="left_sec_1_head_text">
<p>Pixel Perfection</p>
</div>
<div class="left_sec_1_other_text">
<p>With high dedication, our designs are always perfectly to the applied container which also pixel</p>
</div>
<div class="left_sec_1_photo">
<img src="images/pixel icon.png">
</div>
</div>
<div class="left_sec_2">
<div class="left_sec_2_head_text">
<p>Consistent Deadline</p>
</div>
<div class="left_sec_2_other_text">
<p>We always update our design by daily basis. It is better if we know what is the problem faster</p>
</div>
<div class="left_sec_2_photo">
<img src="images/calendar icon.png">
</div>
</div>
<div class="left_sec_3">
<div class="left_sec_3_head_text">
<p>Updated style</p>
</div>
<div class="left_sec_3_other_text">
<p>With highly - competent designers will always update about the most recent design style</p>
</div>
<div class="left_sec_3_photo">
<img src="images/target icon.png">
</div>
</div>
<div class="left_sec_4">
<div class="left_sec_4_head_text">
<p>Transparency</p>
</div>
<div class="left_sec_4_other_text">
<p>Keeping the relationship between us and client as clear as possible to achieve client is goals</p>
</div>
<div class="left_sec_4_photo">
<img src="images/eyes icon.png">
</div>
</div>
</div>
</section>
<section class="partners">
<div class="partners_head_text">
</div>
<div class="partners_bottom_text">
</div>
<div class="partners_logo">
</div>
<div class="partners_picture">
</div>
</section>
</div>
</body>
</html>
css
.header-top{
display: flex;
flex-wrap: wrap;
justify-content:space-between;
align-items:center;
width: 1410px;
flex-wrap: wrap;
margin-bottom: 187px;
padding-top: 22px;
}
.nav{
display: flex;
list-style-type: none;
column-gap: 40px;
align-items: center;
position: absolute;
width: 1410px;
height: 40px;
left: 255px;
top: 22px;
}
.nav-Contact{
display: flex;
font-family: 'KoHo';
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 23px;
letter-spacing: -0.01em;
color: #263238;
}
.nav_logo{
padding: 13px;
}
.nav-list{
display: flex;
list-style-type: none;
column-gap: 40px;
justify-content: space-between;
padding-top: 22px;
padding-left: 370px;
font-family: 'KoHo';
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 23px;
letter-spacing: -0.01em;
}
.nav-list a.active{
position: relative;
}
.nav-list a.active::after,
.nav-list a:hover::after{
content: "";
background-color: #EBB762;
border-radius: 50px;
position: relative;
right: 5px;
bottom: -6px;
display: block;
/* width: 10px; */
height: 5px;
left: 0px;
}
:root{
--container-width:1440px;
--container-padding:15px;
}
.container{
max-width: var(--container-width);
margin:0 auto;
padding:0 var(--container-padding);
}
.header_row{
display: flex;
}
.header-content{
max-width:480px;
}
.header_img img{
position: absolute;
width: 533.01px;
height: 518.92px;
left: 1114px;
top: 185.5px;
}
.header{
position: relative;
background: rgba(235, 183, 98, 0.226);
width: 1911px;
height: 809px;
align-items: center;
background-size: cover;
right: 312px;
}
.body{
font-family: 'KoHo', sans-serif;
}
.nav a {
text-decoration:none;
color: #000 !important;
}
/* button */
.btn-1{
position: absolute;
display: inline-block;
padding:7px 16px;
background-color: rgba(235, 183, 98, 0.8);
border-radius:5px 15px;
font-size: 18px;
font-weight: 400;
border:none;
width: 125px;
height: 40px;
left: 1400px;
}
.btn-1:hover{
border: solid;
transition: border 0.1s ease-in;
}
/* header content */
.header_title{
position: absolute;
width: 480px;
height: 264px;
left: 270px;
top: 233.5px;
font-family: 'KoHo';
font-style: normal;
font-weight: 500;
font-size: 66px;
line-height: 88px;
/* or 133% */
letter-spacing: 0.03em;
color: #263238;
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.header_text{
position: absolute;
width: 480px;
height: 90px;
left: 270px;
top: 536.5px;
font-family: 'KoHo';
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 167%;
/* or 167% */
letter-spacing: -0.01em;
color: #425358;
}
.colortext{
color: #EBB762;
}
/* destination */
.destination{
display:flex;
justify-items: center;
}
.container-left{
position: absolute;
width: 468.67px;
height: 88px;
left: 257px;
top: 1112px;
font-family: 'KoHo';
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 30px;
/* or 167% */
letter-spacing: 0.03em;
color: #263238;
box-sizing: border-box;
position: absolute;
width: 1409px;
height: 398px;
left: 256px;
top: 965px;
background: #FAFAFA;
border-width: 1.5px 0px;
border-style: solid;
border-color: #EBB762;
padding-top: 147px;
padding-left: 10px;
padding-right:95.33px;
padding-bottom:110px;
}
.container-right{
position: absolute;
width: 530.41px;
height: 176px;
left: 914.69px;
top: 1077px;
font-family: 'KoHo';
font-style: normal;
font-weight: 500;
font-size: 48px;
line-height: 88px;
/* or 183% */
letter-spacing: 0.03em;
color: #263238;
box-sizing: border-box;
position: absolute;
width: 823.61px;
height: 396px;
left: 821px;
top: 967px;
border-left: 1.5px solid #EBB762;
padding-top: 112px;
padding-left:93.69px;
padding-right:199.52px;
padding-bottom:110px;
}
.destination2{
position: absolute;
width: 1410px;
height: 817.37px;
left: 255px;
top: 1544.63px;
background-color: #fff;
}
.left_part_beadg{
position: absolute;
width: 300px;
height: 30px;
left: 5px;
top: 1px;
font-family: 'KoHo';
font-style: normal;
font-weight: 500;
font-size: 32px;
line-height: 30px;
/* identical to box height, or 167% */
letter-spacing: 0.03em;
color: #263238;
padding: 6px;
}
.left_part_1{
position: absolute;
width: 508px;
height: 259px;
left: 0px;
top: 210px;
font-family: 'KoHo';
font-style: normal;
font-weight: 500;
font-size: 78px;
line-height: 100px;
/* or 183% */
letter-spacing: 0.03em;
color: #263238;
}
.right_part{
position: absolute;
left: 38.13%;
right: 7.81%;
top: 33.01%;
bottom: 62.72%;
transform: matrix(0.99, 0.14, -0.16, 0.99, 0, 0);
}
.right_part_stars{
position: absolute;
left: 45.92%;
right: 37.36%;
top: 100px;
bottom: 65.11%;
transform: matrix(0.94, 0.31, -0.36, 0.95, 0, 0);
}
.right_part_trophy{
position: absolute;
width: 48.35px;
height: 86.31px;
left: 960px;
top: 0px;
transform: rotate(19.52deg);
}
.right_part_text{
position: absolute;
width: 437px;
height: 123px;
left: 970px;
top: 330px;
font-family: 'KoHo';
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 30px;
/* or 167% */
letter-spacing: 0.03em;
color: #263238;
}
.container_row{
display: block;
justify-content:space-between;
}
.box1{
position: absolute;
width: 450px;
height: 330px;
left: 0px;
top: 487px;
background: #F7E2C0;
border: 1px solid #EBB762;
border-radius: 5px;
}
.box2{
position: absolute;
width: 450px;
height: 330px;
left: 480px;
top: 487px;
background: #F7E2C0;
border: 1px solid #EBB762;
border-radius: 5px;
}
.box3{
position: absolute;
width: 450px;
height: 330px;
left: 960px;
top: 487px;
background: #F7E2C0;
border: 1px solid #EBB762;
border-radius: 5px;
}
.img_card{
position: absolute;
width: 38px;
height: 38px;
left: 34px;
top: 19px;
}
.img_tree{
position: absolute;
width: 38px;
height: 38px;
left: 34px;
top: 19px;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.img_money{
position: absolute;
width: 38px;
height: 38px;
left: 34px;
top: 19px;
}
.head_text_box1{
position: absolute;
width: 280px;
height: 60px;
left: 1px;
top: 116px;
font-family: 'KoHo';
font-style: normal;
font-weight: 500;
font-size: 96px;
line-height: 30px;
/* or 31% */
letter-spacing: 0.03em;
color: #263238;
}
.head_text_box2{
position: absolute;
width: 280px;
height: 60px;
left: 34px;
top: 126px;
font-family: 'KoHo';
font-style: normal;
font-weight: 500;
font-size: 96px;
line-height: 30px;
/* or 31% */
letter-spacing: 0.03em;
color: #263238;
}
.head_text_box3{
position: absolute;
width: 258px;
height: 60px;
left: 34px;
top: 129px;
font-family: 'KoHo';
font-style: normal;
font-weight: 500;
font-size: 96px;
line-height: 30px;
/* or 31% */
letter-spacing: 0.03em;
color: #263238;
}
.low_text_box1{
position: absolute;
width: 299px;
height: 57px;
left: 3px;
top: 210px;
font-family: 'KoHo';
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 30px;
/* or 167% */
letter-spacing: 0.03em;
color: #263238;
}
.low_text_box2{
position: absolute;
width: 299px;
height: 57px;
left: 38px;
top: 227px;
font-family: 'KoHo';
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 30px;
/* or 167% */
letter-spacing: 0.03em;
color: #263238;
}
.low_text_box3{
position: absolute;
width: 299px;
height: 57px;
left: 4px;
top: 99px;
font-family: 'KoHo';
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 30px;
/* or 167% */
letter-spacing: 0.03em;
color: #263238;
}
.service_container{
position: absolute;
width: 1407px;
height: 638px;
left: 256px;
top: 2643px;
background-color: #ffffff;
}
.right_sec_head{
position: absolute;
width: 563px;
height: 173px;
left: 0px;
top: 0px;
font-family: 'KoHo';
font-style: normal;
font-weight: 400;
font-size: 64px;
line-height: 88px;
/* or 138% */
letter-spacing: 0.03em;
color: #263238;
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.right_sec_photo{
position: absolute;
width: 569px;
height: 383px;
left: 0px;
top: 255px;
}
.left_sec_1{
position: absolute;
width: 226px;
height: 256px;
}
.left_sec_2{
position: absolute;
width: 236px;
height: 256px;
}
.left_sec_3{
position: absolute;
width: 226px;
height: 256px;
}
.left_sec_4{
position: absolute;
width: 226px;
height: 256px;
}
.left_sec_1_photo{
position: absolute;
width: 38px;
height: 38px;
left: 900px;
top: 20px;
}
.left_sec_2_photo{
position: absolute;
width: 38px;
height: 38px;
left: 1170px;
top: 20px;
}
.left_sec_3_photo{
position: absolute;
width: 38px;
height: 38px;
left: 900px;
top: 370px;
}
.left_sec_4_photo{
position: absolute;
width: 38px;
height: 38px;
left: 1170px;
top: 370px;
}
.left_sec_1_head_text{
/* Pixel Perfection */
position: absolute;
width: 199px;
height: 25px;
left: 900px;
top: 90px;
font-family: 'KoHo';
font-style: normal;
font-weight: 600;
font-size: 24px;
line-height: 30px;
/* or 125% */
letter-spacing: 0.03em;
color: #263238;
}
.left_sec_2_head_text{
position: absolute;
width: 236px;
height: 25px;
left: 1170px;
top: 90px;
font-family: 'KoHo';
font-style: normal;
font-weight: 600;
font-size: 24px;
line-height: 30px;
/* or 125% */
letter-spacing: 0.03em;
color: #263238;
}
.left_sec_3_head_text{
position: absolute;
width: 199px;
height: 25px;
left: 900px;
top: 440px;
font-family: 'KoHo';
font-style: normal;
font-weight: 600;
font-size: 24px;
line-height: 30px;
/* or 125% */
letter-spacing: 0.03em;
color: #263238;
}
.left_sec_4_head_text{
position: absolute;
width: 199px;
height: 25px;
left: 1170px;
top: 440px;
font-family: 'KoHo';
font-style: normal;
font-weight: 600;
font-size: 24px;
line-height: 30px;
/* or 125% */
letter-spacing: 0.03em;
color: #263238;
}
.left_sec_1_other_text{
position: absolute;
width: 226px;
height: 116px;
left: 900px;
top: 140px;
font-family: 'KoHo';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 30px;
/* or 188% */
letter-spacing: 0.03em;
color: #263238;
}
.left_sec_2_other_text{
position: absolute;
width: 226px;
height: 116px;
left: 1170px;
top: 140px;
font-family: 'KoHo';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 30px;
/* or 188% */
letter-spacing: 0.03em;
color: #263238;
}
.left_sec_3_other_text{
position: absolute;
width: 226px;
height: 116px;
left: 900px;
top: 488px;
font-family: 'KoHo';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 30px;
/* or 188% */
letter-spacing: 0.03em;
color: #263238;
}
.left_sec_4_other_text{
position: absolute;
width: 226px;
height: 116px;
left: 1170px;
top: 488px;
font-family: 'KoHo';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 30px;
/* or 188% */
letter-spacing: 0.03em;
color: #263238;
}
.partners{
width: 1088px;
height: 988px;
background-color:#F7E2C0;
}