Skip to content

Commit 4bd240d

Browse files
mattolivrmattolivr
committed
2.DR1-TP3.12
1 parent ec5f87d commit 4bd240d

File tree

2 files changed

+221
-46
lines changed

2 files changed

+221
-46
lines changed

‎2-desenvolvimento-front-end/DR1-mobile-first-ui/DR1-TP3.11~3.16/src/App.jsx‎

Lines changed: 100 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,115 @@
11
import './global.css';
2+
import './styles.css';
23
import './App.css';
34

45
function App() {
56
return (
6-
<div className="container">
7-
<header>
8-
<h1>DR1 - TPs 3.11 a 3.16</h1>
9-
<p>Projeto com estilos globais inspirados no GitHub</p>
7+
<div className="app-container">
8+
<header className="app-header">
9+
<div className="container">
10+
<h1>Aplicação com Estilos Globais e Escopados</h1>
11+
<p>Demonstração de global.css + styles.css com classes específicas</p>
12+
</div>
1013
</header>
1114

12-
<main>
13-
<section className="card">
14-
<h2>Sobre o Projeto</h2>
15-
<p>
16-
Este projeto utiliza estilos globais definidos em <code>global.css</code> para criar
17-
uma interface consistente em toda a aplicação. O design é inspirado no GitHub, com
18-
elementos mais arredondados e simplificados.
19-
</p>
20-
<button className="primary">Saiba Mais</button>
21-
</section>
15+
<main className="app-main">
16+
<div className="container">
17+
<section className="app-section">
18+
<div className="card">
19+
<h2>Sobre o Projeto</h2>
20+
<p>
21+
Este projeto demonstra o uso de estilos globais combinados com estilos
22+
escopados para o componente App. Utiliza uma paleta de cores inspirada
23+
no LinkedIn e GitHub.
24+
</p>
25+
<p>
26+
As classes com prefixo <code>app-</code> são específicas deste componente
27+
e definidas no arquivo <code>styles.css</code>.
28+
</p>
29+
</div>
30+
</section>
2231

23-
<section className="card">
24-
<h2>Recursos</h2>
25-
<ul>
26-
<li>Estilos globais centralizados</li>
27-
<li>Paleta de cores escura inspirada no GitHub</li>
28-
<li>Componentes arredondados e simples</li>
29-
<li>Tipografia consistente</li>
30-
</ul>
31-
</section>
32+
<section className="app-section">
33+
<h2>Recursos Principais</h2>
34+
<div className="app-grid">
35+
<div className="card">
36+
<h3>Design Responsivo</h3>
37+
<p>Layout adaptável para mobile, tablet e desktop com grid system</p>
38+
</div>
39+
<div className="card">
40+
<h3>Tema Escuro</h3>
41+
<p>Paleta de cores profissional inspirada no LinkedIn e GitHub</p>
42+
</div>
43+
<div className="card">
44+
<h3>Componentização</h3>
45+
<p>Estilos globais e escopados trabalhando em conjunto</p>
46+
</div>
47+
</div>
48+
</section>
3249

33-
<section className="card">
34-
<h2>Tecnologias</h2>
35-
<p>
36-
Desenvolvido com <a href="https://react.dev" target="_blank">React</a> e
37-
estilização CSS global para garantir consistência visual.
38-
</p>
39-
<div style={{ display: 'flex', gap: '12px', marginTop: '16px' }}>
40-
<button>React</button>
41-
<button>CSS</button>
42-
<button>JavaScript</button>
43-
</div>
44-
</section>
50+
<section className="app-section">
51+
<div className="card">
52+
<h2>Tecnologias Utilizadas</h2>
53+
<ul className="app-list">
54+
<li><code>React 18+</code> - Biblioteca JavaScript para interfaces</li>
55+
<li><code>Vite</code> - Build tool moderna e rápida</li>
56+
<li><code>CSS Variables</code> - Customização dinâmica de temas</li>
57+
<li><code>Mobile-First</code> - Abordagem responsiva progressiva</li>
58+
</ul>
59+
</div>
60+
</section>
4561

46-
<section className="card">
47-
<h3>Formulário de Contato</h3>
48-
<form style={{ display: 'flex', flexDirection: 'column', gap: '12px', marginTop: '16px' }}>
49-
<input type="text" placeholder="Seu nome" />
50-
<input type="email" placeholder="Seu e-mail" />
51-
<textarea rows="4" placeholder="Sua mensagem"></textarea>
52-
<button className="primary" type="submit">Enviar</button>
53-
</form>
54-
</section>
62+
<section className="app-section">
63+
<div className="card">
64+
<h2>Formulário de Contato</h2>
65+
<form className="app-form">
66+
<div className="app-form-group">
67+
<label htmlFor="nome">Nome Completo:</label>
68+
<input
69+
type="text"
70+
id="nome"
71+
placeholder="Seu nome completo"
72+
/>
73+
</div>
74+
75+
<div className="app-form-group">
76+
<label htmlFor="email">E-mail:</label>
77+
<input
78+
type="email"
79+
id="email"
80+
placeholder="seu@email.com"
81+
/>
82+
</div>
83+
84+
<div className="app-form-group">
85+
<label htmlFor="mensagem">Mensagem:</label>
86+
<textarea
87+
id="mensagem"
88+
placeholder="Escreva sua mensagem aqui..."
89+
/>
90+
</div>
91+
92+
<div className="app-button-group">
93+
<button type="submit" className="primary">
94+
Enviar Mensagem
95+
</button>
96+
<button type="button">
97+
Limpar Formulário
98+
</button>
99+
<button type="button" className="success">
100+
Salvar Rascunho
101+
</button>
102+
</div>
103+
</form>
104+
</div>
105+
</section>
106+
</div>
55107
</main>
56108

57-
<footer style={{ marginTop: '32px', paddingTop: '24px', borderTop: '1px solid var(--border-color)', textAlign: 'center' }}>
58-
<p>&copy; 2025 - Desenvolvido com React</p>
109+
<footer className="app-footer">
110+
<div className="container">
111+
<p>&copy; 2024 - Projeto desenvolvido com React, global.css e styles.css</p>
112+
</div>
59113
</footer>
60114
</div>
61115
);

‎2-desenvolvimento-front-end/DR1-mobile-first-ui/DR1-TP3.11~3.16/src/styles.css‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
/* Estilos específicos do componente App */
2+
3+
.app-container {
4+
min-height: 100vh;
5+
display: flex;
6+
flex-direction: column;
7+
}
8+
9+
.app-header {
10+
background-color: var(--bg-card);
11+
border-bottom: 1px solid var(--border-color);
12+
padding: 20px 0;
13+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
14+
}
15+
16+
.app-header h1 {
17+
text-align: center;
18+
margin-bottom: 8px;
19+
}
20+
21+
.app-header p {
22+
text-align: center;
23+
margin-bottom: 0;
24+
}
25+
26+
.app-main {
27+
flex: 1;
28+
padding: 32px 0;
29+
}
30+
31+
.app-section {
32+
margin-bottom: 24px;
33+
}
34+
35+
.app-section h2 {
36+
border-bottom: 2px solid var(--accent-primary);
37+
padding-bottom: 12px;
38+
margin-bottom: 20px;
39+
}
40+
41+
.app-grid {
42+
display: grid;
43+
grid-template-columns: 1fr;
44+
gap: 16px;
45+
}
46+
47+
.app-form {
48+
display: flex;
49+
flex-direction: column;
50+
gap: 16px;
51+
}
52+
53+
.app-form-group {
54+
display: flex;
55+
flex-direction: column;
56+
gap: 8px;
57+
}
58+
59+
.app-form-group label {
60+
color: var(--text-primary);
61+
font-weight: 500;
62+
font-size: 14px;
63+
}
64+
65+
.app-form-group input,
66+
.app-form-group textarea {
67+
width: 100%;
68+
}
69+
70+
.app-form-group textarea {
71+
min-height: 120px;
72+
resize: vertical;
73+
}
74+
75+
.app-button-group {
76+
display: flex;
77+
gap: 12px;
78+
flex-wrap: wrap;
79+
}
80+
81+
.app-list {
82+
list-style: none;
83+
padding: 0;
84+
}
85+
86+
.app-list li {
87+
padding: 12px;
88+
margin-bottom: 8px;
89+
background-color: var(--bg-tertiary);
90+
border-radius: 8px;
91+
border-left: 3px solid var(--accent-primary);
92+
}
93+
94+
.app-footer {
95+
background-color: var(--bg-card);
96+
border-top: 1px solid var(--border-color);
97+
padding: 24px 0;
98+
text-align: center;
99+
}
100+
101+
.app-footer p {
102+
margin-bottom: 0;
103+
font-size: 13px;
104+
}
105+
106+
/* Media queries para responsividade */
107+
@media (min-width: 768px) {
108+
.app-grid {
109+
grid-template-columns: repeat(2, 1fr);
110+
}
111+
}
112+
113+
@media (min-width: 1024px) {
114+
.app-grid {
115+
grid-template-columns: repeat(3, 1fr);
116+
}
117+
118+
.app-button-group {
119+
flex-wrap: nowrap;
120+
}
121+
}

0 commit comments

Comments
 (0)