Merge pull request #23 from rochamrcs/main

Implementação da seção de keynotes

theme/static/css/style.css

@@ -2,6 +2,8 @@
   --primary-paragraph-color: #12152d;
   --accent-primary-color: #f8a123;
   --accent-secondary-color: #f14529;
+  --accent-neutral-color: #4D4D3D;
+  --accent-secondary-neutral-color: #DCDBAD;
   --background-color: #121b31;
   --background-color-light: #233662;
   --background-color-dark: #02050e;
@@ -83,10 +85,128 @@ h2 {
   margin-right: 0.3rem;
 }
 
-.gentileza {
-  font-family: "Gentileza", sans-serif;
-  text-transform: uppercase;
-  letter-spacing: 7px
+/* seção dos keynotes */
+
+.keynotes {
+  margin-left: 70px;
+  margin-right: 70px
+}
+
+.palestrantes {
+  font-size: 52px;
+}
+
+.keynotes-card {
+  display: flex;
+  align-items: center;
+  column-gap: 2rem;
+  justify-content: center;
+  margin: 3.125rem 0;
+  background: var(--accent-neutral-color);
+  border-radius: 8px;
+  padding-top: 52px;
+  padding-bottom: 52px;
+  padding-right: 100px;
+}
+
+.keynotes-profile {
+  display: flex;
+  flex-direction: column; 
+  align-items: center;
+  margin-left: 30px;
+}
+
+.profile-picture {
+  padding: 30px;
+  width: 240px;
+  height: 240px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.keynotes-profile img:nth-child(2) {
+  margin-top: -65px;
+  width: 172px; 
+  height: auto;
+}
+
+.keynote-social {
+  margin-top: 20px;
+  color: var(--accent-secondary-neutral-color)
+}
+
+.keynotes-description p {
+  color: var(--accent-secondary-neutral-color)
+}
+
+.keynotes-description h3 {
+  font-family: "Inter", sans-serif;
+  font-weight: bolder;
+  font-size: 40px;
+}
+
+@media (max-width: 768px) {
+  .keynotes {
+    margin-left: 20px;
+    margin-right: 20px;
+  }
+
+  .keynotes-card {
+    position: relative;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px;
+    text-align: center;
+    background: var(--accent-neutral-color);
+    border-radius: 8px;
+    margin-bottom: 100px
+  }
+
+  .keynotes-profile {
+    align-items: center;
+    margin-left: 0px;
+    position: relative;
+  }
+
+  .profile-picture {
+    width: 160px; 
+    height: 160px;
+    padding: 0px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 8px solid var(--accent-neutral-color);
+    position: absolute;
+    top: -70%;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .keynotes-profile img:nth-child(2) {
+    width: 120px; 
+    margin-top: 41px;
+    position: relative;
+    z-index: 1;
+  }
+
+  .keynotes-description {
+    margin-top: 20px;
+  }
+
+  .keynotes-description h3 {
+    font-size: 28px;
+    text-align: center;
+  }
+
+  .keynotes-description p {
+    font-size: 16px;
+    text-align: center;
+  }
+
+  .keynote-social {
+    margin-top: 10px;
+    display: flex;
+    justify-content: center;
+  }
 }
 
 /* buttons */
@@ -262,7 +382,6 @@ h2 {
 }
 .footer__desc {
   color: var(--text-color-light);
-
   font-size: smaller;
   text-align: start;
   max-width: 70%;

theme/templates/index.html

@@ -37,6 +37,97 @@
     </div>
   </section>
 </section>
+<div class="wave-section-divider orange"></div>
+
+<section id="keynotes" class="keynotes-section">
+  <h1 class="text-center scroll-to palestrantes">Palestrantes Principais</h1>
+  <div class="container">
+    <div class="keynotes">
+
+      <div class="keynotes-card">
+
+        <div class="keynotes-profile">
+          <img src=".\theme\images\fabio.jpg" class="profile-picture"></img>
+          <img src=".\theme\images\python.png"></img>
+          <div class="keynote-social">
+            <a href="https://www.linkedin.com/in/fabiopliger/" target=_blank>
+              <i class="fa-brands fa-linkedin fa-2x" alt="ícone linkedin" height="20px"></i>
+            </a>
+          </div>
+        </div>
+
+        <div class="keynotes-description">
+          <h3>Fabio Pigler</h3>
+          <p>Criador do PyScript, Principal Sw. Architect na Anaconda, Inc, e responsável por pyscript.com, PyScript, PyExcel e a inovação da plataforma</p>
+          <p>Há mais de 20 anos na comunidade Python Internacional, Membro "Fellow" da PSF e da EuroPython Society, ele se orgulha de ter fundado a Associação Python Italia e ter sido Presidente da EuroPython Society de 2012 a 2016. Organizador e co-chair de várias edições da Pycon Itália e Europython.</p>
+          <p>Atualmente, responsável pelo desenvolvimento de ferramentas inovativas na Anaconda inc, com grande paixão pela comunidade Python e democratização de tecnologias.</p>
+
+        </div>
+      </div>
+
+      <div class="keynotes-card">
+
+        <div class="keynotes-profile">
+          <img src=".\theme\images\jessica.png" class="profile-picture"></img>
+          <img src=".\theme\images\python.png"></img>
+          <div class="keynote-social">
+            <a href="https://www.linkedin.com/in/jessicatemporal/" target=_blank>
+              <i class="fa-brands fa-linkedin fa-2x" alt="ícone linkedin" height="20px"></i>
+            </a>
+          </div>
+        </div>
+
+        <div class="keynotes-description">
+          <h3>Jessica Temporal</h3>
+          <p>Sr. Developer Advocate na Auth0 by Okta e seu sonho é ajudar pessoas desenvolvedoras em todo o mundo ensinando conteúdo técnico. </p>
+          <p>Jess é co-fundadora e co-apresentadora do primeiro e mais querido podcast brasileiro sobre ciência de dados Pizza de Dados Github Star, autora do "O Grande Microlivro de Git" e criadora do @gitfichas, uma coleção de cartões de estudo sobre Git.</p>
+          <p>Ela também adora tricotar e aprender novos hobbies.</p>
+        </div>
+      </div>
+
+      <div class="keynotes-card">
+
+        <div class="keynotes-profile">
+          <img src=".\theme\images\nina.jpg" class="profile-picture"></img>
+          <img src=".\theme\images\python.png"></img>
+          <div class="keynote-social">
+            <a href="https://www.linkedin.com/in/ninadahora/" target=_blank>
+              <i class="fa-brands fa-linkedin fa-2x" alt="ícone linkedin" height="20px"></i>
+            </a>
+          </div>
+        </div>
+
+        <div class="keynotes-description">
+          <h3>Nina Da Hora</h3>
+          <p>@ninadhora faz mestrado em Inteligencia Artificial pela Unicamp e sua pesquisa busca mitigar o racismo algorítimo através da intersecção entre ética e inteligência artificial</p>
+          <p>Hacker antirrascista, também dirige o Instituto da Hora, uma organização sem fins lucrativos fundada em 2020 por pessoas negras e indigenas para descentralizar o conhecimento científico, potencializar narrativas antirracistas na tecnologia e emancipar os direitos digitais no Brasil.</p>
+        </div>
+      </div>
+
+      <div class="keynotes-card">
+
+        <div class="keynotes-profile">
+          <img src=".\theme\images\henrique.jpg" class="profile-picture"></img>
+          <img src=".\theme\images\python.png"></img>
+          <div class="keynote-social">
+            <a href="https://www.linkedin.com/in/henriquebastos/" target=_blank>
+              <i class="fa-brands fa-linkedin fa-2x" alt="ícone linkedin" height="20px"></i>
+            </a>
+          </div>
+        </div>
+
+        <div class="keynotes-description">
+          <h3>Henrique Bastos</h3>
+          <p>O Henrique Bastos é um apaixonado por programação há mais de 30 anos. Com uma carreira internacional como desenvolvedor, instrutor, palestrante e consultor, é especialista em Python, Django e Métodos Ágeis.</p>
+          <p>Contribuindo ativamente com a comunidade, já capacitou mais de 10 mil programadores.</p>
+          <p>Além disso, é fellow na Python Software Foundation e na Django Software Foundation, tendo também sido diretor da Associação Python Brasil.</p>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</section>
+
 <div class="wave-section-divider"></div>
 <div>
   <section id="local">