forked from CursinhoTransFormacao/landing
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
203 lines (203 loc) · 10.9 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
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">>
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="Site Institucional do Cursinho Popular TransFormação">
<meta name="author" content="Coletivo TransFormação">
<link rel="icon" href="favicon.ico">
<!-- opengraph -->
<meta property="og:locale" content="pt_BR" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Cursinho TransFormação" />
<meta property="og:description" content="" />
<meta property="og:url" content="" />
<meta property="og:site_name" content="" />
<meta property="og:image" content="./default-share-cover.jpg" />
<!-- twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:description" content="" />
<meta name="twitter:title" content="Cursinho TransFormação" />
<meta name="twitter:image" content="./default-share-cover.jpg" />
<link rel="icon" href="./favicon.ico">
<title>Cursinho Popular TransFormação</title>
<!-- Bootstrap core CSS -->
<link href="https://fonts.googleapis.com/css?family=PT+Sans+Caption:400,700|PT+Sans:400,700" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<!--INÍCIO MENU TOPO-->
<nav class="navbar navbar-fixed-top">
<div class="container-fluid" id="navbar-container">
<div class="navbar-header">
<img src="imgs/logotipo_cursinho.png" width="100px" heigth="100px" alt="logotipo Cursinho Popular TransFormação">
</div>
<ul>
<li>HOME</li>
<li>SOBRE</li>
<li>IMAGENS</li>
<li>CONTATO</li>
</ul>
</div>
</nav>
<!--FIM MENU TOPO-->
<!--INÍCIO PRIMEIRA SEÇÃO-->
<section class="container-fluid" id="home">
<h1>CURSINHO POPULAR TRANSFORMAÇÃO</h1>
<h4>Educação empoderadora para pessoas transexuais, travestis e não-binárias.</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a href="#sobre"><button class='btn' id='saiba-mais'>Saiba Mais</button></a>
</section>
<!--FIM PRIMEIRA SEÇÃO-->
<!--INÍCIO SEGUNDA SEÇÃO-->
<section class="container-fluid" id="sobre">
<div class="row">
<div class="col-md-6 col-xs-12">
<h2>SOBRE O CURSINHO POPULAR TRANSFORMAÇÃO</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<button class="btn btn-paypal center-block"><i class="fa fa-paypal" aria-hidden="true"></i> Colabore</button>
</div>
<div class="col-md-6 col-xs-12">
<img src="http://i.imgur.com/1EVGAnS.png" class='img-responsive' alt="Alunxs do Cursinho Popular Transformação">
</div>
</div>
</section>
<!--FIM SEGUNDA SEÇÃO-->
<!--INÍCIO TERCEIRA SEÇÃO-->
<section id="imagensfb">
<!-- modal para exibir as imagens da galeria -->
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="Galeria" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Fechar</span></button>
<img src="" class="imagepreview" style="width: 100%;" >
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<h3>Galeria de Imagens</h3>
<div id="gallery">
<a href="JavaScript:void(0);" class="pop" title="American Kestrel with a Lizard" data-gallery=""><img src="https://farm8.static.flickr.com/7197/27701759675_5d854e2f6b_s.jpg"></a>
<a href="JavaScript:void(0);" class="pop" title="Touran" data-gallery=""><img src="https://farm8.static.flickr.com/7261/27095386374_44c1104963_s.jpg"></a>
<a href="JavaScript:void(0);" class="pop" title="Hecla 1.3" data-gallery=""><img src="https://farm8.static.flickr.com/7451/27701168835_3a7c39783d_s.jpg"></a><br>
<a href="JavaScript:void(0);" class="pop" title="American Kestrel with a Lizard" data-gallery=""><img src="https://farm8.static.flickr.com/7197/27701759675_5d854e2f6b_s.jpg"></a>
<a href="JavaScript:void(0);" class="pop" title="Touran" data-gallery=""><img src="https://farm8.static.flickr.com/7261/27095386374_44c1104963_s.jpg"></a>
<a href="JavaScript:void(0);" class="pop" title="Hecla 1.3" data-gallery=""><img src="https://farm8.static.flickr.com/7451/27701168835_3a7c39783d_s.jpg"></a><br>
<a href="JavaScript:void(0);" class="pop" title="American Kestrel with a Lizard" data-gallery=""><img src="https://farm8.static.flickr.com/7197/27701759675_5d854e2f6b_s.jpg"></a>
<a href="JavaScript:void(0);" class="pop" title="Touran" data-gallery=""><img src="https://farm8.static.flickr.com/7261/27095386374_44c1104963_s.jpg"></a>
<a href="JavaScript:void(0);" class="pop" title="Hecla 1.3" data-gallery=""><img src="https://farm8.static.flickr.com/7451/27701168835_3a7c39783d_s.jpg"></a>
</div>
</div>
<div class="col-md-6">
<h3>IMAGENS & ATUALIZAÇÕES</h3>
<p>Curta nossa página no Facebook e fique sempre por dentro do que há de novidade no <strong>Cursinho Popular TransFormação</strong>.</p>
<div class="text-center">
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FCursinhoPopularTransformacao&tabs=timeline&width=400&height=300&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=327329513960013" width="400" height="300" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</div>
</div>
</div>
</div>
</section>
<!--FIM TERCEIRA SEÇÃO-->
<!--INÍCIO QUARTA SEÇÃO -->
<section id="fale-conosco" class="container-fluid">
<div class="row">
<!-- Sub-Seção de Título Mobile/Tablet -->
<div class="col-xs-12 col-lg-12 hidden-md hidden-lg">
<div class="text-center"><h4>FALE CONOSCO</h4></div>
<div class="text-left">
<p>Preencha o formulário ao lado ou se preferir, envie sua mensagem para: [email protected]</p>
<p>Nossas aulas acontecem toda segunda e quinta, das 14h30 às 18h</p>
<p>Sua mensagem será respondida em breve por um dos militantes do <strong>Coletivo TransFormação</strong>.</p>
</div>
</div>
<!-- Fim da Sub-Seção de Título -->
<!-- Formulário de Contato -->
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<form id="form-fale-conosco" method="POST" action="formulario-de-contato.php">
<p><input type="text" name="fale-conosco-nome" class="form-control" placeholder="NOME" required></input></p>
<p><input type="email" name="fale-conosco-email" class="form-control" placeholder="EMAIL" required></input></p>
<p><input type="tel" name="fale-conosco-telefone" class="form-control" placeholder="TELEFONE" required></input></p>
<p><textarea name="fale-conosco-mensagem" class="form-control" placeholder="MENSAGEM" required></textarea></p>
<p class="pull-right"><button type="submit" value="submit" class="btn btn-enviar">ENVIAR</button></p>
</form>
</div>
<!-- Fim do Formulário de Contato -->
<!-- Sub-Seção de Título Tablet/Desktop -->
<div class="col-md-6 col-lg-6 hidden-xs hidden-sm">
<div class="text-center"><h4>FALE CONOSCO</h4></div>
<div class="text-left">
<p>Preencha o formulário ao lado ou se preferir, envie sua mensagem para: [email protected]</p>
<p>Nossas aulas acontecem toda segunda e quinta, das 14h30 às 18h</p>
<p>Sua mensagem será respondida em breve por um dos militantes do <strong>Coletivo TransFormação</strong>.</p>
</div>
</div>
<!-- Fim da Sub-Seção de Título Tablet/Desktop -->
</div>
</section>
<!--FIM QUARTA SEÇÃO-->
<!--INÍCIO QUINTA SEÇÃO-->
<footer>
<p>
<a href="https://facebook.com/CursinhoPopularTransformação" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x rosa-bg"></i>
<i class="fa fa-facebook fa-stack-1x"></i>
</span>
/CursinhoPopularTransformação
</a>
</p>
<p>
<a href="mailto:[email protected]?Subject=[CONTATO-SITE] Mensagem Automática" target="_top">
<span class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x rosa-bg"></i>
<i class="fa fa-envelope fa-stack-1x"></i>
</span>
</a>
</p>
<p>
<a href="https://www.google.com/maps/place/Centro+de+Refer%C3%AAncia+da+Diversidade/@-23.5453645,-46.6491395,17z/data=!3m1!4b1!4m5!3m4!1s0x94ce58492818b0ab:0x2851422ce95b25c7!8m2!3d-23.5453694!4d-46.6469455" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x rosa-bg"></i>
<i class="fa fa-map-marker fa-stack-1x"></i>
</span>
CRD SP - Rua Major Sertório, 292/294 - República - São Paulo
</a>
</p>
</footer>
<!--FIM QUINTA SEÇÃO-->
<!-- Bootstrap core JavaScript-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
<!-- script para exibir as imagens da galeria no modal -->
<script type="text/javascript">
$(function() {
$('.pop').on('click', function() {
$('.imagepreview').attr('src', $(this).find('img').attr('src'));
$('#imagemodal').modal('show');
});
});
</script>
</body>
</html>