Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje11-01-2011, 23:18 (UTC)    
Título del mensaje: Design Game Site
Responder citando
Para ver una imagen del diseño la puedes ver con este linck:
Cita:
http://img38.imageshack.us/img38/6240/catsks.jpg


Codigo 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Game Website Template, Free Download, XHTML/CSS Layout</title>
<meta name="keywords" content="Game Website Template, free templates, website templates, CSS, XHTML" />
<meta name="description" content="Game Website Template - download free XHTML/CSS files from profesionalwebdesign.es.tl" />
<link href="templatemo_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="templatemo_wrapper_outer">
<div id="templatemo_wrapper_inner">
   
    <div id="templatemo_banner"></div> <!-- end of banner -->
   
    <div id="templatemo_menu">
       <ul>
            <li><a href="#" class="current">Home</a></li>
            <li><a href="#">Nombre</a></li>
            <li><a href="#">Nombre</a></li>
            <li><a href="#">Nombre</a></li>
            <li><a href="#">Nombre</a></li>
        </ul>
    </div> <!-- end of menu -->
   
    <div id="templatemo_content_wrapper">
   
       <div class="templatemo_side_bar margin_right_10">
           
            <div class="header_01">Menu de Juegos</div>
               <ul>
                   <li><a href="#">Nombre</a></li>
                    <li><a href="#">Nombre</a></li>
                    <li><a href="#">Nombre</a></li>
                    <li><a href="#">Nombre</a></li>
                    <li><a href="#">Nombre</a></li>
                    <li><a href="#">Nombre</a></li>
                    <li><a href="#">Nombre</a></li>
                    <li><a href="#">Nombre</a></li>
                </ul>
         
            <div class="margin_bottom_20 horizontal_divider"></div>
         <div class="margin_bottom_20"></div>

            <div class="header_01">Busca el juego que buscas:</div>     
            <form action="" method="post">
                  <input type="text" id="search_field" />
                  <input type="submit" value="" id="search_button" />
            </form>
            <div class="margin_bottom_20"></div>
        </div> <!-- end of left side bar -->
       
        <div class="templatemo_content margin_right_10">
       
           <div class="content_section">
                <div class="header_02">Post 1</div>
              <p><span>Escriba aqui algun texto del post pero recuerde dejar mas informacion para el Read More...</p>
              <div class="margin_bottom_20"></div>
                <div class="rc_btn_01 fl"><a href="http://">Read More...</a></div>
               
                <div class="cleaner"></div>
            </div>
           
            <div class="margin_bottom_20 horizontal_divider"></div>
         <div class="margin_bottom_20"></div>
           
            <div class="content_section">
                <div class="header_02">Post 2</div>
                <p>Escriba aqui algun texto del post pero recuerde dejar mas informacion para el Read More... </p>
           <div class="margin_bottom_20"></div>
              <div class="rc_btn_01 fl"><a href="http://">Read More</a></div> 
                <div class="cleaner"></div>             
            </div>
           
           <div class="margin_bottom_40"></div>
        </div> <!-- end of content -->
       
        <div class="templatemo_side_bar">
             
            <div class="header_01">Ultimas Noticias</div>
           
            <div class="latest_news border_bottom">
                <div class="header_03"><a href="http://">Noticia:</a></div>
                <p>Lo que quieras poner de tu noticia.</p>
         </div>
                       
            <div class="margin_bottom_10"></div>
           
         <div class="latest_news">
                <div class="header_03"><a href="http://">Noticia</a></div>
                <p>Lo que quieras poner de tu noticia.</p>
         </div>
           
                       
          <div class="margin_bottom_10"></div>
        </div> <!-- end of right side bar -->
       
        <div class="cleaner"></div>   
    </div> <!-- end of content wrapper -->
   
</div>
</div>


Por Abajo:

Código:

 <div id="templatemo_footer">
        Adaptado por:<a href="http://profesionalwebdesign.es.tl/">profesionalwebdesign.es.tl</a> | is powered by:<a href="http://" target="_parent">Tu Web</a>
      </div> <!-- end of footer -->
    <div class="margin_bottom_10"></div>
   
    <div class="content_section">
       <center>
       <a href="http://validator.w3.org/check?uri=referer"><img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" width="88" height="31" vspace="8" border="0" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px"  src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" vspace="8" border="0" /></a>
   </center>
      <div class="margin_bottom_10"></div>
   </div>
</body>
</html>


CSS- Sin style Tags:

Código:
/*
CSS Credit: http://www.templatemo.com
*/

body {
   margin: 0;
   padding: 0;
   line-height: 1.5em;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #999;
   background: #272525 url(http://img7.imageshack.us/img7/7194/templatemotopbg.jpg) repeat-x;
}

a:link, a:visited { color: #FFFFFF; text-decoration: none; font-weight: normal; }
a:active, a:hover { color: #99FF00; text-decoration: underline; }

p {
   margin: 0px;
   padding: 0px;
   text-align: justify;
}

img {
   margin: 0px;
   padding: 0px;
   border: none;
}

.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px;  }

.margin_bottom_10 { clear: both; width: 100%; height: 10px; font-size: 1px;   }
.margin_bottom_20 { clear: both; width: 100%; height: 20px; font-size: 1px;   }
.margin_bottom_30 { clear: both; width: 100%; height: 30px; font-size: 1px;   }
.margin_bottom_40 { clear: both; width: 100%; height: 40px; font-size: 1px;   }
.margin_bottom_50 { clear: both; width: 100%; height: 50px; font-size: 1px;   }
.margin_bottom_60 { clear: both; width: 100%; height: 60px; font-size: 1px;   }

.margin_right_10 { margin-right: 10px; }
.margin_right_60 { margin-right: 60px; }

.horizontal_divider {
   background: url(http://img593.imageshack.us/img593/4346/templatemohorizontaldiv.jpg) bottom repeat-x;
}

.border_bottom {
   border-bottom: 1px dashed #000;
}

.fl {
   float: left;
}

.fr {
   float: right;
}

.rc_btn_01 a {
   clear: both;
   display: block;
   width: 120px;
   height: 25px;
   padding: 5px 0 0 0;
   font-size: 12px;
   text-align: center;
   color: #000000;
   text-decoration: none;
   border: none;
   background: url(http://img341.imageshack.us/img341/7996/templatemobutton01.png) no-repeat;
}

#templatemo_wrapper_outer {
   width: 100%;
   margin: 0 auto;
}

#templatemo_wrapper_inner {
   width: 980px;
   margin: 0 auto;
   padding: 0 5px;
   background: url(http://img46.imageshack.us/img46/550/templatemowrapperbg.png) repeat-y;
}

#templatemo_banner {
   width: 980px;
   height: 250px;
   background: url(http://img267.imageshack.us/img267/4852/templatemobannerbgy.jpg) no-repeat;
}

/* menu */

#templatemo_menu {
   clear: both;
   width: 500px;
   height: 65px;
   padding: 0 240px;
   background: url(http://img80.imageshack.us/img80/8684/templatemomenubga.jpg) no-repeat;
}

#templatemo_menu ul {
   width: 500px;
   margin: 0px;
   padding: 20px 0 0 15px;
   list-style: none;
}

#templatemo_menu ul li {
   display: inline;
}

#templatemo_menu ul li a {
   float: left;
   padding: 0 20px;
   text-align: center;
   font-size: 12px;
   text-align: center;
   text-decoration: none;
   color: #999999;   
   font-weight: bold;
}

#templatemo_menu li a:hover, #templatemo_menu li .current {
   color: #ffffff;
}
/* end of menu*/

#templatemo_content_wrapper {
   clear: both;
   width: 960px;
   padding: 10px;
}

.templatemo_content {
   float: left;
   width: 460px;
   padding: 20px 19px 0 19px;
   background: #1b1919;
   border: 1px solid #363434;
}

.header_01 {
   padding: 0 0 5px 0;
   margin: 0 0 10px 0;
   font-size: 14px;
   font-weight: bold;
   color: #ffffff;
   /*color: #e40b0b;*/
}


.header_02 {
   padding: 0 0 5px 0;
   margin: 0 0 10px 0;
   font-size: 18px;
   font-weight: bold;
   color: #ffffff;
   /*color: #e40b0b;*/
}

.header_03 {
   padding: 0 0 5px 0;
   font-size: 12px;
   font-weight: bold;
   color: #ffffff;
   /*color: #99be29;*/   
}

.header_03 a { color: #ffffff; text-decoration: none; }
.header_03 a:hover { color: #99FF00; }

.templatemo_side_bar {
   float: left;
   width: 180px;
   padding: 20px 19px 0 19px;
   background: #1b1919;
   border: 1px solid #363434;   
}

.templatemo_side_bar ul {
   margin: 0px;
   padding: 0px;
}

.templatemo_side_bar ul li {
   margin: 0px;
   padding: 0 0 0 0;
   margin-bottom: 5px;
   border-left: 5px solid #000;
   list-style: none;
}

.templatemo_side_bar ul li a {
   display: block;
   background: #242224;
   padding: 5px 0 5px 10px;
   color: #b5b1b1;
   text-decoration: none;
}

.templatemo_side_bar ul li a:hover {
   color: #ffffff;
   background: #000;
}

.templatemo_side_bar form {
   margin: 0px;
   padding: 0px;
}

#search_field {
   padding: 5px 0 0 0;
   height: 20px;
   width: 175px;
   margin-bottom: 10px;
}

#search_button {
   float: right;
   width: 120px;
    height: 30px;
   padding: 0;
   margin: 0;
   cursor: pointer;
   font-size: 12px;
   text-align: center;
   white-space: pre;
   background: url(http://img535.imageshack.us/img535/8169/templatemobutton02.png) no-repeat;
   color: #000000;
   border: none;
}

.content_section {
   clear: both;
   padding: 0 0 0 0;
}

.content_section p span {
   color: #ffffff;
}

.image_wrapper_01 {
   float: left;
   position: relative;
   margin: 3px 20px 0 0;
   background: #131212;
   padding: 4px;
}

.image_wrapper_01 img {
   border: 1px solid #363434;
}

.image_wrapper_02 {
   position: relative;
   margin: 0 0 10px 0;
   background: #131212;
   padding: 4px;
}

.image_wrapper_02 span {
   position: absolute;
   width: 20px;
   height: 20px;
   bottom: 10px;
   right: 10px;
   background: url(http://img87.imageshack.us/img87/7600/templatemoplayicon.jpg) no-repeat;
}

.image_wrapper_02:hover span {
   background: url(http://img832.imageshack.us/img832/3808/templatemoplayiconhover.jpg) no-repeat;
}

.image_wrapper_02 img {
   border: 1px solid #363434;
}

.image_wrapper img {
   border: 1px solid #363434;
}

.latest_news {
   clear: both;
   padding-bottom: 10px;
}

#templatemo_footer {
   clear: both;
   width: 990px;
   height: 40px;
   margin: 0 auto;
   padding: 20px 0 0 0;
   text-align: center;
   background: url(http://img190.imageshack.us/img190/6352/templatemofooter.jpg) no-repeat;
}



Bueno amigo eso es todo por el momento, despues seguire subiendo cosas.Espero que les halla gustado[/b]
↑
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.