Skip to content

Commit

Permalink
feat: adding new IOI-2024 banner (#77)
Browse files Browse the repository at this point in the history
* feat: adding new IOI-2024 banner

* feat: remove extra end line

* feat: remove comments
  • Loading branch information
raymond1242 authored Apr 22, 2024
1 parent 231cdcf commit ccec7b2
Show file tree
Hide file tree
Showing 13 changed files with 213 additions and 8 deletions.
2 changes: 1 addition & 1 deletion _includes/footer.html
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
</div>
<div class="footer-terms">
<p>
<small> 2022 FOPI ©. Todos los derechos reservados. </small>
<small> 2024 FOPI ©. Todos los derechos reservados. </small>
</p>
<p>
<small> Peruvian Federation for Olympiads in Informatics ©.</small>
Expand Down
48 changes: 48 additions & 0 deletions _includes/promos/ioi-2024.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<div>
<div class="ioi-banner">
<div class="ioi-wrapper">
<div class="banner-text">
<img class="ioi-img" src="/assets/images/ioi-2024/ioi-logo.svg" alt="IOI Logo">
<p style="margin-bottom: 5px;">La 36.ª Olimpiada Internacional de Informática
<span style="color: red; font-weight:600">(IOI 2024)</span>
se celebrará en
<span style="color: rgb(54, 162, 234); font-weight:600">Egipto</span>
del
<span style="font-weight: 600;">1 al 8 de septiembre de 2024</span>
, como la competición de informática más prestigiosa para estudiantes de secundaria y bachillerato de todo el mundo.
</p>
</div>
<div>
</div>
</div>
</div>
<div class="ioi-content">
<div class="ioi-tag">
<span>¡Nuevo evento!</span>
</div>
<div class="ioi-title">
<p class="title">
La FOPI representará al
<span style="color: red; font-weight:700">Perú</span>
en la
<br>
International Olympiad in Informatics
<span style="color: red; font-weight:700">(IOI)</span>
2024
</p>
<a href="/ioi-2024" class="button-sponsor">
Quiero apoyar
</a>
</div>
<div class="ioi-text">
<div class="ioi-logo">
<img src="/assets/images/ioi-2024/ioi-general-logo.png" alt="IOI image" width="200">
</div>
<div class="ioi-info">
<p style="font-size: 18px; margin-bottom:0">
La Federación Olímpica Peruana de Informática (FOPI) está encantado de anunciar que representará al Perú 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>
</div>
</div>
</div>
</div>
3 changes: 2 additions & 1 deletion _layouts/home.html
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ <h1 class="full-title">
{%- endif -%}

<div class="wrapper-home">
{%- include sections/banner.html -%}
<!-- {%- include sections/banner.html -%} -->
{%- include promos/ioi-2024.html -%}
{%- include sections/ioi-egoi-2024.html -%}
{%- include sections/EGOI.html -%}
{%- include sections/OII.html -%}
Expand Down
7 changes: 5 additions & 2 deletions _sass/header.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@
display: flex;
align-items: center;
flex-wrap: wrap;
position: sticky;
opacity: 0.95;
top: 0;

a {
color: black;
Expand All @@ -18,7 +21,7 @@
flex-wrap: wrap;
height: 100%;
width: 100%;
padding: 10px 0;
padding: 4px 0;

.menu-bar,.hidden{
display: none;
Expand All @@ -32,7 +35,7 @@
flex: 0 0 100px;
display: flex;
justify-content: center;
padding: 20px;
padding: 18px;

svg {
width: 60px;
Expand Down
2 changes: 1 addition & 1 deletion _sass/main.scss
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ body {
font-weight: 300;
font-size: 16px;
color: $secondary-2;
background-color: $secondary-2;
background-color: white;
margin: 0;
padding: 0;
}
Expand Down
143 changes: 143 additions & 0 deletions _sass/sections/ioi-2024.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
.ioi-banner {
background-image: url('/assets/images/ioi-2024/ioi-bg.gif');
background-size: cover;
padding: 30px 90px;
display: flex;
justify-content: center;
flex-direction: column;
height: 480px;
gap: 2rem;

.ioi-wrapper {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.banner-text {
display: flex;
flex-direction: column;
gap: 1rem;
margin: auto;
max-width: 560px;
font-size: larger;
font-weight: 300;
background-color: white;
border-radius: 12px;
padding: 20px 30px;
box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.4);

img {
padding: 15px 0;
}

&:hover {
box-shadow: 0 0 35px 0 rgba(0, 0, 0, 0.65);
transition: all 0.2s ease-in-out;
}
}

.banner-img {
display: flex;

.ioi-img {
margin: auto;
max-width: 700px;
width: 100%;
height: 100%;
}
}

}

.ioi-content {
background-color: $secondary_1;
padding: 50px 90px;
display: flex;
flex-direction: column;
gap: 1rem;

.ioi-title {
display: flex;
gap: 1rem;
justify-content: space-between;

.title {
font-size: 44px;
font-weight: 350;
color: black;
line-height: 55px;
}

.button-sponsor {
margin: auto;
background-color: $primary-1;
color: white;
height: fit-content;
border: 2px solid $primary-1;
padding: 10px 14px;
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;
color: $primary-1;
transition: all 0.2s ease-in-out;
}
}
}

.ioi-text {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2rem;

.ioi-info {
grid-column: span 2 / span 2;
display: flex;
margin: auto;
max-width: 680px;
margin-top: 14px;
}

.ioi-logo {
grid-column: span 1 / span 1;
display: flex;
margin: auto;
}
}

.ioi-tag {
border: 2px solid $primary-1;
color: $primary-1;
font-weight: 600;
padding: 2px 6px;
border-radius: 8px;
width: fit-content;
}
}

@media (max-width: $breakpoint-lg) {
.ioi-banner{
padding: 0px;

.ioi-wrapper {
grid-template-columns: repeat(1, minmax(0, 1fr));
padding: 50px 20px;
}
}

.ioi-content {
padding: 40px 30px;

.ioi-text {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
}
}
4 changes: 2 additions & 2 deletions _sass/sections/ioi-egoi-2024.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
padding: 40px 90px;

.tag {
border: 2px solid $primary-1;
color: $primary-1;
border: 2px solid $primary-2;
color: $primary-2;
font-weight: 600;
padding: 2px 6px;
border-radius: 8px;
Expand Down
1 change: 1 addition & 0 deletions assets/css/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
@import "contest";
@import "latest_news";
@import "sections/description";
@import "sections/ioi-2024";
@import "sections/ioi-egoi-2024";
@import "sections/winners-phase-2";
@import "sections/OII";
Expand Down
Binary file added assets/images/ioi-2024/ioi-bg.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/ioi-2024/ioi-general-logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit ccec7b2

Please sign in to comment.