"ProColombia"
Bootstrap 4.0.0 Snippet by JhoanSantiago

Post to Facebook Tweet this

<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 ----------> <head> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-3.2.1.min.js"></script> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> </head>4 <body> <div class="contenedor"> <header> <h1>Logo Procolombia</h1> </header> <section class="encabezado"> <h4>Informe General de Exportaciones</h4> </section> <section class="filtroValores"> <div class="valores"> <div class="toggle"> <label> <input type="radio" name="toggle" cheked> <span class="label-text">Incluir Valores</span> </label> </div> <div class="toggle"> <label> <input type="radio" name="toggle"> <span class="label-text">Incluir Medidas</span> </label> </div> </div> </section> <section class="embed"> <div class="filtrosViz"> </div> <div class="fechasViz"> </div> <div class="verViz"> </div> </section> <section class="pestana"> </section> </div> </body>
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); *{ margin:0; padding:0; } /*Contenedor y Section */ .contenedor{ width:80%; max-width:1000px; margin:0 auto; overflow:hidden; } header{ width:85%; margin:0 auto; background:#656565; } h1{ padding:20px 7%; } .encabezado{ width:80%; height:70px; margin:0 auto; padding:20px; background:#787878; box-sizing:border-box; } .filtroValores{ width:80%; margin:0 auto; padding:20px; padding-bottom:40px; background:#E5E5E5; box-sizing:border-box; } /*Check-Box */ label{ position: relative; cursor: pointer; color: #666; font-size: 14px; } input[type="checkbox"], input[type="radio"]{ position: absolute; right: 9000px; } .toggle input[type="radio"] + .label-text:before{ content: "\f204"; font-family: "FontAwesome"; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing:antialiased; width: 1em; display: inline-block; margin-right: 10px; } .toggle input[type="radio"]:checked + .label-text:before{ content: "\f205"; color: #16a085; animation: effect 250ms ease-in; } .toggle{ float:left; margin-left:3%; } /*embed */ .filtrosViz{ width:80%; height:100px; background:blue; margin:0 auto; } .fechasViz{ width:80%; height:350px; background:red; margin:0 auto; } .verViz{ width:80%; height:450px; background:gray; margin:0 auto; } .pestana{ width:85%; height:50px; margin:0 auto; padding:20px; background:#FAFAFA; box-sizing:border-box; }

Related: See More

Paper Kit 2

Questions / Comments: