owen2345
6/24/2014 - 4:39 PM

html5 encode using bootstrap 2

html5 encode using bootstrap 2

<!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">&nbsp;</label>
                                        <select name="all_dst" id="all_dst">
                                            <option>Todos los destinos</option>
                                        </select>
                                    </p>
                                    <p class="date">
                                        <label for="dates">&nbsp;</label>
                                        <select name="dates" id="dates">
                                            <option>Todos las fechas</option>
                                        </select>
                                    </p>
                                    <p class="navieras">
                                        <label for="navieras">&nbsp;</label>
                                        <select name="navieras" id="navieras">
                                            <option>Todos las bavieras</option>
                                        </select>
                                    </p>
                                </div>
                                
                                <div class="span4">
                                    <p class="quantities">
                                        <label for="quantity">&nbsp;</label>
                                        <select name="quantity" id="quantity">
                                            <option>2 Adultos</option>
                                        </select>
                                    </p>
                                    <p class="children">
                                        <label for="num_child">&nbsp;</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 &gt;</span></span>
                                <span class="descr1">Paquetes con vuelo <span>&gt;</span> </span>
                                <span class="descr2">Desde Buenos Aires <span>&gt;</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 &gt;</span></span>
                                <span class="descr1">En junio 2014 <span>&gt;</span> </span>
                                <span class="descr2">Desde Buenos Aires <span>&gt;</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 &gt;</span></span>
                                <span class="descr1">En junio 2014 <span>&gt;</span> </span>
                                <span class="descr2">Desde Buenos Aires <span>&gt;</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 &gt;</span></span>
                                <span class="descr1">En junio 2014 <span>&gt;</span> </span>
                                <span class="descr2">Desde Buenos Aires <span>&gt;</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 &gt;</span></span>
                                <span class="descr1">Paquetes con vuelo <span>&gt;</span> </span>
                                <span class="descr2">Desde Buenos Aires <span>&gt;</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 &gt;</span></span>
                                <span class="descr1">En junio 2014 <span>&gt;</span> </span>
                                <span class="descr2">Desde Buenos Aires <span>&gt;</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 &gt;</span></span>
                                <span class="descr1">En junio 2014 <span>&gt;</span> </span>
                                <span class="descr2">Desde Buenos Aires <span>&gt;</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 &gt;</span></span>
                                <span class="descr1">En junio 2014 <span>&gt;</span> </span>
                                <span class="descr2">Desde Buenos Aires <span>&gt;</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>