-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
143 lines (134 loc) · 6.14 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<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=Lato&family=Nunito:wght@500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fontawesome.com/v5.15/icons/whatsapp?style=brands">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Varanda</title>
</head>
<body>
<header>
<nav class="nav-varanda bg-white">
<a class="logo-varanda" href=""><span>Varanda</span>Flores</a>
<div class="mobile-menu">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<ul class="nav-list-content-varanda">
<li><a class="varanda-a" href="">Home</a></li>
<li><a class="varanda-a" href="">Serviços</a></li>
<li><a class="varanda-a" href="">Sobre</a></li>
<li><a class="varanda-a" href="">Contato</a></li>
</ul>
</nav>
</header>
<div class="slider-wrapper-varanda">
<div id="slider">
<img class="selected" src="/img/annie-spratt-01Wa3tPoQQ8-unsplash.jpg" alt="">
<img src="/img/annie-spratt-ncQ2sguVlgo-unsplash.jpg" alt="">
<img src="/img/ashley-busenbark-0idia_JIPWg-unsplash.jpg" alt="">
<img src="/img/gerome-bruneau-RPmWEtZLh7U-unsplash.jpg" alt="">
</div>
</div>
<section class="container-fluid " style="height: 500px; display: flex;">
<div class="container-sm h-80 w-50 services-img" style="margin-left: 10px;">
<img src="/img/roberto-nickson-b9dmHiTXkLk-unsplash.jpg" alt="Photo by Roberto Nickson in Unsplash">
</div>
<div class="container-sm h-100 w-50 services-varanda">
<h2>Serviços</h2>
<h1>Arquitetura paisagista</h1>
<ul>
<li>Projeto</li>
<li>Planear</li>
<li>Gerir</li>
<li>Preservar</li>
</ul>
<button type="button" class="btn">Saiba Mais</button>
</div>
</section>
<section class="container-fluid " style="height: 500px; display: flex;">
<div class="container-sm h-80 w-50 services-img" style="margin-left: 10px;">
<img src="/img/graduation.jpg" alt="Photo by Baim Hanif in Unsplash">
</div>
<div class="container-sm h-100 w-50 services-varanda">
<h2>Serviços</h2>
<h1>Ocasioes</h1>
<ul>
<li>Casamentos</li>
<li>Aniversários</li>
<li>Formaturas</li>
<li>Religiosos</li>
</ul>
<button type="button" class="btn">Saiba Mais</button>
</div>
</section>
<section class="container-fluid sobre-varanda" style="height: 650px; display: flex;">
<div class="container sobre-img h-100 w-50">
<h3>Nossa História</h3>
<h1>Florindo o dia a dia de todos.</h1>
<p>
<br>
Empresa bahia, com sede em Mucugê, que atende o mercado regional, tanto
na produção de mudas, no paisagimos, e até mesmo fornecimento para reflorestamento
através da permacultura.<br>
<br>Contamos com diversos tipos de serviços, do plantio ao manejo de áreas residencias privadas e áreas de lazer coletivo, como as praças de nossa maravilhosa cidade.</br>
<br>Nossa missão é inspirada na beleza de nossa região, a chapada diamantina, que encanta
todos que a conhecem e proporciona incriveos momentos.</br> <br>Por isso nada mais justo do que
esse ser o forte de nossa empresa, fornecer experiências memóravies a todos.
Prestamos consultorias ambientias, planejamentos, dentre outros serviços, entre em contato para maiores informações.
</p>
</div>
<div class="container sobre-img-direita h-100 w-50">
<img src="/img/aboutUs.jpg" alt="">
</div>
</section>
<section class="container-fluid" style="height: 650px;">
<div class="container form-border">
<h1>Contato</h1>
<form id="form-contact" action="" required>
<div class="form-group input">
<label class="form-label">Nome:</label>
<input class="form-control" type="text" placeholder="Digite seu nome" required>
<span class="error"></span>
</div>
<div class="form-group input">
<label for="email">E-mail</label>
<input type="email" class="form-control rtl" name="email" id="email" placeholder="Digite seu email" required>
<span class="error"></span>
</div>
<div class="form-group">
<label for="mensagem">Mensagem</label>
<textarea class="form-control" name="message" id="message" placeholder="Digite sua mensagem..." required></textarea>
</div>
<div class="form-group text-center">
<br><button class="btn btn-primary" type="submit">Submit</button>
</div>
</form>
</div>
<br>
<div class="container">
<div class="card">
<div class="card-body">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3887.644636507093!2d-41.4608211856751!3d-12.994566163790541!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x74231ff41251a8d%3A0xee0212633ab1d744!2sVaranda%20Flores!5e0!3m2!1spt-BR!2sbr!4v1643823953768!5m2!1spt-BR!2sbr" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
</div>
</div>
</section>
<a class="whatsapp-link" href="https://web.whatsapp.com/send?phone=5548999401921" target="_blank">
<i class="fab fa-whatsapp"></i>
</a>
<script src="/mobile-navbar.js"></script>
<script src="/slider.js"></script>
<script src="/form.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/6897ef7ba9.js" crossorigin="anonymous"></script>
</body>
</html>