Наложение одной картинки на другой

Question

Должно получится вот так(фото ниже) но с другими картинками и текстом. Я взял картинки, сделал им прозрачный фон и сделал их под свой размер. Но как их выставить красиво и самое главное просто, я не понимаю. Конечно если помучиться я могу что то придумать, но это будет абсолютно нелогично читаемый код. Заранее спасибо за ответ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rina Shop</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="zakrep">Безкоштовна доставка на сумму від 400 грн</div><br>
    <div class="container">
        <div class="header">
            <div class="logo"></div>
            <div class="menu">
                <li><a href="$">Нове</a></li>
                <li><a href="$">Для чоловіків</a></li>
                <li><a href="$">Для жінок</a></li>
                <li><a href="$">Бренди</a></li>
                <li><a href="$">Sale</a></li>
                <input type="search" placeholder="Пошук по сайту">
            </div>
        </div>
        <div class="banner">
        <div class="banner2"><img src="/magazine/img/2.jpg" alt="r"></div>
        <div class="content">fdfc</div>
        <div class="banner3"><img src="/magazine/img/3.png" alt="re"></div>
    </div>
</body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

*{
    margin: 0;
    padding: 0;
}

body{
    font-family: 'Open Sans', sans-serif;
}


.zakrep{
    width: 100%;
    height: 30px;
    background-color: #fcdb03;
    margin: 0 auto;
    text-align: center;
    position: fixed;
    
}

.container{
    width: 1150px;
    height: 800px;
    border: 1px solid red;
    margin: 0 auto;
    margin-top: 7px;
}

.header{
    display: flex;
    width: 100%;
    height: 200px;
    border: 1px solid red;
}

.logo{
    width: 200px;
    height: 200px;
    border: 1px solid red;
    background-image: url('/magazine/img/1.png');
}

.menu{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 100px;
    font-size: 16px;
    margin-bottom: 45px;
    list-style: none;
    gap: 44px;
    font-weight: bolder;
}

a{
    color: black;
    text-decoration: none;
}

a:hover{
    text-decoration: underline;
}

.banner{
    width: 1035px;
    height: 400px;
    border: 1px solid red;
    background-image: url('https://oir.mobi/uploads/posts/2021-03/1616549210_37-p-fon-sinii-gradient-39.jpg');
    margin-left: 60px;
    border-radius: 50px;
}
.banner2{
    display: flex;
    height: 400px;
    width: 300px;
    margin-left: 40px;
    border: 1px solid red;
}

.content{
    text-align: center;
    margin: 0 auto
}

.banner3{
    position: relative;
    display: flex;
    float: right;
    height: 400px;
    bottom: 422px;
    border: 1px solid red;
    left: 52px;
}

БЛОГ НА HUSL

Наложение одной картинки на другой

Ответы (0 шт):