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

Added slides thumbnails

Browse Source
This commit is contained in:
James Dinh 2022-07-26 15:31:45 -07:00
parent 2a4d5f89d6
commit 9b10b7d9a9
4 changed files with 89 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
css/general.css
View File

@ -1757,6 +1757,57 @@ section {
border: 1px solid rgb(161, 161, 161);
}
.workshop-slides {
display: flex;
flex-flow: row nowrap;
width: 100%;
}
.workshop-topics-covered {
width: 50%;
min-width: 150px;
}
.workshop-presentation {
text-align: center;
justify-content: center;
float: right;
width: 50%;
}
.slides-thumbnail {
padding: 10px 15px;
}
.slides-thumbnail:hover {
transform: scale(1.05);
transition: 0.5s;
}
.slides-element {
width: 100%;
border-radius: 5px;
border: 1px solid rgb(102, 102, 102);
}
.tooltip#python-slides-tooltip::after {
content: 'Intro to Python Programming';
color: rgb(252, 188, 93);
right: -11px;
}
.tooltip#webdev-slides-tooltip::after {
content: 'Web Dev & Git Version Control';
color: rgb(252, 188, 93);
right: -15px;
}
.tooltip#python-slides-tooltip::after {
content: 'Intro to Python Programming';
color: rgb(252, 188, 93);
right: -11px;
}
.workshop-difficulty {
display: flex;
justify-content: center;

BIN
img/python_slides.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

BIN
img/webdev_slides.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 68 KiB

28
index.html
View File

@ -512,14 +512,25 @@
<div class="workshop-desc">
<h4>Description</h4>
<p>A chance for you to learn the world's most common version control system: Git -- and how to create your own website!</p><br>
<div class="workshop-slides">
<div class="workshop-topics-covered">
<h4>Topics Covered:</h4>
<ul style="margin-left: 20px">
<li>Git Version Control</li>
<li>Basics of Web Development</li>
<li>Web Dev Basics</li>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Domains</li>
</ul><br>
</div>
<div class="workshop-presentation">
<h4>Slides Presentation:</h4>
<div class="slides-thumbnail">
<a class="tooltip" id="webdev-slides-tooltip" href="https://docs.google.com/presentation/d/19sgQbGn7sqNV1A_LlYYiCNZF2GlHGuc-pFoWAdAEtV0/edit?usp=sharing" target="_blank"><img class="slides-element" src="img/webdev_slides.jpg"></a>
</div>
</div>
</div>
<h4>Notes</h4>
<ul style="margin-left: 20px">
<li>Max capacity is around 20 people (first come, first serve)</li>
@ -549,14 +560,25 @@
<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>
<div class="workshop-slides">
<div class="workshop-topics-covered">
<h4>Topics Covered:</h4>
<ul style="margin-left: 20px">
<li>Variables</li>
<li>Input/Output</li>
<li>Variables, Math</li>
<li>Booleans/if statements</li>
<li>Loops</li>
<li>Arrays</li>
<li>Functions</li>
<li>Classes & Objects</li>
</ul><br>
</div>
<div class="workshop-presentation">
<h4>Slides Presentation:</h4>
<div class="slides-thumbnail">
<a class="tooltip" id="python-slides-tooltip" href="https://docs.google.com/presentation/d/1nSepXdvXbz1ZaOXXQgIr0wWG9QS4FvW_wJ4KKt2zS7k/edit?usp=sharing" target="_blank"><img class="slides-element" src="img/python_slides.jpg"></a>
</div>
</div>
</div>
<h4>Notes</h4>
<ul style="margin-left: 20px">
<li>Max capacity is around 20 people (first come, first serve)</li>