forked from LucasKaiquee/Projeto_LS
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
138 lines (120 loc) · 6.35 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="./public/SE-icon.png">
<link rel="stylesheet" href="./assets/css/styles.css">
<script src="https://kit.fontawesome.com/cf02d6d2b4.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<title>Securitas Environment</title>
</head>
<body>
<header>
<nav class="nav">
<div class="logo">
<h2 class="logo-title">Securitas Environment</h2>
</div>
<button class="hamburger"></button>
<ul class="nav-list">
<a href="#about" class="item-menu"><li>Sobre</li></a>
<a href="#solucoes" class="item-menu"><li>Soluções</li></a>
<a href="#contact" class="item-menu"><li>Contato</li></a>
</ul>
</nav>
<div id="intro">
<div class="content">
<h1>Securitas Environment</h1>
<h3 id="typing">Educação, Conscientização e Reutilização Ambiental</h3>
</div>
</div>
</header>
<main>
<section id="about">
<h2 class="section-title">Quem Somos</h2>
<div class="container-info">
<div class="about-content">
<div class="about-info">
<h3>Um farol na promoção de um futuro mais verde</h3>
<p>Somos uma empresa de tecnologia dedicada à educação ambiental que surgiu com a visão de catalisar mudanças significativas. Através de plataformas digitais e aplicativos interativos, promovemos e democratizamos o acesso a conhecimentos sobre conscientização e reutilização ambiental no Instituito Federal da Paraíba (IFPB).
Nosso foco é capacitar não apenas a comunidade acadêmica, mas todos que estão ao redor da Instituição de Ensino a compreenderem e adotarem práticas sustentáveis.</p>
</div>
<p class="about-history">Há alguns anos, um grupo de amigos, egressos do curso de Sistemas para Internet do IFPB e entusiastas da tecnologia se uniram com um objetivo em comum: criar uma empresa que unisse o poder da tecnologia com a importância de capacipar gerações futuras a cuidar do planeta com carinho e responsabilidade.</p>
</div>
<img class="img-about" src="./assets/imgs/evvironment-museu.jpg" alt="Imagem de um museu ambiental" loading="lazy">
</div>
</section>
<section id="solucoes" class="">
<h2 class="section-title">Soluções</h2>
<div id="container-service" class="">
</div>
</section>
<!-- CONTATO -->
<section id="contact">
<h2 class="section-title tiltle-width">Contato</h2>
<div class="inform-contact">
<p>Entre em contato conosco hoje mesmo e descubra como podemos ajudar a <span> adotar um estilo de vida mais ecológico</span>. Não perca tempo, estamos aqui para ajudar. Contate-nos agora mesmo!</p>
<div class="contact-container">
<i class="fa-solid fa-globe"></i>
<div>
<h4>Nosso endereço:</h4>
<p>Av. Primeiro de Maio, 720, Jaguaribe, João Pessoa - PB.</p>
</div>
</div>
<div class="contact-container">
<i class="fa-solid fa-envelope"></i>
<div>
<h4>Nosso e-mail:</h4>
<p>contato@securitasenvironment.com.br</p>
</div>
</div>
<div class="contact-container">
<i class="fa-solid fa-phone"></i>
<div>
<h4>Nosso telefone:</h4>
<p>+55 (83) 3513 - 3745</p>
</div>
</div>
</div>
<div class="form-container">
<h3>Fale conosco</h3>
<form class="form" action="javascript:void(0)" >
<input type="text" name="name" placeholder="Nome" class="input-item" required>
<input type="email" name="email" placeholder="E-mail" class="input-item" required>
<textarea name="text" id="" cols="30" rows="10" placeholder="Digite sua menssagem ..." class="input-item"></textarea>
<input class="btn" type="submit" value="Enviar">
</form>
</div>
</section>
<section class="maps">
<p>Nossa localização no <span>Google Maps</span></p>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3958.917279419156!2d-34.87604522534956!3d-7.1355642928684695!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x7ace810852ae4f1%3A0xaf5445223401f2bb!2sIFPB%20-%20Campus%20Jo%C3%A3o%20Pessoa!5e0!3m2!1spt-BR!2sbr!4v1684964439923!5m2!1spt-BR!2sbr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</section>
</main>
<footer>
<section class="company_name">
<div class="footer_logo">
<img src="./public/SE-icon.png" alt="Logo da empresa">
<h1>Securitas Environment</h1>
</div>
</section>
<section class="nossas_redes">
<p>Nossas redes sociais:</p>
<i class="fa-brands fa-square-facebook"></i>
<i class="fa-brands fa-linkedin"></i>
<i class="fa-brands fa-instagram"></i>
<i class="fa-brands fa-whatsapp"></i>
</section>
<section class="copyright">
<p>Copyright © 2023 Securitas Environment.</p>
<p>Uma empresa do Grupo Securitas Inc.</p>
<p>Todos os direitos reservados.</p>
</section>
<section class="voltar_topo">
<a href="#" class="back-top">Voltar ao topo<i class="fa-solid fa-circle-arrow-up"></i></a>
</section>
</footer>
<script type="module" src="./assets/js/main.js"></script>
<script src="./assets/js/animationWrite.js"></script>
</body>
</html>