-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcf_home.html
More file actions
180 lines (156 loc) · 6.27 KB
/
Copy pathcf_home.html
File metadata and controls
180 lines (156 loc) · 6.27 KB
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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html>
<head>
<!--
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 4
Case Problem 3
Chupacabra 15 Home Page
Author: David T
Date: 5/28/19
Filename: cf_home.html
-->
<meta charset="utf-8" />
<title>Chupacabra 15 Festival</title>
<link rel="stylesheet" type="text/css" href="cf_reset.css">
<link rel="stylesheet" type="text/css" href="cf_layout.css">
<link rel="stylesheet" type="text/css" href="cf_effects.css">
<script type="text/javascript">
//document.addEventLister('mousemove', move(asides));
asides = document.getElementsByTagName("aside");
trnX = 0;
trnY = 0;
//alert(asides);
/*
function changeElements() {
asides = document.getElementsByTagName("aside");
//alert(asides.length);
//asides.forEach(move(this,inn,arr));
for(var i = 0; i < asides.length; i++) {
move(asides[i]);
}
//f.innerHTML += "e"
}
*/
function move(itm) {
//itm.innerHTML += "d";
//asides = document.getElementsByTagName("aside");
for(var i = 0; i < asides.length; i++) {
//alert(pageX);
var newTrans = "";
if(asides[i].className == "aside-right") {
newTrans += " rotateY("+trnX2+"deg)";
newTrans += " rotateX("+trnY+"deg)";
}
else {
newTrans += " rotateY("+trnX+"deg)";
newTrans += " rotateX("+trnY+"deg)";
}
asides[i].style.transform = newTrans;
}
}
// event handler function
function handler(e) {
e = e || window.event;
pageX = e.pageX;
pageY = e.pageY;
//This entire function except the next three lines was copied from StackOverflow
trnX = 25*(pageX/window.innerWidth);
trnX2 = -25 + (25*(pageX/window.innerWidth));
trnY = -5*(pageY/document.body.scrollHeight);
}
// attach handler to the click event of the document
if (document.attachEvent) document.attachEvent('onmousemove', handler);
else document.addEventListener('mousemove', handler);
</script>
</head>
<body onmousemove="move();">
<header>
<img src="cf_logo.png" alt="Chupacabra 15" />
<nav class="horizontal">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">TICKETS</a></li>
<li><a href="#">LINEUP</a></li>
<li><a href="#">SCHEDULE</a></li>
<li><a href="#">STORE</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#"><img src="cf_facebook.png" alt="facebook" /></a></li>
<li><a href="#"><img src="cf_twitter.png" alt="twitter" /></a></li>
</ul>
</nav>
</header>
<section id="left">
<aside>
<h1>Tickets</h1>
<p>Tickets go on-sale Saturday, June 10 & will cost $350.00 each for
a 4-day pass. Single day tickets are not available for sale.</p>
</aside>
<aside>
<h1>VIP Passes</h1>
<p>There are a limited number of VIP passes available. You get access to
exclusive viewing platforms, special hospitality areas, and private restrooms.</p>
<p><a href="#">Contact us</a> for more information.</p>
</aside>
<aside>
<h1>Camping</h1>
<p>To encourage more efficient use of the camping space Chupacabra employs a
per site camping fee. Camping is not included in the 4-day festival pass.</p>
<p>Please see the <a href="#">camping section</a> for more details.</p>
</aside>
</section>
<section id="center">
<div id="cube">
<div id="cube_bottom" class="cube_face">
<h1>The 15th Annual Chupacabra Music Festival</h1>
</div>
<div id="cube_top" class="cube_face">
<p>Snow Storm Pilot <span>-</span> Ivory Elephants <span>-</span> Laureen Torres
<span>-</span> Little Mouse <span>-</span> Sheila G <span>-</span> Tachyon Pulse
<span>-</span> Falstaff Ergo <span>-</span> The Roes <span>-</span> Porter Dew
<span>-</span> MLTPLX <span>-</span> Smoke Ring <span>-</span> James Po
<span>-</span> Kate Belle <span>-</span> Ian Mann <span>-</span> Back to the Front
<span>-</span> Codfish <span>-</span> The Chromatones <span>-</span> Fiona Bennett
<span>-</span> Crop Circles <br />
& MORE!!!! </p>
</div>
<div id="cube_left" class="cube_face">
<img src="cf_photo1.png" alt="" />
</div>
<div id="cube_right" class="cube_face">
<img src="cf_photo2.png" alt="" />
</div>
<div id="cube_front" class="cube_face">
<img src="cf_photo3.png" alt="" />
</div>
</div>
</section>
<section id="right">
<aside class="aside-right">
<h1>Merchandise</h1>
<p>Special discount pricing on all Chupacabra15 clothing, posters and
souvenirs available now. Gift cards and volume pricing are also
available.</p>
<p>Shop our <a href="#">online store</a> to get the best deals.</p>
</aside>
<aside class="aside-right">
<h1>Online Chat</h1>
<p>Snow Storm Pilot will be hosting an online chat to discuss
their upcoming concert tour. Enter a <a href="#">drawing</a> to win a VIP pass
for their show at Chupacabra15!</p>
</aside>
<aside class="aside-right">
<h1>Sponsors</h1>
<p>Visit our <a href="#">Sponsors Page</a> to get great online deals
for Chupacabra15 promotional items and merchandise.</p>
<p>Want to become a sponsor of this great event? <a href="#">Contact
us</a> to learn how!</p>
</aside>
</section>
<footer>
Chupacabra © 2017 English (US) <span> <a href="#">About</a>
<a href="#">Developers</a> <a href="#">Privacy</a> <a href="#">Terms</a>
<a href="#">Help</a> </span>
</footer>
</body>
</html>