-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
158 lines (146 loc) · 5.93 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Blog</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="superInfoBg">
<div class="superInfo">
<p>Seg/Sex 08:00-18:00</p>
<a href="tel:+5561999991234">+55(61) 99999-1234</a>
<p>Av. pertin, Nº 77, esquina com daqui do lado</p>
</div>
</div>
<header class="menuBg">
<div class="menu">
<div class="menuLogo">
<a href="">FlexBlog</a>
</div>
<nav class="menuNav">
<ul>
<li><a href="#sobre">Sobre</a></li>
<li><a href="#produtos">Produtos</a></li>
<li><a href="#preco">Preço</a></li>
<li><a href="#qualidade">Qualidade</a></li>
</ul>
</nav>
</div>
</header>
<h1 class="titulo">Novos valores e <br>Propriedades de CSS</h1>
<section class="sobre" id="sobre">
<div class="sobreInfo">
<h1>Sobre</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, quia nihil nemo eligendi facilis maiores nulla vero illo inventore laudantium earum explicabo dicta ut, quibusdam asperiores beatae quasi doloribus architecto.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Assumenda alias hic mollitia doloremque, totam similique, consequuntur fugiat sed placeat accusamus dolorem enim dignissimos quo doloribus quisquam, adipisci neque iure atque.</p>
</div>
<div class="sobreImg">
<img src="/blog-cssFlexbox/assets/sobre1.jpg" alt="sobre 1">
</div>
<div class="sobreImg">
<img src="/blog-cssFlexbox/assets/sobre2.jpg" alt="sobre 2">
</div>
</section>
<section class="produtos" id="produtos">
<h1>Produtos</h1>
<div class="produtosContainer">
<div class="produtoItem Purple">
<h2>Purple</h2>
<img src="/blog-cssFlexbox/assets/produtos1.jpg" alt="Produto Purple">
</div>
<div class="produtoItem Red">
<h2>Red</h2>
<img src="/blog-cssFlexbox/assets/produtos2.jpg" alt="Produto Red">
</div>
<div class="produtoItem Blue">
<h2>Blue</h2>
<img src="/blog-cssFlexbox/assets/produtos3.jpg" alt="Produto Blue">
</div>
</div>
</section>
<section class="preco" id="preco">
<div class="precoItem">
<h2>Prata</h2>
<span><sup>R$</sup>29,90</span>
<ul>
<li>Acesso ao conteúdo base</li>
<li>Produto disponível online</li>
<li>Suporte 24h</li>
<li>Desconto para upgrade</li>
</ul>
<a href="#">Comprar</a>
</div>
<div class="precoItem">
<h2>Ouro</h2>
<span><sup>R$</sup>49,90</span>
<ul>
<li>Acesso ao conteúdo completo</li>
<li>Produto disponível online</li>
<li>suporte 24h</li>
<li>Conteúdo secreto</li>
<li>Desconto para upgrade</li>
</ul>
<a href="#">Comprar</a>
</div>
<div class="precoItem">
<h2>Diamante</h2>
<span><sup>R$</sup>129,90</span>
<ul>
<li>Acesso ao conteúdo completo</li>
<li>Acesso ao conteúdo secreto + Premium</li>
<li>Produto disponível online</li>
<li>Produto disponível para Download</li>
<li>suporte 24h</li>
<li>Bônus diamante</li>
</ul>
<a href="#">Comprar</a>
</div>
</section>
<section class="qualidade" id="qualidade">
<div class="qualidadeItem">
<h2>Estilo</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum quia, magni dolor quos voluptatum aspernatur est dignissimos tempore numquam suscipit alias, atque vel iste cum sit! Voluptatem consequuntur dolorem eligendi?</p>
</div>
<div class="qualidadeItem">
<h2>Praticidade</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae a doloribus dolore cumque illum praesentium fuga et voluptatibus deserunt aut, ut quia cum voluptas amet commodi provident vero beatae qui.</p>
</div>
<div class="qualidadeItem">
<h2>Modernidade</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vero maiores inventore veniam dolorum voluptates eum consectetur iusto, minus temporibus assumenda. Excepturi ex rerum, delectus voluptate debitis maiores ullam minima repellendus.</p>
</div>
<div class="qualidadeItem">
<h2>Resistência</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, magnam repellat soluta obcaecati maiores consectetur eius enim maxime aperiam? Repellat blanditiis debitis incidunt sapiente perferendis saepe vero labore fuga dolorem?</p>
</div>
<div class="qualidadeItem">
<h2>Sustentabilidade</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis saepe, alias hic quasi, voluptatibus nostrum animi dolore iste, quis quam provident ad aut id vitae architecto. Nesciunt esse unde doloremque?</p>
</div>
<div class="qualidadeItem">
<h2>Estética</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa incidunt, culpa ad magni amet a delectus, voluptas officiis iusto distinctio iste. Perferendis, qui quod sapiente iusto exercitationem consequuntur beatae sint!</p>
</div>
</section>
<section class="newsletter">
<div class="newsletterInfo">
<h1>Newsletter</h1>
<p>Assine nossa newsletter e fique por dentro das novidades!</p>
</div>
<div class="newsletterForm">
<form action="">
<input type="text" placeholder="Seu e-mail">
<button type="submit">Assinar</button>
</form>
</div>
</section>
<footer class="footer">
<p>FlexBlog @ todos os direitos reservados</p>
</footer>
</body>
</html>