06 Lista de exercícios Próxima Atividade 1) Adaptando imagens para diferentes tamanhos de tela | HTML e CSS: trabalhando com responsividade e publicação de projetos

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Site Responsivo</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Bem-vindo ao Site Responsivo</h1>
    </header>
    <main class="container">
        <section class="section apresentacao">
            <h2 class="apresentacao__titulo">Apresentação</h2>
            <img src="imagem1.jpg" class="apresentacao__imagem" alt="Imagem 1">
            <img src="imagem2.jpg" class="apresentacao__imagem" alt="Imagem 2">
            <div class="apresentacao__conteudo">
                <p>Este é o conteúdo da apresentação. O texto deve se adaptar a diferentes tamanhos de tela.</p>
            </div>
            <nav class="apresentacao__links__navegacao">
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
            </nav>
        </section>
        <section class="section">
            <h2>Seção 1</h2>
            <p>Conteúdo da seção 1.</p>
        </section>
        <section class="section">
            <h2>Seção 2</h2>
            <p>Conteúdo da seção 2.</p>
        </section>
    </main>
    <footer>
        <p>Rodapé do site.</p>
    </footer>
</body>
</html>


/* Estilo global */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

/* Estilo do contêiner principal */
.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

/* Estilo das seções */
.section {
    flex: 1 1 45%; /* Ajusta a largura das seções para 45% no desktop */
    margin: 1rem;
    padding: 1rem;
    box-sizing: border-box;
}

/* Responsividade para telas menores */
@media (max-width: 768px) {
    .section {
        flex: 1 1 90%; /* Ajusta a largura das seções para 90% em telas menores */
        margin: 0.5rem;
        padding: 0.5rem;
    }
}

/* Adaptando imagens para diferentes tamanhos de tela */
.apresentacao__imagem {
    width: 50%;
}

/* Responsividade do conteúdo de texto */
.apresentacao__conteudo {
    width: 50%; /* Definindo largura relativa */
    margin: 0 auto;
    padding: 1rem;
    box-sizing: border-box;
}

/* Melhorando a responsividade dos links de navegação */
.apresentacao__links__navegacao {
    width: 50%; /* Definindo largura relativa */
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .apresentacao__links__navegacao {
        flex-direction: column;
        width: 100%; /* Ajustando largura para 100% em telas menores */
    }
}

/* Ajustando margens e paddings para diferentes tamanhos de fonte */
header {
    margin: 2rem;
    padding: 1.5rem;
}

footer {
    margin: 2rem;
    padding: 1.5rem;
}

article {
    margin: 1.5rem;
    padding: 1rem;
}

aside {
    margin: 1rem;
    padding: 0.75rem;
}