Laguna

Laguna

Diseño Básico CSS


Detalles


  • Empresa

  • Codigos adicionales para el contenido

  • Diseño Adaptado a PaginaWebGratis.es

  • Archivos Descargables

  • Licencia Creative Commons


Gratis, simple, elegante, diseño web business. En poco tiempo puedes modificarlo, adapta la publicidad de paginawebgratis al diseño, entradas principales y un sencillo pero atractivo menu. Si tienes algún problema con la instalación del mismo, hazlo saber. Puedes descargar los archivos para modificar todo el diseño, o copiar los códigos del diseño adaptado para paginawebgratis.es


<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <link rel="stylesheet" href="http://demo.pwgpro.com.ve/laguna/CSS/stylesheet.css">
      <link href='https://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'>
      <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
      <link href='https://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
      <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
      <link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
      <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
      <link href='https://fonts.googleapis.com/css?family=Mada' rel='stylesheet' type='text/css'>
      <script src="https://use.fontawesome.com/b4e760a65b.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
      <script src="http://demo.pwgpro.com.ve/Sliders/Slides-SlidesJS-3/source/jquery.slides.min.js"></script>
      <script>
         $(function(){
           $("#slides").slidesjs({
                 width: 960,
             height: 265,
         play: {
           active: true,
           effect: "fade",
             // [string] Can be either "slide" or "fade".
           interval: 5000,
             // [number] Time spent on each slide in milliseconds.
           auto: true,
             // [boolean] Start playing the slideshow on load.
           swap: true,
             // [boolean] show/hide stop and play buttons
           pauseOnHover: false,
             // [boolean] pause a playing slideshow on hover
           restartDelay: 2500
             // [number] restart delay on inactive slideshow
         }
           });
         });
      </script>
      <link rel="stylesheet" href="http://demo.pwgpro.com.ve/Sliders/Slides-SlidesJS-3/source/thecs.css">
      <!--SEO-->
      <meta name=&#8221;description&#8221; content=&#8221;Turismo nautico seguro. Navegue con nosotros. Laguna internacional ofrece los mejores paquetes turisticos a su alcance&#8221; />
      <meta name=&#8221;robots&#8221; content=&#8221;index&#8221;>
      <title>Laguna | Palabras clave principal y secundaria</title>
   </head>
   <body>
      <header>
         <center><img src="http://demo.pwgpro.com.ve/laguna/images/logotipo.png" draggable="false"></center>
      </header>
      <!--INICIO DEL MENU-->
      <nav>
         <ul class="nav">
            <li id="start"><a href="http://demo.pwgpro.com.ve/laguna/index.html"><i class="fa fa-caret-right" aria-hidden="true"></i>
               Inicio</a>
            </li>
            <li><a href="http://demo.pwgpro.com.ve/laguna/destinos.html"><i class="fa fa-map" aria-hidden="true"></i>
               Destinos</a>
            </li>
            <li><a href="http://demo.pwgpro.com.ve/laguna/servicios.html"><i class="fa fa-th-large" aria-hidden="true"></i>
               Servicios</a>
            </li>
            <li><a href="http://demo.pwgpro.com.ve/laguna/articulos.html"><i class="fa fa-plus-square-o" aria-hidden="true"></i>
               Articulos</a>
            </li>
            <li><a href="http://demo.pwgpro.com.ve/laguna/FAQ.html"><i class="fa fa-question-circle" aria-hidden="true"></i>
               FAQ</a>
            </li>
            <li><a href="#"><i class="fa fa-user" aria-hidden="true"></i>
               Contacto</a>
            </li>
         </ul>
      </nav>
      <!--FIN DEL MENU-->
      <center>
         <div id="notice">
            <p>A continuacion: Un turismo con laguna en imágenes</p>
         </div>
      </center>
      </div>
      <!--INICIO DE LA GALERIA-->
      <div id="Slider">
         <div id="slides">
            <img src="http://demo.pwgpro.com.ve/Sliders/Slides-SlidesJS-3/examples/playing/img/1.fw.png">
            <img src="http://demo.pwgpro.com.ve/Sliders/Slides-SlidesJS-3/examples/playing/img/2.fw.png">
            <img src="http://demo.pwgpro.com.ve/Sliders/Slides-SlidesJS-3/examples/playing/img/3.fw.png">
            <img src="http://demo.pwgpro.com.ve/Sliders/Slides-SlidesJS-3/examples/playing/img/4.fw.png">
         </div>
      </div>
      <!--FIN DE LA GALERIA-->
<!--Pie de página-->
      <img draggable="false" id="faro" src="http://demo.pwgpro.com.ve/laguna/images/Farol.png">     
      <footer>
         <p>Laguna -2016 - <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><i class="fa fa-creative-commons" aria-hidden="true"></i>
            </a>Esta obra está bajo una <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">licencia de Creative Commons Reconocimiento-CompartirIgual 4.0 Internacional</a>.
         </p>
<script>
<!--
document.write(unescape("      </footer>
      <script>
         document.write(unescape("%20%20%20%20%20%20%3Ca%20href%3D%22http%3A//pwgpro.es.tl%22%20title%3D%22pwgpro.es.tl%22%3E%0A%20%20%20%20%20%20%20%20%20%3Cdiv%20id%3D%22by%22%3E%3C/div%3E%0A%20%20%20%20%20%20%3C/a%3E"));
         
      </script>
   </body>"));
//-->
</script>
</html>
      <!--BOX DE CONTENIDO DERECHO (testimonios)-->
      <section id="boxone">
         <h1>Nuestros clientes lo confirman</h1>
         <div id="item">
            <p>Siéntase en confianza con nuestros servicios. Clientes como usted son parte de nuestros testimonios. Para contactar con alguno de ellos y confirmar sus comentarios haga click en sus perfiles</p>
         </div>
         <div class="testimonio">
            <a href="#"><img draggable="false" src="http://i.imgur.com/wyZHjam.jpg"></a>
            <h3>Richard Brandsford </h3>
            <p>"It va esser tam simplic quam Occidental in fact, it va esser Occidental."</p>
         </div>
         <div class="testimonio">
            <a href="#"><img draggable="false" src="http://i.imgur.com/ppiP7fz.jpg"></a> 
            <h3>Angelina Crow </h3>
            <p>"Ma quande lingues coalesce,  lingue es plu simplic e regulari quam ti del coalescent lingues ?"</p>
         </div>
         <div class="testimonio">
            <a href="#"><img draggable="false" src="http://i.imgur.com/UepQoXz.jpg"></a>
            <h3>Steve Carrington  </h3>
            <p>"Por scientie, musica, sport etc, litot Europa usa li sam vocabular."</p>
         </div>
         <div class="testimonio">
            <a href="#"><img draggable="false" src="http://i.imgur.com/EqNFZh1.jpg"></a> 
            <h3>Jessica Anderson </h3>
            <p>"Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues."</p>
         </div>
      </section>
      <!--BOX DE CONTENIDO IZQUIERDO-->
      <section id="boxtwo">
         <div>
            <i class="fa fa-newspaper-o fa-5x" aria-hidden="true"></i>
            <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
         </div>
         <!--Post 1-->
         <article>
            <img src="http://i.imgur.com/gjMwPbt.jpg">
            <h1>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</h1>
            <p align="center">Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
               <br>
               <a href="#">Leer más</a>
            </p>
         </article>
         <hr>
         <article>
            <img src="http://i.imgur.com/OFjCtEp.jpg">
            <h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</h1>
            <p align="center">Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
               <br>
               <a href="#">Leer más</a>
            </p>
         </article>
         <hr>
      </section>
lli.nav_element{display: none;} 
li.nav_element a{display: none;} 
h1#title{display: none;} 
h2#title span {display: none;} 
div.header{display: none;} 
li.nav_element{list-style-type: none;} 
li.nav_element{display: none;} 
#webme_footer_textlink_dont_hide
{
background:#55493E;
color:#FFF;
font-family: 'Lora', serif;
float:left;
margin-top:-20px;
}

Para ordenar los articulos que tengas mas importantes en una sección de la pagina, utiliza el siguiente codigo

      <section>
         <div class="bg_template_content">
            <h1>
               Inicio <i class="fa fa-long-arrow-right" aria-hidden="true"></i> Articulos
            </h1>
         </div>
         <!--Post-->
         <article>
            <div>
               <center><img src="http://i.imgur.com/gjMwPbt.jpg"></center>
               <a href="Aenean-commodo-ligula-eget-dolor.html">
                  <h1>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</h1>
               </a>
               <p align="center">Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
                  <br>
                  <a href="Aenean-commodo-ligula-eget-dolor.html">Leer más</a>
               </p>
            </div>
         </article>
         <!--Post-->
         <article>
            <div>
               <center><img src="http://i.imgur.com/OFjCtEp.jpg"></center>
               <a href="Aenean-commodo-ligula-eget-dolor.html">
                  <h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</h1>
               </a>
               <p align="center">Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
                  <br>
                  <a href="Aenean-commodo-ligula-eget-dolor.html">Leer más</a>
               </p>
            </div>
         </article>
         <!--Post-->
         <article>
            <div>
               <center><img src="http://placehold.it/460x180"></center>
               <a href="Aenean-commodo-ligula-eget-dolor.html">
                  <h1>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</h1>
               </a>
               <p align="center">Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
                  <br>
                  <a href="Aenean-commodo-ligula-eget-dolor.html">Leer más</a>
               </p>
            </div>
         </article>
         <!--Post-->
         <article>
            <div>
               <center><img src="http://placehold.it/460x180">
</center>
               <a href="Aenean-commodo-ligula-eget-dolor.html">
                  <h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</h1>
               </a>
               <p align="center">Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
                  <br>
                  <a href="Aenean-commodo-ligula-eget-dolor.html">Leer más</a>
               </p>
            </div>
         </article>
      </section>
<section>
         <div class="bg_template_content">
            <h1>
               Inicio <i class="fa fa-long-arrow-right" aria-hidden="true"></i> Servicios
            </h1>
         </div>
         <!--Bloque-->
         <a href="#">
            <figure>
               <img src="demo.pwgpro.com.ve/laguna/Imagenes/agencias.jpg">
               <figcaption>
                  <h1>Restaurants</h1>
                  Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. 
               </figcaption>
            </figure>
         </a>
         <!--Bloque-->
         <a href="#">
            <figure>
               <img src="demo.pwgpro.com.ve/laguna/Imagenes/vino.jpg">
               <figcaption>
                  <h1>Vino - Xham Hotel</h1>
                  Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. 
               </figcaption>
            </figure>
         </a>
         <!--Bloque-->
         <a href="#">
            <figure>
               <img src="demo.pwgpro.com.ve/laguna/Imagenes/Internet.jpg">
               <figcaption>
                  <h1>Tecnologia Li-Fi</h1>
                  Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. 
               </figcaption>
            </figure>
         </a>
         <!--Bloque-->
         <a href="#">
            <figure>
               <img src="demo.pwgpro.com.ve/laguna/Imagenes/puente.jpg">
               <figcaption>
                  <h1>Viajes privados</h1>
                  Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. 
               </figcaption>
            </figure>
         </a>
         <!--Bloque-->
         <a href="#">
            <figure>
               <img src="demo.pwgpro.com.ve/laguna/Imagenes/Centro de asistencia.jpg">
               <figcaption>
                  <h1>Asistencia Médica por doquier</h1>
                  Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. 
               </figcaption>
            </figure>
         </a>
         <!--Bloque-->
         <a href="#">
            <figure>
               <img src="demo.pwgpro.com.ve/laguna/Imagenes/Can.jpg">
               <figcaption>
                  <h1>Ellos, también se hospedan</h1>
                  Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. 
               </figcaption>
            </figure>
         </a>
         <!--Bloque-->
         <a href="#">
            <figure>
               <img src="demo.pwgpro.com.ve/laguna/Imagenes/payaso.jpg">
               <figcaption>
                  <h1>Animadores para los niños</h1>
                  Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. 
               </figcaption>
            </figure>
         </a>
         <!--Bloque-->
         <a href="#">
            <figure>
               <img src="demo.pwgpro.com.ve/laguna/Imagenes/Museos.jpg">
               <figcaption>
                  <h1>Recorridos al Museo del caribe</h1>
                  Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. 
               </figcaption>
            </figure>
         </a>
         <!--Bloque-->
         <a href="#">
            <figure>
               <img src="demo.pwgpro.com.ve/laguna/Imagenes/delfines.jpg">
               <figcaption>
                  <h1>Paseos por la naturaleza</h1>
                  Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. 
               </figcaption>
            </figure>
         </a>
      </section>
     <section>
         <div class="faq_template">
            <h1>Preguntas Frecuentes</h1>
         </div>
         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</p>
         <h2>
            Indice
         </h2>
         <ul id="list_faq">
            <li><a href="#one">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li>
            <li><a href="#two">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</a></li>
            <li><a href="#three">Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</a></li>
            <li><a href="#four">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</a></li>
            <li><a href="#five">Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</a></li>
         </ul>
         <h1 id="one">¿Lorem ipsum dolor sit amet, consectetuer adipiscing elit?</h1>
         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
            Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
            Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium
         </p>
         <h1 id="two">¿Cum sociis natoque montes, nascetur ridiculus mus?</h1>
         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
            Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
            Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium
         </p>
         <h1 id="three">¿Donec quam felis, ultricies nec?</h1>
         <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium</p>
         <h1 id="four">¿Vivamus elementum semper nisi. Aenean?</h1>
         <p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p>
         <h1 id="four">¿consequat vitae, eleifend ac, enim?</h1>
         <p>Sed adipiscing ornare risus. Morbi est est, blandit sit amet, sagittis vel, euismod vel, velit. Pellentesque egestas sem. Suspendisse commodo ullamcorper magna.</p>
      </section>
     <section>
         <div class="bg_template">
            <h1><i class="fa fa-ship" aria-hidden="true"></i>
               Nuestros destinos
            </h1>
         </div>
         <iframe src="https://www.google.com/maps/d/embed?mid=1CS9Uh1-opU0cDPESH0XOg9z5CY4" width="960" height="400"></iframe>	
         <p>
            Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. 
            Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. 
            Praesent elementum hendrerit tortor. 
            Sed semper lorem at felis. 
            Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. 
            Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
         <ul>
            <li><a href="#">Aruba</a></li>
            <li><a href="#">Costa Rica</a></li>
            <li><a href="#">Mexico</a></li>
            <li><a href="#">Panamá</a></li>
            <li><a href="#">Colombia</a></li>
            <li><a href="#">Venezuela</a></li>
         </ul>
         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
         
      </section>
comments powered by Disqus