/
memories.html
110 lines (110 loc) · 4.44 KB
/
memories.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Home</title>
<meta name="author" content="Jesse Zhong">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Nunito:400,700" rel="stylesheet">
<link rel="stylesheet" href="./node-modules/animate.css/animate.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="top">
<div class="header" style="display: flex; align-items: center; justify-content: space-between">
<a class="title" href="index.html">
<span class="headertitlea">J</span><span class="headertitleb">Z</span>
</a>
<div>
<a class="nav" href="index.html">Home</a><a class="nav" href="awards.html">Awards</a><a class="nav" href="activities.html">Activities</a><a class="nav" href="memories.html">Memories</a><a class="nav" href="contact.html">Contact</a>
</div>
</div>
</div>
<div class="sectionb parallax f" id="0">
<div class="body animated slow fadeIn" id="01" style="position: relative;">
<div class="white large memR">
Graduation<br>
May 25, 2018
</div>
<img class="arrow" id="11">
</div>
</div>
<div class="sectionb parallax b" id="1">
<div class="body animated slow fadeIn" style="position: relative;">
<img class="arrow up" id="20">
<div class="white large memL">
Awesome Math<br>
Summer 2018
</div>
<img class="arrow" id="12">
</div>
</div>
<div class="sectionb parallax d" id="2">
<div class="body animated slow fadeIn" style="position: relative;">
<img class="arrow up" id="21">
<div class="white large memR">
Last Day of Classes<br>
May 17, 2018
</div>
<img class="arrow" id="13">
</div>
</div>
<div class="sectionb parallax c" id="3">
<div class="body animated slow fadeIn" style="position: relative;">
<img class="arrow up" id="22">
<div class="white large memL">
Basketball Senior Night<br>
February 9, 2018
</div>
<img class="arrow" id="14">
</div>
</div>
<div class="sectionb parallax e" id="4">
<div class="body animated slow fadeIn" style="position: relative;">
<img class="arrow up" id="23">
<div class="white large memR">
SM-ESD Game<br>
January 12, 2018
</div>
<img class="arrow" id="15">
</div>
</div>
<div class="sectionb parallax" id="5">
<div class="body animated slow fadeIn" style="position: relative;">
<img class="arrow up" id="24">
<div class="white large memL">
Whistler<br>
March 2018
</div>
</div>
</div>
</body>
<script src="adjustheight.js"></script>
<!-- <script>
var elem = document.getElementsByClassName("top");
var height = elem[0].offsetHeight;
var change1 = document.getElementById("0");
change1.style.height = "calc(100vh - " + height + "px)";
var change2 = document.getElementById("01");
change2.style.height = "calc(80vh - " + height + "px)";
</script>
<script>
var elem = document.getElementsByClassName("top");
var height = elem[0].offsetHeight;
var change = document.getElementsByClassName("up");
for (let i = 0; i < change.length; i++) {
change[i].style.top = "calc(5vh + " + height + "px)";
}
</script> -->
<script src="scroll.js"></script>
<script>
if ($(document).scrollTop() > 0) {
;
}
else {
$('html, body').animate({
scrollTop: $("#0").offset().top
}, 0);
}
</script>
</html>