-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
169 lines (149 loc) · 8.25 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
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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=Playfair+Display:wght@500&family=Roboto&family=Sarabun:wght@600;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
<script>
document.documentElement.className += " js";
</script>
<title>Flora Violeta</title>
</head>
<body class="grid">
<header class="menu font-menu">
<nav class= aria-label="Menu Primário">
<button data-menu="button">Menu</button>
<ul data-menu="ul" class="ul-menu">
<li><a href="#plantas">Plantas</a></li>
<li data-dropdown>
<a class="drop-link" href="#sobre">Sobre</a>
<ul class="dropdown-menu" >
<li><a href="./">A EMPRESA</a></li>
<li><a href="./">EQUIPE</a></li>
<li><a href="./">SÓCIOS</a></li>
<li><a href="./">INVESTIDORES</a></li>
</ul>
</li>
<li><a href="#faq">Faq</a></li>
<li><a href="#contato">Contato</a></li>
<li data-modal="abrirmodal" ><a href="login.html">Login</a></li>
</ul>
</nav>
</header>
<main class="introducao container js-scroll" id="plantas">
<h1 class="font-titulo ">Flora Violeta</h1>
<ul class="introducao-menu js-img-ul">
<li> <img class="introducao-img1" src="./images/lavender (2).jpg" alt=""> </li>
<li> <img class="introducao-img1" src="./images/flora-africana (2).jpg" alt=""> </li>
<li> <img class="introducao-img1" src="./images/Verbena (2).jpg" alt=""> </li>
<li> <img class="introducao-img1" src="./images/petunia (1).jpg" alt=""> </li>
<li> <img class="introducao-img1" src="./images/veludo-roxo (1).jpg" alt=""> </li>
<li> <img class="introducao-img1" src="./images/verbascum (1).jpg" alt=""> </li>
</ul>
<div class="js-text " data-text >
<section data-anime = "show-left" class="introducao-plantas ativo">
<h2 class="introducao-titulo">LAVANDA</h2>
<p>A lavanda, também conhecida pelo seu nome científico Lavandula, é uma planta encantadora e aromática que cativa os sentidos e embeleza os jardins ao redor do mundo.</p>
<p>A planta é apreciada não apenas por sua beleza, mas também por suas inúmeras propriedades terapêuticas e aromáticas.
</p>
<p>Com suas folhas estreitas e flores delicadas, a lavanda apresenta uma aparência graciosa e uma cor que varia entre tons de roxo, azul e até mesmo branco.</p>
<p>Não é à toa que a lavanda é frequentemente utilizada na produção de óleos essenciais, perfumes, sabonetes e produtos para cuidados pessoais.
</p>
</section>
<section data-anime = "show-down" class="introducao-plantas ">
<h2 class="introducao-titulo">VIOLETA-AFRICANA</h2>
<p>A violeta-africana, também conhecida pelo nome científico Saintpaulia, é uma planta encantadora originária das regiões tropicais da África.</p>
<p>A planta é valorizada por sua capacidade de florescer durante todo o ano, trazendo um toque de cor e alegria aos ambientes internos.
</p>
<p> Suas flores apresentam uma forma arredondada e pétalas suaves, que variam em tons de roxo, azul, rosa e branco. Essas flores encantadoras são um verdadeiro deleite visual.</p>
<p>A violeta-africana também tem uma capacidade de reprodução interessante, podendo ser propagada a partir de folhas ou sementes.
</p>
</section>
<section data-anime = "show-left" class="introducao-plantas">
<h2 class="introducao-titulo">VERBENA</h2>
<p>A verbena é uma planta versátil, conhecida por suas flores coloridas e propriedades medicinais.</p>
<p>Originária da Europa e Ásia, ela acrescenta beleza aos jardins com suas flores em tons vibrantes de roxo, rosa, vermelho e branco.
</p>
<p>Além disso, a verbena tem sido usada na medicina tradicional devido aos seus efeitos relaxantes, anti-inflamatórios e digestivos.</p>
<p>É uma planta resistente, que se adapta a diferentes condições de cultivo e pode atrair polinizadores.
</p>
</section>
<section data-anime = "show-down" class="introducao-plantas">
<h2 class="introducao-titulo">PETÚNIAS</h2>
<p>As petúnias são plantas populares e encantadoras, conhecidas por suas flores coloridas e diversidade de tons.</p>
<p>Com uma variedade de tons que vão desde o branco, rosa, roxo, vermelho e até mesmo variações bicolor.</p>
<p>Fáceis de cuidar e adaptáveis, elas trazem beleza aos jardins e vasos.
</p>
<p>Com suas flores duradouras, as petúnias também atraem polinizadores, adicionando vida ao ambiente externo.</p>
</section>
<section data-anime = "show-left" class="introducao-plantas">
<h2 class="introducao-titulo">VELUDO-ROXO</h2>
<p>O veludo-roxo é uma planta exótica com folhas aveludadas e roxas que a tornam única e atraente. </p>
<p>Fácil de cultivar e adaptável, é uma excelente escolha para adicionar um toque de cor e textura a qualquer espaço
</p>
<p> Seja em vasos ou jardins, o veludo-roxo certamente chamará a atenção e acrescentará um charme especial ao ambiente.
</p>
<p>Também pode produzir pequenas flores amarelas, mas elas são menos notáveis em comparação com as folhas exuberantes.
</p>
</section>
<section data-anime = "show-down" class="introducao-plantas">
<h2 class="introducao-titulo">VERBASCUM</h2>
<p>O Verbascum, também conhecido como verbascos, é uma planta herbácea que encanta com suas flores exuberantes. </p>
<p>Com hastes altas e ramificadas, o Verbascum produz belas flores em forma de copo, disponíveis em uma variedade de cores vibrantes.
</p>
<p>Essa planta versátil floresce durante a primavera e o verão, atraindo polinizadores como abelhas e borboletas.</p>
<p>Além de sua beleza estética, o Verbascum é de fácil cultivo e se adapta bem a diferentes condições de solo e luz.
</p>
</section>
</div>
</main>
<section class="faq container js-scroll " id="faq">
<h2 class="font-titulo">Faq</h2>
<dl class="js-faq-dl">
<dt class="font-sub-titulo">Qual a idade das plantas</dt>
<dd class="font-text">Durante o primeiro ano de vida, a planta geralmente passa por estágios iniciais de crescimento, como germinação, desenvolvimento de raízes e crescimento vegetativo.
</dd>
<dt class="font-sub-titulo">Elas são roxas mesmo</dt>
<dd class="font-text">A intensidade da coloração roxa pode variar.
</dd>
<dt class="font-sub-titulo">Qual a diferença</dt>
<dd class="font-text">Cada espécie tem suas próprias características, requisitos de cultivo e padrões de crescimento.
</dd>
<dt class="font-sub-titulo">Como proteger</dt>
<dd class="font-text">Cada planta roxa pode ter necessidades específicas de cuidado, então é importante pesquisar as características e requisitos da espécie de planta que você está cultivando para garantir sua proteção adequada.
</dd>
</dl>
</section>
<section class="contato container js-scroll" id="contato">
<h2 class="font-titulo">Contato</h2>
<div class="contato-img" data-tooltip aria-label="Chama na bota">
<img src="./images/mapa.png" alt="">
</div>
<ul class="contato-ul">
<li class="font-text"><a href="emailto:brisatielly12@gmail.com">Ablubluble@gmail.com</a></li>
<li class="font-text"><a href="telto:+5574988211330">+55 (21) 9999-9999</a></li>
<li class="font-text"><a href="">Cornelia Street n'1</a></li>
<li class="font-text"><a href="">Via lactea</a></li>
</ul>
</section>
<footer class="footer font-sub-titulo">
<p>Todos os direitos reservados.</p>
</footer>
<section class="modal-container" data-modal="container">
<div class="modal">
<button data-modal="fechar-modal" class="fechar-modal">X</button>
<form action="">
<label for="email">Email</label>
<input type="email">
<label for="password ">Senha</label>
<input type="password">
<button type="submit" class="botao-enviar">Enviar</button>
</form>
</div>
</section>
<script type="module" src="./js/script.js" ></script>
</body>
</html>