Skip to content

Commit d3ddae6

Browse files
bernardoyt1093-wqbernardoyt1093-wq
authored
Update style.css
1 parent 14660f9 commit d3ddae6

1 file changed

Lines changed: 150 additions & 110 deletions

File tree

‎style.css‎

Lines changed: 150 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,169 +1,209 @@
1+
/* Importando a fonte Alfa Slab One do Google Fonts */
2+
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap');
3+
14
:root {
2-
--bg-color: #51468e;
3-
--card-bg: #4c6299;
4-
--js-yellow: #f7df1e;
5-
--text-white: #fffda4;
6-
--accent-blue: #191953;
7-
/* Variável para a nova fonte */
8-
--font-especial: 'Playwrite IE Sj', cursive;
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 */
912
}
1013

1114
* {
1215
margin: 0;
1316
padding: 0;
1417
box-sizing: border-box;
18+
font-family: 'Alfa Slab One', serif; /* Aplicado a todos os dispositivos */
1519
}
1620

17-
body {
18-
background-color: var(--bg-color);
19-
color: var(--text-white);
20-
line-height: 1.6;
21-
/* Fonte padrão para textos longos */
22-
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
21+
html {
22+
scroll-behavior: smooth;
2323
}
2424

25-
/* Aplicando a fonte Playwrite em títulos e destaques */
26-
h1, h2, h3, .logo, .btn-primary, .btn-run, .btn-lesson {
27-
font-family: var(--font-especial);
25+
body {
26+
background-color: var(--bg-dark);
27+
color: var(--text-light);
28+
line-height: 1.6;
2829
}
2930

30-
/* Navbar */
31+
/* --- NAVBAR --- */
3132
.navbar {
33+
background-color: var(--purple-main);
34+
padding: 1rem 5%;
3235
display: flex;
3336
justify-content: space-between;
34-
padding: 1.5rem 10%;
35-
background: #576aa2cc;
36-
backdrop-filter: blur(10px);
37+
align-items: center;
3738
position: sticky;
3839
top: 0;
3940
z-index: 1000;
41+
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
4042
}
4143

42-
.logo { font-size: 1.5rem; }
43-
.logo span { color: var(--js-yellow); }
44-
45-
.navbar ul { display: flex; list-style: none; }
46-
.navbar ul li { margin-left: 2rem; }
47-
.navbar ul li a { text-decoration: none; color: var(--text-white); transition: 0.3s; }
48-
.navbar ul li a:hover { color: var(--js-yellow); }
44+
.navbar .logo {
45+
font-size: 1.5rem;
46+
color: var(--text-dark);
47+
}
4948

50-
/* Hero Section */
51-
.hero {
52-
text-align: center;
53-
padding: 5rem 1rem;
54-
background: radial-gradient(circle at center, #51468e 0%, #51468e 100%);
49+
.navbar .logo span {
50+
color: var(--text-light);
5551
}
5652

57-
.hero h1 { font-size: 2.5rem; margin-bottom: 1rem; }
58-
.hero h1 span { color: var(--js-yellow); }
53+
.navbar ul {
54+
display: flex;
55+
list-style: none;
56+
gap: 20px;
57+
align-items: center;
58+
}
5959

60-
.btn-primary {
61-
background-color: var(--js-yellow);
62-
color: #0cca15;
63-
border: none;
64-
padding: 0.8rem 2rem;
65-
font-size: 1rem;
66-
border-radius: 5px;
67-
cursor: pointer;
68-
margin-top: 1.5rem;
69-
transition: transform 0.2s;
60+
.navbar ul li a {
61+
text-decoration: none;
62+
color: var(--text-dark);
63+
font-size: 0.9rem;
64+
transition: 0.3s;
7065
}
7166

72-
.btn-primary:hover { transform: scale(1.05); }
67+
.navbar ul li a:hover {
68+
color: var(--text-light);
69+
}
7370

74-
/* Editor / Container */
75-
.container { padding: 2rem 10%; }
71+
/* Botão Especial Comunidade */
72+
.btn-comunidade {
73+
background-color: var(--blue-light);
74+
padding: 8px 15px;
75+
border-radius: 8px;
76+
border: 2px solid var(--text-dark);
77+
}
7678

77-
.editor-section {
78-
background: var(--card-bg);
79-
padding: 2rem;
80-
border-radius: 12px;
81-
box-shadow: 0 10px 30px rgba(166, 240, 151, 0.5);
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%);
8284
}
8385

84-
textarea {
85-
background: #000000;
86-
color: #abb2bf;
87-
padding: 1rem;
88-
border-radius: 5px;
89-
font-family: 'Courier New', Courier, monospace;
90-
height: 150px;
91-
width: 100%;
92-
border: 1px solid #3e4451;
93-
resize: none;
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);
9491
}
9592

96-
.btn-run {
97-
align-self: flex-end;
98-
margin-top: 10px;
99-
padding: 0.5rem 1.5rem;
100-
background: #212e26;
101-
color: white;
102-
border: none;
103-
border-radius: 4px;
104-
cursor: pointer;
93+
.hero h1 span {
94+
color: var(--text-light);
95+
text-shadow: 2px 2px var(--bg-dark);
10596
}
10697

107-
.output-console {
108-
margin-top: 1rem;
109-
padding: 1rem;
110-
background: #7c5f5f;
111-
color: #fffda4;
112-
border-radius: 5px;
113-
min-height: 50px;
114-
font-family: monospace;
98+
.hero p {
99+
color: var(--blue-light);
100+
max-width: 700px;
101+
margin: 0 auto;
115102
}
116103

117-
/* Cards de Aulas */
118-
.aulas-grid { margin-top: 4rem; }
104+
/* --- CONTAINER E CARDS --- */
105+
.container {
106+
max-width: 1100px;
107+
margin: 40px auto;
108+
padding: 0 20px;
109+
}
119110

120111
.cards-container {
121112
display: grid;
122-
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
123-
gap: 20px;
124-
margin-top: 20px;
113+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
114+
gap: 30px;
115+
margin-top: 40px;
125116
}
126117

127118
.card {
128-
background: var(--card-bg);
129-
padding: 1.5rem;
130-
border-radius: 10px;
131-
border-left: 4px solid var(--js-yellow);
132-
transition: 0.3s;
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;
133125
}
134126

135127
.card:hover {
136-
transform: translateY(-5px);
137-
background: #2d3a4f;
128+
transform: translateY(-10px);
129+
background-color: var(--blue-light);
130+
}
131+
132+
.card h3 {
133+
margin-bottom: 15px;
134+
font-size: 1.4rem;
138135
}
139136

140137
.badge {
141-
background: var(--js-yellow);
142-
color: #000;
138+
background-color: var(--bg-dark);
139+
color: var(--blue-light);
140+
padding: 5px 10px;
141+
border-radius: 5px;
143142
font-size: 0.7rem;
144-
font-weight: bold;
145-
padding: 2px 8px;
146-
border-radius: 20px;
147-
text-transform: uppercase;
148-
font-family: sans-serif;
143+
display: inline-block;
144+
margin-bottom: 10px;
149145
}
150146

151-
.btn-lesson {
152-
background: transparent;
153-
border: 1px solid var(--js-yellow);
154-
color: var(--js-yellow);
155-
padding: 0.5rem 1rem;
156-
border-radius: 4px;
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;
157154
cursor: pointer;
155+
border-radius: 10px;
158156
transition: 0.3s;
157+
text-decoration: none;
158+
display: inline-block;
159+
margin-top: 15px;
159160
}
160161

161-
.btn-lesson:hover {
162-
background: var(--js-yellow);
163-
color: #000;
162+
.btn-primary:hover, .btn-lesson:hover {
163+
background-color: var(--text-light);
164+
color: var(--bg-dark);
165+
transform: scale(1.05);
164166
}
165167

166-
/* Estilo para a div onde a aula aparece */
168+
/* --- EDITOR DE CÓDIGO (PRÁTICAS) --- */
167169
#tutorial-texto {
168-
margin-top: 30px;
169-
}
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;
182+
}
183+
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+
}
192+
193+
/* --- FOOTER --- */
194+
footer {
195+
border-top: 2px solid var(--purple-main);
196+
padding: 40px;
197+
background-color: #222;
198+
}
199+
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+
}
209+
}

0 commit comments

Comments
 (0)