Skip to content

Commit b88a6f9

Browse files
ndrewhndrewh
committed
Add initial tutorial website
1 parent 90b0f31 commit b88a6f9

File tree

7 files changed

+72
-1
lines changed

7 files changed

+72
-1
lines changed

‎README.md‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,7 @@
1-
# git-tutorial
1+
# git-tutorial
2+
3+
In this tutorial, you will be adding yourself to our display of bouncing heads: https://code4community.github.io/git-tutorial/
4+
5+
Tutorial is on our website: https://code4community.github.io
6+
7+
The tl;dr is you should add an image of yourself to `images/` and add the HTMl required to `index.html` to add yourself to the page. Test your code, push to your own branch, make a pull request, and invite two reviewers.

‎images/adam_lis.jpg‎

17.9 KB
Loading

‎images/andrew_haberlandt.jpg‎

49.8 KB
Loading

‎images/max_gruber.jpg‎

41.4 KB
Loading

‎index.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<html>
2+
<head>
3+
<link rel="stylesheet" type="text/css" href="main.css">
4+
<script src="main.js"></script>
5+
</head>
6+
<body>
7+
<div id="heads-area">
8+
<div class="person-frame-inner">
9+
<img class="ball" src="images/max_gruber.jpg" />
10+
<p>Max Gruber</p>
11+
</div>
12+
<div class="person-frame-inner">
13+
<img class="ball" src="images/adam_lis.jpg" />
14+
<p>Adam Lis</p>
15+
</div>
16+
<div class="person-frame-inner">
17+
<img class="ball" src="images/andrew_haberlandt.jpg" />
18+
<p>Andrew Haberlandt</p>
19+
</div>
20+
</div>
21+
</body>
22+
</html>

‎main.css‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
body {
2+
display: flex;
3+
align-content: stretch;
4+
}
5+
6+
#heads-area {
7+
margin: 75px;
8+
flex-grow: 1;
9+
}
10+
11+
.person-frame-inner {
12+
display: inline-block;
13+
position: absolute;
14+
animation: animate 10s linear 0s infinite alternate, animate2 9s linear 0s infinite;
15+
}
16+
17+
.person-frame-inner p {
18+
text-align: center;
19+
}
20+
21+
.ball {
22+
height: 150px;
23+
width: 150px;
24+
border-radius: 150px;
25+
object-fit: cover;
26+
}
27+
@keyframes animate {
28+
0% { left: calc(100% - 150px)}
29+
100% { left: 0; }
30+
}
31+
32+
@keyframes animate2 {
33+
0% { top: 25%}
34+
37.5% { top: calc(100% - 150px) }
35+
87.5% { top: 0% }
36+
100% { top: 25%}
37+
}

‎main.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
document.addEventListener("DOMContentLoaded", function(event) {
2+
var people = document.getElementsByClassName("person-frame-inner");
3+
for (let person of people) {
4+
person.style["animation-delay"] = -Math.floor(Math.random() * 1000) + "s"
5+
}
6+
});

0 commit comments

Comments
 (0)