Skip to content

Commit 37cc471

Browse files
bernardoyt1093-wqbernardoyt1093-wq
authored
Update style.css
1 parent c87c30e commit 37cc471

1 file changed

Lines changed: 52 additions & 174 deletions

File tree

‎style.css‎

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

43
:root {
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 */
4+
--bg-color: #282828;
5+
--nav-bg: #9D86CD;
6+
--card-bg: #8c98e3;
7+
--accent: #98BFFF;
8+
--secondary: #909ce8;
9+
--text-white: #ffffff;
10+
--text-dark: #282828;
1211
}
1312

1413
* {
15-
margin: 0;
16-
padding: 0;
17-
box-sizing: border-box;
18-
font-family: 'Alfa Slab One', serif; /* Aplicado a todos os dispositivos */
19-
}
20-
21-
html {
22-
scroll-behavior: smooth;
14+
margin: 0; padding: 0; box-sizing: border-box;
15+
font-family: 'Alfa Slab One', cursive;
2316
}
2417

2518
body {
26-
background-color: var(--bg-dark);
27-
color: var(--text-light);
19+
background-color: var(--bg-color);
20+
color: var(--text-white);
2821
line-height: 1.6;
2922
}
3023

31-
/* --- NAVBAR --- */
24+
/* NAVBAR */
3225
.navbar {
33-
background-color: var(--purple-main);
26+
background-color: var(--nav-bg);
3427
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);
51-
}
52-
53-
.navbar ul {
54-
display: flex;
55-
list-style: none;
56-
gap: 20px;
57-
align-items: center;
28+
display: flex; justify-content: space-between; align-items: center;
29+
position: sticky; top: 0; z-index: 1000;
5830
}
5931

60-
.navbar ul li a {
61-
text-decoration: none;
62-
color: var(--text-dark);
63-
font-size: 0.9rem;
64-
transition: 0.3s;
65-
}
32+
.navbar .logo { color: var(--text-dark); font-size: 1.5rem; }
33+
.navbar .logo span { color: var(--text-white); }
6634

67-
.navbar ul li a:hover {
68-
color: var(--text-light);
69-
}
35+
.navbar ul { display: flex; list-style: none; gap: 20px; align-items: center; }
36+
.navbar ul li a { text-decoration: none; color: var(--text-dark); font-size: 0.9rem; }
7037

71-
/* Botão Especial Comunidade */
7238
.btn-comunidade {
73-
background-color: var(--blue-light);
74-
padding: 8px 15px;
75-
border-radius: 8px;
76-
border: 2px solid var(--text-dark);
77-
}
78-
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%);
84-
}
85-
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-
}
92-
93-
.hero h1 span {
94-
color: var(--text-light);
95-
text-shadow: 2px 2px var(--bg-dark);
39+
background-color: var(--accent);
40+
padding: 8px 15px; border-radius: 8px;
9641
}
9742

98-
.hero p {
99-
color: var(--blue-light);
100-
max-width: 700px;
101-
margin: 0 auto;
102-
}
43+
/* HERO & CONTAINER */
44+
.hero { text-align: center; padding: 60px 20px; background: linear-gradient(180deg, var(--nav-bg), transparent); }
45+
.hero h1 { font-size: 2.5rem; color: var(--text-dark); }
46+
.hero h1 span { color: var(--text-white); }
10347

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-
}
48+
.container { max-width: 1000px; margin: 0 auto; padding: 20px; }
11749

50+
/* CARDS */
11851
.card {
119-
background-color: var(--purple-light);
120-
padding: 30px;
121-
border-radius: 20px;
122-
border: 4px solid var(--blue-light);
52+
background-color: var(--card-bg);
12353
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;
54+
padding: 30px; border-radius: 20px;
55+
border: 5px solid var(--accent);
56+
margin-bottom: 25px;
16057
}
16158

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;
59+
/* BOTÕES DE AULA */
60+
.grid-aulas {
61+
display: grid;
62+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
63+
gap: 15px; margin-top: 20px;
17164
}
17265

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;
66+
.btn-lesson {
67+
background-color: var(--bg-color);
68+
color: var(--accent);
69+
border: none; padding: 15px;
70+
border-radius: 12px; cursor: pointer;
71+
font-family: 'Alfa Slab One', cursive;
72+
font-size: 0.8rem; transition: 0.3s;
18273
}
18374

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;
191-
}
75+
.btn-lesson:hover { transform: scale(1.05); background-color: var(--text-dark); }
19276

193-
/* --- FOOTER --- */
194-
footer {
195-
border-top: 2px solid var(--purple-main);
196-
padding: 40px;
197-
background-color: #222;
77+
/* EDITOR */
78+
#codigo-editor {
79+
width: 100%; height: 200px; background: #000; color: #4ade80;
80+
padding: 15px; font-family: monospace !important; border-radius: 10px;
81+
margin-top: 15px; border: 3px solid var(--nav-bg);
19882
}
19983

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-
}
84+
#console-output {
85+
background: #111; color: #fff; padding: 15px;
86+
border-radius: 10px; margin-top: 10px; font-family: monospace !important;
20987
}

0 commit comments

Comments
 (0)