Added Workshops Section

This commit is contained in:
James Dinh 2022-07-23 16:47:05 -07:00
parent 1963da1ae3
commit 75905ecfcf
13 changed files with 275 additions and 40 deletions

View File

@ -79,10 +79,11 @@
</label>
<a target="_blank" href="https://forms.gle/coK7q43RwBV2f15i7"><div id="sign-up">SIGN UP</div></a>
<ul id="navList">
<li><a class="navlink" onclick="uncheck('check')" href="#event">Event</a></li>
<li><a class="navlink" onclick="uncheck('check')" href="#rules">Rules</a></li>
<li><a class="navlink" onclick="uncheck('check')" href="#prizes">Prizes</a></li>
<li><a class="navlink" onclick="uncheck('check')" href="#team">Team</a></li>
<li><a class="navlink" onclick="uncheck('check')" href="./#event">Event</a></li>
<li><a class="navlink" onclick="uncheck('check')" href="./#workshops">Workshops</a></li>
<li><a class="navlink" onclick="uncheck('check')" href="./#rules">Rules</a></li>
<li><a class="navlink" onclick="uncheck('check')" href="./#prizes">Prizes</a></li>
<li><a class="navlink" onclick="uncheck('check')" href="./#team">Team</a></li>
</ul>
</div>
</nav>

View File

@ -236,24 +236,29 @@ nav ul li {
}
/* Responsive Functions */
@media (max-width: 1400px) {
@media (max-width: 1600px) {
#banner {
width: 50%;
}
}
@media (max-width: 1150px) {
@media (max-width: 1330px) {
#banner {
width: 30%;
}
}
@media (max-width: 1200px) {
#banner {
display: none;
}
}
@media (max-width: 800px) {
@media (max-width: 900px) {
.checkbtn {
display: inline-block;
}
nav ul {
position: fixed;
width: 100%;
height: 250px;
height: 300px;
margin-top: 58px;
margin-right: 0;
background: rgb(24, 24, 24);

View File

@ -235,24 +235,29 @@ nav ul li {
}
/* Responsive Functions */
@media (max-width: 1400px) {
@media (max-width: 1600px) {
#banner {
width: 50%;
}
}
@media (max-width: 1150px) {
@media (max-width: 1330px) {
#banner {
width: 30%;
}
}
@media (max-width: 1200px) {
#banner {
display: none;
}
}
@media (max-width: 800px) {
@media (max-width: 900px) {
.checkbtn {
display: inline-block;
}
nav ul {
position: fixed;
width: 100%;
height: 250px;
height: 300px;
margin-top: 58px;
margin-right: 0;
background: rgb(24, 24, 24);
@ -1069,6 +1074,27 @@ section {
right: -20px;
}
#git-tooltip::after {
content: 'Git';
color:#a6e2fa;
right: -3px;
top: 33px;
}
#html-tooltip::after {
content: 'HTML';
color:#a6e2fa;
right: -10px;
top: 33px;
}
#python-tooltip::after {
content: 'Python';
color:#a6e2fa;
right: -15px;
top: 33px;
}
/* Signup Container */
#signup-container {
margin: 20px auto;
@ -1572,26 +1598,104 @@ section {
flex-flow: row wrap;
margin-top: 20px;
justify-content: center;
align-items: flex-start;
}
.workshop-entry {
margin: 20px;
min-width: 500px;
background-color: rgb(19, 29, 41);
min-width: 350px;
max-width: 500px;
border-radius: 10px;
box-shadow: 5px 5px 10px rgb(0 0 0 / 20%);
text-align: left;
overflow: hidden;
}
.workshop-entry:hover {
transform: translateY(-4px);
transition: 0.5s;
}
#webdev-workshop {
background-image:
linear-gradient( rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.5) ),
url(/img/webdev.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-color: rgb(102, 85, 61);
background-blend-mode: multiply;
/* Photo by Tranmautritam: https://www.pexels.com/photo/information-sign-on-shelf-251225/ */
}
#python-workshop {
background-image:
linear-gradient( rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.5) ),
url(/img/python_code.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-color: rgb(53, 79, 110);
background-blend-mode: multiply;
/* Photo SRC: https://unsplash.com/photos/g5_rxRjvKmg?utm_source=unsplash&utm_medium=referral&utm_content=creditShareLink */
}
.workshop-header {
padding: 10px 30px;
padding: 10px 30px 15px;
display: grid;
grid-template-columns: auto auto;
background-color: rgb(19, 29, 41);
}
.workshop-title {
display: flex;
flex-flow: column nowrap;
}
.title-font-weight {
font-size: 25px;
}
.workshop-topics {
float: right;
display: flex;
flex-flow: row-reverse;
}
.workshop-img {
height: 30px;
width: 30px;
margin-left: 10px;
}
.workshop-desc {
margin-top: 10px;
padding: 10px 35px;
background-color: #1b1c20;
}
.workshop-date {
padding: 7px 20px;
text-align: center;
background-color: #3a3344;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
font-size: 20px;
}
.workshop-date div {
margin: 0 10px;
}
.workshop-icon {
float: left;
margin-right: 5px;
}
.workshop-footer {
padding: 10px 30px;
background-color: #222429;
text-align: center;
background-color: #151618;
}
/* Rules */
@ -1844,7 +1948,7 @@ section {
}
.prize-img {
height: 100px;
height: 85px;
}
#prize-box {
@ -2058,6 +2162,26 @@ section {
margin-right: 5px;
}
@media (max-width: 869px) {
#footer-desc {
margin-bottom: 20px;
}
}
@media (max-width: 565px) {
footer * {
text-align: center;
justify-content: center;
}
.footer-title {
margin-bottom: 0 !important;
}
#footer-desc, #footer-links, #footer-location {
margin-right: 0 !important;
margin-bottom: 20px;
}
}
footer {
width: auto;
height: auto;
@ -2119,6 +2243,10 @@ footer {
text-align: left;
}
.footer-title {
margin-bottom: 19px;
}
#footer-location {
width: 220px;
margin-top: 7px;

View File

@ -236,24 +236,29 @@ nav ul li {
}
/* Responsive Functions */
@media (max-width: 1400px) {
@media (max-width: 1600px) {
#banner {
width: 50%;
}
}
@media (max-width: 1150px) {
@media (max-width: 1330px) {
#banner {
width: 30%;
}
}
@media (max-width: 1200px) {
#banner {
display: none;
}
}
@media (max-width: 800px) {
@media (max-width: 900px) {
.checkbtn {
display: inline-block;
}
nav ul {
position: fixed;
width: 100%;
height: 250px;
height: 300px;
margin-top: 58px;
margin-right: 0;
background: rgb(24, 24, 24);

BIN
img/css.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

BIN
img/git.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
img/html.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

BIN
img/python-logo.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

BIN
img/python_code.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 MiB

BIN
img/webdev.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 MiB

View File

@ -84,6 +84,7 @@
<a onclick="check('01'); save();" target="_blank" href="https://forms.gle/coK7q43RwBV2f15i7"><div id="sign-up">SIGN UP</div></a>
<ul id="navList">
<li><a class="navlink" onclick="uncheck('check')" href="#event">Event</a></li>
<li><a class="navlink" onclick="uncheck('check')" href="#workshops">Workshops</a></li>
<li><a class="navlink" onclick="uncheck('check')" href="#rules">Rules</a></li>
<li><a class="navlink" onclick="uncheck('check')" href="#prizes">Prizes</a></li>
<li><a class="navlink" onclick="uncheck('check')" href="#team">Team</a></li>
@ -483,31 +484,82 @@
</div>
</article>
</section>
<!-- <section id="workshops">
<section id="workshops">
<h2 class="topic">Workshops</h2>
<hr class="line">
(under construction)
<p id="workshops-description">Our workshops are fully open to the public!</p>
<div class="flex-container">
<div class="workshop-entry">
<div class="workshop-header">
<h3>Web Dev Workshop</h3>
<h4>Aug 13, 11am</h4>
<div class="workshop-header" id="webdev-workshop">
<div class="workshop-title">
<h3 class="title-font-weight">Web Dev Workshop</h3>
<h4>Study Room</h4>
</div>
<div class="workshop-topics">
<span class="tooltip" id="git-tooltip"><img class="workshop-img" src="img/git.png"></span>
<span class="tooltip" id="html-tooltip"><img class="workshop-img" src="img/html.png"></span>
</div>
</div>
<div class="workshop-date">
<div><svg class="workshop-icon" 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"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>Aug 13</div>
<div><svg class="workshop-icon" 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"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>11am - 12pm</div>
<div><svg class="workshop-icon" 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"><circle cx="12" cy="10" r="3"/><path d="M12 21.7C17.3 17 20 13 20 10a8 8 0 1 0-16 0c0 3 2.7 6.9 8 11.7z"/></svg>Gilroy Library</div>
</div>
<div class="workshop-desc">
Topics Covered:
<ul>
<h4>Description</h4>
<p>A chance for you to learn the world's most common version control system: Git -- and creating your own website!</p><br>
<h4>Topics Covered:</h4>
<ul style="margin-left: 20px">
<li>Git Version Control</li>
<li>Basics of Website Development</li>
<li>Basics of Web Development</li>
<li>HTML</li>
<li>CSS</li>
</ul><br>
<h4>Please Bring</h4>
<ul style="margin-left: 20px">
<li>A Laptop (Windows, MacBook, Linux, etc.)</li>
</ul>
</div>
<div class="workshop-footer">
Instructed By <span class="emphasis-text">James Dinh</span>
</div>
</div>
<div class="workshop-entry">
<div class="workshop-header" id="python-workshop">
<div class="workshop-title">
<h3 class="title-font-weight">Python Workshop</h3>
<h4>Study Room</h4>
</div>
<div class="workshop-topics">
<span class="tooltip" id="python-tooltip"><img class="workshop-img" src="img/python-logo.webp"></span>
</div>
</div>
</section> -->
<div class="workshop-date">
<div><svg class="workshop-icon" 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"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>Aug 13</div>
<div><svg class="workshop-icon" 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"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>1 - 2pm</div>
<div><svg class="workshop-icon" 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"><circle cx="12" cy="10" r="3"/><path d="M12 21.7C17.3 17 20 13 20 10a8 8 0 1 0-16 0c0 3 2.7 6.9 8 11.7z"/></svg>Gilroy Library</div>
</div>
<div class="workshop-desc">
<h4>Description</h4>
<p>Join us for a lecture on Python Programming basics. You'll learn basic data structures and be able to code your own programs!</p><br>
<h4>Topics Covered:</h4>
<ul style="margin-left: 20px">
<li>Variables</li>
<li>Input / Output</li>
<li>Arrays</li>
<li>Functions</li>
</ul><br>
<h4>Please Bring</h4>
<ul style="margin-left: 20px">
<li>A Laptop (Windows, MacBook, Linux, etc.)</li>
</ul>
</div>
<div class="workshop-footer">
Instructed By <span class="emphasis-text">Clement Boiteux</span>
</div>
</div>
</div>
</section>
<section id="rules">
<h2 class="topic">Rules</h2>
<hr class="line">
@ -797,7 +849,7 @@
<footer>
<div id="footer-container">
<article id="footer-desc">
<img id="footer-logo" src="img/Gilroy Hacks Logo [Summer-wide-2].png" alt="logo"/>
<div id="footer-logo-div"><img id="footer-logo" src="img/Gilroy Hacks Logo [Summer-wide-2].png" alt="logo"/></div>
<p>
Gilroy Hacks is a student-led organization focused on promoting community engagement and improving STEM exposure for local middle/high school students.
</p>
@ -811,7 +863,7 @@
</p>
</article>
<article id="footer-links">
<h3>Links</h3><br>
<h3 class="footer-title">Links</h3>
<ul>
<li><a class="link" onclick="check('02'); save()" target="_blank" href="https://discord.gg/nkTDKMcYbr" title="Discord Invite Link">Discord<svg class="new-tab-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M384 320c-17.67 0-32 14.33-32 32v96H64V160h96c17.67 0 32-14.32 32-32s-14.33-32-32-32L64 96c-35.35 0-64 28.65-64 64V448c0 35.34 28.65 64 64 64h288c35.35 0 64-28.66 64-64v-96C416 334.3 401.7 320 384 320zM488 0H352c-12.94 0-24.62 7.797-29.56 19.75c-4.969 11.97-2.219 25.72 6.938 34.88L370.8 96L169.4 297.4c-12.5 12.5-12.5 32.75 0 45.25C175.6 348.9 183.8 352 192 352s16.38-3.125 22.62-9.375L416 141.3l41.38 41.38c9.156 9.141 22.88 11.84 34.88 6.938C504.2 184.6 512 172.9 512 160V24C512 10.74 501.3 0 488 0z"/></svg></a></li>
<li><a class="link" onclick="check('01'); save();" target="_blank" href="https://forms.gle/coK7q43RwBV2f15i7">Signup Form<svg class="new-tab-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M384 320c-17.67 0-32 14.33-32 32v96H64V160h96c17.67 0 32-14.32 32-32s-14.33-32-32-32L64 96c-35.35 0-64 28.65-64 64V448c0 35.34 28.65 64 64 64h288c35.35 0 64-28.66 64-64v-96C416 334.3 401.7 320 384 320zM488 0H352c-12.94 0-24.62 7.797-29.56 19.75c-4.969 11.97-2.219 25.72 6.938 34.88L370.8 96L169.4 297.4c-12.5 12.5-12.5 32.75 0 45.25C175.6 348.9 183.8 352 192 352s16.38-3.125 22.62-9.375L416 141.3l41.38 41.38c9.156 9.141 22.88 11.84 34.88 6.938C504.2 184.6 512 172.9 512 160V24C512 10.74 501.3 0 488 0z"/></svg></a></li>
@ -821,7 +873,7 @@
</ul>
</article>
<article id="footer-location">
<h3>Location</h3><br>
<h3 class="footer-title">Location</h3>
<ul>
<li>Gilroy Library<br>350 W 6th St, Gilroy, CA 95020</li>
</ul>

View File

@ -101,6 +101,11 @@ document.addEventListener('DOMContentLoaded', function(){
});
});
const workshop_entry = document.querySelectorAll('.workshop-entry');
workshop_entry.forEach(entry => {
observer.observe(entry);
});
const rules_obj = document.querySelectorAll('.rules-box');
rules_obj.forEach(entry => {
observer.observe(entry);
@ -127,7 +132,7 @@ document.addEventListener('DOMContentLoaded', function(){
});
// Adding the class animations to these elements
let elements_id = ['#description-heading', '#event-main-box', '#timeline', '#signup-title', '#steps-card', '#sponsor-title', '#sponsor-container', '#map-article', '#rules-description', '#guidelines', '#code-of-conduct', '#second-podium', '#first-podium', '#third-podium', '#prize-box', '#administration', '#logistics', '#outreach', '#tech', '#marketing'];
let elements_id = ['#description-heading', '#event-main-box', '#timeline', '#signup-title', '#steps-card', '#sponsor-title', '#sponsor-container', '#map-article', '#workshops-description', '#rules-description', '#guidelines', '#code-of-conduct', '#second-podium', '#first-podium', '#third-podium', '#prize-box', '#administration', '#logistics', '#outreach', '#tech', '#marketing'];
elements_id.forEach(entry => {
var thing = document.querySelector(entry)
observer.observe(document.querySelector(entry));

View File

@ -77,10 +77,11 @@
</label>
<a target="_blank" href="https://forms.gle/coK7q43RwBV2f15i7"><div id="sign-up">SIGN UP</div></a>
<ul id="navList">
<li><a class="navlink" onclick="uncheck('check')" href="#event">Event</a></li>
<li><a class="navlink" onclick="uncheck('check')" href="#rules">Rules</a></li>
<li><a class="navlink" onclick="uncheck('check')" href="#prizes">Prizes</a></li>
<li><a class="navlink" onclick="uncheck('check')" href="#team">Team</a></li>
<li><a class="navlink" onclick="uncheck('check')" href="./#event">Event</a></li>
<li><a class="navlink" onclick="uncheck('check')" href="./#workshops">Workshops</a></li>
<li><a class="navlink" onclick="uncheck('check')" href="./#rules">Rules</a></li>
<li><a class="navlink" onclick="uncheck('check')" href="./#prizes">Prizes</a></li>
<li><a class="navlink" onclick="uncheck('check')" href="./#team">Team</a></li>
</ul>
</div>
</nav>
@ -218,6 +219,44 @@
<li>Attribution: <a class="link" href="https://zoom.us/">Zoom</a></li>
</ul>
</article>
<article class="license-entry">
<a class="link" href="https://gilroyhacks.com/img/python_code.jpg">https://gilroyhacks.com/img/python_code.png</a>
<ul>
<li>License: Unsplash License</li>
<li>Attribution: <a class="link" href="https://unsplash.com/photos/g5_rxRjvKmg?utm_source=unsplash&utm_medium=referral&utm_content=creditShareLink">Unsplash</a></li>
<li>Author: <a class="link" href="https://unsplash.com/@artturijalli">Artturi Jalli</a></li>
</ul>
</article>
<article class="license-entry">
<a class="link" href="https://gilroyhacks.com/img/webdev.jpg">https://gilroyhacks.com/img/webdev.jpg</a>
<ul>
<li>License: Free to use</li>
<li>Attribution: <a class="link" href="https://www.pexels.com/photo/information-sign-on-shelf-251225/">Pexeps</a></li>
<li>Author: <a class="link" href="https://www.pexels.com/@tranmautritam/">Tranmautritam</a></li>
</ul>
</article>
<article class="license-entry">
<a class="link" href="https://gilroyhacks.com/img/python-logo.webp">https://gilroyhacks.com/img/python-logo.webp</a>
<ul>
<li>License: Unknown</li>
<li>Attribution: <a class="link" href="https://www.python.org/">Python</a></li>
</ul>
</article>
<article class="license-entry">
<a class="link" href="https://gilroyhacks.com/img/html.png">https://gilroyhacks.com/img/html.png</a>
<ul>
<li>License: Unknown</li>
<li>Attribution: <a class="link" href="https://en.wikipedia.org/wiki/HTML">Wikipedia</a></li>
</ul>
</article>
<article class="license-entry">
<a class="link" href="https://gilroyhacks.com/img/git.png">https://gilroyhacks.com/img/git.png</a>
<ul>
<li>License: Unknown</li>
<li>Attribution: <a class="link" href="https://git-scm.com/">Git</a></li>
</ul>
</article>
<article class="license-entry">
Bootstrap Icons
<ul>