Imagem de como ficou >
http://i.imgur.com/MdCnKAO.jpg
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type ="text/css" href="receita.css"/>
</head>
<body>
<img id="banner" src="banner.png">
<h1 id="titulo">Receita - Mousse de Maracujá</h1>
<nav>
<ul>
<li><a href="x"> teste 1</a></li>
<li><a href="x">teste 2</a></li>
</ul>
</nav>
<section id="conteudo">
<figure>
<img src ="foto.jpg"/>
<figcaption>Foto Mousse de Maracujá</figcaption>
</figure>
<h2>Ingredientes</h2>
<ul>
<li> 1 Lata de Leite Consensado</li>
<li> 1 lata de creme de leite</li>
<li> 1 lata de suco de maracujá(aproxidamente 4 maracujás)</li>
<li> 1 pacote de gelatina incolor </li>
<li> Sementes de maracujá (para decoração) </li>
</ul>
<h2>Modo de Preparo</h2>
<ol>
<li> Hidrate a gelatina na água, e depois dissolva em banho-maria </li>
<li> Misture todos os ingredientes no liquidificador, (exeto as sementes do maracujá) </li>
<li> Bata os ingredientes no liquidificador, em potencia máxima, por 2 min.</li>
<li> Coloque o mousse em um recipiente e docore-o com as sementes </li>
<li> Coloque o mousse em geladeira, deixando em refrigeração por aprox. 4 horas </li>
<li> pronto para servir. </li>
</ol>
<h2>Informações Nutricionais</h2>
<table id="tb-nutri">
<thead>
<tr>
<th colspan='3'> Informações Nutricionais</th>
</tr>
</thead>
<tbody>
<tr>
<th>Nutrientes </th>
<th> porção (60g)</th>
<th> %VD </th>
</tr>
<tr>
<td> Valor Calorico(Kcal)</td>
<td> 225.37</td>
<td>9.01</td>
</tr>
<tr>
<td>Carboidratos(g)</td>
<td> 40,56</td>
<td> 10.82 </td>
</tr>
<tr>
<td> Proteinas(g)</td>
<td> 5.91 </td>
<td> 8.53 </td>
</tr>
</table>
</section>
</body>
body{
background-color: #f2f1e6;
font-family: Arial, sans-serif;
width:940px;
margin:auto;
}
#titulo {
text-align:center;
}
h2{
background:-webkit-linear-gradient(top, #9c8f67, #c7be9b);
background:-moz-linear-gradient(top, #9C8F67, #C7BE9B);
border-radius:15px;
border: 1px solid black;
padding: 5px;
}
#tb-nutri{
border : 1px solid black;
width : 40%;
margin: auto;
}
#tb-nutri th {
background-color:#f8ea6b;
}
#tb-nutri tr:nth-child(odd){
background-color:#ffffff;
}
#tb-nutri tr:nth-child(even){
background-color:#F8EaB3;
}
figure {
background-color:white;
width:400px;
text-align:center;
padding: 15px;
border: 1px solid black;
box-shadow: 5px 5px 3px rgba(0,0,0,0.5);
}
figure:hover {
background-color:white;
width:400px;
text-align:center;
padding: 15px;
border: 1px solid black;
box-shadow: 5px 5px 3px rgba(0,0,0,0.5);
-webkit-transform:rotate(-5deg);
}
#conteudo {
float:right;
width: 740px;
}
nav {
float:left;
width: 200px;
}
nav ul li {
background : #c7be9b;
padding: 5px;
margin-bottom : 3px;
}
nav ul li a {
color : black;
text-decoration : none;
}
nav ul{
list-style: none;
padding-left:0;
}
nav ul li:hover {
background-color: #9c8f67;
}
#banner{
top:0;
right:0;
position:fixed;
}
