Skip to content

Commit 9e9a274

Browse files
Carla-coderCarla-coder
committed
Att
1 parent bf59fb3 commit 9e9a274

File tree

3 files changed

+348
-135
lines changed

3 files changed

+348
-135
lines changed

‎css/style.css

+143-70
Original file line numberDiff line numberDiff line change
@@ -1,114 +1,187 @@
11
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
22

33
* {
4-
margin: 0;
5-
padding: 0;
6-
box-sizing: border-box;
7-
font-family: "poppins", sans-serif;
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
font-family: 'poppins', sans-serif;
88
}
99

1010
body {
11-
height: 100vh;
12-
display: flex;
13-
align-items: center;
14-
justify-content: center;
15-
flex-direction: column;
16-
gap: 5px;
17-
background-image: url('../assets/image/fundobee1.jpg');
18-
background-size: cover;
19-
background-position: center;
20-
background-repeat: no-repeat;
11+
position: relative;
12+
height: 100vh;
13+
display: flex;
14+
align-items: center;
15+
justify-content: center;
16+
flex-direction: column;
17+
gap: 5px;
18+
background-image: url('../assets/image/fundobee1.jpg');
19+
background-size: cover;
20+
background-position: center;
21+
background-repeat: no-repeat;
2122
}
2223

23-
body h2 {
24-
color: #000000;
25-
font-size: 25px;
26-
font-family: "TinkerToy Regular", sans-serif;
24+
.overlay {
25+
position: absolute;
26+
top: 0;
27+
left: 0;
28+
width: 100%;
29+
height: 100%;
30+
background: rgba(
31+
255,
32+
255,
33+
255,
34+
0.5
35+
); /* Ajuste a opacidade conforme necessário */
36+
z-index: 1;
37+
}
38+
39+
h2 {
40+
z-index: 2;
41+
color: #000000;
2742
}
2843

2944
main {
30-
padding: 10px;
31-
border-radius: 10px;
32-
width: 100%;
33-
max-width: 300px;
34-
min-width: 200px;
35-
display: flex;
36-
align-items: center;
37-
justify-content: center;
45+
z-index: 2;
46+
padding: 10px;
47+
border-radius: 10px;
48+
width: 100%;
49+
max-width: 500px;
50+
min-width: 200px;
51+
display: flex;
52+
flex-direction: column;
53+
align-items: center;
54+
justify-content: center;
55+
background: rgba(
56+
255,
57+
255,
58+
255,
59+
0.8
60+
); /* Fundo semi-transparente para o conteúdo principal */
61+
overflow: auto;
3862
}
3963

4064
.content {
41-
display: flex;
42-
flex-direction: column;
43-
gap: 10px;
44-
width: 100%;
65+
display: flex;
66+
flex-direction: column;
67+
gap: 10px;
68+
width: 100%;
69+
margin-bottom: 20px;
4570
}
4671

4772
.spnQtd {
48-
text-align: end;
49-
color: #000000;
73+
text-align: end;
74+
color: #000000;
5075
}
5176

5277
.answers {
53-
display: flex;
54-
flex-direction: column;
55-
gap: 5px;
56-
color: #000000;
78+
display: flex;
79+
flex-direction: column;
80+
gap: 5px;
81+
color: #000000;
5782
}
5883

5984
button {
60-
width: 100%;
61-
text-align: start;
62-
padding: 5px;
63-
border: none;
64-
border-radius: 5px;
65-
cursor: pointer;
66-
background: linear-gradient(90deg, rgb(102, 151, 104), rgb(51, 102, 51), rgb(0, 51, 0));
67-
color: white;
68-
font-size: 14px;
85+
width: 50%;
86+
text-align: center;
87+
padding: 10px;
88+
border: none;
89+
border-radius: 5px;
90+
cursor: pointer;
91+
background: linear-gradient(
92+
90deg,
93+
rgb(102, 151, 104),
94+
rgb(51, 102, 51),
95+
rgb(0, 51, 0)
96+
);
97+
color: white;
98+
font-size: 14px;
99+
margin-top: 10px;
100+
align-self: center;
69101
}
70102

71103
.finish {
72-
display: none;
73-
flex-direction: column;
74-
gap: 10px;
104+
display: none;
105+
flex-direction: column;
106+
text-align: center;
107+
gap: 10px;
108+
position: relative;
109+
z-index: 2;
75110
}
76111

77112
.finish button {
78-
text-align: center;
113+
text-align: center;
79114
}
80115

81116
input {
82-
all: unset;
83-
border: 1px solid #94a3b8;
84-
width: 16px;
85-
height: 16px;
86-
border-radius: 50%;
87-
display: flex;
88-
align-items: center;
89-
justify-content: center;
90-
flex-shrink: 0;
117+
all: unset;
118+
border: 1px solid #94a3b8;
119+
width: 16px;
120+
height: 16px;
121+
border-radius: 50%;
122+
display: flex;
123+
align-items: center;
124+
justify-content: center;
125+
flex-shrink: 0;
91126
}
92127

93128
input:checked {
94-
border: 1px solid rgb(102, 151, 104);
129+
border: 1px solid rgb(102, 151, 104);
95130
}
96131

97132
input:checked:before {
98-
content: "";
99-
width: 10px;
100-
height: 10px;
101-
background-color: rgb(102, 151, 104);
102-
border-radius: 50%;
133+
content: '';
134+
width: 10px;
135+
height: 10px;
136+
background-color: rgb(102, 151, 104);
137+
border-radius: 50%;
103138
}
104139

105140
.answers div {
106-
display: flex;
107-
align-items: center;
108-
gap: 5px;
141+
display: flex;
142+
align-items: center;
143+
gap: 5px;
109144
}
110145

111146
label {
112-
order: 1;
113-
/* Coloca o texto na frente do input */
114-
}
147+
order: 1;
148+
/* Coloca o texto na frente do input */
149+
}
150+
151+
.incorrect-answers {
152+
margin-top: 20px;
153+
max-height: 300px; /* Altura máxima para scroll */
154+
overflow-y: auto; /* Adiciona scroll quando necessário */
155+
padding: 10px;
156+
border: 1px solid #ccc;
157+
border-radius: 5px;
158+
}
159+
160+
.incorrect-answers h3 {
161+
margin-bottom: 10px;
162+
font-size: 18px;
163+
color: #ff0000;
164+
}
165+
166+
.incorrect-answers p {
167+
margin-bottom: 10px;
168+
font-size: 16px;
169+
color: #000000;
170+
}
171+
172+
.correct-answer {
173+
font-weight: bold;
174+
margin-bottom: 10px;
175+
}
176+
177+
.result-info {
178+
text-align: left;
179+
margin-top: 20px;
180+
margin-bottom: 10px;
181+
}
182+
183+
.result-info p {
184+
margin-bottom: 5px;
185+
font-size: 16px;
186+
color: #000000;
187+
}

‎index.html

+3-1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@
1212

1313
<body>
1414

15+
<div class="overlay"></div>
16+
1517
<h2>Quiz de Pintura Country</h2>
1618

1719
<main>
@@ -31,7 +33,7 @@ <h2>Quiz de Pintura Country</h2>
3133
<span></span>
3234

3335
<button>Reiniciar</button>
34-
36+
0
3537
</div>
3638

3739
</main>

0 commit comments

Comments
 (0)