Red_Hot_Brazil : Red « Templates « HTML / CSS






Red_Hot_Brazil

  

<!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=iso-8859-1" />
<title>Red Hot Brazil</title>
<style type='text/css'>
body {
  background-image: url(pics/images/bg.gif);
  margin: 0px;
  background-repeat: repeat;
}
#logo {
  background-image: url(images/header_bg2.gif);
  height: 80px;
  width: 680px;
  overflow: hidden;
}
#conteudo {
  width: 470px;
  background-color: #FFFFFF;
  float: left;
  padding: 5px;
}
#conteudo .data {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  float: right;
}

#sidebar {
  width: 189px;
  background-color: #CCCCCC;
  float: right;
  padding: 5px;
  border-left-width: 1px;
  border-left-style: dotted;
  border-left-color: #FFFFFF;
}
#conteudo .titulo {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  border-bottom-width: 2px;
  border-bottom-style: dotted;
  border-bottom-color: #000000;
  margin-top: 20px;
  margin-left: 30px;
  margin-right: 20px;
}
#conteudo .info {
  margin-top: -20px;
  margin-left: 30px;
  margin-right: 20px;
}
#conteudo .autor {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  float: left;
}



#logo .slogan {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 36px;
  font-style: italic;
  font-weight: bolder;
  color: #FFFFFF;
  margin-left: 50px;
  margin-top: 10px;
}
#logo .description {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #FFFFFF;
  margin-top: -18px;
  margin-left: 80px;
}


#main {
  width: 680px;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  border: thin outset #CCCCCC;
  background-color: #CCCCCC;
}
#conteudo .post {
  padding-left: 30px;
  text-align: justify;
  padding-right: 20px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px;
  padding-top: 20px;
}

#top {
  background-image: url(images/top.jpg);
  background-repeat: no-repeat;
  height: 280px;
  width: 680px;
}

#conteudo .comentario {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  background-image: url(pics/images/comment_edit.gif);
  background-repeat: no-repeat;
  text-align: right;
  border: 2px dashed #000000;
  margin-left: 30px;
  margin-right: 20px;
}
#conteudo .comentario a {
  color: #999999;
}
#conteudo .comentario a:hover {
  color: #FF0000;
}
#footer {
  width: 680px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  text-align: center;
  color: #FFFFFF;
  background-image: url(pics/images/bg.gif);
  background-repeat: repeat;
}

.picright {
  margin-top: 5px;
  margin-right: 0px;
  margin-bottom: 5px;
  margin-left: 10px;
  float: right;
  border: 10px dashed #000000;
}
.picleft {
  margin-top: 5px;
  margin-right: 10px;
  margin-bottom: 5px;
  margin-left: 0px;
  float: left;
  border: 10px dashed #000000;
}
#sidebar a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  text-decoration: none;
  font-weight: bold;
  color: #0000FF;
  border-bottom-width: thin;
  border-bottom-style: dashed;
  border-bottom-color: #0000FF;
}

#conteudo .post a {
  color: #0000FF;
  text-decoration: none;
  font-weight: bold;
  border-bottom-width: thin;
  border-bottom-style: dashed;
  border-bottom-color: #0000FF;
  font-size: 11px;
}
#sidebar .picside {
  border: 20px solid #000000;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 25px;
}

.post .bluecode {
  font-size: 11px;
  color: #0000FF;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}
#sidebar p {
  padding-top: 0px;
  padding-right: 5px;
  padding-bottom: 10px;
  padding-left: 10px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
}

#sidebar li {
  list-style-type: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  padding-top: 8px;
}

.post .redcode {
  color: #FF0000;
  font-size: 11px;
}
#sidebar .STitle {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  border-bottom-width: 2px;
  border-bottom-style: dotted;
  border-bottom-color: #000000;
  margin-top: 20px;
  margin-right: 10px;
}


</style>


</head>

<body>
  <div id="main">
    <div id="top"></div>
    <div id="logo">
      <h1 class="slogan">Site Name Here</h1>
      <h2 class="description">Your Description Here... Enjoy!</h2>
    </div>
    
    
      <div id="conteudo">
      <h1 class="titulo">Simplesmente um t?lo</h1>
      <div class="info">
        <span class="autor">Escrito por Anderson Lima</span>
        <span class="data">10/07/1984 15:46</span></div>
        <div class="post">
          <p>Este ?eu segundo design feito para a <a href="#">oswd</a>. Bonito, limpo e com bastante recursos para voc?mplementar seu projeto. Aqui voc?oder?or exemplo adicionar um <a href="#">link</a> bem estiloso. <img src="images/small-img.jpg" alt="Something here" width="100" height="100" class="picright" />Outra coisa que tenho certeza que voc&ecirc; vai gostar s&atilde;o as figuras no meui do post. Como este por exemplo. Bastante fashion, e voc&ecirc; poder&aacute; ajustar como Direita ou esquerda, mas preste aten&ccedil;&atilde;o. Sempre que a figura estiver ao lado direito, utilize <code><span class="bluecode">&lt;img src=&quot;something&quot; class=&quot;picright&quot; alt=&quot;Something&quot; /&gt; </span></code> e quando for utilizar a figura na esquerda utilize <code><span class="bluecode">&lt;img src=&quot;something&quot; class=&quot;picleft&quot; alt=&quot;Something&quot; /&gt; </span></code>. E outra... Eu adoro posts bem definidos com com <code><span class="redcode">align:justify</span></code>... Sinta-se a vontade para utilizar estes c??os como desejar</p>
          <p>A cada par&aacute;grafo voc&ecirc;s ter&atilde;o um novo par&aacute;grafo (hehehehe). If you didn't understand nothing I said before, you should learn some portuguese, sorry, but my English isn't perfect. Here in Brazil <img src="images/small-img.jpg" alt="Something here" width="100" height="100" class="picleft" /> we do not learn English very much neither spanish, but our native language is very much learned. If you know Portuguese you can know me at my <a href="http://www.andersonlima.eti.br" target="_blank">website</a>. There I have another designs and websites developed for me. Enjoy this and the other design of oswd. I prefer to write my codes at night. Nada de interessante, escrevo isso somente para encher lingui&ccedil;a, pare de ler... Eu disse, &eacute; s&oacute; para encher lingui&ccedil;a e demostrar o design. Enjoy it! </p>
        </div>
        <div class="comentario">
          Nenhum Comentario | <a href="#">Deixe seu coment?o</a>
        </div>
        
        <h1 class="titulo">Advinhe! Um outro t?lo</h1>
      <div class="info">
        <span class="autor">Escrito por Anderson Lima</span>
        <span class="data">10/07/1984 15:46</span></div>
        <div class="post">
          <p>Este ?eu segundo design feito para a <a href="#">oswd</a>. Bonito, limpo e com bastante recursos para voc?mplementar seu projeto. Aqui voc?oder?or exemplo adicionar um <a href="#">link</a> bem estiloso. <img src="images/small-img.jpg" alt="Something Here" width="100" height="100" class="picright" />Outra coisa que tenho certeza que voc&ecirc; vai gostar s&atilde;o as figuras no meui do post. Como este por exemplo. Bastante fashion, e voc&ecirc; poder&aacute; ajustar como Direita ou esquerda, mas preste aten&ccedil;&atilde;o. Sempre que a figura estiver ao lado direito, utilize <code><span class="bluecode">&lt;img src=&quot;something&quot; class=&quot;picright&quot; alt=&quot;Something&quot; /&gt; </span></code> e quando for utilizar a figura na esquerda utilize <code><span class="bluecode">&lt;img src=&quot;something&quot; class=&quot;picleft&quot; alt=&quot;Something&quot; /&gt; </span></code>. E outra... Eu adoro posts bem definidos com com <code><span class="redcode">align:justify</span></code>... Sinta-se a vontade para utilizar estes c??os como desejar</p>
          <p>A cada par&aacute;grafo voc&ecirc;s ter&atilde;o um novo par&aacute;grafo (hehehehe). If you didn't understand nothing I said before, you should learn some portuguese, sorry, but my English isn't perfect. Here in Brazil <img src="images/small-img.jpg" alt="Something Here" width="100" height="100" class="picleft" /> we do not learn English very much neither spanish, but our native language is very much learned. If you know Portuguese you can know me at my <a href="http://www.andersonlima.eti.br" target="_blank">website</a>. There I have another designs and websites developed for me. Enjoy this and the other design of oswd. I prefer to write my codes at night. Nada de interessante, escrevo isso somente para encher lingui&ccedil;a, pare de ler... Eu disse, &eacute; s&oacute; para encher lingui&ccedil;a e demostrar o design. Enjoy it! </p>
        </div>
        <div class="comentario">
          Nenhum Comentario | <a href="#">Deixe seu coment?o</a>
        </div>
        
      </div>
    
    <div id="sidebar">
        <h3 class="STitle">Perfil</h3>
        <ul>
          <li><a href="#">Ver Perfil Completo</a></li>
        </ul>
    
    
        <h3 class="STitle">Ultimos Posts</h3>
        <ul>
          <li><a href="#">Post recente aqui</a></li>
          <li><a href="#">Outro Post</a></li>
          <li><a href="#">Aqui fica mais um</a></li>
          <li><a href="#">Advinha! Mais um</a></li>
          <li><a href="#">Link de post recente</a></li>
          <li><a href="#">Post atual</a></li>
        </ul>
        
        <h3 class="STitle">Links</h3>
        <ul>
          <li><a href="#">OSWD</a></li>
          <li><a href="#">Google</a></li>
          <li><a href="#">Yahoo</a></li>
          <li><a href="#">MSN</a></li>
          <li><a href="#">andersonlima</a></li>
          <li><a href="#">Another Link Here</a></li>
        </ul>
        
        <h3 class="STitle">Did You know?</h3>
          <p>Did you know that I can't think anything right now?</p>
          
        <h3 class="STitle">Pic of the day</h3>
          <img src="images/small-img.jpg" alt="Something Here" width="100" height="100" class="picside" />      </div>
      <div id="footer">copyleft 2006 - All left reserverd from Your Name Here</div>
  </div>
</body>
</html>

   
    
  








Related examples in the same category

1.metamorph_blackandred
2.metamorph_blackonred
3.metamorph_red
4.metamorph_redandblack_lt
5.metamorph_reddie
6.metamorph_redfirm
7.metamorph_redflowers_lt
8.metamorph_redinfinity
9.metamorph_redmadness
10.metamorph_redornament
11.metamorph_redstorm
12.All_The_Reds
13.freecss_lightred
14.simplyred
15.sleek-red
16.red haze
17.red-accent
18.red-round
19.redalert
20.redavenue
21.redBull
22.redbusiness
23.redcrazycss
24.reddy
25.Redfire2
26.redflex
27.redhaze
28.redhive
29.redish
30.RedLight
31.redline
32.RedOneTemplate
33.redpassion
34.redpepper
35.redplanet
36.redroses
37.redsnow
38.RedSquareShadow
39.red_city
40.Red_Hot
41.red_music
42.Red_Splash
43.Red_Tube_Simple
44.Red 2