Publish site on 2024-04-01

pythonbrasil · Apr 1, 2024 · 6f146c0 · 6f146c0
1 parent 160d5c7
commit 6f146c0
Show file tree

Hide file tree

Showing 4 changed files with 142 additions and 74 deletions.
diff --git a/index.html b/index.html
@@ -24,8 +24,7 @@
     </script>
   </head>
   <body>
-    <div class="background">
-      <!-- <nav class="navbar navbar-expand-lg">
+    <!-- <nav class="navbar navbar-expand-lg">
     <div class="container">
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
@@ -58,15 +57,15 @@
       <img src="/theme/images/logo.png" alt="logo do evento python brasil 2024" class="logo">
     </div>
     <div class="pt-5 col-lg-4 col-sm-12 col-md-6 offset-lg-1 text-center">
-        <h1>
-            16 A 21 DE OUTUBRO DE 2024
-        </h1>
-        <h2>
-            RIO DE JANEIRO - RJ
-        </h2>
-      </div>
+      <h1>
+        16 A 21 DE OUTUBRO DE 2024
+      </h1>
+      <h2>
+        RIO DE JANEIRO - RJ
+      </h2>
+    </div>
   </div>
-  <div class="row justify-content-md-center">
+  <nav id="navbar" class="row justify-content-md-center">
     <div class="col-lg-10 col-sm-12 col-md-12 text-center">
       <a href="#evento" class="btn btn-primary">
         o evento
@@ -77,40 +76,49 @@ <h2>
       <a href="#patrocinadores" class="btn btn-primary">
         patrocinadores
       </a>
-    </div>
+      <a href="https://pybr2024.eventbrite.com/" target="blank" class="btn btn-primary">
+        garanta seu ingresso
+      </a>
+  </nav>
 </section>
 <div id="lighter-section">
-<section id="evento">
-    <h1 class="text-center">SOBRE O EVENTO</h1>
+  <section id="evento">
+    <h1 class="text-center scroll-to">SOBRE O EVENTO</h1>
     <div class="container text-center">
-        <p class="pb-4 text-center fs-3">A Python Brasil é a maior conferência da linguagem de programação Python da América Latina, 
-          um evento feito pela comunidade para a Comunidade.</p>
-        <p class="pb-4 text-center fs-3">Temos orgulho de ter um ambiente seguro, amistoso, inclusivo e acessível, onde todas as pessoas são bem-vindas e possam 
-          se sentir à vontade, aproveitando o melhor que o evento tem a oferecer.</p>
-</section>
-<section id="local">
-  <h1 class="text-center">O LOCAL DO EVENTO</h1>
-  <div class="container text-center">
-      <p class="pb-4 text-center fs-3">As palestras acontecerão no Centro de Convenções Bolsa de Valores, 
+      <p class="pb-4 text-center fs-3">A Python Brasil é a maior conferência da linguagem de programação Python da
+        América Latina,
+        um evento feito pela comunidade para a Comunidade.</p>
+      <p class="pb-4 text-center fs-3">Temos orgulho de ter um ambiente seguro, amistoso, inclusivo e acessível, onde
+        todas as pessoas são bem-vindas e possam
+        se sentir à vontade, aproveitando o melhor que o evento tem a oferecer.</p>
+  </section>
+  <section id="local">
+    <h1 class="text-center scroll-to">O LOCAL DO EVENTO</h1>
+    <div class="container text-center">
+      <p class="pb-4 text-center fs-3">As palestras acontecerão no Centro de Convenções Bolsa de Valores,
         na Praça XV, um local central no Rio de Janeiro, em um auditório com capacidade para até 1000 pessoas.</p>
       <div class="row">
         <div class="col-sm-12 col-md-4 mb-3">
-          <img src=".\theme\images\frente_local.jpg" class="rounded img-fluid" style="max-width: 100%; height: auto;" alt="">
+          <img src=".\theme\images\frente_local.jpg" class="rounded img-fluid" style="max-width: 100%; height: auto;"
+            alt="">
         </div>
         <div class="col-sm-12 col-md-4 mb-3">
-          <img src=".\theme\images\local_evento.jpg" class="rounded img-fluid" style="max-width: 100%; height: auto;" alt="">
+          <img src=".\theme\images\local_evento.jpg" class="rounded img-fluid" style="max-width: 100%; height: auto;"
+            alt="">
         </div>
         <div class="col-sm-12 col-md-4 mb-3">
-          <img src=".\theme\images\local_evento_dois.jpg" class="rounded img-fluid" style="max-width: 100%; height: auto;" alt="">
+          <img src=".\theme\images\local_evento_dois.jpg" class="rounded img-fluid"
+            style="max-width: 100%; height: auto;" alt="">
         </div>
       </div>
     </div>
-  <div class="container pt-5">
-    <iframe src="https://www.google.com/maps/d/u/0/embed?mid=1DzHnt_l2jHAyctgrlerlSgvEFDPNfvc&ehbc=2E312F&noprof=1" width="100%" height="500"></iframe>
-  </div>
-</section>
+    <div class="container pt-5">
+      <iframe style="pointer-events:none;" src="https://www.google.com/maps/d/u/0/embed?mid=1DzHnt_l2jHAyctgrlerlSgvEFDPNfvc&ehbc=2E312F&noprof=1"
+        width="100%" height="500"></iframe>
+    </div>
+  </section>
 
-<!--<section id="programacao">
+  <!--<section id="programacao">
 </section>
 <section id="keynotes">
 </section>
@@ -122,32 +130,32 @@ <h1 class="text-center">O LOCAL DO EVENTO</h1>
 
 <section id="patrocinadores">
   <div class="container text-center">
-      <h1>PATROCINADORES</h1>
-      <a href="theme/media_kits/proposta-de-patrocinio-pybr-2024.pdf" target="_blank" class="btn btn-primary">
-        proposta de patrocínio [pt]
-      </a>
-      <a href="theme/media_kits/sponsorship-proposal-pybr-2024.pdf" target="_blank" class="btn btn-primary">
-        sponsorship proposal [en]
-      </a>
-      <section class="diamante">
+    <h1 class="scroll-to">PATROCINADORES</h1>
+    <a href="theme/media_kits/proposta-de-patrocinio-pybr-2024.pdf" target="_blank" class="btn btn-primary">
+      proposta de patrocínio [pt]
+    </a>
+    <a href="theme/media_kits/sponsorship-proposal-pybr-2024.pdf" target="_blank" class="btn btn-primary">
+      sponsorship proposal [en]
+    </a>
+    <section class="diamante">
       <h2>diamante</h2>
       <img src="theme/images/patrocinador-placeholder.png" alt="sua empresa aqui (diamante)">
-      </section>
-      <section class="platina">
+    </section>
+    <section class="platina">
       <h2>platina</h2>
       <img src="theme/images/patrocinador-placeholder.png" alt="sua empresa aqui (platina)">
       <img src="theme/images/patrocinador-placeholder.png" alt="sua empresa aqui (platina)">
-      </section>
-      <section class="ouro">
+    </section>
+    <section class="ouro">
       <h2>ouro</h2>
       <img src="theme/images/patrocinador-placeholder.png" alt="sua empresa aqui (ouro)">
       <img src="theme/images/patrocinador-placeholder.png" alt="sua empresa aqui (ouro)">
-      </section>
-      <section class="prata">
+    </section>
+    <section class="prata">
       <h2>prata</h2>
       <img src="theme/images/patrocinador-placeholder.png" alt="sua empresa aqui (prata)">
       <img src="theme/images/patrocinador-placeholder.png" alt="sua empresa aqui (prata)">
-      </section>
+    </section>
   </div>
 </section>
 <footer>
@@ -157,7 +165,8 @@ <h2>prata</h2>
         <img class="footerImg" src="/theme/images/logo.png" alt="logo do evento python brasil 2024" class="logo">
         <div class="pt-3">
           <p>
-            Python Brasil é uma conferência sem fins lucrativos dirigida por voluntários para promover a linguagem de programação Python de código aberto.
+            Python Brasil é uma conferência sem fins lucrativos dirigida por voluntários para promover a linguagem de
+            programação Python de código aberto.
             A conferência é apoiado pela Associação Python Brasil (APyB).
           </p>
         </div>
@@ -204,7 +213,7 @@ <h2>prata</h2>
           </li>
         </ul>
       </div>
-      
+
       <div class="links_apyb">
         <h5>Links da APyB</h5>
         <ul class="lista_link">
@@ -225,19 +234,19 @@ <h5>Links da APyB</h5>
       <div class="col-lg-3">
         <h5 class="text-light pb-4">Endereço do evento</h5>
         <p>
-          <i class="fa-solid fa-location-dot"></i> Centro de Convenções Bolsa do Rio<br/>
-          Edificio Bolsa do Rio<br/>
-          Praça Quinze de Novembro, 20<br/>
-          Centro, Rio de Janeiro - RJ<br/>
+          <i class="fa-solid fa-location-dot"></i> Centro de Convenções Bolsa do Rio<br />
+          Edificio Bolsa do Rio<br />
+          Praça Quinze de Novembro, 20<br />
+          Centro, Rio de Janeiro - RJ<br />
           CEP: 20010-010, Brasil
         </p>
       </div>
-  </div>
-</footer>
     </div>
+</footer>
     <script src="/theme/js/bootstrap.bundle.min.js"></script>
     <script src="/theme/js/konami.js"></script>
     <script src="/theme/js/game.js"></script>
     <script src="/theme/js/egg.js"></script>
+    <script src="/theme/js/scripts.js"></script>
   </body>
 </html>
diff --git a/theme/css/style.css b/theme/css/style.css
@@ -4,30 +4,42 @@
     padding: 0;
 }
 
+html {}
+
 section {
     margin-top: 5em;
 }
 
 body {
-    background: #000;
+    background-image: url('/theme/images/bg-blue-textura.png');
+    background-repeat: repeat;
+    background-attachment: fixed;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
     font-family: "Montserrat", sans-serif;
     font-weight: 400;
     display: block;
 }
 
 #lighter-section {
     background: url('/theme/images/bg-yellow-textura.png');
-    padding: 2em;
+    padding: 1m;
+    padding-top: 0.1em;
 }
 
 
-#lighter-section p, #lighter-section h2, #lighter-section h1 {
+#lighter-section p,
+#lighter-section h2,
+#lighter-section h1 {
     color: #12152D;
 }
 
-h1, h2, h3 {
-    font-family: "Merienda", cursive;
-    font-weight: 800;
+h1,
+h2,
+h3 {
+    font-family: "Inter", sans-serif;
+    font-weight: bolder;
     color: #fff;
     text-transform: uppercase;
 }
@@ -42,22 +54,24 @@ h2 {
 
 .fa-solid {
     color: #EEBF23;
-    filter:drop-shadow(#EC452F 1px 1px);
+    filter: drop-shadow(#EC452F 1px 1px);
     margin-right: 0.3rem;
 }
 
 
 .btn {
     text-transform: lowercase;
-} 
+}
 
 .btn.btn-primary {
     margin: 0.5rem;
     background-color: #EC452F;
     border: #cd3724;
 }
 
-.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:visited{
+.btn.btn-primary:hover,
+.btn.btn-primary:active,
+.btn.btn-primary:visited {
     margin: 0.5rem;
     background-color: #d13c28;
     border: #F1CF5D;
@@ -66,28 +80,35 @@ h2 {
 #patrocinadores .diamante img {
     width: 20em;
 }
+
 #patrocinadores .platina img {
     width: 10em;
 }
+
 #patrocinadores .ouro img {
     width: 10em;
 }
+
 #patrocinadores .prata img {
     width: 10em;
 }
 
 #sobre {
-    background-image: url('/theme/images/bg-blue-textura.png');
-    background-repeat: repeat;
     color: #fff;
     margin-top: 0px;
 }
 
-#sobre, #footer {
+#sobre,
+#footer {
     font-family: 'Inter', sans-serif;
 }
 
-#sobre h1, #sobre h2, #sobre h3, #footer h1, #footer h2, #footer h3 {
+#sobre h1,
+#sobre h2,
+#sobre h3,
+#footer h1,
+#footer h2,
+#footer h3 {
     font-family: 'Inter', sans-serif;
     text-transform: uppercase;
 }
@@ -112,13 +133,15 @@ h2 {
 .container {
     margin-left: auto;
     margin-right: auto;
+    padding-top: 1rem;
     padding-left: 1rem;
     padding-right: 1rem;
     width: 100%;
 }
 
 
 footer {
+    margin-top: 40px;
     background-color: black;
 }
 
@@ -182,16 +205,40 @@ footer .container .lista_link a {
 
 @media (max-width: 768px) {
     footer .footer_body {
-      flex-direction: column;
-      align-items: center;
+        flex-direction: column;
+        align-items: center;
     }
-  
+
     footer .links_apyb {
-      text-align: center;
-      margin-top: 30px;
+        text-align: center;
+        margin-top: 30px;
     }
-  
+
     footer .links_apyb h5 {
-      margin-bottom: 15px;
+        margin-bottom: 15px;
     }
-  }
+}
+
+.sticky {
+    --bs-gutter-x: 0;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100vw;
+    box-sizing: border-box;
+    background-color: #12152D;
+    transition: all 0.5s;
+}
+
+.sticky+.content {
+    padding-top: 102px;
+}
+
+.scroll-to {
+    padding-top: 2em;
+}
+
+#evento {
+    padding: 0em;
+}
diff --git a/theme/images/logo_hapolo_11.png b/theme/images/logo_hapolo_11.png
diff --git a/theme/js/scripts.js b/theme/js/scripts.js
@@ -0,0 +1,12 @@
+window.onscroll = function() {myFunction()};
+
+var header = document.getElementById("navbar");
+var sticky = header.offsetTop;
+
+function myFunction() {
+  if (window.pageYOffset > sticky) {
+    header.classList.add("sticky");
+  } else {
+    header.classList.remove("sticky");
+  }
+}