<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait"> <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css' rel='stylesheet' type='text/css'/> <div class="container mt-4" style="font-family: 'Strait', sans-serif;"> <div class="row"> <div class='oyak-soru-cevap mb-4 w-100'> <img class="w-100 resim-kutusu" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6xWgb3BZYkxOdAlPZ4RP66mcBG1t-udlfJv3IDCVLm7vI91kbOWSFg2NtoNLWij3ovkaF4xoBwFqPLJ5VLJyFMV_TrExj-IlvTFuQ4yGTypI15VoowmKwHglNX31XV08pXnKkuwkOU2ixC7jQZQcT5SZrgxQ5c1GkRPhRPoeISQ2IpqB7TqNB6Z7IzXzU/s1600/maluliyet.jpg" title="Maluliyet Yardımı" /> <div class='soru-kutusu'> <h2><span class="badge badge-danger mr-2 p-2 px-3"><i class="fa fa-question-circle" aria-hidden="true"></i> SORU</span></h2> <div class='soru-metni'> Mayıs ayı içerisinde yapılan Genel Kurul sonrası kesinleşmektedir. </div> </div> <div class='cevap-kutusu'> <h2><span class="badge badge-success mr-2 p-2 px-3"><i class="fa fa-check" aria-hidden="true"></i> CEVAP</span></h2> <div class='cevap-metni'> Mayıs ayı içerisinde yapılan Genel Kurul sonrası kesinleşmektedir. </div> </div> </div> </div> </div>

/* Genel Konteyner */ .oyak-soru-cevap { border: 1px solid #dee2e6; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.05); } .soru-metni { color: #fff; font-size: clamp(1rem, 2.5vw, 2.5rem); font-weight: 500; line-height: 1.5; margin-top:25px; } .cevap-metni { color: #333; font-size: 2.1rem; font-weight: 500; line-height: 1.5; margin-top:25px; } .resim-kutusu { border-left: 6px solid #460FB9; /* Sarı Vurgu Çizgisi */ } /* Cevap Bölümü */ .soru-kutusu { background-color: #1F2020; /* İstediğin Kirli Beyaz */ padding: 20px; position: relative; border-left: 6px solid #DC3545; /* Sarı Vurgu Çizgisi */ } /* Cevap Bölümü */ .cevap-kutusu { background-color: #FAF9F6; /* İstediğin Kirli Beyaz */ padding: 20px; position: relative; border-left: 6px solid #28A745; /* Sarı Vurgu Çizgisi */ } /* Mobil Uyumluluk */ @media (max-width: 576px) { .soru-metni { font-size: 1rem; } .cevap-metni { font-size: 1rem; } }