Skip to content

Instantly share code, notes, and snippets.

@roddyka
Created May 5, 2015 19:38
Show Gist options
  • Save roddyka/c3f4157e518a30a458ec to your computer and use it in GitHub Desktop.
Save roddyka/c3f4157e518a30a458ec to your computer and use it in GitHub Desktop.
aOvwzN
<!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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment