верстаю сайт для практики в колледже. подскажите, как сверстать блок? через грид пробовала, не получается.
<!DOCTYPE html>
<body>
<header>
<div class="logo"> <img src="content/розовая лиса 1.png" alt=""></div>
<div class="title"><img src="content/fox wedding.png" alt=""></div>
<div class="cart-icon"><img src="content/image 96.png" alt=""></div>
</header>
<main>
<div class="nav_links">
<div class="nav_links_wed">
<a href="">wedding dresses</a>
</div>
<div class="nav_links_access">
<a href="">accessories</a>
</div>
<div class="nav_links_eve">
<a href="">evening dresses</a>
</div>
<div class="nav_links_cont">
<a href="">contacts</a>
</div>
</div>
<div class="block2">
<div class="block2_shop-text">text text text</div>
<div class="block2_buttons">
<button class="button">REVIEWS</button>
<button class="button">HISTORY</button>
<button class="button">SERVICES</button>
</div>
</div>
</body>
</html>
css:
.nav_links {
color: black;
text-decoration: none;
}
.nav_links_cont {
position: absolute;
left: 55%;
background-image: url("content/contactscloud.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 900px;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
z-index: 4;
}
.nav_links_wed {
position: absolute;
left: 0%;
bottom: 10%;
background-image: url("content/weddingcloud.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 900px;
height: 750px;
display: flex;
align-items: center;
justify-content: center;
z-index: 0;
}
.nav_links_eve {
position: absolute;
left: 40%;
bottom: -40%;
background-image: url("content/eveningcloud.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 900px;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
z-index: -1;
}
.nav_links_access {
position: absolute;
left: 70%;
bottom: 10%;
background-image: url("content/accessoriescloud.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 600px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
}
.block2 {
margin: 3%;
display: flex;
width: 110%;
color: white;
}
.block2_shop-text {
width: 60%;
text-align: left;
}
.block2_buttons {
display: flex; /* Используем flexbox для выравнивания */
flex-direction: column; /* Элементы в столбик */
width: 40%; /*Ширина контейнера */
align-items: center;
}
.button {
margin: 4%;
width: 200px;
height: 50px;
background-color: transparent;
border: 2px solid white;
}
по какой то причине блок под облаками залезает сверху. подскажите пожалуйста, как можно исправить, может я изначально не ту тактику выбрала?
Средний
