Added images on slideshow
This commit is contained in:
James Dinh
parent
671edc18b2
commit
64a6f9f1c3
@ -827,19 +827,22 @@ section {
|
|||||||
|
|
||||||
.slider {
|
.slider {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-width: 390px;
|
|
||||||
max-width: 680px;
|
max-width: 680px;
|
||||||
height: 400px;
|
height: 400px;
|
||||||
margin: 20px auto;
|
margin: 20px auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slides-wrapper {
|
.slides-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 600px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
background: #222;
|
background: #222;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#items {
|
#items {
|
||||||
width: 10000px;
|
width: 10000px;
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -861,7 +864,6 @@ section {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
transition: all 1s;
|
transition: all 1s;
|
||||||
position: relative;
|
position: relative;
|
||||||
background: #4b1c6b;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -894,6 +896,11 @@ section {
|
|||||||
transform: scale(0.8);
|
transform: scale(0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.slide-img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.list {
|
.list {
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
}
|
}
|
||||||
|
|||||||
BIN
img/brainstorm.png
Normal file
BIN
img/brainstorm.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
BIN
img/first_place_winner.jpg
Normal file
BIN
img/first_place_winner.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
img/opening_ceremony.jpg
Normal file
BIN
img/opening_ceremony.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 283 KiB |
BIN
img/prizes.png
Normal file
BIN
img/prizes.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
img/python_workshop.jpg
Normal file
BIN
img/python_workshop.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
29
index.html
29
index.html
@ -147,8 +147,21 @@
|
|||||||
<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>
|
||||||
<span class="caption">Some info on us...</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
<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>
|
||||||
|
<div class="slides-wrapper" id="slide-wrapper-main">
|
||||||
|
<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/opening_ceremony.jpg" loading="lazy"></div>
|
||||||
|
<div class="slide"><img class="slide-img" src="img/brainstorm.png" loading="lazy"></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/prizes.png" loading="lazy"></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>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
<div class="splash-desc">Are you interested in coding, engineering, or STEM? Does a weekend full of intense brainstorming and coding extravaganza
|
<div class="splash-desc">Are you interested in coding, engineering, or STEM? Does a weekend full of intense brainstorming and coding extravaganza
|
||||||
@ -165,19 +178,6 @@
|
|||||||
<div class="splash-desc">We're a group of high schoolers in the Bay Area looking to spread our love of coding and collaboration to local students.</div>
|
<div class="splash-desc">We're a group of high schoolers in the Bay Area looking to spread our love of coding and collaboration to local students.</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<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>
|
|
||||||
<div class="slides-wrapper" id="slide-wrapper-main">
|
|
||||||
<div id="items" class="items">
|
|
||||||
<span class="slide">Slide 1</span>
|
|
||||||
<span class="slide">Slide 2</span>
|
|
||||||
<span class="slide">Slide 3</span>
|
|
||||||
<span class="slide">Slide 4</span>
|
|
||||||
<span class="slide">Slide 5</span>
|
|
||||||
</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>
|
|
||||||
</div>
|
|
||||||
</article>
|
</article>
|
||||||
<article id="signup-article">
|
<article id="signup-article">
|
||||||
<div id="signup-title">
|
<div id="signup-title">
|
||||||
@ -818,7 +818,6 @@
|
|||||||
Gilroy Hacks is a student-led organization fiscally sponsored by Hack Club, a 501(c)(3) nonprofit, and focused on promoting community engagement and improving STEM exposure for students.
|
Gilroy Hacks is a student-led organization fiscally sponsored by Hack Club, a 501(c)(3) nonprofit, and focused on promoting community engagement and improving STEM exposure for students.
|
||||||
</p>
|
</p>
|
||||||
<div id="socials">
|
<div id="socials">
|
||||||
<!-- <div><a class="tooltip" id="facebook" target="_blank" href="https://www.facebook.com/profile.php?id=100082498013066"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#ffffff"><path d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0zm4 7.278V4.5h-2.286c-2.1 0-3.428 1.6-3.428 3.889v1.667H8v2.777h2.286V19.5h2.857v-6.667h2.286L16 10.056h-2.857V8.944c0-1.11.572-1.666 1.714-1.666H16z"/></svg></a></div> -->
|
|
||||||
<div class="socials-icon"><a class="tooltip" id="instagram" target="_blank" href="https://www.instagram.com/gilroyhacks/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#ffffff"><path d="M12 0c6.6274 0 12 5.3726 12 12s-5.3726 12-12 12S0 18.6274 0 12 5.3726 0 12 0zm3.115 4.5h-6.23c-2.5536 0-4.281 1.6524-4.3805 4.1552L4.5 8.8851v6.1996c0 1.3004.4234 2.4193 1.2702 3.2359.7582.73 1.751 1.1212 2.8818 1.1734l.2633.006h6.1694c1.3004 0 2.389-.4234 3.1754-1.1794.762-.734 1.1817-1.7576 1.2343-2.948l.0056-.2577V8.8851c0-1.2702-.4234-2.3589-1.2097-3.1452-.7338-.762-1.7575-1.1817-2.9234-1.2343l-.252-.0056zM8.9152 5.8911h6.2299c.9072 0 1.6633.2722 2.2076.8166.4713.499.7647 1.1758.8103 1.9607l.0063.2167v6.2298c0 .9375-.3327 1.6936-.877 2.2077-.499.4713-1.176.7392-1.984.7806l-.2237.0057H8.9153c-.9072 0-1.6633-.2722-2.2076-.7863-.499-.499-.7693-1.1759-.8109-2.0073l-.0057-.2306V8.885c0-.9073.2722-1.6633.8166-2.2077.4712-.4713 1.1712-.7392 1.9834-.7806l.2242-.0057h6.2299-6.2299zM12 8.0988c-2.117 0-3.871 1.7238-3.871 3.871A3.8591 3.8591 0 0 0 12 15.8408c2.1472 0 3.871-1.7541 3.871-3.871 0-2.117-1.754-3.871-3.871-3.871zm0 1.3911c1.3609 0 2.4798 1.119 2.4798 2.4799 0 1.3608-1.119 2.4798-2.4798 2.4798-1.3609 0-2.4798-1.119-2.4798-2.4798 0-1.361 1.119-2.4799 2.4798-2.4799zm4.0222-2.3589a.877.877 0 1 0 0 1.754.877.877 0 0 0 0-1.754z"/></svg></a></div>
|
<div class="socials-icon"><a class="tooltip" id="instagram" target="_blank" href="https://www.instagram.com/gilroyhacks/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#ffffff"><path d="M12 0c6.6274 0 12 5.3726 12 12s-5.3726 12-12 12S0 18.6274 0 12 5.3726 0 12 0zm3.115 4.5h-6.23c-2.5536 0-4.281 1.6524-4.3805 4.1552L4.5 8.8851v6.1996c0 1.3004.4234 2.4193 1.2702 3.2359.7582.73 1.751 1.1212 2.8818 1.1734l.2633.006h6.1694c1.3004 0 2.389-.4234 3.1754-1.1794.762-.734 1.1817-1.7576 1.2343-2.948l.0056-.2577V8.8851c0-1.2702-.4234-2.3589-1.2097-3.1452-.7338-.762-1.7575-1.1817-2.9234-1.2343l-.252-.0056zM8.9152 5.8911h6.2299c.9072 0 1.6633.2722 2.2076.8166.4713.499.7647 1.1758.8103 1.9607l.0063.2167v6.2298c0 .9375-.3327 1.6936-.877 2.2077-.499.4713-1.176.7392-1.984.7806l-.2237.0057H8.9153c-.9072 0-1.6633-.2722-2.2076-.7863-.499-.499-.7693-1.1759-.8109-2.0073l-.0057-.2306V8.885c0-.9073.2722-1.6633.8166-2.2077.4712-.4713 1.1712-.7392 1.9834-.7806l.2242-.0057h6.2299-6.2299zM12 8.0988c-2.117 0-3.871 1.7238-3.871 3.871A3.8591 3.8591 0 0 0 12 15.8408c2.1472 0 3.871-1.7541 3.871-3.871 0-2.117-1.754-3.871-3.871-3.871zm0 1.3911c1.3609 0 2.4798 1.119 2.4798 2.4799 0 1.3608-1.119 2.4798-2.4798 2.4798-1.3609 0-2.4798-1.119-2.4798-2.4798 0-1.361 1.119-2.4799 2.4798-2.4799zm4.0222-2.3589a.877.877 0 1 0 0 1.754.877.877 0 0 0 0-1.754z"/></svg></a></div>
|
||||||
<div><a class="tooltip" id="youtube" target="_blank" href="https://www.youtube.com/channel/UCyw-Sx4W8yb9TqWPm7pj10Q"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#ffffff"><path d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0zm.294 7h-.589l-1.101.013c-1.48.024-3.709.092-4.465.285a1.836 1.836 0 0 0-1.326 1.263c-.181.644-.258 1.69-.29 2.46l-.022.815v.328l.008.426c.022.764.09 2.088.304 2.849.172.614.68 1.098 1.326 1.263.736.188 2.867.257 4.346.283L11.89 17l1.159-.008c1.453-.019 3.993-.082 4.811-.29a1.836 1.836 0 0 0 1.327-1.263c.21-.75.28-2.048.302-2.817l.01-.528-.003-.403c-.012-.67-.066-2.265-.31-3.13a1.836 1.836 0 0 0-1.326-1.263c-.661-.169-2.45-.242-3.878-.274L12.294 7zm-1.828 2.89l3.92 2.11-3.92 2.11V9.89z"/></svg></a></div>
|
<div><a class="tooltip" id="youtube" target="_blank" href="https://www.youtube.com/channel/UCyw-Sx4W8yb9TqWPm7pj10Q"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#ffffff"><path d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0zm.294 7h-.589l-1.101.013c-1.48.024-3.709.092-4.465.285a1.836 1.836 0 0 0-1.326 1.263c-.181.644-.258 1.69-.29 2.46l-.022.815v.328l.008.426c.022.764.09 2.088.304 2.849.172.614.68 1.098 1.326 1.263.736.188 2.867.257 4.346.283L11.89 17l1.159-.008c1.453-.019 3.993-.082 4.811-.29a1.836 1.836 0 0 0 1.327-1.263c.21-.75.28-2.048.302-2.817l.01-.528-.003-.403c-.012-.67-.066-2.265-.31-3.13a1.836 1.836 0 0 0-1.326-1.263c-.661-.169-2.45-.242-3.878-.274L12.294 7zm-1.828 2.89l3.92 2.11-3.92 2.11V9.89z"/></svg></a></div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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',
|
||||||
|
'#splash-entrance',
|
||||||
'#what-GilroyHacks',
|
'#what-GilroyHacks',
|
||||||
'#why-GilroyHacks',
|
'#why-GilroyHacks',
|
||||||
'#who-GilroyHacks',
|
'#who-GilroyHacks',
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user