Created
June 24, 2014 16:39
-
-
Save owen2345/72004b31488ff8d739f3 to your computer and use it in GitHub Desktop.
html5 encode using bootstrap 2
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <meta name="description" content="Html5 encode using bootstrap, Lesscss"/> | |
| <meta name="keywords" content="Bootstrap, Lesscss, HTML5, CSS3, Crossbrowser"/> | |
| <meta name="author" content="Owen Peredo Diaz"/> | |
| <meta charset="utf-8"/> | |
| <link rel="icon" href="img/favicon.ico" /> | |
| <title>Cruceros</title> | |
| <!-- Bootstrap --> | |
| <link href="css/bootstrap.css" rel="stylesheet" media="screen"/> | |
| <link href="css/bootstrap-responsive.css" rel="stylesheet"/> | |
| <!-- End Bootstrap --> | |
| <link rel="stylesheet" type="text/css" href="css/common.css" /> | |
| <link rel="stylesheet" type="text/css" href="css/less.php?file=style.less" /> | |
| <script src="js/libraries/jquery-1.7.2.min.js" type="text/javascript"></script> | |
| <script src="js/libraries/bootstrap.min.js" type="text/javascript"></script> | |
| <script src="js/libraries/jquery-ui-1.10.3.custom.js" type="text/javascript"></script> | |
| <!-- BxSlider --> | |
| <link rel="stylesheet" type="text/css" href="css/jquery.bxslider.css" /> | |
| <script type="text/javascript" src="js/libraries/jquery.bxslider.js"></script> | |
| <!-- End BxSlider --> | |
| <script type="text/javascript" src="js/home.js"></script> | |
| <!--[if lt IE 9]> | |
| <link rel="stylesheet" type="text/css" href="css/ie.css" /> | |
| <script src="js/libraries/html5.js"></script> | |
| <script src="js/libraries/css3-mediaqueries.js"></script> | |
| <![endif]--> | |
| <!-- addthis --> | |
| <script type="text/javascript">var addthis_config = {"data_track_addressbar":true, ui_language: "es"};</script> | |
| <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4ea6d325508f76d6"></script> | |
| <!-- end addthis --> | |
| </head> | |
| <body> | |
| <!-- HOME SLIDER --> | |
| <div id="slider_home"> | |
| <ul> | |
| <li><img alt="" src="img/slider1.png" /></li> | |
| <li><img alt="" src="img/slider1.png" /></li> | |
| </ul> | |
| </div> | |
| <!-- END HOME SLIDER --> | |
| <div class="main_container container-fluid wrapper"> | |
| <!-- SLIDER NAVIGATION --> | |
| <a id="previous_slide" href="#" title="Previuos slide">Previous</a> | |
| <a id="next_slide" href="#" title="Next slide">Next</a> | |
| <!-- END SLIDER NAVIGATION --> | |
| <!-- START HEADER --> | |
| <header class="header_container"> | |
| <div class="row-fluid"> | |
| <div class="span6"> | |
| <h1> | |
| <a title="" href="#"><img alt="logo" src="img/logo.png" /></a> | |
| </h1> | |
| </div> | |
| <div class="span4 call_us"> | |
| <span class="text1 display-block">Llámanos gratis al</span> | |
| <a href="#" title="0800-777-0800" class="number display-block" ><img alt="0800-777-0800" src="img/number.png" /></a> | |
| <nav> | |
| <ul> | |
| <li> | |
| <a href="#" title="contacto">Contacto</a> | |
| </li> | |
| <li class="current"> | |
| <a href="#" title="contacto">Mis Cruceros</a> | |
| </li> | |
| </ul> | |
| </nav> | |
| </div> | |
| <div class="span2"> | |
| <img alt="lider en cruceros" src="img/logo_tr.png" /> | |
| </div> | |
| </div> | |
| <nav> | |
| <ul> | |
| <li> | |
| <div class="corner"> | |
| <a href="#" title="Planificar tu viaje">Planificar<br /> tu viaje</a> | |
| </div> | |
| </li> | |
| <li class="mt"> | |
| <div class="corner"> | |
| <a href="#" title="Todo sobre Cruceros">Todo sobre<br /> cruceros</a> | |
| </div> | |
| </li> | |
| <li class="mo"> | |
| <div class="corner"> | |
| <a href="#" title="Ofertas especiales">Ofertas<br /> Especiales</a> | |
| </div> | |
| </li> | |
| <li class="ma"> | |
| <div class="corner"> | |
| <a href="#" title="Antes de embarcar">Antes<br /> de embarcar</a> | |
| </div> | |
| </li> | |
| <li class="mn"> | |
| <div class="corner"> | |
| <a href="#" title="Necesitas ayuda">¿Necesitas<br /> ayuda?</a> | |
| </div> | |
| </li> | |
| <li class="current mc"> | |
| <div class="corner"> | |
| <a class="one_row" href="#" title="Comunidad">Comunidad</a> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="corner"> | |
| <div class="corner_l"><div class="corner_r"><div class="corner_c"></div></div></div> | |
| <form method="get" action="#"> | |
| <label>Ofertas Exclusivas en tu mail</label> | |
| <div class="overflow-hidden"> | |
| <input class="float-right" type="text" name="q" value="" placeholder="Ingrese su e-mail" /> | |
| </div> | |
| <div class="text-right"> | |
| <button type="submit">SUSCRIBIRSE</button> | |
| </div> | |
| </form> | |
| </div> | |
| </li> | |
| </ul> | |
| </nav> | |
| </header> | |
| <!-- END HEADER --> | |
| <!-- START CONTENT --> | |
| <section id="page_container" class="home clearfix"> | |
| <div class="row-fluid"> | |
| <section class="span6 search_panel"> | |
| <div class="title text-center"> | |
| <span>Buscar cruceros</span> | |
| </div> | |
| <div class="content"> | |
| <form class="row-fluid"> | |
| <div class="span8"> | |
| <p class="all_dst"> | |
| <label for="all_dst"> </label> | |
| <select name="all_dst" id="all_dst"> | |
| <option>Todos los destinos</option> | |
| </select> | |
| </p> | |
| <p class="date"> | |
| <label for="dates"> </label> | |
| <select name="dates" id="dates"> | |
| <option>Todos las fechas</option> | |
| </select> | |
| </p> | |
| <p class="navieras"> | |
| <label for="navieras"> </label> | |
| <select name="navieras" id="navieras"> | |
| <option>Todos las bavieras</option> | |
| </select> | |
| </p> | |
| </div> | |
| <div class="span4"> | |
| <p class="quantities"> | |
| <label for="quantity"> </label> | |
| <select name="quantity" id="quantity"> | |
| <option>2 Adultos</option> | |
| </select> | |
| </p> | |
| <p class="children"> | |
| <label for="num_child"> </label> | |
| <select name="num_child" id="num_child"> | |
| <option> 0 menores</option> | |
| </select> | |
| </p> | |
| <p class="link_search"> | |
| <a class="text-underline" href="#" title="Busqueda avanzada">Busqueda avanzada</a> | |
| </p> | |
| </div> | |
| <div class="clearfix text-center"> | |
| <button type="submit" class="blue">Buscar</button> | |
| </div> | |
| </form> | |
| </div> | |
| </section> | |
| <section class="span6 go_cruceros"> | |
| <div class="w"> | |
| <h2>En familia. En pareja. De improviso.<br />De descanso. De placer. <span class="blue">De cruceros.com</span></h2> | |
| <h3>¡Toda la diversion que buscas en un mismo lugar!</h3> | |
| <a class="link_cruceros" href="#" title="Todo sobre cruceros"><span><span><span class="icon">Todo sobre cruceros</span> </span></span></a> | |
| </div> | |
| </section> | |
| </div> | |
| <div class="row-fluid"> | |
| <section class="span6 block offerts"> | |
| <div class="title"> | |
| <span>Ofertas destacadas</span> | |
| <a href="#" title="ver más ofertas">ver más ofertas »</a> | |
| </div> | |
| <div class="content row-fluid"> | |
| <?php for($i=0; $i<4; $i++): ?> | |
| <div class="span6 block_small"> | |
| <div class="w"> | |
| <div class="title_small"> | |
| 9 Noches Rio Buzios liha Grande lihabela desde Bs As | |
| </div> | |
| <div class="content_small"> | |
| <p>Ibero Cruceros. Grand Celebration</p> | |
| <p class="date">3 de Marzo 2013</p> | |
| <a href="#" title="" class="image row-fluid"> | |
| <figure class="span6"> | |
| <img alt="thumb oferta" src="img/thumb_oferta.jpg" /> | |
| </figure> | |
| <span class="span6 last"> | |
| <span class="display-block from">DESDE</span> | |
| <span class="display-block cost">U$S 1.926</span> | |
| </span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <?php endfor ?> | |
| </div> | |
| </section> | |
| <section class="span6 packages"> | |
| <div class="row-fluid options"> | |
| <div class="span6"> | |
| <figure> | |
| <img alt="paquete 1" src="img/paquete1.png" /> | |
| </figure> | |
| <a class="view">ver ofertas »</a> | |
| </div> | |
| <div class="span6"> | |
| <figure> | |
| <img alt="paquete 1" src="img/paquete2.png" /> | |
| </figure> | |
| <a class="view">ver ofertas »</a> | |
| </div> | |
| </div> | |
| <div class="row-fluid follow"> | |
| <div class="w"> | |
| <div class="share"> | |
| <!-- AddThis Button BEGIN --> | |
| <!-- AddThis Button END --> | |
| </div> | |
| <div class="text-right travel"> | |
| Viajar en crucero <span class="blue">¡me gusta!</span> | |
| </div> | |
| <div class="text-right descr"> | |
| Seguí todas nuestras novedades,<br />promociones, juegos y participá | |
| </div> | |
| <div class="share2"> | |
| <!-- AddThis Button BEGIN --> | |
| <!-- AddThis Button END --> | |
| </div> | |
| <div class="share3"> | |
| <!-- AddThis Button BEGIN --> | |
| <!-- AddThis Button END --> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <section class="tabs"> | |
| <ul> | |
| <li class="main_dst"> | |
| <a href="#tab_main_dst" title="Destinos Principales"><span class="divider"><span>Destinos Principales</span></span></a> | |
| </li> | |
| <li class="air_packages"> | |
| <a href="#tab_packages" title="Paquetes con aéreos"><span class="divider"><span>Paquetes con aéreos</span></span></a> | |
| </li> | |
| <li class="navieras"> | |
| <a href="#tab_navieras" title="Compañias Navieras"><span class="divider"><span>Compañias Navieras</span></span></a> | |
| </li> | |
| </ul> | |
| <div id="tab_main_dst" class="row-fluid"> | |
| <a class="block span2" title="Brasil" href="#"> | |
| <figure class="span5"> | |
| <img alt="Brazil" src="img/brazil.jpg" /> | |
| </figure> | |
| <span class="span7"> | |
| <span class="title">Brasil</span> | |
| <span class="cost">Desde <span>U$S 1.300 ></span></span> | |
| <span class="descr1">Paquetes con vuelo <span>></span> </span> | |
| <span class="descr2">Desde Buenos Aires <span>></span> </span> | |
| </span> | |
| </a> | |
| <a class="block span2" title="Brasil" href="#"> | |
| <figure class="span5"> | |
| <img alt="Brazil" src="img/brazil.jpg" /> | |
| </figure> | |
| <span class="span7"> | |
| <span class="title">Mediterraneo</span> | |
| <span class="cost">Desde <span>U$S 1.900 ></span></span> | |
| <span class="descr1">En junio 2014 <span>></span> </span> | |
| <span class="descr2">Desde Buenos Aires <span>></span> </span> | |
| </span> | |
| </a> | |
| <a class="block span2" title="Brasil" href="#"> | |
| <figure class="span5"> | |
| <img alt="Brazil" src="img/brazil.jpg" /> | |
| </figure> | |
| <span class="span7"> | |
| <span class="title">Europa</span> | |
| <span class="cost">Desde <span>U$S 1.900 ></span></span> | |
| <span class="descr1">En junio 2014 <span>></span> </span> | |
| <span class="descr2">Desde Buenos Aires <span>></span> </span> | |
| </span> | |
| </a> | |
| <a class="block span2" title="Brasil" href="#"> | |
| <figure class="span5"> | |
| <img alt="Brazil" src="img/brazil.jpg" /> | |
| </figure> | |
| <span class="span7"> | |
| <span class="title">Europa</span> | |
| <span class="cost">Desde <span>U$S 1.900 ></span></span> | |
| <span class="descr1">En junio 2014 <span>></span> </span> | |
| <span class="descr2">Desde Buenos Aires <span>></span> </span> | |
| </span> | |
| </a> | |
| <a class="block span2" title="Brasil" href="#"> | |
| <figure class="span5"> | |
| <img alt="Brazil" src="img/brazil.jpg" /> | |
| </figure> | |
| <span class="span7"> | |
| <span class="title">Brasil</span> | |
| <span class="cost">Desde <span>U$S 1.300 ></span></span> | |
| <span class="descr1">Paquetes con vuelo <span>></span> </span> | |
| <span class="descr2">Desde Buenos Aires <span>></span> </span> | |
| </span> | |
| </a> | |
| <a class="block span2" title="Brasil" href="#"> | |
| <figure class="span5"> | |
| <img alt="Brazil" src="img/brazil.jpg" /> | |
| </figure> | |
| <span class="span7"> | |
| <span class="title">Mediterraneo</span> | |
| <span class="cost">Desde <span>U$S 1.900 ></span></span> | |
| <span class="descr1">En junio 2014 <span>></span> </span> | |
| <span class="descr2">Desde Buenos Aires <span>></span> </span> | |
| </span> | |
| </a> | |
| <a class="block span2" title="Brasil" href="#"> | |
| <figure class="span5"> | |
| <img alt="Brazil" src="img/brazil.jpg" /> | |
| </figure> | |
| <span class="span7"> | |
| <span class="title">Europa</span> | |
| <span class="cost">Desde <span>U$S 1.900 ></span></span> | |
| <span class="descr1">En junio 2014 <span>></span> </span> | |
| <span class="descr2">Desde Buenos Aires <span>></span> </span> | |
| </span> | |
| </a> | |
| <a class="block span2" title="Brasil" href="#"> | |
| <figure class="span5"> | |
| <img alt="Brazil" src="img/brazil.jpg" /> | |
| </figure> | |
| <span class="span7"> | |
| <span class="title">Europa</span> | |
| <span class="cost">Desde <span>U$S 1.900 ></span></span> | |
| <span class="descr1">En junio 2014 <span>></span> </span> | |
| <span class="descr2">Desde Buenos Aires <span>></span> </span> | |
| </span> | |
| </a> | |
| </div> | |
| <div id="tab_packages" class="row-fluid"> | |
| <?php for($i=0; $i<10; $i++): ?> | |
| <a href="#" title="Angra" class="span6 package"> | |
| <span class="span8"> | |
| <span>9 Noches</span> a Angra, Cabo Frio, Río e Ilhabela | |
| </span> | |
| <span class="span4"> | |
| <span class="w">desde <span class="price">1.230</span> <span>U$S</span></span> | |
| </span> | |
| </a> | |
| <?php endfor ?> | |
| <div class="view_more"> | |
| <a href="#" title="ver todos los paquetes con aereos">ver todos los paquetes con aereos »</a> | |
| </div> | |
| </div> | |
| <div id="tab_navieras" class="text-center"> | |
| El contenido esta en proceso de redacción. | |
| <br /><br /> | |
| <br /><br /> | |
| </div> | |
| </section> | |
| <section class="panel_why_reserver row-fluid"> | |
| <div class="span6 why_reseve"> | |
| <div class="title"> | |
| ¿Por qué reservar con <a href="#" title="DeCruceros.com">DeCruceros.com</a>? | |
| </div> | |
| <ul class="content"> | |
| <li class="item"> | |
| <p class="text1">Nos gusta tener un trato personal con nuestros clientes.</p> | |
| <p class="text2">Nuestro asesoramiento personalizado ya es una marca registrada.</p> | |
| </li> | |
| <li class="item"> | |
| <p class="text1">Somos especialistas en la industria de cruceros.</p> | |
| <p class="text2">Porque nuestra prioridad es que tengas la mejor experiencia en tu viaje.</p> | |
| </li> | |
| <li class="item"> | |
| <p class="text1">Cuidamos tu bolsillo: te garantizamos el mejor precio.</p> | |
| <p class="text2">Disfrutá de los mejores convenios y beneficios incluso antes de partir.</p> | |
| </li> | |
| <li class="item"> | |
| <p class="text1">Podés llegar a todos los destinos alrededor del mundo.</p> | |
| <p class="text2">Y a todas las navieras ¡hasta las más exclusivas!</p> | |
| </li> | |
| <li class="item"> | |
| <p class="text1">¿Estás sentado? No te levantes. Podés comprar online.</p> | |
| <p class="text2">Sin necesidad de moverte de tu casa. ¿Listo para embarcar?</p> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="span6 p_history"> | |
| <div class="row-fluid title"> | |
| <div class="span8 offset1"> | |
| <p class="text1">Conocé cómo se vive un viaje en Crucero</p> | |
| <p class="text2">CONTADO POR SUS PROTAGONISTAS</p> | |
| </div> | |
| <div class="span3"> | |
| <div class="w"> | |
| <img alt="logo" src="img/logotr2.png" /> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="content"> | |
| <div class="w"> | |
| <div class="row-fluid"> | |
| <div class="span4"> | |
| <figure> | |
| <img alt="avatar 1" src="img/avatar1.png" /> | |
| <figcaption> | |
| <span>"Ahora yo recomiento viajar en Costa Cruceros"</span> | |
| <a href="#" title="Patricia y Flor">Patricia y Flor</a> | |
| </figcaption> | |
| </figure> | |
| </div> | |
| <div class="span4"> | |
| <figure> | |
| <img alt="avatar 1" src="img/avatar1.png" /> | |
| <figcaption> | |
| <span>"Ahora yo recomiento viajar en Costa Cruceros"</span> | |
| <a href="#" title="Patricia y Flor">Patricia y Flor</a> | |
| </figcaption> | |
| </figure> | |
| </div> | |
| <div class="span4"> | |
| <figure> | |
| <img alt="avatar 1" src="img/avatar1.png" /> | |
| <figcaption> | |
| <span>"Ahora yo recomiento viajar en Costa Cruceros"</span> | |
| <a href="#" title="Patricia y Flor">Patricia y Flor</a> | |
| </figcaption> | |
| </figure> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="footer"> | |
| <a href="#" title="Compartinos tu historia">Compartinos tu historia »</a> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="banners row-fluid"> | |
| <div class="banner1 span6"> | |
| <a href="#" title="banner 1"><img alt="" src="img/banner2.jpg" /></a> | |
| </div> | |
| <div class="banner2 span6"> | |
| <a href="#" title="banner 2"><img alt="" src="img/banner1.jpg" /></a> | |
| </div> | |
| </section> | |
| </section> | |
| <!-- END CONTENT --> | |
| </div> | |
| <!-- START FOOTER --> | |
| <footer class="footer_container container-fluid"> | |
| <div class="panel_subscribe"> | |
| <div class="wrapper row-fluid"> | |
| <div class="span6 offset1"> | |
| <p class="text1">Las mejores ofertas en tu e-mail para vos.</p> | |
| <p class="text2">¡Descansá! ¡Nosotros de llevamos DeCrucero!</p> | |
| </div> | |
| <form class="span5"> | |
| <input type="text" name="q" placeholder="Ingrese su e-mail" /> | |
| <button type="submit">SUSCRIBIRSE</button> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="call_us"> | |
| <div class="wrapper row-fluid"> | |
| <div class="span5 offset2 call"> | |
| <p class="text1">¿Necesitas ayuda? llámanos gratis al</p> | |
| <p class="number"> | |
| <img alt="number footer" src="img/number-footer.jpg" /> | |
| </p> | |
| <p class="text2">Contactate con nosotros y te asignaremos tu agente de viajes.</p> | |
| <p class="text3"><a href="#" title="Obtené tu prsupuesto aquí">Obtené tu prsupuesto aquí</a> y organicemos el viaje juntos.</p> | |
| </div> | |
| <div class="span5 people"> | |
| <img alt="people" src="img/people.png" /> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- END FOOTER --> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment