https://i.sstatic.net/yx25q.pngI am currently working on creating a simple landing page layout based on a design in Figma. The main issue I am encountering has to do with the arrangement of images within a flexbox. Specifically, I have an image followed by a description and then another image, all in a single row line. However, the last image on the right side should take up 2/3 of the screen width while staying positioned immediately after the paragraph. I have attempted to use flex properties to achieve this layout, but so far, it hasn't worked as intended. The problem seems to stem from the "Main-content" div class in both the CSS and HTML files. I would greatly appreciate any advice or suggestions on how to resolve this issue. Thank you in advance.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
header {
display: flex;
flex-wrap: wrap;
width: 70%;
margin: auto;
align-items: center;
}
.logo {
justify-content: flex-start;
padding: 25px 15px 0px 0px;
}
.site-desc {
width: 300px;
justify-content: flex-end;
padding: 30px 15px 0px 10px;
font-size: 12px;
}
.contact-info {
justify-content: flex-end;
text-align: center;
flex: 1;
padding: 25px 0px 0px 0px;
}
.contact-info img {
padding: 0px 5px 0px 0px;
}
.container {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
width: 70%;
margin: auto;
}
.introduction {
font-weight: 700;
font-size: 30px;
line-height: 45px;
align-self: flex-start;
padding: 30px 0px 0px 0px;
width: 100%;
}
span {
color: orangered;
}
.kitchen-types {
padding: 30px 0px 0px 0px;
font-size: 33px;
align-self: flex-start;
font-weight: 300;
}
.main-content {
display: flex;
flex-wrap: wrap;
width: 70%;
margin: auto;
padding-top: 5rem;
padding-left: 2.5rem;
position: relative;
height: 70vh;
background: tomato;
justify-content: flex-start;
align-items: flex-start;
}
.left-side {
position: relative;
}
.art-board {
position: absolute;
right: 100px;
bottom: 185px;
}
.main-content-text {
position: relative;
font-size: 17px;
padding: 15px 20px 0px 28px;
line-height: 20px;
}
.arrow {
position: absolute;
bottom: 220px;
right: 30rem;
}
.left-side-text {
position: relative;
padding-left: 15px;
}
.short-desc-2 {
padding-top: 10px;
}
.yellow-checked {
position: absolute;
}
.yellow-checked-2 {
position: absolute;
top: 30;
}
.yellow-checked-2,
.yellow-checked {
right: 99%;
}
.main-content-text h4 {
padding-bottom: 20px;
width: 52%;
}
.left-side-cover {
flex: 2;
}
.left-side-cover img {
height: 30vh;
}<html>
<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">
<link rel="stylesheet" href="style.css">
<title>Like Mebel</title>
</head>
<body>
<header>
<div class="logo">
<img src="images/frame.svg" alt="frame">
</div>
<div class="site-desc">
<p>Изготавливаем и устанавливаем кухни в Москве и области с 2004 года</p>
</div>
<div class="contact-info">
<h2>+7 (995) 508-51-17</h2>
<p><img src="images/online.svg">сейчас работаем</p>
</div>
</header>
<main>
<section class="container">
<div class="introduction">
<h2 class="text-color-type">
Современные Комфортные Кухни <span><br/>с пожизненной гарантией</span>
</h2>
<h2 class="kitchen-types">Тренды дизайна кухни 2020 г.</h2>
</div>
</section>
<div class="main-content">
<div class="left-side">
<img src="images/image163.png">
<img class="art-board" src="images/Artboard21.png" alt="">
</div>
<div class="main-content-text">
<h4>Максимальное использование пространства и простота в уходе</h4>
<img class="arrow" src="images/Vector.png" alt="vector">
<div class="left-side-text">
<img class="yellow-checked" src="images/Group 839.png" alt="group">
<p class="short-desc">Гладкие, ровные поверхности без ручек</p>
<img class="yellow-checked-2" src="images/Group 839.png" alt="group">
<p class="short-desc-2"> «Умные» материалы фасадов —<br/> нет отпечатков и царапин</p>
</div>
</div>
<div class="left-side-cover">
<img src="images/Group87.png">
</div>
</div>
</main>
</body>
</html>