Lista de exercícios: Posicionando mais elementos

1- Ajustando a altura da tela com CSS:

body {
    height: 100vh;
    /* Outras propriedades do body, se houver */
}

2- Controlando o Overflow com Box Sizing:

body {
    box-sizing: border-box;
    /* Outras propriedades do body, se houver */
}

3- Criando um layout sem scroll:

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
    background-color: #000000;
    color: #F6F6F6;
}

/* Estilos para os blocos de conteúdo conforme o design do Figma */

4- Flexbox: alinhando textos e imagens:

/* Adicionando estilo básico para o layout */
body {
    margin: 0;
    padding: 0;
    background-color: #000000;
}

/* Estilizando o <main> com Flexbox */
.apresentacao {
    display: flex; /* Ativa o Flexbox */
    justify-content: space-between; /* Posiciona o texto à esquerda e a imagem à direita */
    align-items: center; /* Alinha os itens verticalmente ao centro */
    padding: 20px;
}

/* Estilo para o título e parágrafo */
.apresentacao h1 {
    font-size: 2rem;
    line-height: 1.4;
    color: white;
}

.apresentacao p {
    font-size: 1rem;
    color: white;
    max-width: 500px; /* Limita a largura do parágrafo */
}

/* Estilo para os links */
.apresentacao a {
    color: #0077b5; /* Cor padrão para links */
    text-decoration: none;
    margin-right: 15px;
    font-weight: bold;
}

.apresentacao a:hover {
    text-decoration: underline; /* Destaca o link ao passar o mouse */
}

/* Estilo para a imagem */
.apresentacao img {
    max-width: 400px; /* Limita o tamanho máximo da imagem */
    height: auto;
    border-radius: 8px; /* Borda arredondada na imagem */
}

5- Flexbox: Centralização vertical:

body {
    height: 100%; /* Garantir que o body ocupe toda a altura da tela */
    margin: 0; /* Remove a margem padrão do body */
    background-color: #000000; /* Cor de fundo */
}

html, body {
    height: 100%; /* Garantir que html e body ocupem 100% da altura da tela */
}

/* Container com Flexbox para centralizar */
.container {
    display: flex;
    align-items: center;      /* Centraliza verticalmente */
    justify-content: center;  /* Centraliza horizontalmente */
    height: 100vh;            /* Altura igual a 100% da altura da tela */
    text-align: center;       /* Centraliza o conteúdo textual */
}

/* Estilo para o título e parágrafo */
.apresentacao h1 {
    font-size: 2rem;
    line-height: 1.4;
    color: white;
}

.apresentacao p {
    font-size: 1rem;
    color: white;
}

/* Estilo para os links */
.apresentacao a {
    color: #0077b5; /* Cor padrão para links */
    text-decoration: none;
    margin-right: 15px;
    font-weight: bold;
}

.apresentacao a:hover {
    text-decoration: underline; /* Destaca o link ao passar o mouse */
}

6- Flexbox: responsividade e alinhamento:

.container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;     
    justify-content: center; 
    height: 100vh;            
    text-align: center;       
}