Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje22-01-2012, 20:12 (UTC)    
Título del mensaje: [Diseño CSS] Professional Twitter
Responder citando
Vista Previa



Por encima

Código:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le styles -->
    <link href="../1.4.0/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
      }
    </style>

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
  </head>

  <body>

    <div class="topbar">
      <div class="topbar-inner">
        <div class="container-fluid">
          <a class="brand" href="#">Project name</a>
          <ul class="nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
          <p class="pull-right">Logged in as <a href="#">username</a></p>
        </div>
      </div>
    </div>

    <div class="container-fluid">
      <div class="sidebar">
        <div class="well">
          <h5>Sidebar</h5>
          <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
          </ul>
          <h5>Sidebar</h5>
          <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
          </ul>
          <h5>Sidebar</h5>
          <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
          </ul>
        </div>
      </div>
      <div class="content">
        <!-- Main hero unit for a primary marketing message or call to action -->
        <div class="hero-unit">
          <h1>Hello, world!</h1>
          <p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
          <p><a class="btn primary large">Learn more »</a></p>
        </div>


Por debajo

Código:
 <!-- Example row of columns -->
        <div class="row">
          <div class="span6">
            <h2>Heading</h2>
            <p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
            <p><a class="btn" href="#">View details »</a></p>
          </div>
          <div class="span5">
            <h2>Heading</h2>
             <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
            <p><a class="btn" href="#">View details »</a></p>
         </div>
          <div class="span5">
            <h2>Heading</h2>
            <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
            <p><a class="btn" href="#">View details »</a></p>
          </div>
        </div>

        <hr>

        <!-- Example row of columns -->
        <div class="row">
          <div class="span6">
            <h2>Heading</h2>
            <p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
            <p><a class="btn" href="#">View details »</a></p>
          </div>
          <div class="span5">
            <h2>Heading</h2>
             <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
            <p><a class="btn" href="#">View details »</a></p>
         </div>
          <div class="span5">
            <h2>Heading</h2>
            <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
            <p><a class="btn" href="#">View details »</a></p>
          </div>
        </div>

        <footer>
          <p>© Company 2011 Diseño por WebICS</p>
        </footer>
      </div>
    </div>

  </body>
</html>


Css Code

Código:
</style>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css">
<style>
html, body{
   background: #eee repeat;
   margin:0 0 30px 0;
}
#header{
   min-height:50px;
   border-bottom:1px solid #dddddd;
   background:#f5f5f5;
   -webkit-border-radius:3px 3px 0 0;
   -khtml-border-radius:3px 3px 0 0;
   -moz-border-radius:3px 3px 0 0;
   border-radius:3px 3px 0 0;
}
h1{
   padding:5px 0 0 5px;
   margin:0;
}
h2{
   padding:5px 0 0 5px;
   margin:0;
}
h3{
   padding:5px 0 0 5px;
   margin:-5px 0 0 0;
}
#contenedor{
   background:#fff;
   border:1px solid #dddddd;
   -webkit-border-radius: 3px;
   -khtml-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   box-shadow:0 3px 5px gray;
}
.span11, .span4{
   min-height:200px;
}
#contenido{
   padding:0 10px;
}
#sidebar{
   padding:8px;
   margin:8px 0 8px 0;
   border-left:1px solid #e8e8e8;
}
#sidebar hr{
   width:270px;
}
.media-grid{
   margin:0 auto;
   width:300px;
}
button, input[type="submit"]{
   color:#ffffff;
   background-color:#0064cd;
   background-repeat:repeat-x;
   background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
   background-image:-moz-linear-gradient(top, #049cdb, #0064cd);
   background-image:-ms-linear-gradient(top, #049cdb, #0064cd);
   background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
   background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);
   background-image:-o-linear-gradient(top, #049cdb, #0064cd);
   background-image:linear-gradient(top, #049cdb, #0064cd);
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);
   text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);
   border-color:#0064cd #0064cd #003f81;
   border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
   margin:5px 0 0 0;
}
table[height="102"]{
   margin:40px auto -10px auto;
   width:700px;
}
table,  table th + th, table td + td, table tr + tr td{
   border: 0;
}
#pre_header {display: none;}
#post_header {display: none;}
#header_container {display: none;}
lli.nav_element{display: none;}
li.nav_element a{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
#title {display: none;}
#nav_container {display:none;}


Ultima edición por webics el Mar Ene 24, 2012 1:15 pm; editado 1 vez
↑
Mensaje22-01-2012, 21:17 (UTC)    
Título del mensaje:
Responder citando
Muy buena, me gusta mucho los colores que tiene
↑
Mensaje22-01-2012, 21:19 (UTC)    
Título del mensaje:
Responder citando
bittnet escribió:
Muy buena, me gusta mucho los colores que tiene


Gracias , por comentar!
↑
Mensaje23-01-2012, 10:23 (UTC)    
Título del mensaje: Hola
Responder citando
Hola, me gusto mucho la parte de arriba de los menus, pero en esa parte del menu puedes poner "sub-menus" ?
______________
Reglas de PWG: http://www.paginawebgratis.es/forum/viewtopic.php?t=50516
Reglas del Foro: http://www.paginawebgratis.es/forum/viewtopic.php?t=22887
↑
Mensaje23-01-2012, 13:02 (UTC)    
Título del mensaje: Re: Hola
Responder citando
cristopherpuck escribió:
Hola, me gusto mucho la parte de arriba de los menus, pero en esa parte del menu puedes poner "sub-menus" ?


En eso estoy trabajando !
↑
Mensaje23-01-2012, 18:31 (UTC)    
Título del mensaje:
Responder citando
Buena plantilla webics
______________
Reglas del Foro

¿Dónde hacer mi tema/post?
↑
Mensaje23-01-2012, 18:46 (UTC)    
Título del mensaje: Re: Hola
Responder citando
El diseño esta muy mal adaptado amigo, las columnas que tendrían que ir por arriba los pones por debajo, donde dice <div class="row"> hasta el penúltimo </div> va por debajo del ultimo </div> que paciste en el código por encima.

También dejaste códigos incompletos e inútiles:
Cita:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le styles -->
<link href="../1.4.0/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
}
</style>
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">


Lee este tema para saber mas de los códigos inútiles:
http://www.paginawebgratis.es/forum/viewtopic.php?t=50115[/b]
______________
Es una reina, es una reina, fiesta fiesta. Tito el bambino
↑
Mensaje23-01-2012, 20:47 (UTC)    
Título del mensaje:
Responder citando
Me gusto el diseño es muy elegante.

Saludos
______________

Noticias Relevantes
Diablo III llegara el 15 de mayo
Se desvela Angry Birds Space
Call of Duty: Black Ops 2 podria anunciarse el 28
La portatil Neo Geo es oficial
Hemos activado nuestro foro... ¡ Entrar al foro !
↑
Mensaje24-01-2012, 13:42 (UTC)    
Título del mensaje: Re: Hola
Responder citando
brianpwg escribió:
El diseño esta muy mal adaptado amigo, las columnas que tendrían que ir por arriba los pones por debajo, donde dice <div class="row"> hasta el penúltimo </div> va por debajo del ultimo </div> que paciste en el código por encima.

También dejaste códigos incompletos e inútiles:
Cita:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le styles -->
<link href="../1.4.0/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
}
</style>
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">


Lee este tema para saber mas de los códigos inútiles:
http://www.paginawebgratis.es/forum/viewtopic.php?t=50115[/b]


Algunos fallos gracias por la att. , pero el diseño funcciona perfecatamente;)!
↑
Mensaje24-01-2012, 16:37 (UTC)    
Título del mensaje:
Responder citando
No puedo ver la vista previa, podrías dejar una imagen?
↑
Mensaje24-01-2012, 17:15 (UTC)    
Título del mensaje:
Responder citando
nesbet escribió:
No puedo ver la vista previa, podrías dejar una imagen?


↑
Mensaje25-01-2012, 03:25 (UTC)    
Título del mensaje:
Responder citando
Gracias, muy lindo diseño
↑
Mensaje26-01-2012, 00:15 (UTC)    
Título del mensaje: hola
Responder citando
muy elegante la plantilla, me gusto
↑
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.