-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
157 lines (134 loc) · 6.18 KB
/
index.html
File metadata and controls
157 lines (134 loc) · 6.18 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
<!DOCTYPE html>
<html lang="en">
<!-- ########################## HEAD ########################### -->
<head>
<meta charset="utf-8" />
<meta name="author" content="Peggy Shen">
<meta name="keywords" content="Duquesne Incline, Pittsburgh">
<meta name="description" content="Official website of Duquesne Incline">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Duquesne Incline</title>
<link rel="shortcut icon" type="image/jpg" href="images/DIlogo.png"/>
<!-- External Links to CSS and JS-->
<link rel="stylesheet" media="all" type="text/css" href="css/styles.css" />
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/scripts.js"></script>
</head>
<!-- ########################## END OF HEAD ########################### -->
<!-- ########################## BODY ########################### -->
<body>
<div id="topRow">
<header>
<img src="images/DIlogo.png" alt="Duquesne Incline Logo">
<h1><a href="index.html">Duquesne Incline</a></h1>
</header>
<nav>
<a class="selected" href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
<a href="visit.html">Visit</a>
</nav>
</div>
<!-- PHOTO GALLERY -->
<div class="slideshow-container">
<div class="mySlides fade">
<img src="images/dicloudyresize.PNG" alt="Duquesne Incline Cloudy Sunset">
<div class="text">WELCOME TO DUQUESNE INCLINE!</div>
</div>
<div class="mySlides fade">
<img src="images/dirainbowresize.PNG" alt="Duquesne Incline Rainbow">
<div class="text">WELCOME TO DUQUESNE INCLINE!</div>
</div>
<div class="mySlides fade">
<img src="images/diviewresize.PNG" alt="Duquesne Incline Nighttime"/>
<div class="text">WELCOME TO DUQUESNE INCLINE!</div>
</div>
<div class="mySlides fade">
<img src="images/disnowyresize.PNG" alt="Duquesne Incline Snowy Weather">
<div class="text">WELCOME TO DUQUESNE INCLINE!</div>
</div>
<div class="mySlides fade">
<img src="images/difbresized.PNG" alt="Duquesne Incline Cloudy View">
<div class="text">WELCOME TO DUQUESNE INCLINE!</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
</div><br>
<script>
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
<!-- POLAROID LINKS TO PAGES -->
<div class="polaroid">
<a href="visit.html"><img src="images/DIcloseup.png" alt="Photo of Incline Train"></a>
<div class="textContainer">
<p>Visit Us Today</p>
</div>
</div>
<div class="polaroid">
<a href="about.html"><img src="images/DI1900.png" alt="Photo of Incline in the 1900s"></a>
<div class="textContainer">
<p>Learn About Us</p>
</div>
</div>
<div class="polaroid">
<a href="contact.html"><img src="images/DIbuilding.png" alt="Photo of Incline Building"></a>
<div class="textContainer">
<p>Give Us a Call</p>
</div>
</div>
<div id="infoSidebar">
<img src="images/PAdestinationaward.png" alt="1999 PA Destination of the Day Award"
title="1999 PA Destination of the Day Award"><br>
<iframe width="500" height="315" src="https://www.youtube-nocookie.com/embed/bSLvrz5GraI"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;
clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div><br>
<footer>
<hr/>
<div id="footerImage">
<img src="images/DIlogo.png" alt="Duquesne Incline Logo">
</div>
<!-- icons from https://www.iconsdb.com/ -->
<a href="mailto:duq.incline@duquesneincline.org"><img src="images/email-16.png" alt="Email Icon"></a>
<a href="images/DImap.pdf" target="blank"><img src="images/pin-16.png" alt="Location Pin Icon"></a>
<a href="https://instagram.com/explore/tags/duquesneincline/" target="blank"><img src="images/instagram-16.png" alt="Instagram Icon"></a>
<a href="https://facebook.com/TheDuquesneIncline" target="blank"><img src="images/facebook-16.png" alt="Facebook Icon"></a>
<a href="https://youtu.be/ve3KMUIlSGk" target="blank"><img src="images/youtube-16.png" alt="YouTube Icon"></a>
<a href="https://en.wikipedia.org/wiki/Duquesne_Incline" target="blank"><img src="images/wikipedia-16.png" alt="Wikipedia Icon"></a>
<br> © 2021 Duquesne Incline. All Rights Reserved.<br>
Website for IS Milieux. <a href="citations.html">See citations here.</a><br>
</footer>
</body>
</html>