[Diseño para Css design] Portfolio Sites

Juan_fer · #1 [Diseño para Css design] Portfolio Sites el Miér Mar 03, 2010 9:34 pm

Juan_fer

~ Admin TFW ~

Sexo:

Mensajes: 3262

Reputacion: 109

Puntos: 10097

Registrado: 16/11/2009

Localización: mexico

Edad: 17

vista previa

vista previa en vivo
http://img26.xooimage.com/files/5/e/3/index-196dd22.html

texto por encima de la pagina

Código:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Portfolio</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="http://img44.xooimage.com/files/8/7/c/style-196dbaa.css" type="text/css" media="all" /> <script src="http://img21.xooimage.com/files/b/b/3/jquery-1.3.2.min-b8f180.js" type="text/javascript"></script> <script src="http://img2.xooimage.com/files/6/1/b/jquery.jcarousel.pack-b1736a.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $('.projects').jcarousel({ scroll: 1, wrap: 'both' }); }); </script> </head>  <body>  <div id="header"> <div class="shell">  <div class="left"> <h1 id="logo"><a href="http://www.free-css.com/">Portfolio</a></h1> <p class="site-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et erat massa, vitae varius massa. Phasellus ut dolor erat. Aliquam adipiscing erat nec lectus feugiat congue.</p> </div>   <div class="right">  <div id="navigation"> <ul> <li><a href="http://www.free-css.com/" class="active">home</a></li> <li><a href="http://www.free-css.com/">about us</a></li> <li><a href="http://www.free-css.com/">services</a></li> <li><a href="http://www.free-css.com/">portfolio</a></li> <li><a href="http://www.free-css.com/">contact</a></li> </ul> </div>   <div id="twitter"> <div class="twitts"> <ul> <li> <span>Tobias Anderson:</span> Lorem ipsum dolor sit amet, consecteturadipiscing elit. <a href="http://www.free-css.com/">Donec et erat massa</a>, vitae varius massa. <small>3 days ago</small> </li> <li> <span>Tobias Anderson:</span> Lorem ipsum dolor sit amet, consecteturadipiscing elit. <a href="http://www.free-css.com/">Donec et erat massa</a>, vitae varius massa. <small>3 days ago</small> </li> <li> <span>Tobias Anderson:</span> Lorem ipsum dolor sit amet, consecteturadipiscing elit. <a href="http://www.free-css.com/">Donec et erat massa</a>, vitae varius massa. <small>3 days ago</small> </li> </ul> <a href="http://www.free-css.com/" class="follow-button notext">Follow me on Twitter</a> </div> </div>  </div> </div> </div>   <div id="container"> <div id="container-b"> <div class="shell">

texto por debajo de la pagina

Código:: </div> </div> </div>    <div id="footer"> <div class="shell"> <div class="cl"> </div>  <div class="left"> <h2>Welcome to our site!</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div>   <div class="right"> <h2>Get in touch!</h2> <p>We will be happy to hear from you, no matter the subject. For contacting us please use our contact page or the info bellow.</p> <p>+123456789<br /> +123456789<br /> <a href="http://www.free-css.com/">office[at]portfoliosite[dot]com</a></p> </div>   <div class="cl"> </div> <p class="copy">© Sitename.com. Design by <a href="http://chocotemplates.com">ChocoTemplates.com</a> | Adaptado por <a href="http://www.help-4-pwg.es.tl/">help-4-pwg</a></p> </div> </div>  </body> </html>

Css sin style tags

Código:: * { padding:0; margin:0; outline:0; } body { font-family: Arial, sans-serif; font-size:13px; line-height:17px; color:#333; background:#000 url(http://img27.xooimage.com/files/6/4/9/body-t-17e3de6.jpg) repeat-x center 0; } a img { border:0; } .notext { font-size:0; line-height:0; display:block; text-indent: -4000px; background-position:0 0; background-repeat:no-repeat; } a { color:#63b0f7; text-decoration: underline; cursor:pointer; } a:hover { color:#114868; text-decoration: none; } .left, .alignleft { float:left; display:inline; } .right, .alignright { float:right; display:inline; } .cl { font-size:0; line-height:0; height:0; display:block; clear:both; } h2 { font-size:25px; font-weight: bold; line-height:28px; } h3 { font-size:18px; font-weight: bold; line-height:21px; } h4 { font-size:14px; font-weight: bold; line-height:17px; text-transform: uppercase; color:#505f77; } .shell { width:966px; margin:0 auto; } #header { height:340px; background:url(http://img49.xooimage.com/files/6/e/e/header-17e3df9.jpg) no-repeat center 0; overflow:hidden; } #header .shell{ padding:20px 0 0 0;} #header .left{ width:410px; } #header .right{ width:495px; } #footer { height:340px; background:url(http://img45.xooimage.com/files/1/8/1/footer-17e3e07.jpg) repeat-x center 0; color:#fff; } #footer h2{ padding-bottom:5px; } #footer .left{ width:550px; } #footer .right{ width:350px; } #footer p{ padding-bottom:15px; } #footer p.copy{ background:url(http://img49.xooimage.com/files/1/6/b/copy-17e3e19.gif) no-repeat center 0; font-size:11px; color:#565656; text-align: center; padding-top:8px; margin-top:25px;} #footer p.copy a{ color:#565656; } #footer .shell{ padding:15px 0; } #container { background:#656b75 url(http://img21.xooimage.com/files/3/1/c/container-bg-17e3e2f.gif) repeat-x 0 0; } #container-b { background:url(http://img47.xooimage.com/files/d/a/e/shadows-bottom-17e3e48.gif) no-repeat center bottom; } #container .shell{ background:url(http://img49.xooimage.com/files/8/2/e/shadows-top-17e3e58.gif) no-repeat center 0; padding:20px 0; min-height:260px; } h1#logo { font-size:0; line-height:0; width:256px; height:36px; } h1#logo a{ display:block; height:36px; text-indent: -4000px; background:url(http://img49.xooimage.com/files/8/b/0/logo-17e3e6c.png); } p.site-info { color:#fff; font-size:14px; line-height:19px; font-weight: bold; text-transform: uppercase; padding-top:10px; } #navigation { text-align: right; font-weight: bold; text-transform: uppercase; font-size:14px; line-height:18px; height:70px;} #navigation ul{ list-style-type: none; } #navigation ul li{ display:inline; padding-left:15px; } #navigation ul li a{ text-decoration: none; color:#fff; } #navigation ul li a:hover, #navigation ul li a.active { color:#ffe6a5; } #twitter { width:465px; height:234px; background:url(http://img41.xooimage.com/files/f/3/9/twitter-17e3e7b.png) no-repeat 0 0; margin:0 0 0 auto; } .twitts { font-size:12px; line-height:17px; color:#fff; font-family: Georgia, serif; font-style: italic; position:relative; padding:45px 10px 0 0; margin-left:85px;} .twitts ul{ list-style-type: none; } .twitts ul li{ padding-bottom:5px; } .twitts ul li span{ color:#ffd451; } .twitts ul li small{ font-size:10px; color:#8b8b8b; } a.follow-button { position:absolute; top:-40px; left:-109px; width:174px; height:50px; background:url(http://img47.xooimage.com/files/f/9/b/followme-17e3ea8.gif) no-repeat 0 0;} .projects { position:relative; } .projects ul{ list-style-type: none; height:270px; overflow:hidden; width:966px; position:relative; } .projects ul li{ float:left; width:950px; height:270px; background:url(http://img23.xooimage.com/files/6/1/4/project-17e3ec3.png) no-repeat 0 0; padding:8px;} .projects ul li .project-info{ float:left; width:295px; padding:10px; } .projects ul li .project-image{ float:right; width:615px; height:254px; position:relative; overflow:hidden; font-size:0; line-height:0;} .projects p { padding-bottom:15px; } .projects h4 { padding:5px 0 10px 0; } /** jCarousel **/ .projects .jcarousel-clip { width:966px; height:270px; overflow:hidden; position:relative; } .jcarousel-prev, .jcarousel-next { font-size:0; line-height:0; width:49px; height:49px; cursor:pointer; position:absolute; top:106px; z-index:2;} .jcarousel-prev { left:-20px; background:url(http://img27.xooimage.com/files/7/9/3/prev-button-17e3ecd.png); } .jcarousel-next { right:-20px; background:url(http://img41.xooimage.com/files/4/c/6/next-button-17e3edf.png); } /* .jcarousel-prev-disabled, .jcarousel-next-disabled { display:none !important;} */ 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;}

si quieres tener esta galeria solo pon este code donde quieras que aparesca (solo funciona con este diseño)

Código:: <div class="projects"> <ul> <li> <div class="project-info"> <h3>DomainName.com</h3> <h4>WEB</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur.</p> <p><strong>Visit site:</strong> <a href="http://www.free-css.com/">www.domain.com</a></p> </div> <div class="project-image"> <a href="http://www.free-css.com/"><img src="css/images/project1.jpg" alt="" /></a> </div> </li> <li> <div class="project-info"> <h3>DomainName.com</h3> <h4>WEB</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur.</p> <p><strong>Visit site:</strong> <a href="http://www.free-css.com/">www.domain.com</a></p> </div> <div class="project-image"> <a href="http://www.free-css.com/"><img src="css/images/project2.jpg" alt="" /></a> </div> </li> <li> <div class="project-info"> <h3>DomainName.com</h3> <h4>WEB</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur.</p> <p><strong>Visit site:</strong> <a href="http://www.free-css.com/">www.domain.com</a></p> </div> <div class="project-image"> <a href="http://www.free-css.com/"><img src="css/images/project1.jpg" alt="" /></a> </div> </li> <li> <div class="project-info"> <h3>DomainName.com</h3> <h4>WEB</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur.</p> <p><strong>Visit site:</strong> <a href="http://www.free-css.com/">www.domain.com</a></p> </div> <div class="project-image"> <a href="http://www.free-css.com/"><img src="css/images/project2.jpg" alt="" /></a> </div> </li> <li> <div class="project-info"> <h3>DomainName.com</h3> <h4>WEB</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur.</p> <p><strong>Visit site:</strong> <a href="http://www.free-css.com/">www.domain.com</a></p> </div> <div class="project-image"> <a href="http://www.free-css.com/"><img src="css/images/project1.jpg" alt="" /></a> </div> </li> <li> <div class="project-info"> <h3>DomainName.com</h3> <h4>WEB</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur.</p> <p><strong>Visit site:</strong> <a href="http://www.free-css.com/">www.domain.com</a></p> </div> <div class="project-image"> <a href="http://www.free-css.com/"><img src="css/images/project2.jpg" alt="" /></a> </div> </li> <li> <div class="project-info"> <h3>DomainName.com</h3> <h4>WEB</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur.</p> <p><strong>Visit site:</strong> <a href="http://www.free-css.com/">www.domain.com</a></p> </div> <div class="project-image"> <a href="http://www.free-css.com/"><img src="css/images/project1.jpg" alt="" /></a> </div> </li> <li> <div class="project-info"> <h3>DomainName.com</h3> <h4>WEB</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur.</p> <p><strong>Visit site:</strong> <a href="http://www.free-css.com/">www.domain.com</a></p> </div> <div class="project-image"> <a href="http://www.free-css.com/"><img src="css/images/project2.jpg" alt="" /></a> </div> </li> <li> <div class="project-info"> <h3>DomainName.com</h3> <h4>WEB</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur.</p> <p><strong>Visit site:</strong> <a href="http://www.free-css.com/">www.domain.com</a></p> </div> <div class="project-image"> <a href="http://www.free-css.com/"><img src="css/images/project1.jpg" alt="" /></a> </div> </li> <li> <div class="project-info"> <h3>DomainName.com</h3> <h4>WEB</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur.</p> <p><strong>Visit site:</strong> <a href="http://www.free-css.com/">www.domain.com</a></p> </div> <div class="project-image"> <a href="http://www.free-css.com/"><img src="css/images/project2.jpg" alt="" /></a> </div> </li> </ul> </div>