-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
262 lines (235 loc) · 15.7 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
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Example.com</title>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="description" content="Phasellus eu semper velit. " />
<meta http-equiv="keywords" content="Phasellus eu semper velit, Phasellus eu, semper velit." />
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1" />
<meta name="robots" content=" index,follow" />
<meta name="theme-color" content="#db5945">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link href="assets/css/main.css" rel="stylesheet" />
<link href="assets/css/buttons.css" rel="stylesheet" />
<link href="assets/css/font-etline.css" rel="stylesheet" />
<link href="assets/css/font-awesome.css" rel="stylesheet" />
<link href="assets/css/animate.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto|Oswald" rel="stylesheet">
<script type="text/javascript" src="assets/js/jquery.js"></script>
</head>
<body>
<div class="contentHeader">
<div class="logoProject">
<p>Sample</p>
</div>
<ul class="topnav" id="mainMenu">
<li class="icon"><a href="javascript:void(0);" style="font-size:15px;" onclick="actMenu()">☰</a></li>
<li><a href="javascript:void(0)" onclick="ScrollTo('square01')">Know</a></li>
<li><a href="javascript:void(0)" onclick="ScrollTo('square02')">Security & Agility</a></li>
<li><a href="javascript:void(0)" onclick="ScrollTo('square03')">Strategy</a></li>
<li><a href="javascript:void(0)" onclick="ScrollTo('square04')" class="highlight">Talk to us</a></li>
</ul>
</div>
<div class="scrollToTop"><i class="fa fa-arrow-up"></i></div>
<div class="contentPage">
<div class="hero">
<h1 class="nLogo"><p>Sample</p></h1>
<div class="wrapSubtitleHero">
<span class="subtitleHero">Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce vel vulputate quam. Aliquam ac laoreet lacus. Nulla aliquam neque a interdum dictum.</span>
</div>
<div class="video-cover"></div>
<div class="video-container">
<video autoplay loop muted class="video-bg" id="video-bg"> <!--this id is only used for the toggle function; can be removed if you don't need an event -->
<!-- whatever video you put here will be (effectively) cropped to fit container size; make sure you're okay with it shrinking to the top left corner of the video at your specified minimum dimensions -->
<source src="assets/video/backgroundAlpha.mp4" type="video/mp4" alt="HTML5 background video">
</video>
</div>
<div class="wrapButtonsHero">
<span class="buttonKnowMore" onclick="ScrollTo('square01')"><i class="icon fa-arrow-down "></i><</span>
</div>
</div>
<div id="square01" class="square01">
<div class="partSquare100">
<span class="subtitle">.</span>
<h2>Simple. Easy.</h2>
<p class="bodyText">Morbi eget erat vel nunc dictum pretium sit amet non sem. Donec mattis posuere odio et efficitur. Phasellus dignissim eget libero a tristique. Ut ut venenatis massa, et ornare turpis. Quisque dignissim dolor sit amet dui pellentesque venenatis. Vestibulum tempus elit ut scelerisque finibus. Donec at tortor tristique, sollicitudin magna ut, auctor quam. Duis ut lacinia ex.</p>
<div class="partSquare30flex">
<div class="itemDescription animate wow bounceInUp">
<span class="itemTitle "><span>Lorem</span><span>ipsum </span></span>
<div class="itemIcon right"><i class="icon fa-rocket"></i></div>
<span class="itemDesc"> Proin ut dapibus felis. Nullam dapibus libero in enim bibendum efficitur. Vivamus elit enim, pharetra vel dictum ornare.</span>
</div>
<div class="itemDescription animate wow bounceInUp">
<div class="itemIcon left"><i class="icon fa-rocket"></i></div>
<span class="itemTitle"><span>Lorem</span><span>ipsum </span></span>
<span class="itemDesc"> Maecenas a commodo odio. Nullam dapibus libero in enim bibendum efficitur. Vivamus elit enim, pharetra vel dictum ornare.</span>
</div>
<div class="itemDescription animate wow bounceInUp">
<span class="itemTitle"><span>Lorem</span><span>ipsum </span></span>
<div class="itemIcon right"><i class="icon fa-rocket"></i></div>
<span class="itemDesc"> Proin ut dapibus felis. Nullam dapibus libero in enim bibendum efficitur. Vivamus elit enim, pharetra vel dictum ornare.</span>
</div>
</div>
<div class="partSquare30flex partSquare30flexToHide wow bounce">
<img src="assets/images/features.png" class="imagePortalMeuAcordo" alt="Portal MeuAcordo.com.br" title="Portal MeuAcordo.com.br" />
</div>
<div class="partSquare30flex">
<div class="itemDescription animate wow bounceInDown">
<div class="itemIcon left "><i class="icon fa-rocket"></i></div>
<span class="itemTitle"><span>Lorem</span> <span>ipsum</span></span>
<span class="itemDesc"> Proin ut dapibus felis. Nullam dapibus libero in enim bibendum efficitur. Vivamus elit enim, pharetra vel dictum ornare.</span>
</div>
<div class="itemDescription animate wow bounceInDown">
<span class="itemTitle"><span>Habitant </span><span> Pellentesque</span></span>
<div class="itemIcon right"><i class="icon fa-rocket"></i></div>
<span class="itemDesc"> Nullam dapibus libero in enim bibendum efficitur. Vivamus elit enim, pharetra vel dictum ornare. </span>
</div>
<div class="itemDescription animate wow bounceInDown">
<div class="itemIcon left"><i class="icon fa-rocket"></i></div>
<span class="itemTitle"><span>Pellentesque </span><span>Quisque </span></span>
<span class="itemDesc"> Vivamus elit enim, pharetra vel dictum ornare. Vivamus elit enim, pharetra vel dictum ornare.</span>
</div>
</div>
</div>
<!--
<div class="wrapIcoElement">
<div class="icoElement"><i class="icon fa-rocket"></i>Pronto atendimento</div>
<div class="icoElement"><i class="icon fa-life-ring"></i>Suporte remoto<br /> ou in-loco</div>
<div class="icoElement"><i class="icon fa-magic"></i>Automação de processos</div>
</div>
<div class="wrapIcoElement">
<div class="icoElement"><i class="icon fa-graduation-cap "></i>Confiabilidade</div>
<div class="icoElement"><i class="icon fa-lock "></i>Sigilo e confidencialidade</div>
<div class="icoElement"><i class="icon fa-star"></i>Qualidade em tudo o que fazemos</div>
</div> -->
</div>
<div id="square02" class="square02">
<div class="partSquare100">
<h2 class="centerText">Security & Agility</h2>
<span class="subtitle centerText"></span>
<p class="bodyText centerText partSquare70">Nulla aliquam neque a interdum dictum. Praesent elit ipsum, mattis sollicitudin arcu ac, pellentesque consequat metus. Donec pretium, sem sodales placerat aliquet, libero nunc accumsan arcu, tempus ornare ipsum ligula et lorem. Integer fringilla facilisis metus ut semper <br/>Morbi fermentum massa et orci semper, sit amet aliquet tortor aliquam. Quisque tristique quam at dolor feugiat, sed vehicula enim ultricies.</p>
<div class="wrapBoxElement ">
<div class="boxElement box02 wow slideInUp">
<i class="icon icon-strategy"></i>
<p class="textBoxElement">Tusce a molestie dui<br /> <span>Curabitur commodo nisl nibh, sed bibendum nibh semper et. </span></p>
</div>
<div class="boxElement box01 wow slideInUp">
<i class="icon icon-linegraph"></i>
<p class="textBoxElement">Aenean vehicula <br /> <span>Tenha uma visão ampla e aumente seus resultados.</span> </p>
</div>
<div class="boxElement box03 wow slideInUp">
<i class="icon icon-chat"></i>
<p class="textBoxElement">Quisque dignissim<br /> <span>Cras ornare, sem et tempor aliquet, urna. </span></p>
</div>
</div>
<div class="wrapBoxElement">
<div class="boxElement box02 wow slideInDown">
<i class="icon icon-strategy"></i>
<p class="textBoxElement">Pellentesque habitant morbi<br /> <span>urna cursus eros, nec sagittis nibh ex quis justo. </span></p>
</div>
<div class="boxElement box01 wow slideInDown">
<i class="icon icon-linegraph"></i>
<p class="textBoxElement">Vestibulum vitae iaculis mauris<br /> <span>Proin non turpis viverra, finibus nibh nec, ultrices magna.</span> </p>
</div>
<div class="boxElement box03 wow slideInDown">
<i class="icon icon-chat"></i>
<p class="textBoxElement">Curabitur commodo nisl nibh,<br /> <span>Cras ornare, sem et tempor aliquet, urna urna cursus eros n. </span></p>
</div>
</div>
</div>
</div>
<div id="square03" class="square03">
<div class="partSquare100">
<div class="partSquare50_flex partSquare30flexToHide">
<img src="assets/images/features.png" class="imagePortalMeuAcordo" alt="" title="" />
</div>
<div class="partSquare50_flex">
<div class="partSquare100">
<div class="partSquare20">
<i class="iconBig icon-gears"></i>
</div>
<div class="partSquare75">
<h3 class="centerText">Morbi </h3>
<p class="bodyText">Praesent elit ipsum, mattis sollicitudin arcu ac, pellentesque consequat metus. Donec pretium.</p>
</div>
</div>
<div class="partSquare100">
<div class="partSquare20">
<i class="iconBig icon-target"></i>
</div>
<div class="partSquare75">
<h3 class="centerText">Praesent </h3>
<p class="bodyText">Pellentesque quam finibus. Proin non turpis viverra, finibus nibh nec,</p>
</div>
</div>
<div class="partSquare100">
<div class="partSquare20">
<i class="iconBig icon-adjustments"></i>
</div>
<div class="partSquare75">
<h3 class="centerText">Ut varius</h3>
<p class="bodyText">Donec dapibus sem at leo consectetur efficitur. Phasellus eleifend dictum erat, sit amet dictum arcu facilisis non. Duis pretium pulvinar finibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
</div>
</div>
</div>
<div id="square04" class="square04">
<div class="partSquare100">
<span class="subtitle centerText">Felis porttitor quam tincidunt iaculis?</span>
<h2 class="centerText">Sollicitudin </h2>
<form id="form" action="send.php" method="POST">
<div class="wrapForm">
<div class="partSquare50">
<input type="text" id="name" required name="name" placeholder="Nome" />
<input type="email" id="email" required name="email" placeholder="e-mail" />
<input type="phone" id="phone" required name="phone" placeholder="Telefone" />
</div>
<div class="partSquare50">
<textarea id="msg" required placeholder="Write Message" name="msg"></textarea>
</div>
</div>
<div class="wrapButtonsContact">
<span class="messageSucess">Integer fringilla!</span>
<input type="submit" class="simpleButton buttonContact" value="Enviar" />
</div>
</form>
<p class="textLegal"><b>Legal Notice:</b> o site <a href="http://www.exemplo.com.br">www.exemplo.com.br</a> Cras ornare, sem et tempor aliquet, urna urna cursus eros, nec sagittis nibh ex quis justo. <br/><br/> Nulla sollicitudin est et erat mollis, vitae pellentesque quam finibus. </p>
<!--
<div class="wrapContactElement">
<div class="contactElement box01">
<div class="separator">
<i class="fa iconContact fa-phone"></i>
</div>
<p class="textContactElement"><span>Você pode nos ligar</span><br />+55 11 4329-8292</p>
</div>
<div class="contactElement box02">
<div class="separator">
<i class="fa iconContact fa-map-marker"></i>
</div>
<p class="textContactElement"><span>Onde nós estamos</span><br />Rua dos Bobos, 40, Cj. 113</p>
</div>
<div class="contactElement box03">
<div class="separator">
<i class="fa iconContact fa-envelope"></i>
</div>
<p class="textContactElement"><span>Envie-nos uma mensagem</span><br /><a href="mailto:exemplo@exemplo.com.br">exemplo@exemplo.com.br</a></p>
</div>
</div>
-->
</div>
<div class="barBottom">© Sample.com.br - 2017</a></div>
</div>
</div>
<script type="text/javascript" async src="assets/js/functions.js"></script>
<script type="text/javascript" async src="assets/js/inViewport.js"></script>
<script type="text/javascript" >
new WOW().init();
</script>
</body>
</html>