1
resposta

[Projeto] Lista de exercício: Texto destaque, Notícia urgente.

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href=".//styles/style.css" />
  </head>
  <body>
    <header>
      <h1 class="titulo__blog">Exercício do curso ONE Alura</h1>
      <nav></nav>
    </header>
    <main>
      <section>
        <p class="texto__destaque">
          Estilizando elementos com classes CSS Você está trabalhando no
          desenvolvimento de uma página web e precisa aplicar estilos
          específicos a diferentes elementos usando classes CSS. Seu desafio é
          criar uma classe chamada "texto-destaque" no arquivo HTML para um
          elemento e, em seguida, estilizar essa classe no arquivo CSS para
          alterar a cor do texto. Use sua criatividade para escolher cores que
          tornem o texto destacado, mas ainda legível e harmonioso com o design
          geral da página.
        </p>

        <h2 class="urgente">Notícia urgente</h2>
        <div class="urgente__div">
          <p class="urgente__div__paragrafo">
            João Ricardo está fazendo de tudo para ser aprovado no curso ONE
            Alura, ele tem 57 anos e gosta muito de estudar!
          </p>
        </div>
      </section>
    </main>
    <footer></footer>
  </body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
body{
  background-color:#F6DED8;
}

                                /* Segundo exercício */
/* 2) Destacando títulos com CSS
Imagine que você está desenvolvendo um blog e precisa destacar os títulos das postagens. Crie uma classe
 CSS chamada "titulo-blog" e aplique-a a elementos <h1>no seu arquivo HTML. Em seguida, personalize essa 
 classe no arquivo CSS para mudar a cor do texto, para dar mais destaque.
 */

.titulo__blog{
  color:#D2665A ;
  text-align: center;
}

                              /* Primeiro exercício */
/* Estilizando elementos com classes CSS
Você está trabalhando no desenvolvimento de uma página web e precisa aplicar estilos específicos a 
diferentes elementos usando classes CSS. Seu desafio é criar uma classe chamada "texto-destaque" 
no arquivo HTML para um elemento <p>e, em seguida, estilizar essa classe no arquivo CSS para 
alterar a cor do texto. Use sua criatividade para escolher cores que tornem o texto destacado, 
mas ainda legível e harmonioso com o design geral da página.
 */
.texto__destaque{
  color: #D2665A;
  font-size: 1.5rem;
  font-family: 'Krona One', sans-serif;
}

                              /* Terceiro exercício */
/* 3) Estilos situacionais com classes CSS
Você está trabalhando em um site de notícias e precisa aplicar um estilo diferente para notícias urgentes. 
Crie uma classe CSS chamada "urgente" e aplique-a a elementos <p>que contêm notícias urgentes. No CSS, faça 
com que o texto desses parágrafos seja vermelho, para chamar a atenção do leitor.
 */
 .urgente{
  color: #eb0520;
  font-family: 'Montserrat', sans-serif;
  text-align: center;
 }

 .urgente__div{
  background-color: #F6DED8;
 }

 .urgente__div__paragrafo{
  color: #eb0520;
  font-size: 2rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;

 }
1 resposta

Olá, João, como vai?

O seu código está ótimo. O uso das cores está harmonioso, e você se atentou para a legibilidade, o que é essencial. Eu percebi que o caminho do arquivo CSS no link está com uma barra extra antes de "styles" (.//styles/style.css), que pode causar problemas futuramente. Isso pode ser corrigido removendo essa barra dupla, ficando apenas href="styles/style.css".

Continue compartilhando seus exercícios, você está no caminho certo!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)