wellfedbison/gilroyhacks.com
wellfedbison/gilroyhacks.com
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Updated event section

Browse Source
This commit is contained in:
James Dinh 2022-12-20 01:48:23 -08:00
parent 64a6f9f1c3
commit 39f6e76b2f
3 changed files with 23 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
css/general.css
View File

@ -825,11 +825,15 @@ section {
line-height: 25px; line-height: 25px;
} }
#headline-recap {
color: #fbc334;
}
.slider { .slider {
width: 100%; width: 100%;
max-width: 680px; max-width: 680px;
height: 400px; height: 400px;
margin: 20px auto; margin: 20px auto 50px;
display: flex; display: flex;
align-items: center; align-items: center;
} }
@ -864,7 +868,15 @@ section {
justify-content: center; justify-content: center;
transition: all 1s; transition: all 1s;
position: relative; position: relative;
text-align: center; align-items: center;
}
.slide-caption {
position: absolute;
bottom: 2%;
background-color: #232323b8;
padding: 2px 5px;
border-radius: 5px;
} }
.slide-button { .slide-button {

14
index.html
View File

@ -141,26 +141,28 @@
<!--Main--> <!--Main-->
<main> <main>
<section id="event"> <section id="event">
<h2 class="topic">Spring 2023 Event</h2> <h2 class="topic">Event Details</h2>
<hr class="line"> <hr class="line">
<div id="event-container"> <div id="event-container">
<article id="event-description"> <article id="event-description">
<div id="event-title"> <div id="event-title">
<h2 class="description-heading">New Hackathon Who Dis?</h2> <h2 class="description-heading">New Hackathon Who Dis?</h2>
</div> </div>
<h3 id="headline-recap">A recap of Summer 2022:</h3>
<div id="slider" class="slider"> <div id="slider" class="slider">
<a id="prev" class="control prev"><svg class="slide-button" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg></a> <a id="prev" class="control prev"><svg class="slide-button" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg></a>
<div class="slides-wrapper" id="slide-wrapper-main"> <div class="slides-wrapper" id="slide-wrapper-main">
<div id="items" class="items"> <div id="items" class="items">
<div class="slide"><img class="slide-img" src="img/first_place_winner.jpg" loading="lazy"></div> <div class="slide"><img class="slide-img" src="img/first_place_winner.jpg" loading="lazy"><span class="slide-caption">🎉 First Place Winners - Christian Nguyen, Connor Palsgrove 🎉</span></div>
<div class="slide"><img class="slide-img" src="img/opening_ceremony.jpg" loading="lazy"></div> <div class="slide"><img class="slide-img" src="img/opening_ceremony.jpg" loading="lazy"><span class="slide-caption">Opening Ceremony 👍</span></div>
<div class="slide"><img class="slide-img" src="img/brainstorm.png" loading="lazy"></div> <div class="slide"><img class="slide-img" src="img/brainstorm.png" loading="lazy"><span class="slide-caption">🤔 Brainstorming ideas...</span></div>
<div class="slide"><img class="slide-img" src="img/python_workshop.jpg" loading="lazy"></div> <div class="slide"><img class="slide-img" src="img/python_workshop.jpg" loading="lazy"><span class="slide-caption">💻 Python Workshop 💻</span></div>
<div class="slide"><img class="slide-img" src="img/prizes.png" loading="lazy"></div> <div class="slide"><img class="slide-img" src="img/prizes.png" loading="lazy"><span class="slide-caption">🏆 Prizes! 🏆</span></div>
</div> </div>
</div> </div>
<a id="next" class="control next"><svg class="slide-button" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg></a> <a id="next" class="control next"><svg class="slide-button" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg></a>
</div> </div>
<hr><br>
<span class="caption" id="splash-entrance">Some info on us...</span> <span class="caption" id="splash-entrance">Some info on us...</span>
<div class="splash-container" id="what-GilroyHacks"> <div class="splash-container" id="what-GilroyHacks">
<h2 class="splash-title">What is Gilroy Hacks?</h2> <h2 class="splash-title">What is Gilroy Hacks?</h2>

1
js/general.js
View File

@ -138,6 +138,7 @@ document.addEventListener('DOMContentLoaded', function(){
// Add class animations to these elements // Add class animations to these elements
let elements_id = [ let elements_id = [
'#event-title', '#event-title',
'#headline-recap',
'#splash-entrance', '#splash-entrance',
'#what-GilroyHacks', '#what-GilroyHacks',
'#why-GilroyHacks', '#why-GilroyHacks',