Блог

Я не профессионал в CSS и Bootstrap, как вы увидите из моего кода. Мне нужно сделать это с помощью CSS / Bootstrap, но я не смог. Я не знаю, что мне делать. кто-нибудь может мне помочь? пытаюсь сделать это:

Я зашел так далеко

сделал это:

и код, который я написал

HTML

 <div class="what">
        <div class="icerik">
            <h2>What is Londonist Investments?</h2>
            <div>
                <img src="/assets/slider/bg1.jpg" alt="">
            </div>
            <div class="about float-right">
                <div style="padding: 25px">
                    deneme
                </div>
            </div>
        </div>
    </div>
 

CSS

 
.what{
    border-radius: 25px;
    background-color: #2C2C2C;
    margin: 20px 0 50px 0;

}

.what h2{
    color: #FFFFFF;
    padding-bottom: 25px;
}

.icerik{
    padding: 25px;
}

.what img{
    height: 450px;
    border-radius: 25px;
}

.about{
    height: 300px;
    width: 50%;
    background-color: #F4FF77;
    border-radius: 25px;
    z-index: 1;
}

 

Также я должен упомянуть, что весь этот HTML-код находится внутри класса ‘container’ начальной загрузки 4. как я могу написать этот код? эти круги с красной четвертью — еще одна проблема для меня

Нужен ли вам такой результат?

 let what = document.querySelector('.what');
what.style.height = 'calc('   what.offsetHeight   'px   75px)'; 

 .what{
    border-radius: 25px;
    background-color: #2C2C2C;
    margin: 20px 0 50px 0;
}

.what h2{
    color: #FFFFFF;
    padding-bottom: 25px;
}

.icerik{
    padding: 25px;
}

.icerik_img {    
    position: relative;
    display: inline-block;
}

.what img{
    height: 450px;
    border-radius: 25px;
}

.about{
    height: 300px;
    width: 100%;
    background-color: #F4FF77;
    border-radius: 25px;
    z-index: 1;
    
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(50%, 25%);
} 

 <div class="what">
        <div class="icerik">
            <h2>What is Londonist Investments?</h2>
            <div class="icerik_img">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTNWxHxrSxNwX4gUVIQiAtyOv1Yl41zXYBPPQamp;usqp=CAU" alt="">
                
                <div class="about float-right">
                <div style="padding: 25px">
                    deneme
                </div>
            </div>
                
            </div>         
        </div>
</div>