"exercise 0k3h"
Bootstrap 3.1.0 Snippet by okebro

Post to Facebook Tweet this

<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 ----------> <html lang="en"> <head> <meta charset="utf-8"> <title>Feature jasa desain rumah | Rumart</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="6 point feature kelebihan menggunakan jasa desain rumah Rumart" /> <style type="text/css"> hc21 { font-family: 'Roboto Condensed', sans-serif; font-size: 2.25em; /* 36 / 16 */ line-height: 1.333333333333333em; /* 48 / 36 */ margin-bottom:0.6667em; /* 24 / 36 */ font-weight: 300; color: #2a2a2a; display: block; text-align: center; letter-spacing: -.5px; -webkit-margin-before: 0.5em; -webkit-margin-after: 0.25em; -webkit-margin-start: auto; -webkit-margin-end: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } py1 { font-family: 'Roboto', sans-serif; font-size: 1.125em; /* 18 / 16 */ line-height: 1.333333333333333em; /* 24 / 18 */ margin-bottom: 1.333333333333333em; /* 24 / 18 */ font-weight: 300; color: #666; display: block; text-align: center; -webkit-margin-before: 1em; -webkit-margin-after: 0.5em; -webkit-margin-start: auto; -webkit-margin-end: auto; } hr.style2 { border-top: 1px solid #db4437; text-align: center; width: 150px; display: block; -webkit-margin-start: auto; -webkit-margin-end: auto; } hr.style2:after { font-family: 'Material Icons'; content: '\e0bc'; float: center; position: relative; top: -5px; left: -2px; background: #fff; color: #db4437; font-size: 16px; } .box > .icon { text-align: center; position: relative; } .box > .icon > .image { position: relative; z-index: 2; margin: auto; width: 90px; height: 90px; border: 8px solid white; line-height: 90px; border-radius: 50%; background: #333333; vertical-align: middle; } .box > .icon:hover > .image { background: #e03e3e; } .box > .icon > .image > i { font-size: 36px !important; color: #fff !important; } .box > .icon:hover > .image > i { color: white !important; } .box > .icon > .info { margin-top: -24px; background: rgba(0, 0, 0, 0.04); border: 1px solid #e0e0e0; padding: 15px 0 10px 0; } .box > .icon:hover > .info { background: rgba(0, 0, 0, 0.04); border-color: #2a2a2a; color: white; } .box > .icon > .info > h3.title { font-family: 'Roboto', sans-serif; font-size: 1.5em; color: #2a2a2a; margin:0.5em; font-weight: 500; text-transform: uppercase; } .box > .icon > .info > pm { font-family: 'Roboto', sans-serif; font-weight:300; font-size: 1em; color: #666; line-height: 1.5em; margin: 0; text-align: center; display: block;} .box > .icon:hover > .info > h3.title, .box > .icon:hover > .info > pm, .box > .icon:hover > .info > .more > a { color: #222; } .box > .icon > .info > .more a { font-family: 'Roboto', sans-serif; font-size: 12px; color: #222; line-height: 12px; text-transform: uppercase; text-decoration: none; } .box > .icon:hover > .info > .more > a { color: #fff; padding: 6px 8px; background-color: #c34253; } .box .space { height: 30px; } </style> </head> <body> <hc21> Mengapa Harus Desain Ke Rumart? </hc21> <hr class="style2"> <py1>Kelebihan yang bisa Anda dapatkan melalui service kami.</py1> <div class="container"> <div class="row"> <!-- Boxes de Acoes --> <div class="col-xs-12 col-sm-6 col-lg-4"> <div class="box"> <div class="icon"> <div class="image"><i class="fa fa-hourglass-1"></i></div> <div class="info"> <h3 class="title">Cepat</h3> <pm> Proses mendesain & kebutuhan anggaran biaya dapat diselesaikan hanya dalam waktu 21 hari. * </pm> <!--<div class="more"> <a href="#" title="Title Link"> Baca Selengkapnya .. <i class="fa fa-angle-double-right"></i> </a> </div>--> </div> </div> <div class="space"></div> </div> </div> <div class="col-xs-12 col-sm-6 col-lg-4"> <div class="box"> <div class="icon"> <div class="image"><i class="fa fa-money"></i></div> <div class="info"> <h3 class="title">Murah</h3> <pm> Harga yang kami tawarkan sangat terjangkau & bervariasi disesuaikan dengan budget Anda. </pm> <!--<div class="more"> <a href="#" title="Title Link"> Baca Selengkapnya .. <i class="fa fa-angle-double-right"></i> </a> </div>--> </div> </div> <div class="space"></div> </div> </div> <div class="col-xs-12 col-sm-6 col-lg-4"> <div class="box"> <div class="icon"> <div class="image"><i class="fa fa-star-o"></i></div> <div class="info"> <h3 class="title">Berkualitas</h3> <pm> Hasil desain berkualitas & terjamin dari tinjauan arsitektural maupun struktural. </pm> <!--<div class="more"> <a href="#" title="Title Link"> Baca Selengkapnya .. <i class="fa fa-angle-double-right"></i> </a> </div>--> </div> </div> <div class="space"></div> </div> </div> <div class="col-xs-12 col-sm-6 col-lg-4"> <div class="box"> <div class="icon"> <div class="image"><i class="fa fa-chain"></i></div> <div class="info"> <h3 class="title">After Sales</h3> <pm> Memberikan layanan konsultasi pasca desain tanpa batas* hingga didapatkan hasil sesuai dengan ekspektasi Anda. </pm> <!--<div class="more"> <a href="#" title="Title Link"> Baca Selengkapnya .. <i class="fa fa-angle-double-right"></i> </a> </div>--> </div> </div> <div class="space"></div> </div> </div> <div class="col-xs-12 col-sm-6 col-lg-4"> <div class="box"> <div class="icon"> <div class="image"><i class="fa fa-check-square-o"></i></div> <div class="info"> <h3 class="title">Mudah</h3> <pm> Memberikan kemudahan pemesanan desain berbasis online hanya dengan mengisi form yang sudah disesuaikan dengan kebutuhan anda. </pm> <!--<div class="more"> <a href="#" title="Title Link"> Baca Selengkapnya .. <i class="fa fa-angle-double-right"></i> </a> </div>--> </div> </div> <div class="space"></div> </div> </div> <div class="col-xs-12 col-sm-6 col-lg-4"> <div class="box"> <div class="icon"> <div class="image"><i class="fa fa-gift"></i></div> <div class="info"> <h3 class="title">One-Stop Service</h3> <pm> Memberikan one-stop service desain mulai dari desain bangunan baru baik arsitektur maupun interior, redesain dan remodeling. </pm> <!--<div class="more"> <a href="#" title="Title Link"> Baca Selengkapnya .. <i class="fa fa-angle-double-right"></i> </a> </div>--> </div> </div> <div class="space"></div> </div> </div> <!-- /Boxes de Acoes --> </div> </div> <script type="text/javascript"> var loadCSSFiles = function() { var links = ["https://fonts.googleapis.com/css?family=Roboto:300,500", "https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400", "https://fonts.googleapis.com/icon?family=Material+Icons", "https://opensource.keycdn.com/fontawesome/4.6.3/font-awesome.min.css"], headElement = document.getElementsByTagName("head")[0], linkElement, i; for (i = 0; i < links.length; i++) { linkElement = document.createElement("link"); linkElement.rel = "stylesheet"; linkElement.href = links[i]; headElement.appendChild(linkElement); } }; var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame; if (raf) { raf(loadCSSFiles); } else { window.addEventListener("load", loadCSSFiles); } </script> </body> </html>

Related: See More

Vuetify Material Dashboard

Questions / Comments: