Added slides thumbnails
This commit is contained in:
parent
2a4d5f89d6
commit
9b10b7d9a9
@ -1757,6 +1757,57 @@ section {
|
|||||||
border: 1px solid rgb(161, 161, 161);
|
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 {
|
.workshop-difficulty {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
BIN
img/python_slides.jpg
Normal file
BIN
img/python_slides.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 53 KiB |
BIN
img/webdev_slides.jpg
Normal file
BIN
img/webdev_slides.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 68 KiB |
54
index.html
54
index.html
@ -512,14 +512,25 @@
|
|||||||
<div class="workshop-desc">
|
<div class="workshop-desc">
|
||||||
<h4>Description</h4>
|
<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>
|
<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>
|
||||||
<h4>Topics Covered:</h4>
|
<div class="workshop-slides">
|
||||||
<ul style="margin-left: 20px">
|
<div class="workshop-topics-covered">
|
||||||
<li>Git Version Control</li>
|
<h4>Topics Covered:</h4>
|
||||||
<li>Basics of Web Development</li>
|
<ul style="margin-left: 20px">
|
||||||
<li>HTML</li>
|
<li>Git Version Control</li>
|
||||||
<li>CSS</li>
|
<li>Web Dev Basics</li>
|
||||||
<li>JavaScript</li>
|
<li>HTML</li>
|
||||||
</ul><br>
|
<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>
|
<h4>Notes</h4>
|
||||||
<ul style="margin-left: 20px">
|
<ul style="margin-left: 20px">
|
||||||
<li>Max capacity is around 20 people (first come, first serve)</li>
|
<li>Max capacity is around 20 people (first come, first serve)</li>
|
||||||
@ -549,14 +560,25 @@
|
|||||||
<div class="workshop-desc">
|
<div class="workshop-desc">
|
||||||
<h4>Description</h4>
|
<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>
|
<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>
|
<div class="workshop-slides">
|
||||||
<ul style="margin-left: 20px">
|
<div class="workshop-topics-covered">
|
||||||
<li>Variables</li>
|
<h4>Topics Covered:</h4>
|
||||||
<li>Input/Output</li>
|
<ul style="margin-left: 20px">
|
||||||
<li>Arrays</li>
|
<li>Input/Output</li>
|
||||||
<li>Functions</li>
|
<li>Variables, Math</li>
|
||||||
<li>Classes & Objects</li>
|
<li>Booleans/if statements</li>
|
||||||
</ul><br>
|
<li>Loops</li>
|
||||||
|
<li>Arrays</li>
|
||||||
|
<li>Functions</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>
|
<h4>Notes</h4>
|
||||||
<ul style="margin-left: 20px">
|
<ul style="margin-left: 20px">
|
||||||
<li>Max capacity is around 20 people (first come, first serve)</li>
|
<li>Max capacity is around 20 people (first come, first serve)</li>
|
||||||
|
Loading…
Reference in New Issue
Block a user