feat: adding ioi egoi banner (#74)

FOPInformatica · Mar 4, 2024 · d4764a2 · d4764a2
1 parent 37c2f9d
commit d4764a2
Show file tree

Hide file tree

Showing 7 changed files with 162 additions and 2 deletions.
diff --git a/_includes/sections/EGOI.html b/_includes/sections/EGOI.html
@@ -0,0 +1,27 @@
+<div>
+    <div class="egoi-wrapper">
+        <div class="egoi-description">
+            <p class="egoi-title">
+                The European Girls’ Olympiad in Informatics (EGOI)
+            </p>
+            <p style="margin-bottom: 0px;">
+                The European Girls’ Olympiad in Informatics (EGOI) es una competencia internacional para
+                <strong>
+                    mujeres jóvenes
+                </strong>
+                interesadas en la informática. Tiene un estilo similar a la Olimpiada Internacional de Informática (OII) y la organiza anualmente un país diferente cada año. La competencia se lleva a cabo entre
+                <strong>
+                    21 y 27 de julio
+                </strong>
+            </p>
+        </div>
+        <div class="egoi-content">
+            <div class="egoi-image">
+                <img src="/assets/images/egoi.png" alt="EGOI image">
+                <p class="egoi-text-image">
+                    The European Girls’ Olympiad in Informatics
+                </p>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/_includes/sections/ioi-egoi-2024.html b/_includes/sections/ioi-egoi-2024.html
@@ -0,0 +1,64 @@
+<div class="ioi-egoi-wrapper">
+    <div class="tag">
+        ¡Nueva noticia!
+    </div>
+    <p class="title">
+        Proceso Selectivo Conjunto
+        <span style="color: red; font-weight: 600;">
+            IOI - EGOI
+        </span>
+        2024
+    </p>
+    <p style="font-size: 18px;">
+        La Federación Olímpica Peruana de Informática se complace en anunciar el inicio del proceso selectivo para la
+        <span style="font-weight: 600; font-size: 19px;">
+            IOI (International Olympiad in Informatics)
+        </span>
+        y la
+        <span style="font-weight: 600; font-size: 19px;">
+            EGOI (European Girls’ Olympiad in Informatics)
+        </span>
+        del año 2024.
+    </p>
+    <div style="margin: 25px 0">
+        <p>
+            Buscamos participantes para representar al Perú en estas competencias internacionales con las siguientes características:
+        </p>
+        <ul>
+            <li>
+                <p style="color: #0056AC; font-weight: 400">
+                    Estudiantes apasionados que deseen destacar en un escenario internacional.
+                </p>
+            </li>
+            <li>
+                <p style="color: #0056AC; font-weight: 400">
+                    Representantes excepcionales para la IOI y la EGOI, que mostrarán su destreza en el ámbito de la programación.
+                </p>
+            </li>
+        </ul>
+    </div>
+    <p style="font-weight: 500; font-size: 22px;">
+        ¿Cómo saber si eres elegible?
+    </p>
+    <ul>
+        <li>
+            <p style="color: #0056AC; font-weight: 400">
+                Si tienes menos de 20 años y estuviste matriculado en una institución educativa secundaria durante la mayor parte del periodo del 1 de septiembre al 1 de diciembre del 2023, y la institución educativa es de Perú.
+            </p>
+        </li>
+        <li>
+            <p style="color: #0056AC; font-weight: 400">
+                Las chicas que cumplan con los mismos requisitos son elegibles para la EGOI.
+            </p>
+        </li>
+    </ul>
+    <p>
+        Si cumples con estos requisitos, te invitamos a participar en el proceso selectivo para la IOI y la EGOI 2024.
+    </p>
+    <p style="font-size: 20px; font-weight: 500; margin-bottom: 0;">
+        Conoce las bases en el siguiente
+        <a href="https://docs.google.com/document/d/1MBUKYOg2074EAoxNRDY3FOOlcHAxF8teVseerG31J0o/edit?usp=sharing" target="_blank" rel="noopener noreferrer">
+            enlace
+        </a>
+    </p>
+</div>
diff --git a/_layouts/home.html b/_layouts/home.html
@@ -19,8 +19,10 @@ <h1 class="full-title">
 
       <div class="wrapper-home">
         {%- include sections/banner.html -%}
-        {%- include sections/winners-phase-2.html -%}
+        {%- include sections/ioi-egoi-2024.html -%}
+        {%- include sections/EGOI.html -%}
         {%- include sections/OII.html -%}
+        {%- include sections/winners-phase-2.html -%}
         <!-- {%- include sections/description.html -%} -->
         {%- include latest_news.html limit=3 -%}
       </div>

diff --git a/_sass/sections/EGOI.scss b/_sass/sections/EGOI.scss
@@ -0,0 +1,45 @@
+.egoi-wrapper {
+    display: grid;
+    background-color: $secondary-1;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+
+    .egoi-content {
+        display: flex;
+        background-color: white;
+
+        .egoi-image {
+            display: flex;
+            gap: 1.5rem;
+            padding: 2rem;
+            margin: auto;
+
+            .egoi-text-image {
+                margin: 10px 0;
+                font-size: 23px;
+                font-weight: 500;
+                width: 250px;
+                justify-content: center;
+            }
+
+            img {
+                margin: auto;
+                width: 230px;
+            }
+        }
+    }
+
+    .egoi-description {
+        background-color: $secondary-1;
+        display: flex;
+        flex-direction: column;
+        text-align: left;
+        margin: auto;
+        padding: 4rem 3rem;
+
+        .egoi-title {
+            color: black;
+            font-size: 24px;
+            font-weight: 600;
+        }
+    }
+}
diff --git a/_sass/sections/OII.scss b/_sass/sections/OII.scss
@@ -27,7 +27,7 @@
         padding: 4rem 3rem;
 
         .oii-title {
-            color: $primary-2;
+            color: black;
             font-size: 24px;
             font-weight: 600;
         }

diff --git a/_sass/sections/ioi-egoi-2024.scss b/_sass/sections/ioi-egoi-2024.scss
@@ -0,0 +1,20 @@
+.ioi-egoi-wrapper {
+    background-color: white;
+    padding: 40px 90px;
+
+    .tag {
+        border: 2px solid $primary-1;
+        color: $primary-1;
+        font-weight: 600;
+        padding: 2px 6px;
+        border-radius: 8px;
+        width: fit-content;
+    }
+
+    .title {
+        font-size: 36px;
+        font-weight: 350;
+        margin-top: 10px;
+        color: black;
+    }
+}
diff --git a/assets/css/styles.scss b/assets/css/styles.scss
@@ -11,8 +11,10 @@
 @import "contest";
 @import "latest_news";
 @import "sections/description";
+@import "sections/ioi-egoi-2024";
 @import "sections/winners-phase-2";
 @import "sections/OII";
+@import "sections/EGOI";
 @import "sections/banner";
 @import "sections/newsletter";
 @import "about";