Skip to content

Commit 46d5754

Browse files
mattolivrmattolivr
committed
2-DR1-TP3.16
1 parent 4a97bba commit 46d5754

File tree

20 files changed

+515
-686
lines changed

20 files changed

+515
-686
lines changed

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

Lines changed: 4 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,5 @@
1-
header {
2-
margin-bottom: 32px;
3-
}
4-
5-
header h1 {
6-
margin-bottom: 8px;
7-
}
8-
9-
header p {
10-
color: var(--text-secondary);
11-
font-size: 1.1rem;
12-
}
13-
14-
main {
15-
margin-bottom: 32px;
16-
}
17-
18-
section {
19-
animation: fadeIn 0.5s ease-in;
20-
}
21-
22-
@keyframes fadeIn {
23-
from {
24-
opacity: 0;
25-
transform: translateY(10px);
26-
}
27-
to {
28-
opacity: 1;
29-
transform: translateY(0);
30-
}
31-
}
32-
33-
@media screen and (min-width: 768px) {
34-
.container {
35-
padding: 40px;
36-
}
37-
38-
header h1 {
39-
font-size: 2.5rem;
40-
}
41-
42-
.card {
43-
padding: 28px;
44-
}
1+
.app-container {
2+
display: flex;
3+
flex-direction: column;
4+
min-height: 100vh;
455
}

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

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,17 @@
11
import './global.css';
2-
import './styles.css';
32
import './App.css';
4-
import Menu from './components/Menu/Menu';
5-
import Main from './components/Main/Main';
3+
import Header from './components/Header';
4+
import Menu from './components/Menu';
5+
import Main from './components/Main';
6+
import Footer from './components/Footer';
67

78
function App() {
89
return (
910
<div className="app-container">
10-
<header className="app-header">
11-
<div className="container">
12-
<h1>Aplicação com Estilos Globais e Escopados</h1>
13-
<p>Demonstração de global.css + styles.css com classes específicas</p>
14-
</div>
15-
</header>
16-
11+
<Header />
1712
<Menu />
1813
<Main />
19-
20-
<footer className="app-footer">
21-
<div className="container">
22-
<p>&copy; 2024 - Projeto desenvolvido com React, global.css e styles.css</p>
23-
</div>
24-
</footer>
14+
<Footer />
2515
</div>
2616
);
2717
}

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.footer {
2+
background-color: var(--bg-secondary);
3+
border-top: 1px solid var(--border-color);
4+
padding: 24px 0;
5+
}
6+
7+
.footerContainer {
8+
margin: 0 auto;
9+
padding: 0 16px;
10+
text-align: center;
11+
}
12+
13+
.footerText {
14+
color: var(--text-secondary);
15+
font-size: 14px;
16+
margin: 0;
17+
}

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import styles from './Footer.module.css';
2+
3+
export default function Footer() {
4+
return (
5+
<footer className={styles.footer}>
6+
<div className={styles.footerContainer}>
7+
<p className={styles.footerText}>Por Matheus de Oliveira</p>
8+
</div>
9+
</footer>
10+
);
11+
}

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

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
.header {
2+
background-color: var(--bg-secondary);
3+
border-bottom: 1px solid var(--border-color);
4+
padding: 16px 0;
5+
}
6+
7+
.title {
8+
text-align: center;
9+
margin: 0;
10+
font-size: 2rem;
11+
font-weight: 600;
12+
color: var(--text-primary);
13+
}
14+
15+
.subtitle {
16+
text-align: center;
17+
margin: 0;
18+
font-size: 1.1rem;
19+
font-weight: 400;
20+
color: var(--text-secondary);
21+
}
22+
23+
@media screen and (min-width: 992px) {
24+
.header {
25+
padding: 24px 0;
26+
}
27+
28+
.title {
29+
font-size: 2.5rem;
30+
}
31+
32+
.subtitle {
33+
font-size: 1.25rem;
34+
}
35+
}

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import styles from './Header.module.css';
2+
3+
export default function Header() {
4+
return (
5+
<header className={styles.header}>
6+
<h1 className={styles.title}>Matheus de Oliveira</h1>
7+
<h2 className={styles.subtitle}>Desenvolvedor Full Stack</h2>
8+
</header>
9+
);
10+
}

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

Lines changed: 0 additions & 40 deletions
This file was deleted.

2-desenvolvimento-front-end/DR1-mobile-first-ui/DR1-TP3.11~3.16/src/components/Hero/hero.css renamed to 2-desenvolvimento-front-end/DR1-mobile-first-ui/DR1-TP3.11~3.16/src/components/Hero/Hero.module.css

Lines changed: 22 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
1-
/* Estilos do componente Hero - Mobile First */
2-
31
.hero {
4-
background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
2+
background: var(--bg-secondary);
53
border-bottom: 1px solid var(--border-color);
6-
padding: 40px 0;
4+
padding: 48px 0;
75
}
86

9-
.hero-container {
7+
.heroContainer {
108
max-width: 1128px;
119
margin: 0 auto;
1210
padding: 0 24px;
@@ -15,105 +13,101 @@
1513
gap: 32px;
1614
}
1715

18-
.hero-content {
16+
.heroContent {
1917
display: flex;
2018
flex-direction: column;
2119
gap: 20px;
2220
text-align: center;
2321
}
2422

25-
.hero-title {
23+
.heroTitle {
2624
font-size: 2rem;
27-
font-weight: 700;
25+
font-weight: 600;
2826
color: var(--text-primary);
29-
line-height: 1.2;
27+
line-height: 1.25;
3028
margin: 0;
31-
letter-spacing: -0.5px;
3229
}
3330

34-
.hero-subtitle {
31+
.heroSubtitle {
3532
font-size: 1.1rem;
3633
color: var(--text-secondary);
3734
line-height: 1.6;
3835
margin: 0;
3936
}
4037

41-
.hero-actions {
38+
.heroActions {
4239
display: flex;
4340
gap: 12px;
4441
justify-content: center;
4542
flex-wrap: wrap;
4643
}
4744

48-
.hero-image {
45+
.heroImage {
4946
width: 100%;
5047
display: flex;
5148
justify-content: center;
5249
align-items: center;
5350
}
5451

55-
.hero-img {
52+
.heroImg {
5653
width: 100%;
5754
max-width: 400px;
5855
height: auto;
59-
border-radius: 12px;
60-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
56+
border-radius: 6px;
6157
border: 1px solid var(--border-color);
6258
}
6359

64-
/* Tablets - 576px até 992px */
6560
@media (min-width: 576px) and (max-width: 992px) {
6661
.hero {
6762
padding: 60px 0;
6863
}
6964

70-
.hero-title {
65+
.heroTitle {
7166
font-size: 2.5rem;
7267
}
7368

74-
.hero-subtitle {
69+
.heroSubtitle {
7570
font-size: 1.2rem;
7671
}
7772

78-
.hero-img {
73+
.heroImg {
7974
max-width: 600px;
8075
}
8176
}
8277

83-
/* Desktop - acima de 992px */
8478
@media (min-width: 992px) {
8579
.hero {
8680
padding: 80px 0;
8781
}
8882

89-
.hero-container {
83+
.heroContainer {
9084
flex-direction: row;
9185
align-items: center;
9286
gap: 60px;
9387
}
9488

95-
.hero-content {
89+
.heroContent {
9690
flex: 1;
9791
text-align: left;
9892
}
9993

100-
.hero-title {
94+
.heroTitle {
10195
font-size: 3rem;
10296
}
10397

104-
.hero-subtitle {
98+
.heroSubtitle {
10599
font-size: 1.25rem;
106100
}
107101

108-
.hero-actions {
102+
.heroActions {
109103
justify-content: flex-start;
110104
}
111105

112-
.hero-image {
106+
.heroImage {
113107
flex: 1;
114108
}
115109

116-
.hero-img {
110+
.heroImg {
117111
max-width: 100%;
118112
}
119113
}

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

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import styles from './Hero.module.css';
2+
3+
export default function Hero() {
4+
return (
5+
<section className={styles.hero}>
6+
<div className={styles.heroContainer}>
7+
<div className={styles.heroContent}>
8+
<h1 className={styles.heroTitle}>Transformando ideias em código</h1>
9+
<p className={styles.heroSubtitle}>
10+
Desenvolvedor Full Stack especializado em criar aplicações web modernas,
11+
escaláveis e com foco em experiência do usuário.
12+
</p>
13+
<div className={styles.heroActions}>
14+
<button className="primary">Ver Projetos</button>
15+
<button>Entrar em Contato</button>
16+
</div>
17+
</div>
18+
<div className={styles.heroImage}>
19+
<picture>
20+
<source
21+
media="(min-width: 992px)"
22+
srcSet="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=800&h=600&fit=crop"
23+
/>
24+
<source
25+
media="(min-width: 576px)"
26+
srcSet="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=600&h=450&fit=crop"
27+
/>
28+
<img
29+
src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=400&h=300&fit=crop"
30+
alt="Desenvolvedor trabalhando em código"
31+
className={styles.heroImg}
32+
/>
33+
</picture>
34+
</div>
35+
</div>
36+
</section>
37+
);
38+
}

0 commit comments

Comments
 (0)