Módulo 1 - Setores e Posicionamentos: Lista de Exercícios | HTML e CSS: Classes, posicionamento e Flexbox

Estilizando elementos com classes CSS

<!-- Código HTML -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Página Principal</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header></header> 
    <main>
        <p class="texto-destaque">A tecnologia transformou a vida e o trabalho, com a internet possibilitando conectividade global instantânea. A inteligência artificial (IA) tem potencial revolucionário em setores como saúde e educação, auxiliando diagnósticos médicos e personalizando o aprendizado. A automação industrial aumenta a eficiência e a qualidade dos produtos. É crucial integrar tecnologias de forma ética e responsável, considerando os impactos sociais e econômicos. A era digital traz desafios como a proteção de dados e o combate à desinformação, exigindo políticas e regulações que acompanhem a evolução tecnológica para garantir benefícios justos e equitativos para todos.</p>
    </main>
    <footer></footer>
</body>
</html>

/* Código CSS */
*{
    margin: 0;
    padding: 0;
}

body{
    height: 100vh;
    box-sizing: border-box;
    background-color: #000000;
}

.texto-destaque{
    color:rgb(185, 166, 142);
    margin: 10% 12%;
    display: flex;
    text-align: justify;
}

Insira aqui a descrição dessa imagem para ajudar na acessibilidade 2) Destacando títulos com CSS

<!-- Código HTML -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Página Principal</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header></header>
    <main class="blog">
        <h1 class="titulo-blog"> O Futuro da Inteligência Artificial: Benefícios e Desafios Éticos</h1>
        <div class="texto-blog">
            <p>A inteligência artificial (IA) está revolucionando diversos setores, como saúde e educação, ao processar grandes quantidades de dados rapidamente e personalizar serviços. Na indústria, a automação aumenta a produtividade e reduz custos. No entanto, a privacidade dos dados e a transparência dos algoritmos são preocupações crescentes que precisam ser abordadas para garantir que as decisões automatizadas sejam justas e imparciais.</p>
            <br>
            <p>Além disso, a automação levanta questões sobre a perda de empregos, destacando a necessidade de políticas públicas para apoiar a transição dos trabalhadores para novos setores. É crucial integrar tecnologias de forma ética e responsável, considerando os impactos sociais e econômicos. A colaboração entre governos, empresas e a sociedade civil é vital para desenvolver diretrizes que promovam o uso benéfico da IA e mitiguem seus riscos.</p>
        </div>
    </main>
    <footer></footer>
</body>
</html>

/* Código CSS */
* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    box-sizing: border-box;
    background-color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
}

.blog {
    margin: 10%;
    width: 75%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.titulo-blog {
    text-align: center;
    color: rgb(87, 67, 34);
    font-size: 36px;
    margin-bottom: 20px;
}

.texto-blog {
    text-align: justify;
    font-size: 24px;
    color: antiquewhite;
    line-height: 1.6;
}

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Estilos situacionais com classes CSS

<!-- Código HTML -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Página Principal</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header></header>
    <main class="noticia">
        <p class="urgente">Um acidente grave na BR-040, perto de Contagem, causou congestionamento significativo. O incidente envolveu um caminhão tombado, resultando em danos materiais e interdição parcial da pista. Equipes de resgate responderam prontamente, mas não há relatos de feridos graves. A PRF recomenda rotas alternativas devido ao congestionamento na área.</p>
    </main>
    <footer></footer>
</body>
</html>

/* Código CSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    box-sizing: border-box;
    background-color: #070707;
    display: flex;
    justify-content: center;
    align-items:baseline ;
}

.noticia {
    margin: 8%;
    width: 75%;
    display: flex;
}

.urgente {
    color: rgb(132, 3, 3);
    font-weight: bold;
    text-align: justify;
    font-size: 24px;
    line-height: 1.6;
    font-family: Arial, Helvetica, sans-serif;
}

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Chegou a hora de transformar