Endersqui
Centipat
- Katılım
- 19 Eylül 2023
- Mesajlar
- 102
Daha fazla
- Cinsiyet
- Erkek
Merhaba, bir ürünlerimiz kısmı oluşturdum ve head ve sub diye ikiye ayırdım. Sub kısmını da left ve right diye ikiye ayırdım burada yapmak istediğim sub kısmında 2 tane kutu oluşturmak biri solda diğeri sağda olmak üzere. Daha sonra bu kutuların solda olanı products-box dediğim ana kutunun %25'ini sağdaki de %75'ini kaplamasını istiyorum. Konumlandırmak için yardım eder misiniz?
HTML:
<section class="products">
<h1 class="heading">Ürünlerimiz</h1>
<div class="products-container">
<div class="products-box">
<div class="products-box-head">
<img src="images/urun.jpeg" alt="Ürün">
</div>
<div class="products-box-sub">
<div class="sub-left">
sub left
</div>
<div class="sub-right">
sub right
</div>
</div>
</div>
<div class="products-box">
</div>
<div class="products-box">
</div>
</div>
</section>
CSS:
.products {
background-color: #27374D;
}
.products-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap: 1.5rem;
}
.products-box {
position: relative;
background-color: #fff;
min-height:40rem;
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
padding: 2rem;
}
.products-box-head {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: calc(100% - 10rem);
overflow: hidden;
z-index: 1;
}
.products-box img {
width: 100%;
height: 100%;
object-fit: cover;
}
.products-box h1 {
position: relative;
z-index: 2;
color: white;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
margin-top: auto;
padding: 1rem;
}
.product-box-sub {
display: flex;
gap: 1rem;
}
.sub-left {
width: 25%;
object-fit: cover;
background-color: blue;
}
.sub-right {
width: 75%;
text-align: center;
background-color: orange
}
Son düzenleyen: Moderatör:
