Fonkymia

De 33system wiki
Saltar a: navegación, buscar

HTML

<!DOCTYPE html>
<html>
 <head>
<!-- esto es un comentario -->
  <title>
    3 Column Layout Page
  </title>
  <meta charset="utf8" />
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

 </head>

 <body>
<!-- esto es un comentario -->

  <div id="container">

    <div id="header">

     <ul class="navigation">

      <li><a href="home.html">Home</a></li>
      <li><a href="gallery.html">Gallery</a></li>
      <li><a href="blog.html">Blog</a></li>
      <li><a href="about.html">About</a></li>

     </ul>

    </div>

   <div id="col1">
    <p> Hola, esto es la columna 1 </p>
   </div>

   <div id="sidebar">

    <form id="search_form" action="" method="get">

     <input id="search_term" type="text" value="" placeholder="Search..." />
     <input class="submit_button" type="submit" value="Search">

    </form>

    <ul class="sidebar_list">

     <li><a href="home.html">Home</a></li>
     <li><a href="gallery.html">Gallery</a></li>
     <li><a href="blog.html">Blog</a></li>
     <li><a href="about.html">About</a></li>

    </ul>

    <img src="" height="100" width="100" class="thumb">
    <img src="" height="100" width="100" class="thumb">
    <img src="" height="100" width="100" class="thumb">
    <img src="" height="100" width="100" class="thumb">

   </div>

   <footer>
    <p> Esto es el footer </p>
   </footer>
  </div>

 </body>

</html>

CSS

/* CSS - style.css */

* {
 padding: 0;
 margin: 0;
}
body {
 background: #f1f1f1;
 font-family: Verdana,Geneva,sans-serif;
 font-size: 12px;
}

#container {
 width: 960px;
 margin: 0 auto;
}

#header {
 float: left;
 background: #f1f1f1;
 margin: 10px 0 0 0;
 width: 100%;
 height: 250px;
}

.navigation {
 float: right;
 margin: 150px 50px 0 0;
 font-size: 20px;
}

.navigation li {
 float: left;
 list-style: none;
}

.navigation li a {
 float: left;
 color: #333;
 padding: 6px 20px;
 text-decoration: none;
 border-right: 1px solid #333;
 fot-size: 16px;
 font-family: 'Lobster',cursive;
}

.navigation li a:hover {
 background-color: #333;
 color: #fff;
}

#col1 {
 float: left;
 background: #f0f0f0;
 margin: 10px 15px 10px 0;
 width: 625px;
 height: 630px;
 background: #fff;
 border-radius: 20px;
}

#col1 p {
 padding: 20px;
 line-height: 22px;
}

#sidebar {
 float: right;
 margin: 10px 5px 5px 6px;
 background: #fff;
 width: 300px;
/* height: 630px; */
 border-radius: 20px;
}

#sidebar h3 {
 padding-left: 20px;
 color: #333;
}

#search_form {
 margin: 10px 0 50px 20px;
}

#search_form input {
 padding: 5px;
}

.sidebar_list {
 margin: 20px;
}

.sidebar_list li {
 list-style: none;
 margin: 10px;
 padding-bottom: 10px;
 border-bottom: 1px dotted #ddd;
}

.sidebar_list li a {
 text-decoration: none;
 color: #333;
 font-size: 13px;
}


.thumb {
 float: left;
 margin: 22px;
 border: 1px solid #fff;
 box-shadow: 0px 4px 6px #999;
}
footer {
 clear: both;
 float: left;
 background: #ddd;
 width: 100%;
 height: 100px;
}