<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 ----------> <div class="container"> <div class="row"> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6xWgb3BZYkxOdAlPZ4RP66mcBG1t-udlfJv3IDCVLm7vI91kbOWSFg2NtoNLWij3ovkaF4xoBwFqPLJ5VLJyFMV_TrExj-IlvTFuQ4yGTypI15VoowmKwHglNX31XV08pXnKkuwkOU2ixC7jQZQcT5SZrgxQ5c1GkRPhRPoeISQ2IpqB7TqNB6Z7IzXzU/s1600/maluliyet.jpg" title="Maluliyet Yardımı" /> <h1>Fatih Terim "çok yakında" diyerek duyurdu: "Her şeye hazırlıklı olun"</h1> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj7Ez1j3e5nYSzL6E4xTvusw9PSlAB39NFXHrMySFovrJmuDiBJ9A7HzPJPCH2oXY2DH-4D3dWXfdRCvMHlX3pcB-6XDpjQeYm6PVXAuW9_J_hTTegKJ82tS1RfxdL3gUiIcuPjQigwJBYZfbDW3TKy0zwjPdFP_0-VL6n-64PJHigvjAyvsyIIl-gZ5wL/s1600/imageholder.jpg" /> <div class="notice l-turuncu mt-3"> <h5>Big Notice</h5> </div> <p>This part is inside a .container class.</p> <p>Yinelenen bir sayfa içeriğinin okuyucunun <mark class="fosSari">MArk dikkatini dağıttığı</mark> bilinen bir gerçektir. <span class="fosSari">B Lorem Ipsum kullanmanın amacı,</span> sürekli ‘buraya metin gelecek, buraya metin gelecek’ yazmaya kıyasla daha dengeli bir harf dağılımı sağlayarak okunurluğu artırmasıdır. Şu anda birçok masaüstü yayıncılık paketi ve web sayfa düzenleyicisi, varsayılan mıgır metinler olarak Lorem Ipsum kullanmaktadır. Ayrıca arama motorlarında ‘lorem ipsum’ anahtar sözcükleri ile arama yapıldığında henüz tasarım aşamasında olan çok sayıda site listelenir. Yıllar içinde, bazen kazara, bazen bilinçli olarak (örneğin mizah katılarak), çeşitli sürümleri geliştirilmiştir.</p> <h4>OYAK'IN ÜÇÜNCÜ TOPLANTISI 25 MAYIS 2026 TARİHİNDE YAPILACAK</h4> <p>Resize the browser window to see that its width (max-width) will change at different breakpoints.</p> <p>Lorem Ipsum kullanmanın amacı, sürekli ‘buraya metin gelecek, buraya metin gelecek’ yazmaya kıyasla daha dengeli bir harf dağılımı sağlayarak okunurluğu artırmasıdır.</p> <p>You can use the mark tag to <mark class="fosSari">highlight</mark> text.</p> <p><del>This line of text is meant to be treated as deleted text.</del></p> <p><s>This line of text <mark class="fosMavi">is meant to be treated as no</mark> longer accurate.</s></p> <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p> <p><u>This line of text will render as underlined</u></p> <p><small>This <mark class="fosYesil">line of text is meant to be treated as </mark>fine print.</small></p> <p><strong>This line rendered as bold text.</strong></p> <p><em>This line rendered as italicized text.</em></p> <p><abbr title="attribute">attr</abbr></p> <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p> <blockquote class="blockquote"> <p class="mb-0">A well-known quote, contained in a blockquote element.</p> </blockquote> <blockquote class="blockquote"> <p class="mb-0">A well-known quote, contained in a blockquote element.</p> <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> <blockquote class="blockquote text-center"> <p class="mb-0">A well-known quote, contained in a blockquote element.</p> <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> <blockquote class="blockquote text-right"> <p class="mb-0">A well-known quote, contained in a blockquote element.</p> <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> <ul class="list-unstyled"> <li>This is a list.</li> <li>It appears completely unstyled.</li> <li>Structurally, it's still a list.</li> <li>However, this style only applies to immediate child elements.</li> <li>Nested lists: <ul> <li>are unaffected by this style</li> <li>will still show a bullet</li> <li>and have appropriate left margin</li> </ul> </li> <li>This may still come in handy in some situations.</li> </ul> <ul class="list-inline"> <li class="list-inline-item">This is a list item.</li> <li class="list-inline-item">And another one.</li> <li class="list-inline-item">But they're displayed inline.</li> </ul> <dl class="row"> <dt class="col-sm-3">Description lists</dt> <dd class="col-sm-9">A description list is perfect for defining terms.</dd> <dt class="col-sm-3">Term</dt> <dd class="col-sm-9"> <p>Definition for the term.</p> <p>And some more placeholder definition text.</p> </dd> <dt class="col-sm-3">Another term</dt> <dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd> <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt> <dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd> <dt class="col-sm-3">Nesting</dt> <dd class="col-sm-9"> <dl class="row"> <dt class="col-sm-4">Nested definition list</dt> <dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd> </dl> </dd> </dl> <!-- liste --> <div class="card border-0 shadow-sm"> <div class="card-header text-white font-weight-bold d-flex align-items-center" style="background-color: #007BFF;"> <i class="fa fa-list mr-2"></i> Sorular Cevaplar </div> <ul class="list-group list-group-flush ortali-liste"> <li class="list-group-item"> <h5>Emekli maaşı sistemi (OYAK EMS) nedir?</h5> <a href="https://oyakbilgi.blogspot.com/p/emekli-maasi-sistemi-oyak-ems-nedir.html" class="btn btn-primary btn-cevap">Cevabı Gör</a> </li> <li class="list-group-item"> <h5>İkinci Başlık</h5> <a href="#" class="btn btn-primary btn-cevap">Cevabı Gör</a> </li> <li class="list-group-item"> <h5>Üçüncü Başlık</h5> <a href="#" class="btn btn-primary btn-cevap">Cevabı Gör</a> </li> </ul> </div> <br><br> <!-- Tıklanabilir --> <div class="card border-0 shadow-sm"> <div class="card-header text-white font-weight-bold" style="background-color: #007BFF; border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;"> <i class="fa fa-list-ul mr-2"></i> Güncel Başlıklar </div> <ol class="list-group list-group-flush ozel-liste font-weight-bold"> <li class="list-group-item d-flex align-items-center"> Birinci Başlık <span class="badge badge-primary badge-pill ml-auto">Yeni</span> </li> <li class="list-group-item d-flex align-items-center"> İkinci Başlık <span class="badge badge-secondary badge-pill ml-auto">Okundu</span> </li> <li class="list-group-item d-flex align-items-center"> Üçüncü Başlık <span class="badge badge-info badge-pill ml-auto">Güncel</span> </li> </ol> </div> <br><br> <div class="alert alert-success"> <strong>Success!</strong> Indicates a successful or positive action. </div> <button type="button" class="btn btn-primary">Cevabı Gör</button><br><br><br> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-dark">Dark</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-link">Link</button> </div> </div>