HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Cookies&Cofee</title>
<link rel="stylesheet" href="style_projeto.css">
</head>
<body>
<header>
<h1>Aesthetic Cookies</h1>
</header>
<img id="imgcookie" src="cookies.jpg">
<img id="imgcookie2" src="cookies2.jpg">
<div class="divisao1">
<h2>Keep Calm and Eat a Cookie</h2>
<p id="paragrafo1">Nada como comer um belo cookie com café pela manhã ou tomar aquele chá da tarde com as amigas. Venha conhecer nosso café localizado no coração da cidade de São Paulo.</p>
<p id="paragrafo2"><em>"Amor, <strong>café</strong> e <strong>cookie</strong>, é só o que preciso para começar o dia com grande estilo."</em></p>
</div>
<img id="imgcafe" src="cafe.jpg">
<div>
<h3>Contato</h3>
<ul>
<li class="lista">Whatsapp: (11) 0000-0000</li>
<li class="lista">Instagram: @aestheticookies</li>
<li class="lista">Facebook: aestheticookies</li>
<li class="lista">E-mail: aestheticookies@.com.br</li>
</ul>
<img id="imggrao" src="grao.png">
</div>
</body>
</html>
CSS
h1 {
margin-left: 30px;
font: normal 30pt Georgia;
}
#imgcookie {
width: 49%;
vertical-align: top;
margin-left: 15px;
}
#imgcookie2 {
width: 49%;
}
.divisao1 {
background: #CCCCCC;
padding: 20px;
margin: 15px;
}
h2 {
font: normal 20pt Georgia;
text-align: center;
}
#paragrafo1 {
font: normal 12pt Georgia;
text-align: center;
line-height: 1.5;
padding: 10px;
}
#paragrafo2 {
background: #FFFFFF;
font: normal 12pt Georgia;
text-align: center;
padding: 20px;
border-width: 1px;
border-style: solid;
border-color: #000000;
}
#imgcafe {
width: 100%;
}
h3 {
background: #CCCCCC;
font: normal 20pt Georgia;
text-align: center;
margin: 30px;
padding: 10px;
}
ul {
display: inline-block;
vertical-align: top;
width: 20%;
margin-right: 20%;
font: normal 12pt Georgia;
}
#imggrao {
width: 50%;
margin-left: 30px;
}