<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="//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"> <div class="container " style="font-family: 'Strait', sans-serif;"><!-- main container start --> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-8 col-md-8 col-lg-g"> <h1>Simple Blog Template bootstrap 3</h1> <p>Simple, plain, efficient</p> <!-- artigo em destaque --> <div class="featured-article"> <a href="#" > <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi17AQbDsnhpPf0nxqd1lKg3xzFP59Ase7JkY1CI2LOSVPiigyeMsPIjGUbD2el3qmnvMSkyvqjzneVtS4bhbukcCKQfs4V8Yliz9H_1dRSk5OHqkT8QkGBYp3C7FRFg7nCT-U3NnZ_syFgHSkcbiBUzbi3j-NY4j0GVhUFdIikWBUuty92QAkoZrc8pV16/s518/eagle.jpg" width="100%" alt="" title="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi17AQbDsnhpPf0nxqd1lKg3xzFP59Ase7JkY1CI2LOSVPiigyeMsPIjGUbD2el3qmnvMSkyvqjzneVtS4bhbukcCKQfs4V8Yliz9H_1dRSk5OHqkT8QkGBYp3C7FRFg7nCT-U3NnZ_syFgHSkcbiBUzbi3j-NY4j0GVhUFdIikWBUuty92QAkoZrc8pV16/s400/eagle.jpg" class="thumb"> </a> <div class="block-title"> <h2>Bald Eagle</h2> <p><small>Lorem ipsum bald eagle</small></p> </div> </div> <p>The bald eagle (Haliaeetus leucocephalus) is a bird of prey found in North America. A sea eagle, it has two known subspecies and forms a species pair with the white-tailed eagle (Haliaeetus albicilla), which occupies the same niche as the bald eagle in the Palearctic. Its range includes most of Canada and Alaska, all of the contiguous United States, and northern Mexico. It is found near large bodies of open water with an abundant food supply and old-growth trees for nesting.<br> The bald eagle is an opportunistic feeder which subsists mainly on fish, which it swoops down upon and snatches from the water with its talons. It builds the largest nest of any North American bird and the largest tree nests ever recorded for any animal species, up to 4 m (13 ft) deep, 2.5 m (8.2 ft) wide, and 1 metric ton (1.1 short tons) in weight. Sexual maturity is attained at the age of four to five years.<br> Bald eagles are not bald; the name derives from an older meaning of the word, "white headed". The adult is mainly brown with a white head and tail. The sexes are identical in plumage, but females are about 25 percent larger than males. The yellow beak is large and hooked. The plumage of the immature is brown.</p> <a class="btn icon-btn btn-primary" href="#"><span class="glyphicon btn-glyphicon glyphicon-thumbs-up img-circle text-primary"></span> 252</a>    <a class="btn icon-btn btn-danger" href="#"><span class="glyphicon btn-glyphicon glyphicon-thumbs-down img-circle text-danger"></span> 3</a> <div class="pull-right"><span class="glyphicon glyphicon-time"></span> 25 Ocak 2017 18:00</div> </div> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-g"> <ul class="media-list main-list"> <li class="media"> <a class="pull-left" href="#"> <img class="media-object" width="150px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfJ5hSkM1pGC5I_gTNx-Bmpyb0QrwWm-TwiARKclttVPrZrIKfr0bTHyP0afaIHL7zks-AbODA7zAf9LYhKdKVM6s2YXB8jkFl-fWBTmse2y6O68grQjw6tOOMrtdsG1qkVOwRT05R5XVZIoRoJFsn_wUqkrABJwEGZN0Q0OZlLZxis2zkhOH2u1RI_dNd/s518/colobus.jpg" title="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfJ5hSkM1pGC5I_gTNx-Bmpyb0QrwWm-TwiARKclttVPrZrIKfr0bTHyP0afaIHL7zks-AbODA7zAf9LYhKdKVM6s2YXB8jkFl-fWBTmse2y6O68grQjw6tOOMrtdsG1qkVOwRT05R5XVZIoRoJFsn_wUqkrABJwEGZN0Q0OZlLZxis2zkhOH2u1RI_dNd/s400/colobus.jpg" alt=""> </a> <div class="media-body"> <h4 class="media-heading">Colobus</h4> <div class="by-author"> <p id="listitem" class="by-author">Loremi ipsum colobus. kaema kaema leama aemae ekaema meak ekame a ekime i kema em emaem ema ema eaekaem aema kmae meka mea kmea kem lorem tama me.aeak</p> <div> <span style="padding-top:4px" class="clblue glyphicon glyphicon-thumbs-up"></span> <span class="clblue">125</span>    <span class="clred glyphicon glyphicon-thumbs-down"></span> <span class="clred">2</span> </div> <span style="padding-top:4px" class="glyphicon glyphicon-time"></span> 25 Ocak 2024 18:00 </div> </div><!-- media-body --> </li> <li class="media"> <a class="pull-left" href="#"> <img class="media-object" width="150px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht_TdgzR3iOmGCzVCGCrIFmdxCJlPbikcneeYhQbtuNdZsvOXWPjy6M7WiJXFalTWLzb_HlkVGFKd6d-lRECI5awOekrK5gPCrVE-ZPRXGZ6mF1Pc0DryeajLprb3MLcridAKqfX5kU10nb8NFTyHcnpX5txGLi64KkR3G9LhbW7LWBRJviAzecnln8G1Z/s518/elephant.jpg" title="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht_TdgzR3iOmGCzVCGCrIFmdxCJlPbikcneeYhQbtuNdZsvOXWPjy6M7WiJXFalTWLzb_HlkVGFKd6d-lRECI5awOekrK5gPCrVE-ZPRXGZ6mF1Pc0DryeajLprb3MLcridAKqfX5kU10nb8NFTyHcnpX5txGLi64KkR3G9LhbW7LWBRJviAzecnln8G1Z/s400/elephant.jpg" alt="..."> </a> <div class="media-body"> <h4 class="media-heading">Elephant</h4> <p class="by-author">Lorem ipsum Elephant</p> </div> </li> <li class="media"> <a class="pull-left" href="#"> <img class="media-object" width="150px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSwTZ_5LjFqnXDQx2Vy-_WhqThY3JcO3VMvhqpcpYiyLbFDkX6yCpT_9bXcDmIcJ7vAZQ5moGKwswFrxt5JZuibuORhS8b3w1Bdhgg7W4kxIPYvXjM0rcAnhSjjKhsSWhs8NpH5naNZJ0kdMjWCYKziIpdy_VbkaEyPJm-woV-1UQZm65jQha_vHYljO60/s518/ivanovic.jpg" title="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSwTZ_5LjFqnXDQx2Vy-_WhqThY3JcO3VMvhqpcpYiyLbFDkX6yCpT_9bXcDmIcJ7vAZQ5moGKwswFrxt5JZuibuORhS8b3w1Bdhgg7W4kxIPYvXjM0rcAnhSjjKhsSWhs8NpH5naNZJ0kdMjWCYKziIpdy_VbkaEyPJm-woV-1UQZm65jQha_vHYljO60/s400/ivanovic.jpg" alt="..."> </a> <div class="media-body"> <h4 class="media-heading">Anna ivanovic</h4> <p class="by-author">Lorem Anna ivanovic</p> </div> </li> <li class="media"> <a class="pull-left" href="#"> <img class="media-object" width="150px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxRH6IeJ5NfIlH59mXW2AN4iXGNTQixObdPbxPt49lG9veiRnnbbLqXR3uTrxTUy_atSCDPlDsZijXWPD7cLkMmaXU-Gm74t6mbaZSS5VPfs5vnxi6MwZgI8kstYveBmjZkWLFa5dkmEDLUyO-2MrfemyxiUCLOAJ92-vjJFOIphgonxLYgRBaB5KxDnK6/s518/lion.jpg" title="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxRH6IeJ5NfIlH59mXW2AN4iXGNTQixObdPbxPt49lG9veiRnnbbLqXR3uTrxTUy_atSCDPlDsZijXWPD7cLkMmaXU-Gm74t6mbaZSS5VPfs5vnxi6MwZgI8kstYveBmjZkWLFa5dkmEDLUyO-2MrfemyxiUCLOAJ92-vjJFOIphgonxLYgRBaB5KxDnK6/s400/lion.jpg" alt="..."> </a> <div class="media-body"> <h4 class="media-heading">Lion</h4> <p class="by-author">Lorem impusm lion</p> </div> </li> <li class="media"> <a class="pull-left" href="#"> <img class="media-object" width="150px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAp_5UOnwG08ciFaMVPVebxAEmLQvwwqkHF-Ks7EYqe5yeIfiLM5tjL2by_TPztgRxb_u09PSxUeJfwp2ESTK7h1LeWD9FJt_3_fwKIpZloU341Vjp6FiI49-82eKeizkeGnz4e6B-ZgYnS7SxKXF60nqFeh7o71DNYrVpRXHFM3pfvoknxyn7zgvYRhLC/s518/lizard.jpg" title="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAp_5UOnwG08ciFaMVPVebxAEmLQvwwqkHF-Ks7EYqe5yeIfiLM5tjL2by_TPztgRxb_u09PSxUeJfwp2ESTK7h1LeWD9FJt_3_fwKIpZloU341Vjp6FiI49-82eKeizkeGnz4e6B-ZgYnS7SxKXF60nqFeh7o71DNYrVpRXHFM3pfvoknxyn7zgvYRhLC/s400/lizard.jpg" alt="..."> </a> <div class="media-body"> <h4 class="media-heading">Lizard</h4> <p class="by-author">Lorem impusm lizard</p> </div> </li> <li class="media"> <a class="pull-left" href="#"> <img class="media-object" width="150px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfcRlWMXJAYstGEw6LQAJ6WdK2xdXs5veW4tLxETzua0tqpxODsqZXExvIXl3gVQMnAb2sVL84_WBM9mGv_u6WYyUtt4B7N82iiy6KceAwel9y4mYxq2Dw9Fi0XnatN16HEPVXOaTPn7Z2ISVQNdFmiaeM3fZNK8QZKXEEn9XOmSCmv1SB3OHDZFTX6vmK/s518/squid.jpg" title="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfcRlWMXJAYstGEw6LQAJ6WdK2xdXs5veW4tLxETzua0tqpxODsqZXExvIXl3gVQMnAb2sVL84_WBM9mGv_u6WYyUtt4B7N82iiy6KceAwel9y4mYxq2Dw9Fi0XnatN16HEPVXOaTPn7Z2ISVQNdFmiaeM3fZNK8QZKXEEn9XOmSCmv1SB3OHDZFTX6vmK/s400/squid.jpg" alt="..."> </a> <div class="media-body"> <h4 class="media-heading">Squid</h4> <p class="by-author">Lorem impusm squid</p> </div> </li> </ul> </div> </div> </div> <hr style="border:1px solid #000" /> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> <address> <strong>Contact </strong><br> <a href="https://muhittinart.blogspot.com/p/contact.html">Muhittin BUDAK © 2024</a> </address> </div> </div> </div> </div><!-- main container finish -->

/* image thumbnail */ .thumb { display: block; width: 100%; margin: 0; } /* Main Article [Module] ------------------------------------- * Featured Article Thumbnail * have a image and a text title. */ .featured-article { width: 100%; height: 100%; position: relative; margin-bottom: 1em; } .featured-article .block-title { /* Position & Box Model */ position: absolute; bottom: 0; left: 0; z-index: 1; /* background */ background: rgba(0,0,0,0.7); /* Width/Height */ padding: .5em; width: 100%; /* Text color. */ color: #fff; } .featured-article .block-title h2 { margin: 0; } /* Featured Articles List [BS3] -------------------------------------------- * show the last 3 articles post */ .main-list { padding-left: .5em; } .main-list .media { margin-top: 20px; padding-bottom: 1.1em; border-bottom: 1px solid #e8e8e8; } .main-list .media:first-child { border-top: 1px solid #000; padding-top:15px; } .main-list .media:last-child { border: none; } /* like dislike css*/ .btn-glyphicon { padding:8px; background:#ffffff; margin-right:4px; } .icon-btn { padding: 1px 15px 3px 2px; border-radius:50px; } /* Style to article Author */ .by-author { line-height: 1.0; font-size: 12px; color: #000; padding:0; margin:0; } .clred { color:red; } .clblue { color:blue; } /* list item Restriction*/ #listitem { overflow: hidden; width:100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }