[Projeto] Desafios - Aula 01 | HTML e CSS: Classes, posicionamento e Flexbox

01 . Estilizando elementos com classes CSS

<p class="texto-destaque">
  Atuamos no mercado imobiliário oferecendo soluções inovadoras, atendimento personalizado e excelência em cada negociação.
</p>

CSS ficaria assim:

.texto-destaque {
  color: #2E8B57; 
  background-color: #F0FFF0;
  font-weight: bold;
  padding: 10px;
  border-left: 4px solid #2E8B57;
}

02 Destacando títulos com CSS

<h1 class="titulo-blog">Descubra os melhores imóveis para investir</h1>

CSS ficaria assim:

.titulo-blog {
  color: #1E3A8A;
  font-size: 2.5em;
  font-weight: bold;
  text-transform: uppercase;
  border-bottom: 3px solid #1E3A8A;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

03 Estilos situacionais com classes CSS

<p class="urgente">
  URGENTE: Novo lançamento de imóveis comerciais no centro da cidade com condições especiais!
</p>

No CSS ficaria assim:

.urgente {
  color: #B22222; 
  background-color: #FFF5F5; 
  font-weight: bold;
  border-left: 5px solid #B22222;
  padding: 12px;
  margin: 15px 0;
}

04 Entendendo e aplicando o reset CSS

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Imóveis em Destaque</title>
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="estilos.css">
</head>
<body>
  <h1>Ofertas de Imóveis</h1>
  <p>Confira os melhores apartamentos no centro de Ananindeua.</p>
</body>
</html>

No css ficaria assim:

/* reset.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

05 Inspecionando elementos e entendimento do modelo de caixa

margin define o espaço externo entre elementos
border define a linha ao redor do elemento
padding define o espaço interno entre o conteúdo e a borda
content define área onde o texto/imagem aparece

06 Aplicando o modelo de caixa na prática

<p class="oferta-imovel">
  Oferta exclusiva: Casa com 4 suítes em condomínio fechado, pronta para morar!
</p>

No Css ficaria assim:

.oferta-imovel {
  width: 350px;
  margin: 30px auto;       
  padding: 20px;            
  border: 2px solid #2E8B57; 
  background-color: #F0FFF0; 
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}