[Projeto] 07 Lista de exercícios Próxima Atividade 1) Ajustando o layout para telas menores | 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>Portfólio Responsivo</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="cabecalho">
        <h1>Meu Portfólio</h1>
        <nav class="cabecalho__menu">
            <a href="#">Home</a>
            <a href="#">Sobre mim</a>
        </nav>
    </header>
    <main class="container">
        <section class="section apresentacao">
            <h2 class="apresentacao__titulo">Apresentação</h2>
            <div class="apresentacao__conteudo">
                <img src="imagem1.jpg" class="apresentacao__imagem" alt="Imagem de Apresentação">
                <p>Este é o conteúdo da apresentação. O texto deve se adaptar a diferentes tamanhos de tela.</p>
            </div>
        </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 cabeçalho */
.cabecalho {
    padding: 1rem;
    background-color: #f4f4f4;
    text-align: center;
}

.cabecalho__menu {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

/* 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;
}

/* 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;
}

/* Responsividade para telas menores */
@media (max-width: 1300px) {
    .apresentacao__conteudo {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
}

@media (max-width: 1200px) {
    .apresentacao__conteudo {
        flex-direction: column-reverse;
    }
}

@media (max-width: 1023px) {
    .apresentacao__conteudo {
        display: flex;
        flex-direction: column;
    }
}

@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;
    }

    .cabecalho {
        padding: 1rem;
        text-align: center;
    }

    .cabecalho__menu {
        flex-direction: column;
        align-items: center;
    }
}