Skip to content

Commit 1e69a55

Browse files
mattolivrmattolivr
committed
2-DR1-TP2.12
1 parent 3f06b14 commit 1e69a55

File tree

4 files changed

+180
-0
lines changed

4 files changed

+180
-0
lines changed

‎2-desenvolvimento-front-end/DR1-mobile-first-ui/DR1-TP2.12/assets/browse.png‎

172 KB
Loading

‎2-desenvolvimento-front-end/DR1-mobile-first-ui/DR1-TP2.12/assets/experience.png‎

181 KB
Loading

‎2-desenvolvimento-front-end/DR1-mobile-first-ui/DR1-TP2.12/index.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>DR1 - TP 2.12</title>
7+
<link rel="stylesheet" href="style.css">
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
9+
</head>
10+
<body>
11+
<header>
12+
<h1>Benefícios da Responsividade</h1>
13+
<nav>
14+
<ul>
15+
<li>Melhor Experiência do Usuário</li>
16+
<li>Aumento do Alcance</li>
17+
<li>SEO Aprimorado</li>
18+
<li>Redução de Custos de Desenvolvimento</li>
19+
<li>Futuro-Prova</li>
20+
</ul>
21+
</nav>
22+
<button class="menu">
23+
<i class="fa fa-bars"></i>
24+
</button>
25+
</header>
26+
<main>
27+
<section id="experiencia">
28+
<h2>Melhor Experiência do Usuário</h2>
29+
<img src="assets/experience.png" alt="Pessoas montando uma página WEB" title="Melhor Experiência do Usuário">
30+
<p>Um design responsivo garante que os usuários tenham uma experiência consistente e agradável, independentemente do dispositivo que estejam usando. Isso pode levar a maior satisfação do usuário e taxas de retenção mais altas.</p>
31+
</section>
32+
<section id="alcance">
33+
<h2>Aumento do Alcance</h2>
34+
<p>Com o aumento do uso de dispositivos móveis, ter um site responsivo permite alcançar um público mais amplo. Usuários que acessam a web via smartphones e tablets terão uma experiência otimizada, aumentando o tráfego do site.</p>
35+
</section>
36+
<section id="seo">
37+
<h2>SEO Aprimorado</h2>
38+
<img src="assets/browse.png" alt="Mulher com uma lupa sobre um campo de pesquisa" title="SEO Aprimorado">
39+
<p>Os motores de busca, como o Google, favorecem sites responsivos em seus algoritmos de classificação. Um design responsivo pode melhorar a visibilidade do site nos resultados de pesquisa, atraindo mais visitantes.</p>
40+
</section>
41+
<section id="custos">
42+
<h2>Redução de Custos de Desenvolvimento</h2>
43+
<p>Manter um único site responsivo é geralmente mais econômico do que desenvolver e manter versões separadas para desktop e dispositivos móveis. Isso reduz o tempo e os recursos necessários para atualizações e manutenção.</p>
44+
</section>
45+
<section id="futuro">
46+
<h2>Futuro-Prova</h2>
47+
<p>Com a rápida evolução dos dispositivos e tamanhos de tela, um design responsivo garante que o site permaneça funcional e visualmente atraente em futuras tecnologias, protegendo o investimento a longo prazo.</p>
48+
</section>
49+
</main>
50+
</body>
51+
</html>

‎2-desenvolvimento-front-end/DR1-mobile-first-ui/DR1-TP2.12/style.css‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
@media (prefers-color-scheme: light) {
2+
:root {
3+
--bg-primary: rgb(236, 236, 236);
4+
--bg-secondary: white;
5+
--txt-color: black;
6+
}
7+
}
8+
9+
@media (prefers-color-scheme: dark) {
10+
:root {
11+
--bg-primary: rgb(32, 32, 32);
12+
--bg-secondary: rgb(48, 48, 48);
13+
--txt-color: white;
14+
}
15+
}
16+
17+
* {
18+
margin: 0;
19+
padding: 0;
20+
box-sizing: border-box;
21+
}
22+
23+
body {
24+
background-color: var(--bg-primary);
25+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
26+
}
27+
28+
header {
29+
display: flex;
30+
flex-direction: row;
31+
justify-content: space-between;
32+
align-items: center;
33+
34+
padding: 16px 6px;
35+
36+
h1 {
37+
font-size: 1.3rem;
38+
}
39+
40+
ul {
41+
display: none;
42+
}
43+
44+
.menu {
45+
align-self: flex-end;
46+
font-size: 2rem;
47+
48+
background-color: transparent;
49+
border: none;
50+
outline: none;
51+
52+
color: gray;
53+
}
54+
}
55+
56+
h1, h2, p, span, li {
57+
color: var(--txt-color);
58+
}
59+
60+
main {
61+
padding: 0 6px;
62+
63+
display: flex;
64+
flex-direction: column;
65+
gap: 12px;
66+
67+
section {
68+
background-color: var(--bg-secondary);
69+
padding: 8px;
70+
border-radius: 8px;
71+
72+
display: flex;
73+
flex-direction: column;
74+
align-items: center;
75+
gap: 8px;
76+
77+
h2 {
78+
font-size: 1.15rem;;
79+
text-align: left;
80+
width: 100%;
81+
}
82+
83+
img {
84+
width: 80%;
85+
}
86+
}
87+
}
88+
89+
@media screen and (min-width: 576px) {
90+
header {
91+
margin-bottom: 16px;
92+
93+
h1 {
94+
font-size: 1.7rem;
95+
}
96+
}
97+
98+
main section {
99+
flex-direction: row;
100+
justify-content: space-between;
101+
align-items: start;
102+
flex-wrap: wrap;
103+
104+
padding: 16px 12px;
105+
106+
h2 {
107+
flex-basis: 100%;
108+
font-size: 1.4rem;
109+
margin-bottom: 8px;
110+
}
111+
112+
img {
113+
flex-basis: 40%;
114+
max-width: 250px;
115+
}
116+
117+
p {
118+
flex-basis: 60%;
119+
flex-grow: 1;
120+
}
121+
}
122+
}
123+
124+
@media screen and (min-width: 768px) {
125+
main {
126+
max-width: 768px;
127+
margin: 0 auto;
128+
}
129+
}

0 commit comments

Comments
 (0)