Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje23-01-2017, 16:25 (UTC)    
Título del mensaje: [Diseño para CSS-Design] Portfolio Personal Responsive
Responder citando
Este es mi primer 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 un hermoso templaste o plantilla de tipo personal.



Detalles de la plantilla adaptada:
Web personal Portfolio, es una plantilla creada para fotógrafos, directores y diseñadores de moda y cualquier tipo de blogs personales. Es responsive y lista para diferentes navegadores y también para móvil, smartphones iphone, android y otros teléfono inteligente.

Licencia: Bajo Creative Commons Attribution 3.0.
Imágenes de FreeGreatPictures

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 --->
<!--
Author: W3layouts
Author URL: http://w3layouts.com
Adaptador URL: http://adaptacionesweb.es.tl
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html>
   <head>
      <title>portfolio Website Template | Home :: W3layouts</title>
      <link href="https://dl.dropboxusercontent.com/s/328bfl3t71c850f/style.css" rel="stylesheet" type="text/css"  media="all" />
      <link href='http://fonts.googleapis.com/css?family=Karla' rel='stylesheet' type='text/css'>
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
      <script type="text/javascript">
      jQuery(document).ready(function($) {
         $(".scroll").click(function(event){      
            event.preventDefault();
            $('html,body').animate({scrollTop:$(this.hash).offset().top},1200);
         });
      });
      </script>
   </head>
   <body>
      <!---start-wrap--->
      <!---start-header--->
   <div class="header1">
      <div class="wrap">
         <!---start-logo--->
         <div class="logo">
            <a href="#">portfolio</a>
         </div>
         <!---End-logo--->
         <!---start-top-nav--->
         <div class="top-nav">
            <ul>
               <li class="active"><a href="#me" class="scroll">Me</a></li>
               <li><a href="#skills" class="scroll">Skills</a></li>
               <li><a href="#works" class="scroll">Work</a></li>
               <li><a href="#contact" class="scroll">Contact</a></li>
            </ul>
         </div>
         <div class="clear"> </div>
         <!---End-top-nav--->
        </div>
   </div>
      <!---End-wrap--->
<!--- FIN  TEXTO POR ENCIMA DE LA PAGINA --->


Texto por debajo de la pagina

Código:


<!--- TEXTO POR DEBAJO DE LA PAGINA --->
<div class="contact" id="contact">
         <h3>Feed Back</h3>
         <p>Reader will be distracted by the readable content of a page when looking at its layout.</p>
         <form>
         <input type="text" class="textbox" value="Name:" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name';}">
         <input type="text" class="textbox" value="Email:" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}">
         <textarea value="Message:" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Message';}">Message</textarea>
         <input type="submit" value="Send">
         </form>
      </div>
      <div class="catch-me">
         <h3>SAY HELLO</h3>
         <p>Reader will be distracted by the readable content of a page when looking at its layout.Ipsum is simply dummy text of the printing and typesetting industry.when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
         <ul>
            <li><a href="#"><img src="https://dl.dropboxusercontent.com/s/ydud89mcqayi1mz/facebook.png" title="facebook" /></a></li>
            <li><a href="#"><img src="https://dl.dropboxusercontent.com/s/7zenwoqr186tm5l/rss.png" title="Rss" /></a></li>
            <li><a href="#"><img src="https://dl.dropboxusercontent.com/s/wfghb2fs3isse38/googlepluse.png" title="Googlepluse" /></a></li>
         </ul>
      </div>
      <div class="footer">
         <p><script type="text/javascript">
copyright=new Date();
update=copyright.getFullYear();
document.write("©" + update + " " + "Todos los Derechos Reservados");
</script> | Design by <a href="http://w3layouts.com/">w3layouts</a> | Adapted by <a href="http://adaptacionesweb.es.tl/">adaptacionesweb</a></p>
      </div>
   </div>
   </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:80px;}
#hpb_cssonly {margin-top:10px;}#webme_sky_ad {
position:absolute;
left:50%;top:990px;
margin-left:480px;
}
#webme_footer_textlink_dont_hide {
color: #f5f5f5;
background-color: #f5f5f5;
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 --->
<div class="content">
<div class="grid1" id="me"><a href="#"><img src="https://dl.dropboxusercontent.com/s/neo6msobq6anbk2/g2.png" title="name" alt="" /></a>
<h3>Hi,I'm lipsum</h3>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters<a href="#">Twitter</a>.</p>
</div>
<div class="grid2" id="skills">
<h3>Skill set</h3>
<p>be distracted by the readable content of a page when looking at its layout.</p>
<ul>
    <li><img src="https://dl.dropboxusercontent.com/s/zjaqd3eyvmyuge2/s2.png" title="Artdirector" alt="" />                <a href="#">Art Director</a></li>
    <li><img src="https://dl.dropboxusercontent.com/s/tipnodszyzdaxop/s6.png" title="Artdirector" alt="" />                <a href="#">Art Making</a></li>
    <li><img src="https://dl.dropboxusercontent.com/s/36kzscwje8k37x0/s3.png" title="Artdirector" alt="" />                <a href="#">Photo Editor</a></li>
    <li><img src="https://dl.dropboxusercontent.com/s/4ov2me28q0c7zmh/g6.png" title="Artdirector" alt="" />                <a href="#">graphic design</a></li>
</ul>
</div>
<div class="grid3">
<div class="grid3-header" id="works">
<h3>Project Name</h3>
<p>reader will be distracted by the readable content of a page when looking at its layout.</p>
</div>
<div class="grid3-content">
<div class="grid3-left"><br />
<h3>Project</h3>
<p>Project-Name Lorem Ipsum is simply dummy text of the printing and typesetting industry.when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
<br />
<ul>
    <li><a href="#"><img src="https://dl.dropboxusercontent.com/s/sx7pinaohacg815/icon1.png" titl="Icon-Name" alt="" /></a></li>
    <li><a href="#"><img src="https://dl.dropboxusercontent.com/s/v3iy4gakn5c6rs6/icon2.png" titl="Icon-Name" alt="" /></a></li>
    <li><a href="#"><img src="https://dl.dropboxusercontent.com/s/dn4i80cpljplkch/icon3.png" titl="Icon-Name" alt="" /></a></li>
    <li><a href="#"><img src="https://dl.dropboxusercontent.com/s/dn4i80cpljplkch/icon3.png" titl="Icon-Name" alt="" /></a></li>
</ul>
<a class="button" href="#">View Project</a></div>
<div class="grid3-right"><a href="#"><img src="https://dl.dropboxusercontent.com/s/ark9i48dtqtop9q/v1.png" title="project-name" alt="" /></a></div>
<div class="clear">&nbsp;</div>
</div>
</div>
<div class="twiiter-box"><a href="#"><img src="https://dl.dropboxusercontent.com/s/b4yx0mfwvl3nkam/twitt.png" title="twitter-count" alt="" /></a>
<p>be distracted by the readable content of a page when <a href="#">#looking at its layout.</a> Via <a href="#">@readabled</a></p>
</div>
</div>
<!--- FIN TEXTO DENTRO DE LA PAGINA PRINCIPAL --->


Descargue esta plantilla e inicie un sitio web de portafolio personal que admita cualquier navegador.

Código para tu archivo personal y listo para colocar en PaginaWebGratis.es:
1. Archivo Index adaptado y listo para PaginaWebGratris. Descargar Index Aquí
2. Archivos completos de la plantilla (css, images, js, fonts). Descargar Archivos Aquí.

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

Soporte para la adaptación de la plantilla en general:
http://adaptacionesweb.blogspot.com/2017/01/plantilla-portfolio-personal-web.html

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.



Ultima edición por newsletteradaptacionesweb el Mie Mar 01, 2017 12:12 am; editado 5 veces
↑
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.