Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje03-03-2017, 20:44 (UTC)    
Título del mensaje: [CSS-Design] Plantilla Verti HTML5Adaptada para PWG
Responder citando
Este es mi segundo aporte para quienes usan el servicio de PaginaWebGratis.es, quienes ofrecen que en tan sólo 3 minutos puedes crear tu propia página web, he adaptado una plantilla de tipo personal, con sub-paginas, ideal para todo tipo de web.



Detalles de la plantilla adaptada:
Verti , es una plantilla de sitio HTML5 libre y totalmente sensible. esta plantilla esta publicada bajo la licencia Creative Commons Attribution. Por lo que siéntete libre de usarla para cualquier proyecto personal o comercial que puedas tener.

Licencia: Bajo Creative Commons Attribution 3.0.

Demostración de la Plantilla. Click Aquí
Demostración de la Plantilla ya en PaginaWebGratis. Click Aquí

(Para la demo en PWG, estará disponible hasta que adapte uno nuevo)

Código adaptado para colocar dentro de Configuraciones avanzadas diseño CSS-Design:
Texto por encima de la pagina.
Código:

<!--- TEXTO POR ENCIMA DE LA PAGINA --->
<!DOCTYPE HTML>
<!--
   Verti by HTML5 UP
   html5up.net | @ajlkn
   Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
   Adapatador PWG | http://adaptacionesweb.es.tl/
-->
<html>
   <head>
      <title>Verti by HTML5 UP</title>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <!--[if lte IE 8]><script src="https://dl.dropboxusercontent.com/s/f75tttwr36gor25/html5shiv.js"></script><![endif]-->
      <link rel="stylesheet" href="https://dl.dropboxusercontent.com/s/5sra83duri6mqwe/main.css" />
      <!--[if lte IE 8]><link rel="https://dl.dropboxusercontent.com/s/uskg46r14z46f4k/ie8.css" /><![endif]-->
   </head>
   <body class="homepage">
      <div id="page-wrapper">

         <!-- Header -->
            <div id="header-wrapper">
               <header id="header" class="container">

                  <!-- Logo -->
                     <div id="logo">
                        <h1><a href="index.html">Verti</a></h1>
                        <span>by HTML5 UP</span>
                     </div>

                  <!-- Nav -->
                     <nav id="nav">
                        <ul>
                           <li class="current"><a href="index.html">Welcome</a></li>
                           <li>
                              <a href="#">Dropdown</a>
                              <ul>
                                 <li><a href="#">Lorem ipsum dolor</a></li>
                                 <li><a href="#">Magna phasellus</a></li>
                                 <li>
                                    <a href="#">Phasellus consequat</a>
                                    <ul>
                                       <li><a href="#">Lorem ipsum dolor</a></li>
                                       <li><a href="#">Phasellus consequat</a></li>
                                       <li><a href="#">Magna phasellus</a></li>
                                       <li><a href="#">Etiam dolore nisl</a></li>
                                    </ul>
                                 </li>
                                 <li><a href="#">Veroeros feugiat</a></li>
                              </ul>
                           </li>
                           <li><a href="left-sidebar.html">Left Sidebar</a></li>
                           <li><a href="right-sidebar.html">Right Sidebar</a></li>
                           <li><a href="no-sidebar.html">No Sidebar</a></li>
                        </ul>
                     </nav>

               </header>
            </div>
<!--- FIN  TEXTO POR ENCIMA DE LA PAGINA --->


Texto por debajo de la pagina

Código:


<!--- TEXTO POR DEBAJO DE LA PAGINA --->

         <!-- Footer -->
            <div id="footer-wrapper">
               <footer id="footer" class="container">
                  <div class="row">
                     <div class="3u 6u(medium) 12u$(small)">

                        <!-- Links -->
                           <section class="widget links">
                              <h3>Random Stuff</h3>
                              <ul class="style2">
                                 <li><a href="#">Etiam feugiat condimentum</a></li>
                                 <li><a href="#">Aliquam imperdiet suscipit odio</a></li>
                                 <li><a href="#">Sed porttitor cras in erat nec</a></li>
                                 <li><a href="#">Felis varius pellentesque potenti</a></li>
                                 <li><a href="#">Nullam scelerisque blandit leo</a></li>
                              </ul>
                           </section>

                     </div>
                     <div class="3u 6u$(medium) 12u$(small)">

                        <!-- Links -->
                           <section class="widget links">
                              <h3>Random Stuff</h3>
                              <ul class="style2">
                                 <li><a href="#">Etiam feugiat condimentum</a></li>
                                 <li><a href="#">Aliquam imperdiet suscipit odio</a></li>
                                 <li><a href="#">Sed porttitor cras in erat nec</a></li>
                                 <li><a href="#">Felis varius pellentesque potenti</a></li>
                                 <li><a href="#">Nullam scelerisque blandit leo</a></li>
                              </ul>
                           </section>

                     </div>
                     <div class="3u 6u(medium) 12u$(small)">

                        <!-- Links -->
                           <section class="widget links">
                              <h3>Random Stuff</h3>
                              <ul class="style2">
                                 <li><a href="#">Etiam feugiat condimentum</a></li>
                                 <li><a href="#">Aliquam imperdiet suscipit odio</a></li>
                                 <li><a href="#">Sed porttitor cras in erat nec</a></li>
                                 <li><a href="#">Felis varius pellentesque potenti</a></li>
                                 <li><a href="#">Nullam scelerisque blandit leo</a></li>
                              </ul>
                           </section>

                     </div>
                     <div class="3u 6u$(medium) 12u$(small)">

                        <!-- Contact -->
                           <section class="widget contact last">
                              <h3>Contact Us</h3>
                              <ul>
                                 <li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
                                 <li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
                                 <li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
                                 <li><a href="#" class="icon fa-dribbble"><span class="label">Dribbble</span></a></li>
                                 <li><a href="#" class="icon fa-pinterest"><span class="label">Pinterest</span></a></li>
                              </ul>
                              <p>1234 Fictional Road<br />
                              Nashville, TN 00000<br />
                              (800) 555-0000</p>
                           </section>

                     </div>
                  </div>
                  <div class="row">
                     <div class="12u">
                        <div id="copyright">
                           <ul class="menu">
                              <li><script type="text/javascript">
copyright=new Date();
update=copyright.getFullYear();
document.write("©" + update + " " + "Todos lo Derechos Reservados");
</script> </li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li><li>Configurado: <a href="http://adaptacionesweb.es.tl/">AdaptacionesWeb</a></li>
                           </ul>
                        </div>
                     </div>
                  </div>
               </footer>
            </div>

         </div>

      <!-- Scripts -->

         <script src="https://dl.dropboxusercontent.com/s/qpoe5bt9iqoyo64/jquery.min.js"></script>
         <script src="https://dl.dropboxusercontent.com/s/6g0oxdrfrbey79h/jquery.dropotron.min.js"></script>
         <script src="https://dl.dropboxusercontent.com/s/01r4dbiwdpi8jrb/skel.min.js"></script>
         <script src="https://dl.dropboxusercontent.com/s/d8hugd3h41dpy6f/util.js"></script>
         <!--[if lte IE 8]><script src="https://dl.dropboxusercontent.com/s/0vgqvsri9lse966/respond.min.js"></script><![endif]-->
         <script src="https://dl.dropboxusercontent.com/s/g2fyiwjzgwn16u1/main.js"></script>

   </body>
</html>
<!--- FIN TEXTO POR DEBAJO DE LA PAGINA --->


Advertencia referente al campo de contenido (p.ej. Copyright)

Código:


<!--- Advertencia referente al campo de contenido (p.ej. Copyright) --->
<style type="text/css">
td iframe
{
position:absolute;
margin-left:0%;
left: 350px;
top:5px;
}
#hpb_cssonly
{
margin-top:5px;
}

#webme_sky_ad {
position:absolute;
left:50%;top:760px;
margin-left:615px;
}

#webme_footer_textlink_dont_hide {
color: #666;
background-color: #ffffff;
position:absolute;left:70px;
}
</style>

<!--- FIN Advertencia referente al campo de contenido (p.ej. Copyright) --->


CSS-Code sin Style Tags

Código:

<!-- CSS-Code sin Style Tags -->
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;}
<!-- FIN CSS-Code sin Style Tags -->


TEXTO DENTRO DE LA PAGINA PRINCIPAL
Código:

<!--- TEXTO DENTRO DE LA PAGINA PRINCIPAL --->
         
         <!-- Banner -->
            <div id="banner-wrapper">
               <div id="banner" class="box container">
                  <div class="row">
                     <div class="7u 12u(medium)">
                        <h2>Hi. This is Verti.</h2>
                        <p>It's a free responsive site template by HTML5 UP</p>
                     </div>
                     <div class="5u 12u(medium)">
                        <ul>
                           <li><a href="#" class="button big icon fa-arrow-circle-right">Ok let's go</a></li>
                           <li><a href="#" class="button alt big icon fa-question-circle">More info</a></li>
                        </ul>
                     </div>
                  </div>
               </div>
            </div>

         <!-- Features -->
            <div id="features-wrapper">
               <div class="container">
                  <div class="row">
                     <div class="4u 12u(medium)">

                        <!-- Box -->
                           <section class="box feature">
                              <a href="#" class="image featured"><img src="https://dl.dropboxusercontent.com/s/ptjmsqyzb4oi6fc/pic01.jpg" alt="" /></a>
                              <div class="inner">
                                 <header>
                                    <h2>Put something here</h2>
                                    <p>Maybe here as well I think</p>
                                 </header>
                                 <p>Phasellus quam turpis, feugiat sit amet in, hendrerit in lectus. Praesent sed semper amet bibendum tristique fringilla.</p>
                              </div>
                           </section>

                     </div>
                     <div class="4u 12u(medium)">

                        <!-- Box -->
                           <section class="box feature">
                              <a href="#" class="image featured"><img src="https://dl.dropboxusercontent.com/s/zq1txbldxlnbung/pic02.jpg" alt="" /></a>
                              <div class="inner">
                                 <header>
                                    <h2>An interesting title</h2>
                                    <p>This is also an interesting subtitle</p>
                                 </header>
                                 <p>Phasellus quam turpis, feugiat sit amet in, hendrerit in lectus. Praesent sed semper amet bibendum tristique fringilla.</p>
                              </div>
                           </section>

                     </div>
                     <div class="4u 12u(medium)">

                        <!-- Box -->
                           <section class="box feature">
                              <a href="#" class="image featured"><img src="https://dl.dropboxusercontent.com/s/mbti20j0ws6msu1/pic03.jpg" alt="" /></a>
                              <div class="inner">
                                 <header>
                                    <h2>Oh, and finally ...</h2>
                                    <p>Here's another intriguing subtitle</p>
                                 </header>
                                 <p>Phasellus quam turpis, feugiat sit amet in, hendrerit in lectus. Praesent sed semper amet bibendum tristique fringilla.</p>
                              </div>
                           </section>

                     </div>
                  </div>
               </div>
            </div>

         <!-- Main -->
            <div id="main-wrapper">
               <div class="container">
                  <div class="row 200%">
                     <div class="4u 12u(medium)">

                        <!-- Sidebar -->
                           <div id="sidebar">
                              <section class="widget thumbnails">
                                 <h3>Interesting stuff</h3>
                                 <div class="grid">
                                    <div class="row 50%">
                                       <div class="6u"><a href="#" class="image fit"><img src="https://dl.dropboxusercontent.com/s/p7hwb4p5oh16u3s/pic04.jpg" alt="" /></a></div>
                                       <div class="6u"><a href="#" class="image fit"><img src="https://dl.dropboxusercontent.com/s/p7hwb4p5oh16u3s/pic04.jpg" alt="" /></a></div>
                                       <div class="6u"><a href="#" class="image fit"><img src="https://dl.dropboxusercontent.com/s/p7hwb4p5oh16u3s/pic04.jpg" alt="" /></a></div>
                                       <div class="6u"><a href="#" class="image fit"><img src="https://dl.dropboxusercontent.com/s/p7hwb4p5oh16u3s/pic04.jpg" alt="" /></a></div>
                                    </div>
                                 </div>
                                 <a href="#" class="button icon fa-file-text-o">More</a>
                              </section>
                           </div>

                     </div>
                     <div class="8u 12u(medium) important(medium)">

                        <!-- Content -->
                           <div id="content">
                              <section class="last">
                                 <h2>So what's this all about?</h2>
                                 <p>This is <strong>Verti</strong>, a free and fully responsive HTML5 site template by <a href="http://html5up.net">HTML5 UP</a>.
                                 Verti is released under the <a href="http://html5up.net/license">Creative Commons Attribution license</a>, so feel free to use it for any personal or commercial project you might have going on (just don't forget to credit us for the design!)</p>
                                 <p>Phasellus quam turpis, feugiat sit amet ornare in, hendrerit in lectus. Praesent semper bibendum ipsum, et tristique augue fringilla eu. Vivamus id risus vel dolor auctor euismod quis eget mi. Etiam eu ante risus. Aliquam erat volutpat. Aliquam luctus mattis lectus sit amet phasellus quam turpis.</p>
                                 <a href="#" class="button icon fa-arrow-circle-right">Continue Reading</a>
                              </section>
                           </div>

                     </div>
                  </div>
               </div>
            </div>
<!--- FIN TEXTO DENTRO DE LA PAGINA PRINCIPAL --->


Código de las paginas secundarias ya listo para colocar en PaginaWebGratis.es:
1. Archivo completo de la plantilla adaptada para PaginaWebGratis. Descargar todos los archivos Aquí

Si no logras aun implementarla en tu sitio web creado en PaginaWebGratis, o no queda como tu deseas no dudes en escribirme.

También puede encontrarla en mi colección de Plantillas Adaptadas para PWG
http://portafolio-adaptacionesweb.es.tl/

Cita:
PD: Responderé toda inquietud, duda, comentario o sugerencia respecto de la plantilla sin problemas.

______________
Asesoramiento técnico sobre la planificación, diseño, implementación, mantenimiento, Seo, Email Marketing, Social Media y Marketing de Contenido, que necesita tu sitio web configurado en PaginaWebGratis.

↑
Mensaje04-03-2017, 17:20 (UTC)    
Título del mensaje:
Responder citando
Buen diseño, ahora es "Responsive design" es lo que está de moda dado a su gran utilidad en diferentes plataformas y equipo.

Saludos!
______________
CssPlantillas - Moderador Paginawebgratis.es

SIGUENOS EN REDES SOCIALES:
↑
Mensaje05-03-2017, 16:00 (UTC)    
Título del mensaje:
Responder citando
cssplantillas escribió:
Buen diseño, ahora es "Responsive design" es lo que está de moda dado a su gran utilidad en diferentes plataformas y equipo.

Saludos!


Saludos cssplantillas,

Gracias por el comentarios, efectivamente es Responsive design y ademas cuenta con tres sub-paginas (Left Sidebar, Right Sidebar, No Sidebar) adaptables para cualquier proyecto.

1 Fuerte Abrazo.
______________
Asesoramiento técnico sobre la planificación, diseño, implementación, mantenimiento, Seo, Email Marketing, Social Media y Marketing de Contenido, que necesita tu sitio web configurado en PaginaWebGratis.



Ultima edición por newsletteradaptacionesweb el Dom Mar 05, 2017 12:04 pm; editado 1 vez
↑
Mensaje15-03-2017, 21:52 (UTC)    
Título del mensaje: Insertar la ultima parte del codigo
Responder citando
No se donde insertar la ultima parte del código, es decir lo que dentro de la pagina principal.
Gracias
↑
Mensaje20-03-2017, 12:14 (UTC)    
Título del mensaje: Re: Insertar la ultima parte del codigo
Responder citando
blog-di-prova escribió:
No se donde insertar la ultima parte del código, es decir lo que dentro de la pagina principal.
Gracias


Gracias por usar esta fabulosa plantilla.

Ese código debes colocarlo dentro de tu pagina principal.

entras a la administración/crear paginas/pagina principal

1 Fuerte Abrazo.

PD: Debes cambiar la edición normal por la edición en HTML dentro de la pagina principal, luego copias el código que te falta.
______________
Asesoramiento técnico sobre la planificación, diseño, implementación, mantenimiento, Seo, Email Marketing, Social Media y Marketing de Contenido, que necesita tu sitio web configurado en PaginaWebGratis.



Ultima edición por newsletteradaptacionesweb el Lun Mar 20, 2017 8:16 am; editado 1 vez
↑
Mostrar mensajes anteriores:   
  • Página 1 de 1

  •  
    • Saltar a:  


Powered by phpBB © 2001, 2005 phpBB Group

© 2024 webme GmbH, Alemania. Todos los derechos reservados.