"index.html"
Bootstrap 3.3.0 Snippet by DarkAngelx

<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-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <title>Registro de Horas</title> <link rel="icon" href="images/hoja.gif" type="image/x-icon"/> <link rel="shortcut icon" href="images/hoja.gif" type="image/x-icon"/> <link rel="stylesheet" type="text/css" href="css/styles.css"/> <link rel="stylesheet" href="css/jquery.tweet.css"> <!-- el css es opcional --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script><!-- incluimos a jquery --> <!--<script language="javascript" src="js/jquery.tweet.js" type="text/javascript"></script> incluimos al plugin --> <!--<script type='text/javascript'> $(document).ready(function(){ $(".tweet").tweet({ // aca es donde se le indica donde poner los tweets, le pondremos un div vacio con clase .tweets username: "", // el usuario avatar_size: 32, // Ponle 0 si no quieres avatares count: 5, // Numero de tweets loading_text: "Cargando..." }); }); </script>--> </head> <body> <!--start container--> <div id="container"> <!--start header--> <header> <!--start logo--> <a href="#" id="logo"><img src="images/log.gif" width="400" height="150" alt="logo"/></a> <!--end logo--> <!--start menu--> <nav> <ul> <li><a href="index.html" class="current">Inicio</a></li> <li><a href="cargahoras.html">Carga de horas</a></li> <li><a href="#">espacio1</a></li> <li><a href="#">espacio2</a></li> <li><a href="#">Contacto</a></li> </ul> </nav> <!--end menu--> <!--end header--> </header> <!--start intro--> <div id="intro"> <img src="images/banner1.png" alt="banner"> </div> <!--end intro--> <header class="group_bannner_left"> <hgroup> <h1>Carga de Horas</h1> <h2>Para tener un mejor control, carga las horas de tus proyectos, mantenciones, reuniones u otros. </h2> </hgroup> <div class="button black"><a href="cargahoras.html">Haz click aqui y carga tus horas</a></div> </header> <!--start holder--> <div class="holder_content"> <aside class="group2"> <h3>Noticias</h3> <article class="holder_news"> <h4>Noticia 1<br> <span>17.08.2015</span></h4> <p>texto noticia 1 </p> </article> <article class="holder_news"> <h4>Noticia 2<br> <span>17.08.2015</span></h4> <p>texto Noticia 2 </p> </article> <article> <param name="fps" value="18"> <param name="a1" value="12500"> <param name="pixd" value="29"> <param name="pixangle" value="5"> <param name="radius" value="26"> <param name="roty" value="-4"> <param name="rotx" value="0"> <param name="rotz" value="0.401"> <param name="irotx" value="0"> <param name="iroty" value="0"> <param name="irotz" value="00"> <param name="style" value="1"> <param name="color" value="#0000000"> <param name="bgcolor" value="#FFFFFFF"> <param name="12hour" value="0"> </applet> </article> </aside> <section class="group1"> <h3>Paginas de Interes</h3> <p> <table> <tr> <td><a href="http://manzano2.unab.cl:9099/" ><img src="images/unabbanner.png" width="150" height="150" alt="UNABBANNER"/></a></td> <td><a href="http://inb.unab.cl:9099/" ><img src="images/unabprod.jpg" width="150" height="150" alt="UNABPROD"/></a></td> <td><a href="https://www.grupopayroll.com/AutoservicioRRHH/loginap.aspx?ReturnUrl=%2fAutoservicioRRHH%2fmenuap.aspx" ><img src="images/payroll.gif" width="150" height="150" alt="Payroll"/></a></td> <td><a href="https://frontline.nfpondemand.com/MRcgi/MRentrancePage.pl" ><img src="footprints.gif" width="150" height="150" alt="FootPrints"/></a></td> </tr> <tr style="text-align:center;"> <td>UNAB BANNER</td> <td>UNAB BANNER PROD</td> <td>PAYROLL</td> <td>FOOTPRINTS</td> </tr> </table> </p> </section> </div> <!--end holder--> </div> <!--end container--> <!--start footer--> <footer> <div class="container"> <div id="FooterTwo"> 2015, Santiago Chile </div> <div id="FooterTree"> SERVICIOS ANDINOS </div> </div> </footer> <!--end footer--> </body> </html>
/************************************************** Reset ***************************************************/ html, body, div, span, h1, h2, h3, h4, h5, h6, p, ol, ul, li, form, label, legend, caption, aside, details, figcaption, figure, footer,header, hgroup, menu, nav, section, summary { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } iframe{ border:none; } ol, ul { list-style: none; } a img {border:none} aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block} /************************************************** Global styles ***************************************************/ html, body { width:100%; height:100%; } html, body{ font-family:Georgia, "Times New Roman", Times, serif; font-size: 13px; color: black; margin:0 0 1px; line-height: 1.5; background-image:url(../images/bg1.png); background-position:left top; background-repeat:repeat; } p { margin-bottom:7px; } a, p a { text-decoration:none; } a:hover { text-decoration:underline; } h1, h2, h3, h4, h5, h6 { font-family:Georgia, "Times New Roman", Times, serif; font-weight: normal; position:relative; } h1{ font-size: 35px; line-height:1.6; color:black; text-transform:capitalize; text-align:left; margin-left:40px; border-bottom:1px dotted black; } h1 span{ line-height:1.7px; color:black; font-size:14px; text-transform:none; display:block; } h2{ font-size: 18px; line-height:1.7; color:black; text-align:left; width:350px; padding-top:8px; margin-left:40px; } h3{ font-size: 28px; line-height:1.6; color:black; text-transform:none; text-align:left; background-color:transparent; padding-top:12px; margin-bottom:9px; border-bottom:1px dotted black; } h3 span{ font-size: 12px; color: black; text-transform:capitalize; height:24px; margin-top:15px; text-align:left; display:block; } h4{ font-size: 18px; line-height:1.7; color:black; text-align:left; width:350px; padding-top:8px; margin-bottom:12px; } h4 span{ font-weight:bold; font-size:15px; font-family:Georgia, "Times New Roman", Times, serif; background-color:#2B90FF; padding:8px; color: #fff; margin-left:20px; -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; } /*************************************************** Main containers ***************************************************/ #container, #container_left, #container_right{ position: relative; width:100%; } #container{ position:relative; width:980px; margin:0 auto; text-align:left; background-color:white; padding:15px; overflow: hidden; -moz-box-shadow: 0 0 5px 5px #D8D8D8; -webkit-box-shadow: 0 0 5px 5px #D8D8D8; box-shadow: 0 0 5px 5px #D8D8D8; } .group1 { float: left; width: 613px; position: relative; background:white; padding:15px; margin-bottom:10px; } .group2 { float: right; width: 277px; position: relative; background:white; padding:15px; margin-bottom:10px; margin-left:30px; } .group3 { float: left; width: 613px; position: relative; background:white; padding:15px; margin-top:-28px; } .group_bannner_left { width: 380px; position: absolute; top:146px; left:50px; background:transparent; margin-top:50px; } header{ position: relative; float:left; width: 100%; height:100px; } /************************************************** INTRO ***************************************************/ #intro{ width: 960px; position: relative; float: left; height:318px; padding:10px; background:#EAEAEA; margin-top:17px; -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; } /*************************************************** HOLDERS ***************************************************/ .holder_content { position: relative; float: left; width: 100%; margin-bottom:8px; background:white; } .holder_content_separator{ margin-bottom:20px; } /*************************************************** GALLERY ***************************************************/ a.photo_hover3{ position:relative; float: right; margin:5px 13px 8px 0; padding: 8px; } a.photo_hover3{ background-color:white; border: 1px solid #E1E1E1; } a.photo_hover3:hover { border: 1px dotted #66CCFF; background-color:#C7EDFF; opacity:0.9; z-index:1000; } a.photo_hover2{ position:relative; float: left; margin:5px 13px 8px 0; padding: 8px; -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; } a.photo_hover2{ background-color:white; border: 1px solid #E1E1E1; } a.photo_hover2:hover { border: 1px solid #E1E1E1; } /*************************************************** GALLERY ***************************************************/ .holder_gallery { width:610px; float:left; margin-right:10px; padding:0; } .holder_gallery a.photo_hover {left:42px} .holder_gallery h3 { clear:left} .holder_gallery a.name{ font-size:12px; text-align:left; position:relative; margin-top:15px; display:block; clear:left; line-height:15px; } .holder_gallery a.name1{ font-size:12px; position:relative; display:inline; text-align:left; top:20px; left:0; } .holder_gallery a.description{ font-size:12px; float:left; position:relative; margin-right:5px; padding-top:7px; color:gray; width:300px; display:inline; } /************************************************** FOOTER ***************************************************/ footer{ position:relative; height:90px; clear:both; width:100%; margin-bottom:18px; background-color:black; } #FooterOne, #FooterTwo, #FooterTree { position: absolute; } #FooterTwo{ position: absolute; right: 225px; top:26px; color:white; } #FooterTree{ position: absolute; left: 225px; top:26px; color:white; } .container{ width:980px; margin:0 auto; background-color:#33CC99; } /*************************************************** MENU ***************************************************/ nav{ position:absolute; width:580px; top:25px; right:0; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); background:black; } nav ul li{ float: left; margin-left:16px; line-height:normal; } nav ul li a{ font-size: 19.4px; font-family:Georgia, "Times New Roman", Times, serif; color: white; text-transform:capitalize; font-weight:normal; display:block; /* IE6, IE7 line height fix */ padding-bottom:8px; padding-top:15px; background-color:transparent; margin-top:0px; margin-right:6px; text-decoration:none; } nav ul li a:hover{ color: white; text-decoration:underline; } nav ul li a.current{ background-color:#2B90FF; padding:15px; } .content_menu{ float: left; width: 274px; margin-top:-10px; margin-bottom:15px; } .content_menu ul{ margin: 0px; padding: 0px; float: none; } .content_menu ul li{ float: none; padding-bottom: 16px; } .content_menu ul li a{ font-size:14px; line-height:normal; color:#33CC99; text-align:left; text-decoration:none; background-image:url(../images/circle.png); background-position:left; background-repeat: no-repeat; padding-left:20px; } .content_menu ul li a:hover{color:#33CC99;} /*************************************************** SPECIFIC ***************************************************/ #logo{ position:relative; float:left; top:10px; left:0px; width:250px; height:160px; } .clearing{ clear: both; display: inline; width: 100%; height: 0; overflow:hidden; } .readmore{ font-weight:bold; font-size:15px; font-family:Georgia, "Times New Roman", Times, serif; color:#333333; } .readmore a { color:#333333; } .holder_news { width:274px; float:left; border-bottom:1px dotted black; margin-bottom:10px; padding-bottom:12px; } .button { display: inline-block; zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */ *display: inline; vertical-align: baseline; margin: 8px 41px; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 16px/100% Georgia, "Times New Roman", Times, serif; padding: .5em 2em .55em; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); } .button:hover { text-decoration: none; } .button:active { position: relative; top: 1px; } .black { color: #d7d7d7; border: solid 1px #333; background: #333; background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000)); background: -moz-linear-gradient(top, #666, #000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000'); } .black:hover { background: #000; background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000)); background: -moz-linear-gradient(top, #444, #000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000'); } .black a { color: #ffffff; }

Related: See More


Questions / Comments: