Siringe

Siringe

Diseño Básico CSS


Detalles


  • Multipropósito

  • Codigos adicionales para el contenido

  • Diseño Adaptado a PaginaWebGratis.es

  • Archivos Descargables

  • Licencia Creative Commons


Gratis, simple, elegante, diseño estilo blog. 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="https://demo.pwgpro.com.ve/Siringe/style.css">
    <script src="https://use.fontawesome.com/b4e760a65b.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link rel="shortcut icon" type="image/x-icon" href="http://pwgpro.esy.es/descarga/3226Gota-01.ico">
    <script>
        posicionarMenu();

        $(window).scroll(function() {
            posicionarMenu();
        });

        function posicionarMenu() {
            var altura_del_header = $('.top').outerHeight(true);
            var altura_del_menu = $('.header').outerHeight(true);

            if ($(window).scrollTop() >= altura_del_header) {
                $('.header').addClass('fixed');
                $('.wrapper').css('margin-top', (altura_del_menu) + 'px');
            } else {
                $('.header').removeClass('fixed');
                $('.wrapper').css('margin-top', '0');
            }
        }
    </script>
    <title>Siringe | Pwgpro Theme</title>
</head>

<body>
    <div class="top"></div>
    <header class="header">
        <a href="#">
            <h1 onselectstart="return false" id="Logo">Siringe</h1>
            <div class="logo"></div>
        </a>
        <ul class="mainmenu">
            <li><a href="#"><i class="fa fa-upload" aria-hidden="true"></i> Subir</a></li>
            <li><a href="#"><i class="fa fa-phone" aria-hidden="true"></i> Contactar</a></li>
            <li><a href="#"><i class="fa fa-comment" aria-hidden="true"></i> Comentar</a></li>
            <li><a href="explorar.html"><i class="fa fa-search" aria-hidden="true"></i> Explorar</a></li>
        </ul>
    </header>
    <div class="titulo">
        <div class="capa">
            <hgroup>
                <h1>Vivamus molestie gravida turpis</h1>
                <h3>Integer vitae libero ac risus egestas placerat.</h3>
            </hgroup>
            <div id="author"><img draggable="false" src="https://k60.kn3.net/D/B/A/6/8/1/4EB.jpg"></div>
            <p><i class="fa fa-user" aria-hidden="true"></i> Allison Carvajal</p>
        </div>
    </div>
    <section>
</section>
    <footer>
        <div class="box">
            <h1 id="Logo">Siringe</h1>
            <div class="logo"></div>
            <p>
                Un diseño autentico de pwgpro ®
                <br> Siringe 2016 All rights reserved
            </p>
            <div class="social_icons">
                <a href="http://facebook.com/webpwgpro"><i class="fa fa-facebook" aria-hidden="true"></i></a>
                <a href="twitter.com/pwgpro"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                <a href="https://plus.google.com/"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
                <a href="https://www.instagram.com/gabriel713_717"><i class="fa fa-instagram" aria-hidden="true"></i></a>
                <a href="https://ve.linkedin.com/in/gabrielnavarro95"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
            </div>
        </div>
        <div class="box">
            <h1>Donec quis dui at interdum</h1>
            <ul>
                <li><a href="#"><i class="fa fa-css3" aria-hidden="true"></i> CSS</a></li>
                <li><a href="#"><i class="fa fa-paint-brush" aria-hidden="true"></i> Creative</a></li>
                <li><a href="#"><i class="fa fa-tint" aria-hidden="true"></i> Colorful</a></li>
            </ul>
        </div>
        <div class="box no_margin_right">
            <h1>Cras ornare tristique elit.</h1>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
            <script>
                <!--
                document.write(unescape("            </div>
            <a href="http://pwgpro.es.tl">
            	<div id="by"><img src="http://i.imgur.com/NPM2Syy.png" draggable="false"></div>
                </a>"));
                //-->
            </script>
    </footer>
</body>

</html>
<h1 class="categoria">Quisque a lectus.</h1>
<div id="square"><!--Divisor de diseño (NO ELIMINAR)--></div>
<article class="post">             <img src="https://k61.kn3.net/3/7/8/1/8/5/B4B.jpg" alt="" />
<h1><a href="post.html">Praesent placerat risus quis eros.</a></h1>
<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>
<a class="full" href="post.html"> Ver m&aacute;s</a>         </article>         <article class="post">             <img src="https://k60.kn3.net/D/6/9/4/0/1/CBF.jpg" alt="" />
<h1><a href="post.html">Fusce pellentesque suscipit nibh.</a></h1>
<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>
<a class="full" href="post.html"> Ver m&aacute;s</a>         </article>         <article class="post no_margin_right">             <img src="https://k60.kn3.net/D/A/4/0/0/9/4E9.jpg" alt="" />
<h1><a href="post.html">Vestibulum commodo felis quis tortor.</a></h1>
<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>
<a class="full" href="post.html"> Ver m&aacute;s</a>         </article>
<h1 class="categoria">Vestibulum auctor dapibus neque.</h1>
<div id="square"><!--Divisor de diseño (NO ELIMINAR)--></div>
<article class="post post_video">             <iframe src="https://player.vimeo.com/video/78507076" width="300" height="200" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p><a href="https://vimeo.com/78507076">Making of Flashmob Venezuela</a> from <a href="https://vimeo.com/froidinternational">Froid</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
</article>         <article class="post post_video ">             <iframe src="https://player.vimeo.com/video/86915269" width="300" height="200" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p><a href="https://vimeo.com/86915269">Venezuela est&aacute; en la calle</a> from <a href="https://vimeo.com/nachospinola">Nacho Sp&iacute;nola</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
</article>         <article class="post post_video no_margin_right">             <iframe src="https://player.vimeo.com/video/78484694" width="300" height="200" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p><a href="https://vimeo.com/78484694">Flashmob Venezuela</a> from <a href="https://vimeo.com/froidinternational">Froid</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
</article>
        <div id="mainimage">
            <img src="https://k60.kn3.net/D/6/9/4/0/1/CBF.jpg">
        </div>
        <center>
            <h1>Puede que éste no sea el mejor titulo</h1>
            <h3>Pero al menos cumple su función</h3>
            <h4><i class="fa fa-pencil"></i> Gabriel Navarro</h4></center>
        <div id="desarrollo">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.
            </p>
            <blockquote>
                Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna
            </blockquote>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>

            <h1>Encabezado 1</h1>
            <h2>Encabezado 2</h2>
            <h3>Encabezado 3</h3>

        </div>
        <aside>
            <h1>Acceso directo</h1>
            <ul>
                <li><a href="#">Articulo</a></li>
                <li><a href="#">Articulo</a></li>
                <li><a href="#">Articulo</a></li>
                <li><a href="#">Articulo</a></li>
            </ul>
            <img src="http://placehold.it/180x300">
        </aside>
comments powered by Disqus