-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
295 lines (285 loc) · 17.5 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
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Frixel
</title>
<!-- SEO Meta Tags-->
<meta name="description" content="Frixel - Produtora de audiovisual colaborativa">
<meta name="keywords" content="design, audiovisual, produtora, portfolio, video, imagem, audio, produção, Animação, 3D, 2D, publicitário">
<meta name="author" content="Frixel Studios">
<!-- Viewport-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Favicon and Touch Icons-->
<link href="img/icons/frixel-icon2.png" rel="shortcut icon"/>
<link rel="manifest" href="site.webmanifest">
<meta name="msapplication-TileColor" content="#603cba">
<meta name="theme-color" content="#ffffff">
<!-- Vendor Styles including: Font Icons, Plugins, etc.-->
<link rel="stylesheet" media="screen" href="css/vendor.min.css">
<!-- Main Theme Styles + Bootstrap-->
<link rel="stylesheet" media="screen" href="css/theme.min.css">
<!-- Google Tag Manager-->
<script>
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PVV9F7F');
</script>
<!-- Modernizr-->
<script src="js/modernizr.min.js"></script>
</head>
<!-- Body-->
<body>
<!-- Google Tag Manager (noscript)-->
<noscript>
<iframe src="//www.googletagmanager.com/ns.html?id=GTM-PVV9F7F" height="0" width="0" style="display: none; visibility: hidden;"></iframe>
</noscript>
<!-- Off-Canvas Menu-->
<div class="offcanvas-container is-triggered offcanvas-container-reverse" id="mobile-menu"><span class="offcanvas-close"><i class="fe-icon-x"></i></span>
<div class="px-4 pb-4">
<h6>Menu</h6>
<div class="d-flex justify-content-between pt-2">
<a class="btn btn-primary btn-sm btn-block" href="" data-toggle="modal" data-target="#exampleModal"><i class="fe-icon-dollar-sign"></i> Contratar Agora</a>
</div>
</div>
<div class="offcanvas-scrollable-area border-top" style="height:calc(100% - 235px); top: 144px;">
<!--Mobile Menu-->
<div class="accordion mobile-menu" id="accordion-menu">
<!--Home-->
<div class="card">
<div class="card-header"><a class="mobile-menu-link active" href="https://www.frixel.com.br">Home</a></div>
</div>
<!--Portfolio-->
<div class="card">
<div class="card-header"><a class="mobile-menu-link" href="https://www.frixel.com.br/portfolio">Portfólio</a></div>
</div>
<!--Colaborar-->
<div class="card">
<div class="card-header"><a class="mobile-menu-link" href="https://www.frixel.com.br/colaborar">Colaborar</a></div>
</div>
<!--Ajuda-->
<div class="card">
<div class="card-header"><a class="mobile-menu-link" href="https://www.frixel.com.br/ajuda">Ajuda</a></div>
</div>
</div>
</div>
<div class="offcanvas-footer px-4 pt-3 pb-2 text-center"><a class="social-btn sb-style-3 sb-facebook" href="#"><i class="socicon-facebook"></i></a><a class="social-btn sb-style-3 sb-vimeo" href="#"><i class="socicon-vimeo"></i></a><a class="social-btn sb-style-3 sb-youtube" href="#"><i class="socicon-youtube"></i></a><a class="social-btn sb-style-3 sb-instagram" href="#"><i class="socicon-instagram"></i></a></div>
</div>
<!-- Navbar: Simple Ghost-->
<header class="navbar-wrapper navbar-boxed navbar-simple-ghost">
<div class="container-fluid">
<div class="d-table-cell align-middle pr-md-3"><a class="navbar-brand mr-1" href="https://www.frixel.com.br"><img src="img/logo/frixel-branco.png" alt="Frixel"/></a></div>
<div class="d-table-cell w-100 align-middle pl-md-3">
<div class="navbar justify-content-end justify-content-lg-between">
<!--Main Menu-->
<ul class="navbar-nav d-none d-lg-block">
<!--Home-->
<li class="nav-item active"><a class="nav-link" href="https://www.frixel.com.br">Home</a></li>
<!--Portfólio-->
<li class="nav-item"><a class="nav-link" href="https://www.frixel.com.br/portfolio">Portfólio</a></li>
<!--Colaborar-->
<li class="nav-item"><a class="nav-link" href="https://www.frixel.com.br/colaborar">Colaborar</a></li>
<!--Ajuda-->
<li class="nav-item"><a class="nav-link" href="https://www.frixel.com.br/ajuda">Ajuda</a></li>
</ul>
<div>
<ul class="navbar-buttons d-inline-block align-middle">
<li class="d-block d-lg-none"><a href="#mobile-menu" data-toggle="offcanvas"><i class="fe-icon-menu"></i></a></li>
</ul><a class="btn btn-gradient ml-3 d-none d-xl-inline-block" href="" data-toggle="modal" data-target="#exampleModal">Contratar agora</a>
</div>
</div>
</div>
</div>
</header>
<!-- Modal Components -->
<div class="modal fade bd-example-modal-lg" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Contratar serviço</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
<span aria-hidden="true">×</span>
</button>
</div>
<form class="modal-needs-validation pl-4 pr-4" method="POST" action="php/email-modal.php" novalidate>
<div class="row modal-body">
<div class="col-md-6">
<div class="form-group">
<label for="validationCustom03" class="col-form-label">Tipo de cliente:</label>
<select class="custom-select" name="cliente"required>
<option value="Pessoa">Pessoa</option>
<option value="Empresa">Empresa</option>
</select>
<div class="invalid-feedback">
Selecione uma opção
</div>
</div>
<div class="form-group">
<label for="validationCustom01" class="col-form-label">Nome:</label>
<input type="text" class="form-control" id="validationCustom01" name="nome" required>
<div class="invalid-feedback">
O nome é obrigatório
</div>
<label for="validationCustom02" class="col-form-label">E-mail:</label>
<input type="email" class="form-control" id="validationCustom02" name="email" required>
<div class="invalid-feedback">
O e-mail é obrigatório
</div>
</div>
<div class="form-group">
<label for="validationCustom03" class="col-form-label">Tipo de serviço:</label>
<select class="custom-select" name="selecao"required>
<option value="">Selecione</option>
<option value="Edição de vídeo">Pós-produção de vídeo</option>
<option value="Animação 2D">Animação 2D</option>
<option value="Animação 3D">Animação 3D</option>
<option value="Edição de imagem">Edição/Criação de imagem</option>
<option value="Outro">Outro</option>
</select>
<div class="invalid-feedback">
Selecione uma opção
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="validationCustom03" class="col-form-label">Descrição do projeto:</label>
<textarea class="form-control" id="validationCustom03" rows="15" name="descricao" required></textarea>
<div class="invalid-feedback">
Este campo é obrigatório
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
<button type="submit" class="btn btn-primary">Enviar</button>
</div>
</form>
</div>
</div>
</div>
<!-- Page Content-->
<!-- Hero-->
<section class="bg-dark bg-center-top bg-no-repeat position-relative pt-5 pb-4 pb-md-5" style="background-image: url(img/bg22.jpg);">
<div class="img-cover bg-auto d-none d-md-block" style="background-image: url(img/bg22.jpg);"></div>
<div class="container bg-content py-5 my-md-5 text-center text-md-left">
<div class="text-center pb-md-5 mt-5 mb-md-5">
<h1 class="display-5 text-white" style="text-shadow: black 0.1em 0.1em 0.2em;"><span class="d-block break-word">TRANSFORMAMOS SUAS IDÉIAS</span><span class="d-block break-word">EM REALIDADE!</span></h1>
<div><a class="btn btn-primary mt-4" href="https://www.frixel.com.br/portfolio/" target="_blank">Ver Portfólio</a></div>
</div>
</div>
</section>
<div class="bg-no-repeat bg-center-top" style="background-image: url(img/bg44.jpg); height: 250px;"></div>
<!-- Theme Details-->
<section class="container" style="margin-top: -250px;">
<div class="bg-white box-shadow py-5 px-4 px-sm-5">
<div class="row">
<div class="col-md-6 pb-4 mb-3">
<h5><span class='d-inline-block bg-info text-white px-2 py-1'>01</span> Pós-produção de vídeo</h5>
<p class="text-muted pb-3">Este serviço baseia-se em todo o trabalho de arte e acabamentos feitos em um material que foi previamente capturado pelo cliente. Animações, gameplays, documentários, tutoriais, vlogs e filmes são exemplos de conteúdos em que um bom trabalho de pós-produção é indispensável.</p>
<hr>
</div>
<div class="col-md-6 pb-4 mb-3">
<h5><span class='d-inline-block bg-info text-white px-2 py-1'>02</span> Vídeos publicitários</h5>
<p class="text-muted pb-3">Atualmente, a adoção de vídeos publicitários na Web se tornou algo indispensável tanto para pequenas empresas quanto para as grandes corporações. Na Frixel, você pode impulsionar sua empresa com serviços de criação de vídeos profissionais.</p>
<hr>
</div>
<div class="col-md-6 pb-4 mb-3">
<h5><span class='d-inline-block bg-info text-white px-2 py-1'>03</span> Animações 2D / 3D</h5>
<p class="text-muted pb-3">Criar animações é um ótimo meio para deixar a criatividade aflorar, e criatividade é a principal característica dos nossos colaboradores. Esta área do audiovisual é aplicada em diversos segmentos (artistico, publicitário, cinematográfico...), principalmente pelo teor profissional que este tipo de arte causa em quem está assistindo. A Frixel conta com designers e animadores 2D e 3D para colocar em prática aquilo que está apenas em sua mente.</p>
<hr>
</div>
<div class="col-md-6 pb-4 mb-3">
<h5><span class='d-inline-block bg-info text-white px-2 py-1'>04</span> Criação / Edição de imagens</h5>
<p class="text-muted pb-3">O design gráfico de imagens está entre os serviços mais demandados da área de Desing. Isso se deve, principalmente, a popularização e utilização em massa de redes sociais como principal meio para transmitir mensagens gráficas. Uma bela imagem pode ser a responsável pela viralização daquele vídeo no YouTube, pela venda daquele produto ou pela fixação daquela marca através de um belo logotipo. Na Frixel, você encontra profissionais em edição de imagens super capacitados.</p>
<hr>
</div>
</div>
<p class="text-lg text-muted text-center mb-0">...muito mais em breve!</p>
</div>
</section>
<!-- Fetures-->
<section class="container pt-5 pb-5 mt-4 mb-3">
<h2 class="h3 block-title text-center"><span class='font-weight-normal'>O que nos torna</span> especiais<span class='font-weight-normal'>?</span></h2>
<div class="row pt-4">
<div class="col-md-6">
<dl class="dl-with-icon">
<dt><i class="fe-icon-check-circle text-success"></i>Metodologia colaborativa</dt>
<dd>Produtividade potencializada ao máximo! A Frixel produz e se desenvolve utilizando a metodologia de produção da Era da Informação.</dd>
<dt><i class="fe-icon-check-circle text-success"></i>Boa comunicação</dt>
<dd>Entender exatamente o que o cliente deseja é importantíssimo. O cliente entender exatamente o que oferecemos é igualmente importante. Logo, uma boa comunicação é fundamental!</dd>
</dl>
</div>
<div class="col-md-6">
<dl class="dl-with-icon">
<dt><i class="fe-icon-check-circle text-success"></i>Profissionais talentosos</dt>
<dd>"Chame os melhores, e o melhor eles farão!". A Frixel seleciona profissionais e jovens talentosos de todo o país para fazer parte de uma equipe pronta para trabalhar no seu projeto.</dd>
<dt><i class="fe-icon-check-circle text-success"></i>Reembolso total</dt>
<dd>Confiança e garantia são indispensáveis em qualquer negócio. A Frixel oferece uma política de reembolso total caso o produto final não seja entregue a você.</dd>
</dl>
</div>
</div>
</section>
<!-- Footer + CTA-->
<footer class="bg-dark pt-5">
<div class="container pt-3 text-center">
<h3 class="font-weight-normal text-white">Ainda não está convencido?</h3>
<h2 class="h3 text-white pb-4">Então experimente na prática.</h2><a class="btn btn-gradient btn-lg" href="" data-toggle="modal" data-target="#exampleModal"><i class="fe-icon-dollar-sign"></i> Contratar agora</a>
<div class="pt-5 pb-5">
<hr class="hr-light">
</div>
</div>
<div class="container pt-2">
<div class="row">
<div class="col-lg-3 pb-4 mb-2 text-center text-lg-left"><a class="navbar-brand d-inline-block mb-4" href="index.html"><img src="img/logo/frixel-light.png" alt="Frixel"></a>
<p class="text-sm text-white opacity-50 pb-2">Essa startup brasileira especializada em produção de conteúdo áudio-visual atua de forma totalmente online e, por isso, pode contar com os grandes talentos deste setor espalhados pelo país.</p><a class="social-btn sb-style-6 sb-facebook sb-light-skin" href="https://www.facebook.com/Frixel-Studios-106103964093948"><i class="socicon-facebook"></i></a><a class="social-btn sb-style-6 sb-vimeo sb-light-skin" href="https://vimeo.com/user102098846"><i class="socicon-vimeo"></i></a><a class="social-btn sb-style-6 sb-youtube sb-light-skin" href="https://www.youtube.com/channel/UClgMF_RzKlDMcLaTCTa8cKg"><i class="socicon-youtube"></i></a><a class="social-btn sb-style-6 sb-instagram sb-light-skin" href="https://www.instagram.com/frixel_studios/"><i class="socicon-instagram"></i></a>
</div>
<div class="col-lg-4">
<div class="widget widget-light-skin mb-0">
<h4 class="widget-title">Páginas</h4>
</div>
<div class="row">
<div class="col-md-6">
<div class="widget widget-categories widget-light-skin">
<ul>
<li><a href="https://www.frixel.com.br">Home </a></li>
<li><a href="https://www.frixel.com.br/portfolio">Portfólio </a></li>
<li><a href="https://www.frixel.com.br/colaborar">Colaborar </a></li>
<li><a href="https://www.frixel.com.br/ajuda">Ajuda </a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="widget widget-categories widget-light-skin">
<h4 class="widget-title">Legal</h4>
<ul>
<li><a href="https://www.frixel.com.br/legal/privacidade"><i class="fe-icon-book text-white opacity-50"></i>Política de Privacidade</a></li>
<li><a href="https://www.frixel.com.br/legal/termos"><i class="fe-icon-book text-white opacity-50"></i>Termos de Serviço</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Subscription-->
<div class="pt-2" style="background-color: #30363d;">
<div class="container">
<div class="align-items-center py-4 text-center">
<p class="text-sm text-white text-center"><span class='opacity-60'>© 2019-2020 Frixel Studios - Todos os direitos reservados.</span</p>
</div>
</div>
</div>
</footer>
<!-- Back To Top Button--><a class="scroll-to-top-btn" href="#"><i class="fe-icon-chevron-up"></i></a>
<!-- Backdrop-->
<div class="site-backdrop"></div>
<!-- JavaScript (jQuery) libraries, plugins and custom scripts-->
<script src="js/vendor.min.js"></script>
<script src="js/script.js"></script>
<script src="js/theme.min.js"></script>
</body>
</html>