Я пробовал сверстать с помощью flex
и float
, но результат не выглядит как это изображение:
уже даже предположений нету, как можно сверстать такой блок?
.storehouse__item1 {
width: 31%;
float: left;
}
.storehouse__item2 {
width: 37%;
float: left;
}
.storehouse__item3 {
width: 31%;
float: right;
}
.storehouse__item4 {
width: 38%;
float: left;
}
.storehouse__item5 {
width: 31%;
float: left;
}
.storehouse__item6 {
width: 31%;
float: right;
}
<div class="storehouse">
<div class="storehouse__item storehouse__item1">
<img src="css/img/storehouse/1.jpg" alt="">
<div class="storehouse-info">
<div class="storehouse__subtitle">Prepare for</div>
<div class="storehouse__title">BLACK WEAR</div>
<a href="#" class="btn work--btn">ORDER NOW</a>
</div>
</div>
<div class="storehouse__item storehouse__item2">
<div class="storehouse__subtitle">The</div>
<div class="storehouse__title">STOREHOUSE</div>
<div class="storehouse__text">Check our new collection</div>
</div>
<div class="storehouse__item storehouse__item3">
<img src="css/img/storehouse/2.jpg" alt="">
<div class="storehouse-info">
<div class="storehouse__subtitle">Best team ever</div>
<div class="storehouse__title">JOIN TO US.</div>
</div>
</div>
<div class="storehouse__item storehouse__item4">
<div class="storehouse__subtitle2">Kate Winslet</div>
<div class="storehouse__title2">The Reader</div>
<a href="#" class="btn work--btn">WATCH MOVIE</a>
</div>
<div class="storehouse__item storehouse__item5">
<img src="css/img/storehouse/3.jpg" alt="">
</div>
<div class="storehouse__item storehouse__item6">
<img src="css/img/storehouse/4.jpg" alt="">
<div class="storehouse-info">
<div class="storehouse__text">NEWEST NIKE COLLECTION</div>
<a href="#" class="btn work--btn">CHECK MORE</a>
</div>
</div>
</div>