style.css

/*Adicionar as propirdades margin e padding no seletor universal (asterisco)*/
*{
    margin: 0; /*altera o espaçamento externo*/
    padding: 0; /*altera o espaçamento interno*/
}
/*iniciar seção cabeçalho*/

.cabecalho{
    background-color: blueviolet; /*cor de fundo*/
    color:black; /*cor*/
    display: flex; /*propiedade flex para organizar os itens do cabeçalho, lado a lado*/
    justify-content: space-around; /*alinha as imagens e os textos com espaçamento entre eles*/
    align-items: center; /*alinhamento de itens centralizado*/
    padding: 24px 0; /*altera o espaçamento interno*/
}

.cabecalho-imagem{
    width: 8%; /**/
    border-radius: 22px; /*para definir bordas arredondadas na imagem*/
}

/*a lista não ordenada ul precisa estar alinhada em uma única linha.
crie um seletor para a classe .cabecalho-lista-item, adicionando nele a propiedade display com o valor inline;*/
/*aumente os espaçamentos entre os textos com a propiedade margin de valor 0 16x:*/
/*aumente a fonte através da propiedade font-size de valor 24px.*/


.cabecalho-lista-item {
    display: inline-block; /*o valor inline-block na propiedade display, os itens da lista ficam lado a lado*/
    margin: 0 16px; /**/
    font-size: 24px; /*tamanho da fonte*/
}

.cabecalho-lista-item a{
    text-decoration: none; /**/
    color:black; /*cor*/
}

/*efeito alterara a cor quando passa o mouse*/
a:houver{
    color:blue;
}

/*efeito alterar a cor quando clicar com o mouse*/
a:hover{
    color:aquamarine /*cor*/
}


/*iniciar seção escola*/
.escola{
    background-image: linear-gradient(#424e61, #16cffb); /*define um gradiente linear como imagem de fundo*/
    color:black; /*cor*/
    display:flex; /*organizar a estrutura do nosso conteúdo*/
    justify-content:center; /*alinha imagem e os textos com espaçamento entre eles*/
    padding: 24px 0; /*Altera o espaçamento interno*/
}

.escola-div-conteúdo{
    width: 45%; /*largura*/
    color:fuchsia; /*cor*/
}

.escola-titulo{
    padding: 24px 0; /*Altera o espaçamento interno,o primeiro valor bordas verticais (superior e inferior) e o segundo valor bordas horizontais (esquerda e direita)*/
    font-size: 25px;/*tamanho da fonte*/
}

.escola-texto{
    font-size: 20px; /*tamanho da fonte*/
}

.imagem-escola{
    width: 30%; /*largura*/
    height: 300px;/*altura*/
    border-radius: 82px; /*para definir bordas arredondadas da imagem*/
}
/*fim da seção escola*/



/*INICIO SEÇÃO ESTUDANTE*/
.estudante{
background-color:#16cffb;/* cor de fundo*/
 color:#424e61; /*cor*/
}
・estudante-titulo{
padding: 24px 0; /*Altera o espaçamento interno,o primeiro valor bordas verticais (superior e inferior) e o segundo valor bordas horizontais(esquerda e direita)*/ 
margin: 0 120px; /* alinhar o espaçamento*/
font-size: 25px;/*tamanho da fonte*/
}

p{
    padding: 0 120px; /* alinhar o espaçamento */
    font-size: 20px;/*tamanho da fonte*/
}

.estudantes-todos{
display: grid; /* específicar o espaçamento do grid(organizar por colunas) */
grid-template-columns: 25% 25% 25% 25%;
padding: 0 60px; /*Altera o espaçamento interno,o primeiro valor bordas verticais (superior e inferior) e o segundo valor bordas horizontais(esquerda e direita)*/
}

.estudante-div{
    text-align: center;/*texto centralizado*/
    padding: 12px 0; /*Altera o espaçamento interno, o primeiro valor bordas verticais (superior e inferior) e o segundo valor bordas horizontais(esquerda e direita)*/

}

.estudante-imagem{
width: 120px; /*largura*/
}
 
.estudante-nome{
 font-size: 14px;/*tamanho da fonte*/
}

.estudante-icone{
width: 24px;/*largura*/
padding: 4px 8px;/*Altera o espaçamento interno, o primeiro valor bordas verticais (superior e inferior) e o segundo valor bordas horizontais (esquerda e direita)*/
}
 
/*FIM SEÇÃO ESTUDANTE*/

/*SEÇÃO RODAPÉ*/
.rodape{
background-image: linear-gradient(#2bd6e2,#7c9fd8); /*define um gradiente linear como a imagem de fundo)*/
}

.copyright{
    text-align: center;/*texto centralizado*/
    height: 100px;/*altura*/
    line-height: 100px;/*altura da linha*/
    font-size: 12px;/*tamanho da fonte*/
}
/*FIM SEÇÃO RODAPÉ*/