-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgallery.html
103 lines (75 loc) · 3.04 KB
/
gallery.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
<!--
This pages is simply a gallery to show photos of outfits that I have worn in the past.
The code for the layout of the gallery can be found in the styles.css file,
and the code that enables the ability to enlarge photos can be found in the enlarge-photo.js file.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lyla's TransFem Guide</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="NavBar.css">
<link rel="stylesheet" href="bg.css">
</head>
<div class="bg"></div>
<body>
<div class="nav-wrapper">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="hrt.html">HRT</a></li>
<li><a href="fashion.html">Fashion</a></li>
<li><a href="support.html">Support</a></li>
<div id="moreButton" class="dropdown" onclick="moreClick()">
<a class="dropbtn">More</a>
<div class="dropdown-content">
<li><a href="gallery.html">Gallery</a></li>
<li><a href="about-me.html">About Me</a></li>
<li><a href="glossary.html">Glossary</a></li>
</div>
</div>
</ul>
</nav>
</div>
<div class="white-box">
<h1>Photo Gallery</h1>
<p>Here is a collection of lots of photos that I've taken, mostly just pictures of outfits</p>
<p style="margin-top: 0px; font-size: 15px;">Note: You can click images to enlarge them.</p>
</div>
<div class="white-box">
<div class="gallery">
<div class="gallery-item">
<img class="enlargeable-photo" src="photos/black-outfit.JPG" alt="">
</div>
<div class="gallery-item">
<img class="enlargeable-photo" src="photos/IMG_7410 Copy.JPG" alt="">
</div>
<div class="gallery-item">
<img class="enlargeable-photo" src="photos/img2.JPG" alt="">
</div>
<div class="gallery-item">
<img class="enlargeable-photo" src="photos/img3.PNG" alt="">
</div>
<div class="gallery-item">
<img class="enlargeable-photo" src="photos/pink-dress.JPG" alt="">
</div>
<div class="gallery-item">
<img class="enlargeable-photo" src="photos/IMG_6016 Copy.JPG" alt="">
</div>
<div class="gallery-item">
<img class="enlargeable-photo" src="photos/IMG_7718 Copy.JPG" alt="">
</div>
<div class="gallery-item">
<img class="enlargeable-photo" src="photos/IMG_7775 Copy.JPG" alt="">
</div>
<div class="gallery-item">
<img class="enlargeable-photo" src="photos/IMG_7948 Copy.JPG" alt="">
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="enlarge-photo.js"></script>
</html>