destaprog - PF-#A002
Destaprog Blog
Inicio
Contacto
Plantillas CSS
destaprog
Inicio
Plantillas
PF-#A002
PF-#A001
Contacto
PF-#A002
PF-#A002
(serial)
Ir a plantillas
|
Ir a inicio
Descargar
|
Vista previa
Código CSS
body{ background-color: #f1f1f1 !important; } .jumbotron{ background-color: #333 !important; color: #eee !important; } .heading-sidebar, .breadcrumb{ background: #333 !important; color: #eee !important; } footer#footer, #webme_footer_textlink_dont_hide{ background: #F8F8F8; color: #333 !important; } .page-header{ margin-top: 0 !important; } .list-group-item{ color: #333; } .menu li:hover{ background: #666; } .menu li a{ color: #FFF !important; } .menu li a:hover{ color: #eee !important; } a{ color: #0C255A; } a:hover{ text-decoration: underline; color: #0C255A; } table[height="102"]{ left: 30px; position: absolute; z-index: 2; top: 54px; } footer#footer{ padding-top: 10px; border-top: 5px solid #333; } .ads{ height: 106px } #header_container, li.nav_element a, lli.nav_element, #nav_container, h2#title span, #post_header, #pre_header, h1#title {display: none;} #webme_footer_textlink_dont_hide{ width: 100%; padding: 5px; text-align: center; display: block; } #webme_sky_ad{ width: 15%; } h1, h2, h3, h4, h5, h6{ margin: 0px !important; } .main{ width: 100%; min-width: 1000px; } .breadcrumb, .jumbotron, .navbar, .panel{ border-radius: 0px !important; } .navbar{ margin-bottom: 0px; } footer#footer, #webme_footer_textlink_dont_hide{ text-align: center; } #webme_footer_textlink_dont_hide{ padding-bottom: 10px; } .page{ margin: 0 -15px; } .navbar-right{ margin-right: 0 !important; margin-left: 0 !important; } .nav>li{ display: inline-block !important; } .sideright{ /*padding-right: 0px !important;*/ padding-left: 30px !important; } .breadcrumb{ margin-bottom: 0px !important; }
Por encima de la página
<html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <script src="http://destaprog.com.ve/pwg/js/jquery.js"></script> </head> <body> <div class="main"> <div class="container-fluid"> <div class="row"> <div class="col-xs-10"> <nav class="navbar navbar-inverse " style="margin-bottom: 0 !important;"> <div class="container-fluid"> <ul class="nav navbar-nav menu" style="float:left !important"> <li><a href="#" class="active">Cras justo</a></li> <li><a href="#">Dapibus</a></li> <li><a href="#">Morbi leo</a></li> <li><a href="#">Porta ac</a></li> </ul> <ul class="nav navbar-nav navbar-right" style="float:right !important"> <li><button type="button" class="btn btn-primary navbar-btn">Vestibulum at eros</button></li> </ul> </div> </nav> <div class="jumbotron"> <div class="ads"></div> <div class="row"> <div class="col-xs-7"> <img src="http://lorempixel.com/800/500/" alt="" class="img-responsive"> </div> <div class="col-xs-5"> <div class="page-header"> <h3>Example 1 page header</h3> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione numquam eum fuga! Ab mollitia nobis ducimus asperiores officiis! Officia voluptas illo, distinctio natus! Vel asperiores, ipsum facere fugiat, rem mollitia?</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> </div> </div> </div> <div class="col-xs-8"> <div class="panel panel-default page"> <div class="panel-body"> <a name="template"></a>
Por debajo de la página
</div> </div> </div> <div class="col-xs-4 sideright"> <div class="panel panel-default page"> <div class="panel-body"> <div class="panel panel-default"> <div class="panel-heading heading-sidebar"> <h3>aspernatur nostrum!</h3> </div> <div class="panel-body"> <a href="#" class="thumbnail"> <img src="http://lorempixel.com/500/500/" alt="..." class="img-responsive"> </a> </div> </div> <div class="panel panel-default"> <div class="panel-heading heading-sidebar"> <h3>Morbi leo risus</h3> </div> <ul class="list-group"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">aspernatur nostrum!</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul> </div> <div class="panel panel-default"> <div class="panel-heading heading-sidebar"> <h3>assumenda quaerat</h3> </div> <div class="panel-body"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur deserunt quibusdam doloremque ipsum nemo nisi, error asperiores eligendi reiciendis assumenda quaerat, officiis, nihil labore voluptate reprehenderit id earum corporis. Deserunt.</p> </div> </div> </div> </div> </div> <div class="clearfix"></div> <footer> <div class="jumbotron"> <div class="row"> <div class="col-xs-4"> <div class="page-header"> <h3>Example 1 page header</h3> </div> <form> <div class="form-group"> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> </div> <div class="form-group"> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> <div class="col-xs-4"> <div class="page-header"> <h3>Example 2 page header</h3> </div> <ul class="list-group"> <li class="list-group-item"> <span class="badge">14</span> Cras justo odio </li> <li class="list-group-item"> <span class="badge">5</span> Saepe harum inventore </li> <li class="list-group-item"> <span class="badge">62</span> doloremque error </li> </ul> </div> <div class="col-xs-4"> <div class="col-xs-8"> <img src="http://lorempixel.com/400/400/" alt="img" class="img-responsive img-thumbnail"> </div> <div class="col-xs-4"> <p> <input class="btn btn-primary" type="submit" value="adipisicing"> </p> <p> <input class="btn btn-primary" type="submit" value="Architecto"> </p> <p> <input class="btn btn-primary" type="submit" value="dignissimos"> </p> <p> <input class="btn btn-primary" type="submit" value="sapiente"> </p> </div> </div> </div> </div> </footer> </div> </div> </div> </div> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </body> </html>
En la página de inicio
<div class="panel panel-default"> <div class="panel-heading"> <h2>aspernatur nostrum!</h2> </div> <div class="panel-body"> <div class="row"> <div class="col-xs-4"> <a href="#" class="thumbnail"> <img src="http://city2car.com/images/no_img_190x190.gif" alt="..." class="img-responsive"> </a> </div> <div class="col-xs-8"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet repellat quod asperiores dicta quidem laudantium quo hic autem sequi voluptates non doloribus nam eius debitis cumque molestiae, repudiandae ullam, qui. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque quasi voluptatem, similique corrupti necessitatibus nihil error, nemo delectus voluptates deserunt ducimus quaerat molestiae labore id repellat exercitationem asperiores neque quibusdam. </div> <div class="clearfix"></div> <ol class="breadcrumb"> <li>quaerat molestiae</li> <li>labore id repellat</li> <li>asperiores nequ</li> <li><button type="button" class="btn btn-success btn-xs">Extra small button</button></li> </ol> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h2>aspernatur nostrum!</h2> </div> <div class="panel-body"> <div class="row"> <div class="col-xs-4"> <a href="#" class="thumbnail"> <img src="http://city2car.com/images/no_img_190x190.gif" alt="..." class="img-responsive"> </a> </div> <div class="col-xs-8"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet repellat quod asperiores dicta quidem laudantium quo hic autem sequi voluptates non doloribus nam eius debitis cumque molestiae, repudiandae ullam, qui. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque quasi voluptatem, similique corrupti necessitatibus nihil error, nemo delectus voluptates deserunt ducimus quaerat molestiae labore id repellat exercitationem asperiores neque quibusdam. </div> <div class="clearfix"></div> <ol class="breadcrumb"> <li>quaerat molestiae</li> <li>labore id repellat</li> <li>asperiores nequ</li> <li><button type="button" class="btn btn-success btn-xs">Extra small button</button></li> </ol> </div> </div> </div>
Comentarios
Tutoriales
Crear CMS con PHP
Barra superior de Contenido
Novedades
Lanzamiento de bootstrap 4
Firefox Developer edition
Este sitio web fue creado de forma gratuita con
PaginaWebGratis.es
. ¿Quieres también tu sitio web propio?
Registrarse gratis
