-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: adding new IOI-2024 banner (#77)
* feat: adding new IOI-2024 banner * feat: remove extra end line * feat: remove comments
- Loading branch information
1 parent
231cdcf
commit ccec7b2
Showing
13 changed files
with
213 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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)); | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.