Skip to content

Commit

Permalink
feat: Added Philip's Exam Boost Web page
Browse files Browse the repository at this point in the history
Created a Web page for Philip's Exam Boost (PEB), an event organized by S4S to help EPFL students in BA1 prepare for their upcoming exams.

- Added `peb.html` to create the event page for Philip's Exam Boost.
- Included custom CSS for the event:
  - `assets/css/peb.css`
- Added icons and illustrations:
  - `assets/icons/leaves.svg`
  - `assets/illustrations/philip_sunglasses.png`
  - `assets/illustrations/peb_logo.png`
- Added partner logos:
  - `assets/partners/brio.svg`
  - `assets/partners/coop.svg`
  • Loading branch information
Zeleph25 committed Dec 24, 2024
1 parent b31193f commit 6bd8e43
Show file tree
Hide file tree
Showing 7 changed files with 599 additions and 0 deletions.
241 changes: 241 additions & 0 deletions assets/css/peb.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,241 @@
:root {
--background: #FFFFFF;
--text: #FFF;
--headings: #FF4081;
--muted: #F2F2F2;
--primary: #FF4081;
--secondary: #1D3557;
}

.theme-primary {
--background: #FFFFFF;
--headings: #FF4081;
--text: #2E4053;
--muted: #F2F2F2;
}

.theme-dark {
--background: #1C1C1C;
--headings: #FF4081;
--text: #F1F1F1;
--muted: #444444;
}

.theme-light {
--background: #FFFFFF;
--headings: #FF4081;
--text: #2E4053;
--muted: #F2F2F2;
}

.theme-footer {
--background: #FF4081;
--contact-icons-color: #FFFFFF;
--contact-text-color: #FFFFFF;
--contact-circles-color: #ff8bb1;
--text: #FFFFFF;
--headings: #FFFFFF;
}

.section-presentation {
background: #1D3557;
}

.circle-container {
width: 250px;
height: 250px;
background-color: #FF4081;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 2em;
opacity: 0;
animation: rotatePhilipe .8s ease-out forwards;
}

.flamingo-img {
width: 70%;
height: auto;
}

.hero-contents {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 4em 2em;
font-weight: bold;
color: #333333;
gap: 1.5em;
}

.hero-wordmark {
font-size: 2.2em;
font-weight: bold;
color: #FF4081;
display: inline-flex;
align-items: center;
opacity: 0;
animation: fadeInText .5s .5s forwards;
padding: 1em 2em;
border-radius: 8px;
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
gap: 0.3em;
}

.hero-wordmark span {
color: #1D3557;
display: inline;
}

.philip-logo {
width: 150px;
height: auto;
}

@keyframes fadeInText {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

@keyframes rotatePhilipe {
0% {
transform: rotateY(0deg);
opacity: 0;
}
50% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(360deg);
opacity: 1;
}
}

@media (max-width: 600px) {
.circle-container {
width: 200px;
height: 200px;
}

.hero-wordmark {
font-size: 1.8em;
}

.philip-logo {
width: 120px;
}
}

.hero-registration {
display: inline-block;
position: relative;
}

.hero-registration-button {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #FF4081;
padding: 14px 28px;
font-size: 1.3em;
border-radius: 8px;
color: #FFFFFF;
transition: background-color 0.3s ease, transform 0.3s ease;
border: 1px solid transparent;
gap: 8px;
text-decoration: none;
}

.hero-registration-button:hover {
background-color: #1D3557;
transform: translateY(-2px);
}

.hero-registration-button svg {
opacity: 0;
transform: translateX(-10px);
transition: opacity 0.3s ease, transform 0.3s ease;
}

.hero-registration-button svg.hidden {
opacity: 0;
transform: translateX(-24px);
}

.hero-registration-button:hover svg {
opacity: 1;
transform: translateX(0);
}

.button-drive {
margin-right: 30px;
text-align: center;
transition: transform 0.3s ease;
}

.hero-registration-button:hover .button-drive {
transform: translateX(8px);
}

.hero-registration-button svg.hidden + .button-drive {
transform: translateX(-12px);
}

.hero-drop-shadow {
background-image: radial-gradient(
circle at 10px 10px,
rgba(29, 53, 87, 0) 0%,
rgba(255, 64, 129, 0.1) var(--drop-shadow-size)
);
}

.presentation-feature-icon {
display: flex;
align-items: center;
justify-content: center;

width: 8rem;
height: 8rem;
color: #000000;
grid-row: span 2;
background-image: url(../icons/leaves.svg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}

.presentation-feature-icon svg {
width: 2.4rem;
height: 2.4rem;
}

.hero-bullet {
display: flex;
align-items: center;
font-size: 1.8rem;
margin-bottom: .5em;
}

.partner-brio {
width: 9rem;
}

.partner-coop {
width: 10rem;
}

.partner-eltonymate {
width: 8rem;
}

.partner-andros {
width: 10rem;
}
12 changes: 12 additions & 0 deletions assets/icons/leaves.svg
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/illustrations/peb_logo.png
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/illustrations/philip_sunglasses.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
126 changes: 126 additions & 0 deletions assets/partners/brio.svg
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 6bd8e43

Please sign in to comment.