roddyka/aOvwzN.markdown

## aOvwzN.markdown

      
    Raw
  

              aOvwzN.markdown
            
          
    aOvwzN

A Pen by Rodrigo Antunes on CodePen.
License.

  
## index.html
<!doctype html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Estudos</title>
  <link rel="stylesheet" href="stylus.css">
</head>
<body>

  <div id="total">

    <div id="topo">

      <div id="logo">
    <img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xpa1/v/t1.0-1/c0.0.50.50/p50x50/995859_406569439478775_1856360243_n.png?oh=31f650d50103c9b7715dc175b0095fad&oe=55D4746C&__gda__=1439747696_9700776bbea40022435d701c327ad572" alt="kfc"/>
      </div>

      <div id="menu">
        <a href="#">Home</a>
        <a href="#">Cardápio</a>
        <a href="#">Fale Conosco</a>
        <a href="#">Sobre</a>

      </div>

    </div>


    <div id="banner">
    <img src="http://img1.wikia.nocookie.net/__cb20140110140446/logopedia/images/f/f9/KFC_SoGood.png" alt="kfc" width:50px height:50px/>
    </div>
    <div id="coluna1">
    <img src="http://media-cdn.tripadvisor.com/media/photo-s/05/58/f3/82/kfc.jpg" alt="comida" />

    </div>
    <div id="coluna2">
    <img src="http://lh5.ggpht.com/GvmuSDSD_Kw-qb8SQ7kfcTIvG2w97Bh1YJgb_WShLBse8q7eNdLwbrYR8adjYEcW2cbdpcxId5E-jq0hy3fSJA" alt="mapa" />

    </div>

    <div id="coluna3">
    <a href="#"><img src="http://www.kfc.pt/wp-content/uploads/2_share_bucket.jpg" alt="comida" /></a>

    </div>
    <div id="rodape">
      <p>Site criado para teste de Float por Rodrigo Antunes;</p>
    </div>

  </div>


</body>
</html>

## style.css
body{
  text-family: tahoma;
}

#total {
  width: 900px;
  height: auto;
  margin:auto;
}

#topo{
  width:900px;
  height: 50px;
  background-color: #B22222;
  }

#logo {
  width:50px;
  height: 50px;
  float:left;
}

#menu{
  width: auto;
  height:auto;
  float:right;
  margin-top:15px;
}

#menu a{ /*formatando os links do menu*/
    color: white;
    font-size: 16px; /*tamanho padrao do texto*/
    text-decoration: none; /*retira o sublinhado*/
  margin-right: 40px;}

#menu a:hover{
  color: black;
}

#banner{
  width:900px;
  height: 400px;

}

#coluna1{
  width:450px;
  height:450px;
  background-color: blue;
  float: left;
}

#coluna2{
  width:450px;
  height:450px;
  background-color: red;
  float:right;
}

#coluna3{
  width:900px;
  height:500px;
  background-color: red;
  float:left;
  margin-top:20px;

}

#rodape{
  width:900px;
  height: 30px;
  background-color: #B22222;
  float:left;
  margin-top:10px;
  text-align:center;
  text-transform: uppercase; /*texto maiusculo*/
  font-size: 14px;
    color: black;
    padding-top: 10px;
    padding-bottom: 10px;
}
	<!doctype html>
	<html lang="pt-br">
	<head>
	<meta charset="UTF-8">
	<title>Estudos</title>
	<link rel="stylesheet" href="stylus.css">
	</head>
	<body>

	<div id="total">

	<div id="topo">

	<div id="logo">
	<img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xpa1/v/t1.0-1/c0.0.50.50/p50x50/995859_406569439478775_1856360243_n.png?oh=31f650d50103c9b7715dc175b0095fad&oe=55D4746C&__gda__=1439747696_9700776bbea40022435d701c327ad572" alt="kfc"/>
	</div>

	<div id="menu">
	<a href="#">Home</a>
	<a href="#">Cardápio</a>
	<a href="#">Fale Conosco</a>
	<a href="#">Sobre</a>

	</div>

	</div>


	<div id="banner">
	<img src="http://img1.wikia.nocookie.net/__cb20140110140446/logopedia/images/f/f9/KFC_SoGood.png" alt="kfc" width:50px height:50px/>
	</div>
	<div id="coluna1">
	<img src="http://media-cdn.tripadvisor.com/media/photo-s/05/58/f3/82/kfc.jpg" alt="comida" />

	</div>
	<div id="coluna2">
	<img src="http://lh5.ggpht.com/GvmuSDSD_Kw-qb8SQ7kfcTIvG2w97Bh1YJgb_WShLBse8q7eNdLwbrYR8adjYEcW2cbdpcxId5E-jq0hy3fSJA" alt="mapa" />

	</div>

	<div id="coluna3">
	<a href="#"><img src="http://www.kfc.pt/wp-content/uploads/2_share_bucket.jpg" alt="comida" /></a>

	</div>
	<div id="rodape">
	<p>Site criado para teste de Float por Rodrigo Antunes;</p>
	</div>

	</div>


	</body>
	</html>
	body{
	text-family: tahoma;
	}

	#total {
	width: 900px;
	height: auto;
	margin:auto;
	}

	#topo{
	width:900px;
	height: 50px;
	background-color: #B22222;
	}

	#logo {
	width:50px;
	height: 50px;
	float:left;
	}

	#menu{
	width: auto;
	height:auto;
	float:right;
	margin-top:15px;
	}

	#menu a{ /formatando os links do menu/
	color: white;
	font-size: 16px; /tamanho padrao do texto/
	text-decoration: none; /retira o sublinhado/
	margin-right: 40px;}

	#menu a:hover{
	color: black;
	}

	#banner{
	width:900px;
	height: 400px;

	}

	#coluna1{
	width:450px;
	height:450px;
	background-color: blue;
	float: left;
	}

	#coluna2{
	width:450px;
	height:450px;
	background-color: red;
	float:right;
	}

	#coluna3{
	width:900px;
	height:500px;
	background-color: red;
	float:left;
	margin-top:20px;

	}

	#rodape{
	width:900px;
	height: 30px;
	background-color: #B22222;
	float:left;
	margin-top:10px;
	text-align:center;
	text-transform: uppercase; /texto maiusculo/
	font-size: 14px;
	color: black;
	padding-top: 10px;
	padding-bottom: 10px;
	}