site-2c/style.css at main · ElaiasCZ/site-2c · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
* {
    margin: 0;
    padding: 0;
    }

.cabecalho {
    background: linear-gradient(180deg, #020202 -3.73%, rgba(87, 87, 87, 0) 90.94%);
    background-color: #4B4B4B;
    color: #000000;
    display: flex;
    justify-content: left;
    padding: 30px 0;
}

.cabecalho-imagem {
    margin: 20px;
    width: 160px;
    border-radius: 30px;

 }
 .cabecalho-titulo {
    padding: 30px 0;
    font-size: 44px;
    font-family: Arial, Helvetica, sans-serif;
    color: #AFAFAF;
    width: 226px;
    height: 110px;
    left: 257px;
    top: 60px;

    font-family: 'KoHo';
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 31px;
 }
 .cabecalho-lista-item {
    display: inline-block;
    padding: 0 24px;
    justify-content: right;
    margin-top: 40px;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    color: #FFC9FA;

 }
 .escola{
    background-color: #4B4B4B; /*cor*/
    display: flex; /*organizar a estrutura do nosso conteúdo*/
    justify-content: center; /*alinha imagem e os textos com espaçamentos entre eles*/
    padding: 24px 0; /*Altera o espaçamento interno*/
}

.escola-div-conteudo{
    width: 50%; /*largura*/
}

.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*/
    font-family: Arial, Helvetica, sans-serif; /*especifica a fonte de um elemento*/
    color: #AFAFAF;
}

.escola-texto{
    font-size: 20px;/*tamanho da fonte*/
    font-family: Arial, Helvetica, sans-serif; /*especifica a fonte de um elemento*/
    color: #AFAFAF;
    justify-content: center;

}

.imagem-escola{
     padding: 30px;
     width: 40%; /*largura*/
     height: 300px;/*altura*/
     border-radius: 60px; /*para definir bordas arredondadas da imagem*/
    }

    #estudante{
        background-color: #4B4B4B; /*cor de fundo*/
        color: #AFAFAF; /*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*/
        font-family: Arial, Helvetica, sans-serif; /*especifica a fonte de um elemento*/
    }

    p{
        padding: 0 120px; /* alinhar o espaçamento */
        font-size: 20px;/*tamanho da fonte*/
        font-family: Arial, Helvetica, sans-serif; /*especifica a fonte de um elemento*/
     }

     .estudantes-todos{
        display: grid; /* especificar o espaçamento do grid(organizar por colunas) */
        grid-template-columns: 25% 25% 25% 25%;
        align-items: center;
        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{
        padding: 30px 30px;
        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)*/
    }
    .rodape{
    background-color:#4B4B4B;
    }

    .copyright{
            text-align: center;/*texto centralizado*/
            height: 100px;/*altura*/
            line-height: 100px;   /*altura da linha*/
            color: #AFAFAF;
            font-size: 12px;/*tamanho da fonte*/
    }