Skip to content

Commit 3e4086f

Browse files
NavelogicNavelogic
authored
Merge pull request #2 from CaioHVectorA/feat/ui-adjusts
Feat/UI adjusts
2 parents 257eb10 + 9a9baab commit 3e4086f

File tree

7 files changed

+334
-121
lines changed

7 files changed

+334
-121
lines changed

‎css/style.css

Lines changed: 187 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
11
* {
2-
background-color: rgb(7, 7, 7);
32
color: white;
43
font-family: Arial, sans-serif;
54
box-sizing: border-box;
65
margin: 0;
7-
padding: 0;
6+
/* padding: 0; */
87
}
9-
8+
a {
9+
text-decoration: none;
10+
color: inherit;
11+
}
1012
body {
1113
text-align: center;
1214
min-height: 100vh;
1315
padding: 20px;
16+
background-color: #202020;
1417
display: flex;
1518
flex-direction: column;
1619
justify-content: center;
@@ -35,7 +38,7 @@ section {
3538
width: 100%;
3639
max-width: 800px;
3740
text-align: center;
38-
margin: 20px auto;
41+
margin: 0px auto;
3942
padding: 0 10px;
4043
}
4144

@@ -78,6 +81,7 @@ button img {
7881
}
7982
.logo{
8083
width: 80%;
84+
margin: 0 auto;
8185
height: 80%;
8286
}
8387

@@ -109,6 +113,7 @@ ul li, ol li {
109113

110114
.bazar {
111115
display: flex;
116+
/* grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); Ajusta o número de colunas automaticamente */
112117
flex-wrap: wrap;
113118
justify-content: center;
114119
gap: 20px;
@@ -122,7 +127,7 @@ ul li, ol li {
122127
width: 150px;
123128
}
124129

125-
.bazar img {
130+
.bazar img:not(.h-5) {
126131
width: 100%;
127132
height: auto;
128133
margin-bottom: 10px;
@@ -143,7 +148,7 @@ p {
143148
}
144149

145150
#voltar-ao-inicio {
146-
margin: 40px auto 20px;
151+
margin: 0px auto 20px;
147152
}
148153

149154
/* Media Queries */
@@ -218,4 +223,180 @@ p {
218223

219224
.menu-item:hover {
220225
transform: scale(1.05); /* Efeito de zoom ao passar o mouse */
226+
}
227+
228+
.bg-zap {
229+
background-color: #25d366;
230+
width: fit-content;
231+
justify-self: center;
232+
padding: 6px 12px !important;
233+
/* margin: 6px 12px; */
234+
}
235+
.bg-insta {
236+
/* background-color: #25d366; */
237+
width: fit-content;
238+
padding: 6px 12px !important;
239+
justify-self: center;
240+
/* margin: 6px 12px; */
241+
}
242+
243+
h2, h3 {
244+
font-weight: bold;
245+
color: #ffffff;
246+
text-align: center;
247+
}
248+
249+
h2 {
250+
font-size: 1.5rem;
251+
}
252+
253+
h3 {
254+
font-size: 1rem;
255+
}
256+
257+
li {
258+
list-style-type: disc;
259+
margin-left: 20px;
260+
color: #ffffff;
261+
}
262+
263+
.w-5 {
264+
width: 20px !important;
265+
266+
}
267+
268+
.h-5 {
269+
height: 20px !important;
270+
}
271+
272+
/* Tailwind Utility Classes */
273+
.text-3xl {
274+
font-size: 1.875rem;
275+
line-height: 2.25rem;
276+
}
277+
278+
.text-xl {
279+
font-size: 1.25rem;
280+
line-height: 1.75rem;
281+
}
282+
283+
.text-sm {
284+
font-size: 0.875rem;
285+
line-height: 1.25rem;
286+
}
287+
288+
.italic {
289+
font-style: italic;
290+
}
291+
292+
.opacity-70 {
293+
opacity: 0.7;
294+
}
295+
296+
.opacity-90 {
297+
opacity: 0.9;
298+
}
299+
300+
.border-y {
301+
border-top-width: 1px;
302+
border-bottom-width: 1px;
303+
}
304+
305+
.border-white\/40 {
306+
border-color: rgba(255, 255, 255, 0.4);
307+
}
308+
309+
.rounded-lg {
310+
border-radius: 0.5rem;
311+
}
312+
313+
.inline-flex {
314+
display: inline-flex;
315+
}
316+
317+
.items-center {
318+
align-items: center;
319+
}
320+
321+
.justify-center {
322+
justify-content: center;
323+
}
324+
325+
.gap-2 {
326+
gap: 0.5rem;
327+
}
328+
329+
.gap-4 {
330+
gap: 1rem;
331+
}
332+
333+
.font-medium {
334+
font-weight: 500;
335+
}
336+
337+
.mt-8 {
338+
margin-top: 2rem;
339+
}
340+
341+
.invert {
342+
filter: invert(1);
343+
}
344+
345+
.flex {
346+
display: flex;
347+
}
348+
349+
.bg-blue-500 {
350+
background-color: #3b82f6;
351+
}
352+
353+
.hover\:bg-blue-600:hover {
354+
background-color: #2563eb;
355+
}
356+
357+
.hover\:bg-green-700:hover {
358+
background-color: #15803d;
359+
}
360+
361+
.bg-gradient-to-r {
362+
background-image: linear-gradient(to right, var(--tw-gradient-stops));
363+
}
364+
365+
.from-purple-500 {
366+
--tw-gradient-from: #a855f7;
367+
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(168 85 247 / 0));
368+
}
369+
370+
.via-pink-500 {
371+
--tw-gradient-stops: var(--tw-gradient-from), #ec4899, var(--tw-gradient-to, rgb(236 72 153 / 0));
372+
}
373+
374+
.to-orange-500 {
375+
--tw-gradient-to: #f97316;
376+
}
377+
378+
.hover\:from-purple-600:hover {
379+
--tw-gradient-from: #9333ea;
380+
}
381+
382+
.hover\:via-pink-600:hover {
383+
--tw-gradient-stops: var(--tw-gradient-from), #db2777, var(--tw-gradient-to, rgb(219 39 119 / 0));
384+
}
385+
386+
.hover\:to-orange-600:hover {
387+
--tw-gradient-to: #ea580c;
388+
}
389+
390+
.transition-all {
391+
transition-property: all;
392+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
393+
transition-duration: 150ms;
394+
}
395+
396+
.w-4 {
397+
width: 1rem;
398+
}
399+
400+
.h-4 {
401+
height: 1rem;
221402
}

‎img/expand-arrows.png

9.74 KB
Loading

‎index.html

Lines changed: 43 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,51 @@
11
<!DOCTYPE html>
22
<html lang="pt-br">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>UFF POPULAR</title>
7-
<link rel="stylesheet" href="css/style.css">
8-
</head>
9-
<body>
7+
<link rel="stylesheet" href="css/style.css" />
8+
</head>
9+
<body>
1010
<header class="header">
11-
<h1>UFF: POPULAR (v3.0)</h1>
12-
<p id="aviso-legal">Lembramos que todos os grupos e canais apresentados são administrados por estudantes de diversas áreas e não possuem vínculo formal com a Universidade Federal Fluminense.</p>
11+
<h1 class="text-3xl">UFF: POPULAR</h1>
12+
<p class="italic opacity-70 text-xl">v3.0</p>
13+
<p id="aviso-legal" class="opacity-90 border-y border-white/40">
14+
Lembramos que todos os grupos e canais apresentados são administrados
15+
por estudantes de diversas áreas e não possuem vínculo formal com a
16+
<b>Universidade Federal Fluminense</b>.
17+
</p>
1318
</header>
1419
<section id="content">
15-
<div id="view-normal">
16-
<h2>Grupo e canal UFF: Notícias</h2>
17-
<button class="boton-home" onclick="renderUFFNoticias()"><img src="img/uffnoticiasgrupo.png" alt="Logo do grupo UFF: Notícias"></button>
18-
19-
<h2>Grupos da UFF: Bazar/Vendas</h2>
20-
<button class="boton-home" onclick="renderUFFBazareVendas()"><img src="img/BazareVendas1.png" alt="Logo do grupo UFF: Bazar/Vendas"></button>
21-
22-
<h2>Pata de Apoio</h2>
23-
<button class="boton-home" onclick="renderPatadeApoio()"><img src="img/patadeapoio.png" alt="Logo do grupo Pata de Apoio"></button>
24-
</div>
25-
<div id="view-dinamica" style="display:none;">
26-
<button id="voltar-ao-inicio" onclick="renderViewNormal()">Voltar ao início</button>
27-
<div id="content-dinamico"></div>
28-
</div>
20+
<div id="view-normal">
21+
<h2>Grupo e canal UFF: Notícias</h2>
22+
<button class="boton-home" onclick="renderUFFNoticias()">
23+
<img
24+
src="img/uffnoticiasgrupo.png"
25+
alt="Logo do grupo UFF: Notícias"
26+
/>
27+
</button>
28+
29+
<h2>Grupos da UFF: Bazar/Vendas</h2>
30+
<button class="boton-home" onclick="renderUFFBazareVendas()">
31+
<img
32+
src="img/BazareVendas1.png"
33+
alt="Logo do grupo UFF: Bazar/Vendas"
34+
/>
35+
</button>
36+
37+
<h2>Pata de Apoio</h2>
38+
<button class="boton-home" onclick="renderPatadeApoio()">
39+
<img src="img/patadeapoio.png" alt="Logo do grupo Pata de Apoio" />
40+
</button>
41+
</div>
42+
<div id="view-dinamica" style="display: none">
43+
<button id="voltar-ao-inicio" onclick="renderViewNormal()">
44+
Voltar ao início
45+
</button>
46+
<div id="content-dinamico"></div>
47+
</div>
2948
</section>
30-
</body>
31-
<script src="javascript/main.js"></script>
49+
</body>
50+
<script src="javascript/main.js"></script>
3251
</html>

0 commit comments

Comments
 (0)