Skip to content

Commit 843015e

Browse files
bernardoyt1093-wqbernardoyt1093-wq
authored
Update style.css
1 parent 82ed714 commit 843015e

1 file changed

Lines changed: 176 additions & 40 deletions

File tree

‎style.css‎

Lines changed: 176 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,209 @@
1+
/* Importando a fonte Alfa Slab One do Google Fonts */
12
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap');
23

34
:root {
4-
--bg: #282828;
5-
--nav: #9D86CD;
6-
--card: #8c98e3;
7-
--accent: #98BFFF;
8-
--text-light: #ffffff;
9-
--text-dark: #282828;
5+
--bg-dark: #282828; /* Cor Escura Principal */
6+
--purple-main: #9D86CD; /* Roxo Médio */
7+
--purple-light: #8c98e3; /* Roxo Azulado */
8+
--blue-light: #98BFFF; /* Azul Claro */
9+
--blue-accent: #909ce8; /* Azul de destaque */
10+
--text-dark: #282828; /* Texto Escuro para contraste */
11+
--text-light: #ffffff; /* Texto Branco para fundos escuros */
1012
}
1113

12-
[data-theme="light"] {
13-
--bg: #f0f0f0;
14-
--nav: #98BFFF;
15-
--card: #ffffff;
16-
--text-light: #282828;
14+
* {
15+
margin: 0;
16+
padding: 0;
17+
box-sizing: border-box;
18+
font-family: 'Alfa Slab One', serif; /* Aplicado a todos os dispositivos */
1719
}
1820

19-
* {
20-
margin: 0; padding: 0; box-sizing: border-box;
21-
font-family: 'Alfa Slab One', cursive;
21+
html {
22+
scroll-behavior: smooth;
2223
}
2324

2425
body {
25-
background-color: var(--bg);
26+
background-color: var(--bg-dark);
2627
color: var(--text-light);
27-
transition: background 0.5s ease;
28+
line-height: 1.6;
2829
}
2930

31+
/* --- NAVBAR --- */
3032
.navbar {
31-
background-color: var(--nav);
32-
padding: 15px 5%;
33-
display: flex; justify-content: space-between; align-items: center;
33+
background-color: var(--purple-main);
34+
padding: 1rem 5%;
35+
display: flex;
36+
justify-content: space-between;
37+
align-items: center;
38+
position: sticky;
39+
top: 0;
40+
z-index: 1000;
41+
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
42+
}
43+
44+
.navbar .logo {
45+
font-size: 1.5rem;
46+
color: var(--text-dark);
47+
}
48+
49+
.navbar .logo span {
50+
color: var(--text-light);
3451
}
3552

36-
.navbar ul { display: flex; list-style: none; gap: 15px; align-items: center; }
53+
.navbar ul {
54+
display: flex;
55+
list-style: none;
56+
gap: 20px;
57+
align-items: center;
58+
}
3759

38-
.navbar a { text-decoration: none; color: var(--text-dark); font-size: 13px; }
60+
.navbar ul li a {
61+
text-decoration: none;
62+
color: var(--text-dark);
63+
font-size: 0.9rem;
64+
transition: 0.3s;
65+
}
3966

67+
.navbar ul li a:hover {
68+
color: var(--text-light);
69+
}
70+
71+
/* Botão Especial Comunidade */
4072
.btn-comunidade {
41-
background: var(--accent); padding: 5px 10px; border-radius: 5px;
73+
background-color: var(--blue-light);
74+
padding: 8px 15px;
75+
border-radius: 8px;
76+
border: 2px solid var(--text-dark);
4277
}
4378

44-
.theme-switch {
45-
background: var(--text-dark); color: white; border: 2px solid var(--accent);
46-
padding: 7px 12px; border-radius: 8px; cursor: pointer; font-family: 'Alfa Slab One', cursive;
79+
/* --- HERO SECTION --- */
80+
.hero {
81+
text-align: center;
82+
padding: 80px 20px;
83+
background: linear-gradient(180deg, var(--purple-main) 0%, var(--bg-dark) 100%);
4784
}
4885

49-
.hero { text-align: center; padding: 60px 20px; }
50-
.hero h1 span { color: var(--nav); }
86+
.hero h1 {
87+
font-size: 2.5rem;
88+
color: var(--text-dark);
89+
margin-bottom: 20px;
90+
text-shadow: 2px 2px var(--blue-light);
91+
}
5192

52-
.container { max-width: 900px; margin: 0 auto; padding: 20px; }
93+
.hero h1 span {
94+
color: var(--text-light);
95+
text-shadow: 2px 2px var(--bg-dark);
96+
}
97+
98+
.hero p {
99+
color: var(--blue-light);
100+
max-width: 700px;
101+
margin: 0 auto;
102+
}
103+
104+
/* --- CONTAINER E CARDS --- */
105+
.container {
106+
max-width: 1100px;
107+
margin: 40px auto;
108+
padding: 0 20px;
109+
}
110+
111+
.cards-container {
112+
display: grid;
113+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
114+
gap: 30px;
115+
margin-top: 40px;
116+
}
53117

54118
.card {
55-
background-color: var(--card); color: var(--text-dark);
56-
padding: 30px; border-radius: 20px; border: 5px solid var(--accent);
57-
margin-bottom: 20px;
119+
background-color: var(--purple-light);
120+
padding: 30px;
121+
border-radius: 20px;
122+
border: 4px solid var(--blue-light);
123+
color: var(--text-dark);
124+
transition: transform 0.3s ease;
125+
}
126+
127+
.card:hover {
128+
transform: translateY(-10px);
129+
background-color: var(--blue-light);
130+
}
131+
132+
.card h3 {
133+
margin-bottom: 15px;
134+
font-size: 1.4rem;
135+
}
136+
137+
.badge {
138+
background-color: var(--bg-dark);
139+
color: var(--blue-light);
140+
padding: 5px 10px;
141+
border-radius: 5px;
142+
font-size: 0.7rem;
143+
display: inline-block;
144+
margin-bottom: 10px;
145+
}
146+
147+
/* --- BOTÕES --- */
148+
.btn-primary, .btn-lesson {
149+
background-color: var(--bg-dark);
150+
color: var(--blue-light);
151+
border: none;
152+
padding: 12px 25px;
153+
font-family: 'Alfa Slab One', serif;
154+
cursor: pointer;
155+
border-radius: 10px;
156+
transition: 0.3s;
157+
text-decoration: none;
158+
display: inline-block;
159+
margin-top: 15px;
160+
}
161+
162+
.btn-primary:hover, .btn-lesson:hover {
163+
background-color: var(--text-light);
164+
color: var(--bg-dark);
165+
transform: scale(1.05);
166+
}
167+
168+
/* --- EDITOR DE CÓDIGO (PRÁTICAS) --- */
169+
#tutorial-texto {
170+
margin-bottom: 40px;
171+
}
172+
173+
#codigo-editor, #campo-codigo {
174+
width: 100%;
175+
background-color: #1a1a1a;
176+
color: var(--blue-light);
177+
border: 3px solid var(--purple-main);
178+
padding: 15px;
179+
border-radius: 10px;
180+
font-family: monospace !important; /* Código precisa ser monospace */
181+
font-size: 1.1rem;
58182
}
59183

60-
.btn-primary {
61-
background: var(--bg); color: var(--accent);
62-
padding: 12px 20px; border: none; border-radius: 10px; cursor: pointer;
63-
font-family: 'Alfa Slab One', cursive;
184+
#console-output, #console-fake {
185+
background-color: #000;
186+
color: #4ade80;
187+
padding: 15px;
188+
border-radius: 10px;
189+
margin-top: 15px;
190+
font-family: monospace !important;
64191
}
65192

66-
#codigo-editor {
67-
width: 100%; height: 140px; background: #000; color: #0f0;
68-
padding: 15px; font-family: monospace; border-radius: 10px; margin-top: 15px;
193+
/* --- FOOTER --- */
194+
footer {
195+
border-top: 2px solid var(--purple-main);
196+
padding: 40px;
197+
background-color: #222;
69198
}
70199

71-
#console-output {
72-
background: #111; color: #fff; padding: 15px; border-radius: 10px; margin-top: 10px;
200+
/* Responsividade para Celulares */
201+
@media (max-width: 768px) {
202+
.navbar {
203+
flex-direction: column;
204+
gap: 15px;
205+
}
206+
.hero h1 {
207+
font-size: 1.8rem;
208+
}
73209
}

0 commit comments

Comments
 (0)