-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
195 lines (189 loc) · 15.2 KB
/
index.html
File metadata and controls
195 lines (189 loc) · 15.2 KB
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
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Python Nordeste 2026 - Fortaleza/CE</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="style.css">
</head>
<body style="background-color: #fff8e5;">
<!-- Navbar -->
<nav id="navbar" class="fixed w-full top-0 z-50" style="background-color: transparent;">
<div class="container mx-auto px-6 py-4">
<div class="flex items-center justify-between md:justify-between relative">
<!-- Logo -->
<a href="#inicio" class="flex-shrink-0">
<img src="https://cdn.abacus.ai/images/c8d5af10-f214-4c86-9802-17407a8b6db8.png" alt="Python Nordeste 2026" class="h-12 md:h-14">
</a>
<!-- Desktop Menu -->
<div class="hidden md:flex space-x-8">
<a href="#inicio" class="nav-link font-semibold hover:text-yellow-400 transition" style="color: #2b3692;">Início</a>
<div class="relative dropdown-container">
<button class="nav-link font-semibold hover:text-yellow-400 transition" style="color: #2b3692;">Evento</button>
<div class="dropdown-menu absolute hidden shadow-lg rounded-md mt-2 py-2 w-48" style="background-color: rgba(43, 54, 146, 0.95);">
<a href="#cidade" class="block px-4 py-2 hover:bg-opacity-80" style="color: #fff8e5;">Cidade</a>
<a href="#sobre" class="block px-4 py-2 hover:bg-opacity-80" style="color: #fff8e5;">Sobre o Evento</a>
<a href="#patrocinio" class="block px-4 py-2 hover:bg-opacity-80" style="color: #fff8e5;">Patrocínio</a>
</div>
</div>
<a href="#codigo-conduta" class="nav-link font-semibold hover:text-yellow-400 transition" style="color: #2b3692;">Código de Conduta</a>
</div>
<!-- Mobile Menu Button -->
<button id="mobile-menu-btn" class="md:hidden" style="color: #2b3692;">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden mt-4 pb-4 text-center rounded-lg" style="background-color: rgba(43, 54, 146, 0.95);">
<a href="#inicio" class="block py-2 hover:text-yellow-300" style="color: #fff8e5;">Início</a>
<a href="#cidade" class="block py-2 hover:text-yellow-300" style="color: #fff8e5;">Cidade</a>
<a href="#sobre" class="block py-2 hover:text-yellow-300" style="color: #fff8e5;">Sobre o Evento</a>
<a href="#patrocinio" class="block py-2 hover:text-yellow-300" style="color: #fff8e5;">Patrocínio</a>
<a href="#codigo-conduta" class="block py-2 hover:text-yellow-300" style="color: #fff8e5;">Código de Conduta</a>
</div>
</div>
</nav>
<!-- Hero Section - Início -->
<section id="inicio" class="min-h-screen flex items-center justify-center pt-20" style="background: linear-gradient(135deg, #2b3692 0%, #80b80c 100%);">
<div class="container mx-auto px-6 text-center">
<img src="https://cdn.abacus.ai/images/78a5aca5-013d-42c8-9b5a-9ddbe50f176e.png" alt="Logo Ceará Python Nordeste" class="h-56 md:h-72 lg:h-80 mx-auto mb-8">
<img src="https://cdn.abacus.ai/images/c8d5af10-f214-4c86-9802-17407a8b6db8.png" alt="Python Nordeste 2026" class="h-24 md:h-32 lg:h-36 mx-auto mb-8">
<div class="text-center">
<p class="text-xl font-medium" style="color: #f7aa1c;">
Datas, local e inscrições em breve
</p>
</div>
</div>
</section>
<!-- Cidade Section -->
<section id="cidade" class="py-20" style="background-color: #fff8e5;">
<div class="container mx-auto px-6">
<h2 class="text-4xl font-bold mb-12 text-center" style="color: #2b3692;">A Cidade</h2>
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<h3 class="text-2xl font-semibold mb-4" style="color: #da3724;">Fortaleza</h3>
<p class="leading-relaxed mb-4" style="color: #333;">
Fortaleza, capital do Ceará, é uma cidade vibrante e acolhedora, conhecida por suas praias paradisíacas,
clima ensolarado durante todo o ano e uma rica cultura nordestina.
</p>
<p class="leading-relaxed mb-4" style="color: #333;">
O povo fortalezense é reconhecido por sua hospitalidade calorosa e alegria contagiante. A cidade respira
cultura em cada esquina, desde o artesanato local até a gastronomia típica, com destaque para a culinária
à base de frutos do mar.
</p>
<p class="leading-relaxed" style="color: #333;">
Com uma cena tecnológica em crescimento, Fortaleza se consolida como um importante polo de inovação no
Nordeste, sendo o cenário perfeito para sediar a Python Nordeste 2026.
</p>
</div>
<div class="carousel-container">
<div class="carousel flex gap-4 overflow-x-auto pb-4 snap-x snap-mandatory">
<div class="carousel-item min-w-full snap-center">
<img src="assets/imgs-cidade/40209528585_7c458c74a6_o.jpg" alt="Praia de Fortaleza" class="w-full h-80 object-cover rounded-lg shadow-lg">
</div>
<div class="carousel-item min-w-full snap-center">
<img src="assets/imgs-cidade/40209526965_3b3149c284_o.jpg" alt="Teatro José Alencar" class="w-full h-80 object-cover rounded-lg shadow-lg">
</div>
<div class="carousel-item min-w-full snap-center">
<img src="assets/imgs-cidade/40209529135_8ae9531c30_o.jpg" alt="Praia do Meireles" class="w-full h-80 object-cover rounded-lg shadow-lg">
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Sobre o Evento Section -->
<section id="sobre" class="py-20" style="background-color: #fff8e5;">
<div class="container mx-auto px-6">
<h2 class="text-4xl font-bold mb-12 text-center" style="color: #2b3692;">Sobre o Evento</h2>
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<p class="leading-relaxed text-lg" style="color: #333;">
A Python Nordeste é um evento de tecnologia, realizado anualmente desde 2013, organizado por
entusiastas da linguagem de programação Python da região Nordeste do Brasil. Como um evento sem
fins lucrativos, ele é planejado e conduzido de forma colaborativa pela comunidade, com o objetivo
de promover o aprendizado, o compartilhamento de conhecimento e o fortalecimento de laços entre os
participantes.
</p>
</div>
<div class="carousel-container">
<div class="carousel flex gap-4 overflow-x-auto pb-4 snap-x snap-mandatory">
<div class="carousel-item min-w-full snap-center">
<img src="assets/imgs-pyne/54621951939_bf58fc4624_c.jpg" alt="Teatro José Alencar" class="w-full h-80 object-cover rounded-lg shadow-lg">
</div>
<div class="carousel-item min-w-full snap-center">
<img src="assets/imgs-pyne/54460465871_05979e21a6_c.jpg" alt="Praia de Fortaleza" class="w-full h-80 object-cover rounded-lg shadow-lg">
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Patrocínio Section -->
<section id="patrocinio" class="py-20" style="background-color: #fff8e5;">
<div class="container mx-auto px-6 text-center">
<h2 class="text-4xl font-bold mb-4" style="color: #2b3692;">Patrocine o Evento</h2>
<p class="text-xl mb-12 max-w-3xl mx-auto" style="color: #333;">
Apoie a comunidade Python Nordeste e impulsione sua marca. Veja nossos planos de patrocínio.
</p>
<div class="flex flex-col md:flex-row gap-6 justify-center">
<a href="https://drive.google.com/file/d/1tiNr-EUwoAEB1H1da0tmLXoqK4rF-_IL/view?usp=sharing" class="px-8 py-4 rounded-lg transition font-semibold inline-flex items-center justify-center gap-2" style="background-color: #2b3692; color: #fff8e5;" onmouseover="this.style.backgroundColor='#da3724'" onmouseout="this.style.backgroundColor='#2b3692'">
<span class="text-2xl">🇧🇷</span>
Português Brasileiro
</a>
<a href="https://www.canva.com/design/DAHDxqmDzuE/uwJRfnmQRnrATgjG7xKKNg/edit" class="px-8 py-4 rounded-lg transition font-semibold inline-flex items-center justify-center gap-2" style="background-color: #ef7512; color: #fff8e5;" onmouseover="this.style.backgroundColor='#f7aa1c'" onmouseout="this.style.backgroundColor='#ef7512'">
<span class="text-2xl">🇺🇸</span>
American English
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-12" style="background-color: #2b3692; color: #fff8e5;">
<div class="container mx-auto px-6">
<div class="flex flex-col items-center">
<h3 class="text-xl font-semibold mb-6">Siga a Python Nordeste</h3>
<div class="flex gap-8 mb-8">
<!-- Telegram -->
<a href="https://t.me/pythonnordeste" class="hover:opacity-75 transition" style="color: #f7aa1c;" target="_blank">
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.562 8.161c-.18 1.897-.962 6.502-1.359 8.627-.168.9-.5 1.201-.82 1.23-.697.064-1.226-.461-1.901-.903-1.056-.692-1.653-1.123-2.678-1.799-1.185-.781-.417-1.21.258-1.911.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.139-5.062 3.345-.479.329-.913.489-1.302.481-.428-.008-1.252-.241-1.865-.44-.752-.244-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.831-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635.099-.002.321.023.465.14.121.099.155.232.171.326.016.093.036.306.02.472z"/>
</svg>
</a>
<!-- Instagram -->
<a href="https://www.instagram.com/pythonnordeste" class="hover:opacity-75 transition" style="color: #f7aa1c;" target="_blank">
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
</svg>
</a>
<!-- LinkedIn -->
<a href="https://www.linkedin.com/company/pythonnordeste" class="hover:opacity-75 transition" style="color: #f7aa1c;" target="_blank">
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
</svg>
</a>
<!-- GitHub -->
<a href="https://github.com/pythonNordeste/" class="hover:opacity-75 transition" style="color: #f7aa1c;" target="_blank">
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
</svg>
</a>
<!-- Email -->
<a href="nordeste@python.org.br" class="hover:opacity-75 transition" style="color: #f7aa1c;" target="_blank">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
</svg>
</a>
</div>
<div class="text-sm" style="color: #fff8e5; opacity: 0.8;">
<p>© Python Nordeste 2026. Todos os direitos reservados.</p>
</div>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>