Bootstrap Snippet Typography Blog using HTML CSS

"Typography Blog"
Bootstrap 4.1.1 Snippet by harunpehlivan

4.1.1

1.2K 1 Fav

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>  <!DOCTYPE html> <html> <head> <title>Typography Blog</title> <link rel="stylesheet" type="text/css" href="styles/reset.css"> <link rel="stylesheet" type="text/css" href="styles/style.css"> </head> <body>  <nav class="header"> <ul> <li><a class="home" href="#top">HOME</a></li> <li><a class="pagelink" href="#serif"> HP IT GROUP (TEBIM TEBITAGEM) TTGRT </a></li> <li><a class="pagelink" href="#sans">LİVE FM TV</a></li> <li><a class="pagelink" href="#mono">7/24 CONTACT</a></li> </ul> </nav>  <div class="banner"> <h1> HARUN PEHLİVAN </h1> <p> The language I started programming is PASCAL </p> <p> IT (CODER,DESIGNER,DEVELOPER,ADMINISTRATOR) FOUNDER CEO BLOGGER INITIATIVE RESEARCH AND DEVELOPMENT</p> </div>  <div id="serif">  <div class="editorial"> <h2> HP IT GROUP (TEBIM TEBITAGEM) TTGRT </h2> <p><tr class="w3-white"> <td><i class="fa fa-calendar fa-fw w3-margin-right"></i>2008</td> <td>TERCUMAN INFORMATICS CENTER</td> <td> <a target="_blank" href="http://tebimtebitagem.ticiz.com">TEBİM </a></td> </tr> <tr> <td><i class="fa fa-calendar fa-fw w3-margin-right"></i>2012</td> <td>TERCUMAN EDUCATION, SCIENCE,TECHNICAL RESEARCH AND DEVELOPMENT CENTER </td> <td> <a target="_blank" href="https://harunpehlivantebimtebitagem.business.site">TEBİTAGEM </a></td> </tr> <tr class="w3-white"> <td><i class="fa fa-calendar fa-fw w3-margin-right"></i>2013</td> <td>TEBİMTEBİTAGEM GAZETESİ RADYO TELEVİZYONU</td> <td> <a target="_blank" href="http://harunpehlivan.fm.tc">TTGRT</a></td> </tr> <tr> <td><i class="fa fa-calendar fa-fw w3-margin-right"></i>2018</td> <td>HARUN PEHLİVAN INFORMATION TECHNOLOGY GROUP</td> <td> <a target="_blank" href="https://harunpehlivantebimtebitagem.site123.me">HP IT GROUP</a></td> </tr></p> </div>  <div class="font-card garamond"> <div class="garamond"> <span class="sample"> <h2> 24/13</h2> <span class="bold text">TEBİM</span> </span> <span class="sample"> <h2> 28/9</h2> <span class="regular text"> TEBİTAGEM</span> </span> <span class="sample"> <h2> 29/8</h2> <span class="italic text">TTGRT</span> </span> </div> </div> </div>  <div id="sans">  <div class="editorial"> <h2>LİVE FM TV</h2> <p> <a onclick="window.open('http://fm.tc/live-broadcast-fm-1372.html','POPUP','width=503,height=260,scrollbars=0,resizable=0');return false;" href="#"><img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1560459863/mdialogo_dckk4m.ico" title="7/24 ONLİNE KESİNTİSİZ MÜZİK YAYINI" border="0"></a> <a onclick="window.open('http://fm.tc/live-broadcast-tv-1845.html','POPUP','width=503,height=260,scrollbars=0,resizable=0');return false;" href="#"><img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1560460160/ttgrtlogo_eqthwz.ico" title="LİVE BROADCAST TV" border="0"></a> </p> </div>  <div class="font-card"> <h2> <a href="http://harunpehlivan.fm.tc/">RADIO AND TV</a> </h2> <p class="creator">by TEBİMTEBİTAGEM GAZETESİ RADYO TELEVİZYONU</p> <div class="helvetica"> <span class="sample"> <h2> 34/3</h2> <span class="bold text"> HP IT GROUP </span> </span> <span class="sample"> <h2>22/07/1984</h2> <span class="regular text">36</span> </span> </div> </div> </div>  <div id="mono">  <div class="editorial"> <h2>7/24 CONTACT</h2> <p><iframe width="450" height="300" src="https://haritane.com/v.php?seo=tercuman-bilisim-merkezi-tebitagem&id=1664827" frameborder="0"></iframe><p style="font-size:11px;margin-top:5px;"><a href="https://haritane.com/tercuman-bilisim-merkezi-tebitagem-detay1664827/" target="_blank" title="HP IT GROUP (TEBIM TEBITAGEM) TTGRT haritası adresi">HP IT GROUP (TEBIM TEBITAGEM) TTGRT</a></p></p> </div>  <div class="font-card"> <div class="space"> <span class="sample"> <h2>BOY</h2> <span class="bold text">172cm</span> </span> <span class="sample"> <h2>KLO</h2> <span class="regular text">148kg</span> </span> </div> </div> </div> </body> </html>

/* Universal Styles */ html { font-size: 16px; font-family: "Arial", sans-serif; } body { background-color: #F2F2F2; } h1 { color: white; font-size: 28px; font-family: Georgia; } h2 { font-size: 24px; font-weight: 700; line-height: 2.5; font-family: Georgia; } a { text-decoration: none; } p { margin: 16px 0; font-family: Helvetica; } strong { font-weight: bold; } #serif, /* Offset linked sections to account for header. */ #sans, #mono { padding-top: 77px; margin-top: -77px; } /* Header */ .header { font-family: "Arial", sans-serif; font-size: 14px; line-height: 1.25; background-color: #fff; position: fixed; top: 0; width: 100%; } .header li { display: inline-block; } .header a { display: block; color: #4A4A4A; padding: 30px 20px; } a.home { color: #4D00FF; } /* Banner Section */ .banner { background-color: #4D00FF; padding: 100px 0; margin-top: 77px; text-align: center; } .banner p { border-top: 1px solid #fff; border-bottom: 1px solid #fff; padding: 10px; color: #ffffff; } /* Editorial Sections */ .editorial { padding: 20px; margin: 20px 0; text-align: center; color: #4C4C4C; } /* Font Card Sections */ .font-card { background-color: #ffffff; margin: 50px 0; padding: 20px 50px; } .font-card .creator { font-size: 20px; line-height: 1.25; } .sample { display: inline-block; padding: 0 20px; margin: 20px; } .sample h2 { line-height: 1.5; } .sample .text { color: #4D00FF; font-size: 100px; } /* Add styles for the Garamond font here */ /* Add styles for the Helvetica font here */ /* Add styles for the Space Mono font here */ .bold { font-weight: 900; } .regular { font-weight: normal; } .italic { font-weight: normal; font-style: italic; } /* Media Queries */ @media only screen and (max-width: 535px) { .header { font-size: 14px; } .header a { padding: 30px 20px; } a.home { display: none; } }

Related: See More

Paper Kit

Bootstrap 4 Blog Carousel

Bootstrap 4 Blog Carousel

Blog post layout with sidebar

Blog footer

Questions / Comments:

Posting GuidelinesFormatting