Yazılar için küçük bir alan oluşturmak

Vxnic dedi:

Eki Görüntüle 1566606

Kendi bilgilerimi yazacağım bir site yapıyorum. Soldaki navbar denilen yeri yaptım ama resimdeki navbarın sağ tarafında bir dikdörtgen olmasını istiyorum. İçine yazıları yazacağım, resim vb. koyacağım. Nasıl yapabilirim?
Dikdörtgen ile navbar bitişik olacak.

Genişletmek için tıkla...

    <div class="container py-5">
        <div class="row">
            <div class="col-md-2 mx-auto py-5 bg-warning">
                <a href="#"><h3 class="text-center">Menü 1</h3></a>
                <a href="#"><h3 class="text-center">Menü 2</h3></a>
                <a href="#"><h3 class="text-center">Menü 3</h3></a>
                <a href="#"><h3 class="text-center">Menü 4</h3></a>
                <a href="#"><h3 class="text-center">Menü 5</h3></a>
            </div>
            <div class="col-md-10 mx-auto py-5 bg-primary text-white">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,
molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum
numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium
optio, eaque rerum! Provident similique accusantium nemo autem. Veritatis
obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam
nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit,
tenetur error, harum nesciunt ipsum debitis quas aliquid. Reprehenderit,
quia. Quo neque error repudiandae fuga? Ipsa laudantium molestias eos
sapiente officiis modi at sunt excepturi expedita sint? Sed quibusdam
recusandae alias error harum maxime adipisci amet laborum. Perspiciatis
minima nesciunt dolorem! Officiis iure rerum voluptates a cumque velit
quibusdam sed amet tempora. Sit laborum ab, eius fugit doloribus tenetur
fugiat, temporibus enim commodi iusto libero magni deleniti quod quam
consequuntur! Commodi minima excepturi repudiandae velit hic maxime
doloremque. Quaerat provident commodi consectetur veniam similique ad
earum omnis ipsum saepe, voluptas, hic voluptates pariatur est explicabo
fugiat, dolorum eligendi quam cupiditate excepturi mollitia maiores labore
suscipit quas? Nulla, placeat. Voluptatem quaerat non architecto ab laudantium
modi minima sunt esse temporibus sint culpa, recusandae aliquam numquam
totam ratione voluptas quod exercitationem fuga. Possimus quis earum veniam
quasi aliquam eligendi, placeat qui corporis!</p>
            </div>
        </div>
        
    </div>

dgknbzglu dedi:

Bootstrap kullanarak kolay bir şekilde yapabilirsin.

HTML:Panoya kopyala

 <div class="container py-5">
 <div class="row">
 <div class="col-md-2 mx-auto py-5 bg-warning">
 <a href="#"><h3 class="text-center">Menü 1</h3></a>
 <a href="#"><h3 class="text-center">Menü 2</h3></a>
 <a href="#"><h3 class="text-center">Menü 3</h3></a>
 <a href="#"><h3 class="text-center">Menü 4</h3></a>
 <a href="#"><h3 class="text-center">Menü 5</h3></a>
 </div>
 <div class="col-md-10 mx-auto py-5 bg-primary text-white">
 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,
molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum.
numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium.
optio, eaque rerum! Provident similique accusantium nemo autem. Veritatis.
obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam.
nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit,
tenetur error, harum nesciunt ipsum debitis quas aliquid. Reprehenderit,
quia. Quo neque error repudiandae fuga? Ipsa laudantium molestias eos.
sapiente officiis modi at sunt excepturi expedita sint? Sed quibusdam.
recusandae alias error harum maxime adipisci amet laborum. Perspiciatis.
minima nesciunt dolorem! Officiis iure rerum voluptates a cumque velit.
quibusdam sed amet tempora. Sit laborum ab, eius fugit doloribus tenetur.
fugiat, temporibus enim commodi iusto libero magni deleniti quod quam.
consequuntur! Commodi minima excepturi repudiandae velit hic maxime.
doloremque. Quaerat provident commodi consectetur veniam similique ad.
earum omnis ipsum saepe, voluptas, hic voluptates pariatur est explicabo.
fugiat, dolorum eligendi quam cupiditate excepturi mollitia maiores labore.
suscipit quas? Nulla, placeat. Voluptatem quaerat non architecto ab laudantium.
modi minima sunt esse temporibus sint culpa, recusandae aliquam numquam.
totam ratione voluptas quod exercitationem fuga. Possimus quis earum veniam.
quasi aliquam eligendi, placeat qui corporis!</p>
 </div>
 </div>

 </div>

Eki Görüntüle 1566977

Genişletmek için tıkla...