Pra exercitar o aprendizado do curso montei o site da minha cafeteria.
Identifiquei um problema: no meu monitor o site fica alinhado corretamente, mas quando jogo a aba pra tela do meu notebook, que é menor, as imagens ficam desalinhadas com o texto. Quem puder me dar um feedback vou agradecer.
HTML
<!DOCTYPE html>
<html lang = "pt-br">
<head>
<meta charset="UTF-8">
<tittle>Jariu's Coffee Shop</tittle>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1 class="titulo-principal">Jariu's Coffee Shop</h1>
</header>
<img id="cafeteria1" src="cafeteria1.jfif">
<div class="principal">
<h2 class="titulo-centralizado">Come and visit Jariu's Coffee Shop</h2>
<p>Located in the heart of the city, <strong>Jariu's Coffee Shop</strong> brings to the market the best in terms of quality and varieties of coffee.
Founded in 2022, Jariu's Coffee Shop is already a highlight in the city and conquers new customers and coffee enthusiasts every day.</p>
<p id="missao"><em>Your mission is: <strong>Bring for our costumer's taste the best in terms of quality and variety!</strong></em></p>
<p>We offer qualified professionals who are passionate about coffee.
The service has a standard of excellence and agility, ensuring quality and satisfaction of our customers.</p>
</div>
<div>
<h3 class="sabores">Coffee options</h3>
<ul class="opcoes">
<li class="itens">Espresso</li>
<li class="itens">Cappuccino</li>
<li class="itens">Arabic coffee</li>
<li class="itens">Irish coffee</li>
<li class="itens">Caffe latte</li>
<li class="itens">Macchiato</li>
<li class="itens">Mocha</li>
<li class="itens">Ristretto</li>
</ul>
<img src="cafe1.jpg" class="imagemcafe1">
</div>
<div>
<h4>Contact us</h4>
<ul class="contatos">
<li class="lista">Whatsapp: (00) 0000-0000</li>
<li class="lista">Instagram: @jariuscoffeeshop</li>
<li class="lista">Facebook: Jarius Coffee Shop</li>
<li class="lista">E-mail: jariuscoffeeshop@mail.com.br</li>
</ul>
<img src="grao.jpg" class="grao">
</div>
</body>
CSS
body {
background-color: #fcf0f0;
}
h1 {
padding: 30px;
font: bolder 35pt Tahoma;
}
#cafeteria1 {
width: 99%;
margin-left: 10px;
margin-right: 10px;
}
h2 {
background: #925959;
text-align: center;
font: bolder 20pt Tahoma;
margin-left: 10px;
margin-right: 10px;
}
p {
font: normal 15pt Tahoma;
text-align: center;
margin: 30px;
padding: 10px;
}
#missao {
font-size: 20px;
}
em strong {
color: #963939;
}
h3 {
background: #925959;
text-align: center;
font: bolder 25pt Tahoma;
margin-left: 10px;
margin-right: 10px;
}
.opcoes {
display: inline-block;
vertical-align: top;
width: 20%;
margin-right: 25%;
font: italic 22pt Tahoma;
}
.imagemcafe1 {
width: 30%;
margin-left: 400px;
padding-right: 25px;
}
h4 {
background: #925959;
text-align: center;
font: bolder 20pt Tahoma;
margin-left: 10px;
margin-right: 10px;
}
.contatos {
display: inline-block;
vertical-align: top;
width: 20%;
margin-right: 25%;
font: italic 15pt Tahoma;
}
.grao {
width: 30%;
margin-left: 400px;
padding-right: 25px;
}