-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
215 lines (171 loc) · 10.4 KB
/
index.html
File metadata and controls
215 lines (171 loc) · 10.4 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
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
<!DOCTYPE html>
<html>
<!--Last update: 23 June 2022 21:50-->
<head>
<!--meta tag for bootstrap 22JuneP -->
<!--NOTE: HTML CHANGES PUSHED THE NAV BAR, can change the nav bar to white?-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="Portfolio.css">
<!--Script for Bootstrap Paris 22 June-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<script src="script.js" defer></script> <!--JS FOR NAV BAR and POP UP-->
<!--link href for bootstrap 22JuneP -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<title>Portfolio</title>
</head>
<body>
<header class="header"> <!--Amended, added header as there were 2 x head -->
<!--NEW NAV TEST 22/6-->
<nav class="navbar">
<div class="the-title title-push">SPS
</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li> <a href="index.html.html">Portfolio</a> </li>
<li> <a href="Contact Form.html">Contact</a> </li>
<li> <a href="https://www.instagram.com/">Instagram</a> </li>
</ul>
</div>
</nav>
</header>
<!--NEW NAV TEST 22/6 ENDDDDDDDDDDDDD-->
<!--EDIT 23 JUNE REMOVED SECOND BODY TAG AS THERE SHOULD ONLY BE ONE-->
<div class="travel-div">
<h1 class = "travel" href="#">Travel Photography</>
</div>
<!--22 JUNE CAROUSEL CODE ----------------------------------------------- EDIT 22 JUNE, MOVED THIS OUTSIDE OF THE NAV CODE>
<!--Buttons and indicators for carousel slides 22JuneP-->
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4" aria-label="Slide 5"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="5" aria-label="Slide 6"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="6" aria-label="Slide 7"></button>
</div>
<!--Carousel images start here 22JuneP NOTE: added image URLs as the other image links weren't loading-->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="Paris Images Carousel/Photo5Boats.jpg"
class="d-block w-100" alt="Boats">
</div>
<div class="carousel-item">
<img src="Paris Images Carousel/photo10.jpg"
class="d-block w-100" alt="Mosque">
</div>
<div class="carousel-item">
<img src="Paris Images Carousel/Photo7Budda.jpg"
class="d-block w-100" alt="Buddha">
</div>
<div class="carousel-item">
<img src="Paris Images Carousel/Photo2Balloon.jpg"
class="d-block w-100" alt="Hot air balloons">
</div>
<div class="carousel-item">
<img src="Paris Images Carousel/Photo3Tram.jpg"
class="d-block w-100" alt="Tram">
</div>
<div class="carousel-item">
<img src="Paris Images Carousel/Photo4Temple.jpg"
class="d-block w-100" alt="Temple">
</div>
<div class="carousel-item">
<img src="Paris Images Carousel/Photo8Camels.jpg"
class="d-block w-100" alt="Camels">
</div>
<!--carousel images end here 22JuneP-->
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!--JS for bootstrap 22JuneP-->
<!-- 22 JUNE END OF CAROUSEL CODE-->
<!--IMAGES-->
<div class="row1">
<a target="_blank" href="https://images.unsplash.com/photo-1513415564515-763d91423bdd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8">
<img src="https://images.unsplash.com/photo-1513415564515-763d91423bdd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8" alt="Buddha" width="300" height="400">
</a>
<a target="_blank" href="https://images.unsplash.com/photo-1548013146-72479768bada?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8">
<img src="https://images.unsplash.com/photo-1548013146-72479768bada?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8" alt="India" width="605" height="400">
</a>
<a target="_blank" href="https://paper.dropbox.com/ep/redirect/image?url=https%3A%2F%2Fpaper-attachments.dropbox.com%2Fs_4E7C5C8B68511CC4F129B8D8DDC09BA0DB58CBDF650B37131FB578387DB444E7_1654091791510_232100590_4300846753286940_8717898552562975921_n.jpg&hmac=QFoSll5T1p8OUh3th%2BcYuqBqpLSzu%2BU1PwoPam5URBo%3D">
<img src="swing photo/swing.jpg" alt="Mezio swing" width="300" height="400">
</a>
</div>
<div class="row2">
<a target="_blank" href="https://images.unsplash.com/photo-1568322503878-6c2762c21724?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8">
<img src="https://images.unsplash.com/photo-1568322503878-6c2762c21724?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8" alt="Hot air balloon" width="300" height="400">
</a>
<a target="_blank" href="https://images.unsplash.com/photo-1491900177661-4e1cd2d7cce2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8">
<img src="https://images.unsplash.com/photo-1491900177661-4e1cd2d7cce2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8" alt="Burano" width="605" height="400">
</a>
<a target="_blank" href="https://images.unsplash.com/photo-1541323474343-589d15554a63?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8">
<img src="https://images.unsplash.com/photo-1541323474343-589d15554a63?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8" alt="Tram Lisbon" width="300" height="400">
</a>
</div>
<div class="row3">
<a target="_blank" href="https://images.unsplash.com/photo-1556427777-4b0bc6b410a9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8">
<img src="https://images.unsplash.com/photo-1556427777-4b0bc6b410a9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8" alt="Monkey" width="300" height="400">
</a>
<a target="_blank" href="https://images.unsplash.com/photo-1470770903676-69b98201ea1c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8">
<img src="https://images.unsplash.com/photo-1470770903676-69b98201ea1c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8" alt="Mountain" width="605" height="400" >
</a>
<a target="_blank" href="https://images.unsplash.com/photo-1517926967795-31943e805dae?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8">
<img src="https://images.unsplash.com/photo-1517926967795-31943e805dae?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8" alt="Bali" width="300" height="400">
</a>
</div>
<div class="row4">
<a target="_blank" href="https://images.unsplash.com/photo-1489396160836-2c99c977e970?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8">
<img src="https://images.unsplash.com/photo-1489396160836-2c99c977e970?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8" alt="Santorini" width="300" height="400">
</a>
<a target="_blank" href="https://images.unsplash.com/photo-1548103981-34316e50b924?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8">
<img src="https://images.unsplash.com/photo-1548103981-34316e50b924?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8" alt="Camels"width="605" height="400" >
</a>
<a target="_blank" href="https://images.unsplash.com/photo-1573270689103-d7a4e42b609a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8">
<img src="https://images.unsplash.com/photo-1573270689103-d7a4e42b609a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8" alt="Ha Long Bay" width="300" height="400">
</a>
</div>
<!--FOOTER STARTS HERE-->
<!-- <div> -->
<form id="emailform">
<footer id="the-footer">
<!-- <div>
</div> -->
<!-- Form -->
<p id="footer-title"><strong>Subscribe to my newsletter</strong></p>
<p id="footer-subtitle"> Monthly photography tips and offers</p>
<!-- <form id="emailform"> -->
<label>Email address:</label>
<input type="email" name="email" id="email" placeholder="email@address.com"/>
<button id="submitFooter" onclick="myFunction()"><strong>Submit</strong></button>
<p id="copyright"> Copyright SPS © 2022<p>
<!-- </form> -->
<!-- Social links-->
<p><a href="https://www.twitter.com/" target="_blank">
<img id="Twitter" height="35" alt="Twitter icon" src="https://cdn1.iconfinder.com/data/icons/social-media-circle-7/512/Circled_Twitter_svg-1024.png">
</a> </p>
<p><a href="https://www.facebook.com/" target="_blank">
<img id="Facebook" height="35" alt="Facebook icon" src="https://cdn3.iconfinder.com/data/icons/social-media-black-white-2/512/BW_Facebook_glyph_svg-1024.png">
</a></p>
<!-- Copyright -->
</footer>
</form>
<!-- </div> -->
</body>
</html>