<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait"> <div class="container" style="font-family: 'Strait', sans-serif;"> <div class="row"> <h2>Vertical List news panel</h2> <dl class="dl-unsur"> <dd> <a href="https://muhittinart.blogspot.com/p/contact.html" target="_blank" class="pull-left"> <h2 class="pull-right">1</h2> <div class="pull-left" >Muhittin's page news.</div> </a> <p class="small pull-left" ><span class="glyphicon glyphicon-time"></span> 18 Ocak 2017</p> </dd> <dd> <a href="https://t.me/AnatomyForArtists" target="_blank" class="pull-left"> <h2 class="pull-right">2</h2> <div class="pull-left" >Anatomy For Artists</div> </a> <p class="small pull-left" ><span class="glyphicon glyphicon-time"></span> 18 Ocak 2017</p> </dd> <dd> <a href="https://tr.pinterest.com/artistmuhittinbudak/" target="_blank" class="pull-left"> <h2 class="pull-right">3</h2> <div class="pull-left" >Muhittin's pinterest page</div> </a> <p class="small pull-left" ><span class="glyphicon glyphicon-time"></span> 18 Ocak 2017</p> </dd> </dl> </div> </div>

/* -------------------------------------- 1,2,3 listeleme unsurları en çok okunanlar Created by Muhittin BUDAK -------------------------------------- */ .dl-unsur { position:relative; float:left; } .dl-unsur dd { width:100%; border-top:1px solid #959595; display:block; float:left; padding:8px 0; } .dl-unsur dd:first-child { border-top:0; } .dl-unsur dd > a { width:100%; margin-left:5px; } .dl-unsur dd > a > h2 { width:10%; margin-top:0; padding-right:10px; color:#C71817; text-align:right; font-weight:bold; } .dl-unsur dd > a > div { font-size:17px; width:89%; line-height:1.2em; } .dl-unsur dd> p { width:89%;margin:0 0 0 5px; } /* -------------------------------------- Media Queries -------------------------------------- */ /* Portrait & landscape phone */ @media (max-width: 480px) { /* en çok okunan listeleme */ .dl-unsur dd > a > h2 { font-size:250%; } .dl-unsur dd > a > div { font-family:sans-serif, serif; font-size:15px; } }