Alura-Plus/style.css at main · Luana2712/Alura-Plus · 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
:root{
     --branco-principal: #FFFFFF;
     --cinza-secundario:#C0C0C0;
     --botao-azul: #167BF7;
     --cor-de-fundo:#00030c;
     --fonte-principal:'Roboto';
}
body {
     background-color: var(--cor-de-fundo);
     color: var(--branco-principal);
     font-family:var(--fonte-principal);
     font-size:16px;
     font-weight:400;
     }

     .principal{
     background-image: url("Background.png");
     background-size: contain;
     background-repeat: no-repeat;
     height: 100vh;
     display: grid;
     grid-template-columns: 50% 50%;
     align-items: center;
     text-align: center;
}

.principal-botao {
background-color: var(--botao-azul);
color: var(--branco-principal);
border-radius: 5px;
padding: 16px;
text-decoration: none;
display:block;
}
.principal-botao-2 {
background-color: transparent;
border: 1px solid var(--branco-principal);
color: var(--branco-principal);
border-radius: 5px;
padding: 16px;
text-decoration: none;
display: block;
margin-bottom: 16px;
}
.principal-titulo{
     font: size 28px;;
     font-weight: 700;
     font-family:'Roboto';

}

.principal-aviso{
font-size: 12px;
color: var(--cinza-secundario);
}

.principal-imagem{
margin: 16px 0 32px 0;

}

.principal-caixa{
margin: 0 96px;

}
.secundaria{
     height: 100vh;
     display: grid;
     grid-template-columns: 50% 50%;
     align-items: center;
     margin: 0 100px;
}
.secundaria-imagem{
  width: 80%;

}
.secundaria-titulo{
     font-weight: 700;
     font-size: 48px;
}
.secundaria-texto{
     color: var(--cinza-secundario);

}
.secundaria-botao{
display: inline-block;
margin: top 16px;;
}
.dispositivos-lista{
     display: flex;
     list-style-type: none;
     margin: 80px 0;
     justify-content:center;
}
.dispositivos{
     text-align:center;
}
.dispositivos-titulo{
     font-size: 48px;
}
.lista-item{
     font-size: 32px;
     display: flex;
}