Skip to content

Commit

Permalink
feat: complete ioi-2024 page for receive donations through paypal (#79)
Browse files Browse the repository at this point in the history
  • Loading branch information
@raymond1242
raymond1242 authored May 26, 2024
1 parent ccec7b2 commit 97a9f72
Show file tree
Hide file tree
Showing 5 changed files with 226 additions and 11 deletions.
114 changes: 114 additions & 0 deletions _sass/ioi-2024.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
.ioi-wrapper {

.ioi-hero {
background-image: url('/assets/images/ioi-2024/ioi-bg.gif');
background-size: cover;
height: 450px;
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 40px 0;
gap: 2rem;

.hero-title {
display: flex;
flex-direction: column;
align-items: center;
background-color: white;
padding: 20px 5px;
height: fit-content;

img {
width: 550px;
}
}

.hero-count {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));

.countdown-wrapper {
padding: 15px 25px;
margin: auto;
color: white;
display: flex;
flex-direction: column;
gap: 1rem;
border-radius: 16px;

.title {
font-size: 28px;
line-height: 28px;
}

.divider {
font-size: 34px;
font-weight: 600;
display: flex;
}

.countdown-item {
text-align: center;

.number {
font-size: 62px;
font-weight: 800;
line-height: 50px;
margin-bottom: 0;
}

.text {
font-size: 26px;
margin-bottom: 0;
}
}
}
}

}

.ioi-donate {
padding: 30px 100px;
display: flex;
flex-direction: column;
gap: 1rem;

.donate-info {
display: flex;
gap: 2rem;
}

.donate-title {
font-size: 42px;
font-weight: 300;
}
.donate-text {
font-size: 20px;
}
}
}

@media (max-width: $breakpoint-lg) {
.ioi-wrapper {

.ioi-hero {
.hero-title {
img {
width: 380px;
}
}

.hero-count {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
}
.ioi-donate {
padding: 30px 35px;

.donate-info {
flex-direction: column;
gap: 1rem;
}
}
}
}
3 changes: 0 additions & 3 deletions _sass/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,17 +61,14 @@ main.page-content {
background-color: white;

@media (max-width: $breakpoint-lg) {
padding: 0 5rem;
margin: 0;
}

@media (max-width: $breakpoint-md) {
padding: 0 2.5rem;
margin: 0;
}

@media (max-width: $breakpoint-sm) {
padding: 0 2rem;
margin: 0;
}
}
Expand Down
6 changes: 0 additions & 6 deletions _sass/sections/ioi-2024.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,12 +78,6 @@
border-radius: 12px;
font-size: 20px;

// Remove this if you want to make the button clickable
cursor: not-allowed;
opacity: 0.5;
pointer-events: none;


&:hover {
text-decoration: none;
background-color: $secondary-1;
Expand Down
1 change: 1 addition & 0 deletions assets/css/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,5 +20,6 @@
@import "sections/newsletter";
@import "about";
@import "promos";
@import "ioi-2024";
@import "utils/progressbar";
@import "utils/modal";
113 changes: 111 additions & 2 deletions ioi-2024.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,115 @@
permalink: /ioi-2024
---

<div>
<h3>Página de sponsors</h3>
<div class="ioi-wrapper">
<div class="ioi-hero">
<div class="hero-title">
<img src="/assets/images/ioi-2024/ioi-logo.svg" alt="">
</div>
<div class="hero-count">
<div class="countdown-wrapper">
<p class="title">Cuenta regresiva:</p>
<div style="display: flex; gap: 1rem;">
<div class="countdown-item">
<span id="countdown-days" class="number"></span>
<p class="text">Días</p>
</div>
<div class="divider">:</div>
<div class="countdown-item">
<span id="countdown-hours" class="number"></span>
<p class="text">Horas</p>
</div>
<div class="divider">:</div>
<div class="countdown-item">
<span id="countdown-minutes" class="number"></span>
<p class="text">Minutos</p>
</div>
</div>
</div>
<div></div>
</div>
</div>
<div class="ioi-donate">
<p class="donate-title">
¡ Perú irá a la
<span style="color: red; font-weight: 500;">International Olympiad in Informatics (IOI)</span>
<span style="font-weight: 500;">2024</span>
!
</p>
<p class="donate-text">
Estamos encantados de anunciar que la Federación Olímpica Peruana de Informática (FOPI) ha sido seleccionada para representar a nuestro país en la International Olympiad in Informatics (IOI) 2024, que se llevará a cabo en Egipto. Este prestigioso evento reúne a los mejores talentos en programación de todo el mundo, y estamos emocionados de tener la oportunidad de mostrar el increíble potencial de nuestros estudiantes peruanos.
</p>
<p style="font-size: 36px;">
<span style="color: red; font-weight: 500;">¿</span>
Qué debo saber de la IOI 2024
<span style="color: red; font-weight: 500;">?</span>
</p>
<p style="font-size: 18px;">
La 36.ª Olimpiada Internacional de Informática (IOI 2024) se celebrará en Egipto del 1 al 8 de septiembre de 2024, como la competición de informática más prestigiosa para estudiantes de secundaria y bachillerato de todo el mundo. La competencia es una de las cinco olimpiadas científicas internacionales que se celebran anualmente. IOI 2024 será organizado y albergado por la Academia Árabe de Ciencia, Tecnología y Transporte Marítimo (AASTMT) en Alejandría. El concurso cuenta con el apoyo del Ministerio de Comunicaciones y Tecnologías de la Información, el Ministerio de Juventud y Deportes y la Biblioteca de Alejandría.
</p>
<div class="donate-info">
<div>
<p style="font-size: 36px;">¡ Ayúdanos a llegar a
<span style="color: red; font-weight: 500;">Egipto</span>
!
</p>
<p style="font-size: 18px;">
Organizar la participación en un evento de esta magnitud conlleva importantes costos, que incluyen
<span style="font-weight: 600;">viajes, alojamiento, inscripciones y otros gastos asociados.</span>
Es por eso que estamos haciendo un llamado a nuestra comunidad y a todos aquellos que creen en el poder de la educación y la tecnología para que nos apoyen con una donación económica. Tu contribución nos ayudará a garantizar que nuestros brillantes jóvenes tengan la oportunidad de competir a nivel internacional y representar a Perú con orgullo.
</p>
<div style="border: 1px solid; border-color: rgb(158, 158, 158); margin-bottom: 12px;"></div>
<p style="font-size: 19px;">
¡Únete a nosotros en este emocionante viaje y sé parte del equipo que hace posible que nuestros estudiantes alcancen sus sueños! Cada donación, por pequeña que sea, marca la diferencia y nos acerca un paso más a nuestro objetivo. Juntos, podemos inspirar y empoderar a la próxima generación de líderes en informática.
</p>
<p style="font-size: 20px;">
También puedes apoyarnos en el
<a href="https://www.paypal.com/donate?campaign_id=YZ3DJ76CB9Q6L" target="_blank">
siguiente enlace
</a>
</p>
</div>
<div style="display: flex; margin:auto;">
<iframe
src="https://www.paypal.com/giving/campaigns?campaign_id=YZ3DJ76CB9Q6L"
title="PayPal donate campaign card"
frameborder="0"
width=382
height=550
scrolling="no"
></iframe>
</div>
</div>
</div>
<script>
// Set the date we're counting down to
var countDownDate = new Date("Sep 1, 2024 00:00:00").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

// Get today's date and time
var now = new Date().getTime();

// Find the distance between now and the count down date
var distance = countDownDate - now;

// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);

document.getElementById("countdown-days").innerHTML = days;
document.getElementById("countdown-hours").innerHTML = hours;
document.getElementById("countdown-minutes").innerHTML = minutes;
document.getElementById("countdown-seconds").innerHTML = seconds;

// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "EXPIRED";
}
}, 2000);
</script>
</div>

0 comments on commit 97a9f72

Please sign in to comment.