forked from danyakarras/Simple-Webpage
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathCS490_home.html
113 lines (93 loc) · 8.12 KB
/
CS490_home.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
111
112
113
<!DOCTYPE html>
<html>
<head>
<title>CS490 Website</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="workshop_deets.json"></script>
<script>
function handleNavClick(obj) {
var elements = document.getElementsByClassName("active");
obj.classList.add("active");
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
if (element.id != obj.id) {
element.classList.remove("active");
document.getElementById(element.id.slice(4)).classList.add("hidden");
}
}
document.getElementById(obj.id.slice(4)).classList.remove("hidden");
}
function drawWorkshopCards() {
var workshops_content = document.getElementById("workshops");
for(var i = 0; i < workshops.length; i++) {
var workshop_card = document.createElement("div");
workshop_card.classList.add("column");
var title_elem = document.createElement("h4");
title_elem.classList.add("column-title");
var title = document.createTextNode(workshops[i].name);
title_elem.appendChild(title);
workshop_card.appendChild(title_elem);
var date_div = document.createElement("div");
date_div.classList.add("column-deets");
var date = document.createTextNode("Date: " + workshops[i].date);
date_div.appendChild(date);
workshop_card.appendChild(date_div);
var speaker_div = document.createElement("div");
speaker_div.classList.add("column-deets");
var speaker = document.createTextNode("Speaker: " + workshops[i].speaker);
speaker_div.appendChild(speaker);
workshop_card.appendChild(speaker_div);
var description_div = document.createElement("div");
description_div.classList.add("column-description");
var description = document.createTextNode(workshops[i].description);
description_div.appendChild(description);
workshop_card.appendChild(description_div);
workshops_content.appendChild(workshop_card);
}
}
</script>
</head>
<body id="body" onload="drawWorkshopCards()">
<div class="top-border"></div>
<!--HEADER -->
<div class="header">
<h2>CPSC 490</h2>
<p>Alumni-taught Industry Skills</p>
<p>Summer 2018</p>
</div>
<!--NAV BAR -->
<ul>
<li><a id="nav_home" class="active" onClick="handleNavClick(this)">Home</a></li>
<li><a id="nav_workshops" onClick="handleNavClick(this)">Workshops</a></li>
<li><a id="nav_homework" onClick="handleNavClick(this)">Homework</a></li>
<li><a id="nav_resources" onClick="handleNavClick(this)">Resources</a></li>
</ul>
<!--CONTENT -->
<div id="home" class="content">
<h3>Home</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae nunc sed velit dignissim sodales ut. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. In iaculis nunc sed augue lacus viverra. Consectetur a erat nam at lectus urna. Turpis massa tincidunt dui ut ornare lectus sit. Viverra aliquet eget sit amet tellus cras. Consequat interdum varius sit amet mattis vulputate enim nulla aliquet. Varius sit amet mattis vulputate enim nulla aliquet porttitor. Tristique et egestas quis ipsum. Nulla at volutpat diam ut. Dictum varius duis at consectetur lorem. Accumsan sit amet nulla facilisi morbi. Tortor condimentum lacinia quis vel eros donec. In massa tempor nec feugiat nisl pretium fusce id.</p>
<p>Neque gravida in fermentum et sollicitudin ac orci phasellus. In tellus integer feugiat scelerisque. In egestas erat imperdiet sed. Magna fermentum iaculis eu non diam phasellus vestibulum. Ornare massa eget egestas purus viverra accumsan in nisl nisi. Mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan. Velit scelerisque in dictum non consectetur a erat nam. Justo laoreet sit amet cursus sit amet dictum sit amet. Et netus et malesuada fames ac turpis egestas integer. Sed odio morbi quis commodo. Dolor sit amet consectetur adipiscing elit duis tristique. Ultrices gravida dictum fusce ut placerat. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Viverra orci sagittis eu volutpat. Vitae elementum curabitur vitae nunc sed velit dignissim sodales. Mauris commodo quis imperdiet massa tincidunt nunc pulvinar. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum.</p>
<p>Nunc eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Libero justo laoreet sit amet cursus. Leo vel fringilla est ullamcorper eget. Blandit volutpat maecenas volutpat blandit aliquam etiam erat velit. Dictum fusce ut placerat orci nulla pellentesque. Eu ultrices vitae auctor eu augue. Ullamcorper morbi tincidunt ornare massa eget egestas. Donec adipiscing tristique risus nec feugiat in fermentum posuere. Malesuada fames ac turpis egestas maecenas pharetra. Mi bibendum neque egestas congue quisque egestas diam in arcu. Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Tellus cras adipiscing enim eu turpis egestas pretium. In vitae turpis massa sed elementum tempus egestas sed sed. Eget mauris pharetra et ultrices neque ornare aenean.</p>
</div>
<!--WORKSHOPS-->
<div id="workshops" class="content hidden">
<h3>Workshops</h3>
</div>
<!--Homework-->
<div id="homework" class="content hidden">
<h3>Homework</h3>
<div class="fancy">Fancy Div</div>
</div>
<!--Resources-->
<div id="resources" class="content hidden">
<h3>Resources</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae nunc sed velit dignissim sodales ut. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. In iaculis nunc sed augue lacus viverra. Consectetur a erat nam at lectus urna. Turpis massa tincidunt dui ut ornare lectus sit. Viverra aliquet eget sit amet tellus cras. Consequat interdum varius sit amet mattis vulputate enim nulla aliquet. Varius sit amet mattis vulputate enim nulla aliquet porttitor. Tristique et egestas quis ipsum. Nulla at volutpat diam ut. Dictum varius duis at consectetur lorem. Accumsan sit amet nulla facilisi morbi. Tortor condimentum lacinia quis vel eros donec. In massa tempor nec feugiat nisl pretium fusce id.
<p>Neque gravida in fermentum et sollicitudin ac orci phasellus. In tellus integer feugiat scelerisque. In egestas erat imperdiet sed. Magna fermentum iaculis eu non diam phasellus vestibulum. Ornare massa eget egestas purus viverra accumsan in nisl nisi. Mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan. Velit scelerisque in dictum non consectetur a erat nam. Justo laoreet sit amet cursus sit amet dictum sit amet. Et netus et malesuada fames ac turpis egestas integer. Sed odio morbi quis commodo. Dolor sit amet consectetur adipiscing elit duis tristique. Ultrices gravida dictum fusce ut placerat. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Viverra orci sagittis eu volutpat. Vitae elementum curabitur vitae nunc sed velit dignissim sodales. Mauris commodo quis imperdiet massa tincidunt nunc pulvinar. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum.</p>
<p>Nunc eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Libero justo laoreet sit amet cursus. Leo vel fringilla est ullamcorper eget. Blandit volutpat maecenas volutpat blandit aliquam etiam erat velit. Dictum fusce ut placerat orci nulla pellentesque. Eu ultrices vitae auctor eu augue. Ullamcorper morbi tincidunt ornare massa eget egestas. Donec adipiscing tristique risus nec feugiat in fermentum posuere. Malesuada fames ac turpis egestas maecenas pharetra. Mi bibendum neque egestas congue quisque egestas diam in arcu. Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Tellus cras adipiscing enim eu turpis egestas pretium. In vitae turpis massa sed elementum tempus egestas sed sed. Eget mauris pharetra et ultrices neque ornare aenean.</p>
</div>
<div class="footer">
<div>Site creation and design by: Danya Karras</div>
<div>Class: CPSC490</div>
</div>
</body>
</html>