generated from Code-Institute-Org/ci-full-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
gallery.html
134 lines (119 loc) · 6.25 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
content="Welcome to <q>It's just a phase!</q> - a simple, interactive web application letting you track the Moon Cycle.">
<meta name="keywords" content="moon, moon phases, moon cycle, lunar cycle, lunar calendar">
<meta name="author"
content="Website designed and maintained by Natalia Czeladka, Web App Developement Student at Code Institute.">
<!-- Bootstrap CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<!-- Google Fonts and Font Awesome CDNs -->
<script src="https://kit.fontawesome.com/b3a2ce9e3e.js" crossorigin="anonymous"></script>
<link
href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Quattrocento:wght@400;700&display=swap"
rel="stylesheet">
<link rel="icon" href="assets/images/moon_stars_icon.png" type="image/x-icon">
<link rel="stylesheet" href="assets/css/style.css" type="text/css">
<title>It's just a phase!</title>
</head>
<body>
<!-- Page Header -->
<header>
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="index.html">
<h1 class="logo"><img src="assets/images/moon_stars_icon.png" alt="logo" height="80"> It's
just a phase!</h1>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav" id="menu">
<li class="navbar-item">
<a class="nav-link" aria-label="Current Moon Phase (first of four pages)" href="index.html">Current Moon Phase</a>
</li>
<li class="navbar-item">
<a class="nav-link" href="comment.html" aria-label="Moon Cycle Explained (second of four pages)">Moon Cycle Explained</a>
</li>
<li class="navbar-item">
<a class="nav-link" href="faq.html" aria-label="Frequently Asked Questions (third of four pages)">FAQ</a>
</li>
<li class="navbar-item">
<a class="nav-link active" href="gallery.html" aria-current="page" aria-label="Gallery (fourth and the last page)">Gallery</a>
</li>
</ul>
</div>
</nav>
</header>
<!-- Main Body -->
<main>
<div class="text-center">
<h2 class="hello">Welcome to the Moon Cycle Photo Gallery!</h2>
<h3 class="intro">The mesmerizing collection of images of our closest celestial neighbour and its breathtaking journey across the night sky.</h3>
</div>
<div class="wrapper">
<div class="slider">
<div class="slide">
<img src="assets/images/new_moon.webp" alt="New Moon">
</div>
<div class="slide">
<img src="assets/images/waxing_crescent.webp" alt="Waxing Crescent">
</div>
<div class="slide">
<img src="assets/images/first_quarter.webp" alt="First Quarter">
</div>
<div class="slide">
<img src="assets/images/waxing_gibbous.webp" alt="Waxing Gibbous">
</div>
<div class="slide">
<img src="assets/images/full_moon.webp" alt="Full Moon">
</div>
<div class="slide">
<img src="assets/images/waning_gibbous.webp" alt="Waning Gibbous">
</div>
<div class="slide">
<img src="assets/images/third_quarter.webp" alt="Third Quarter">
</div>
<div class="slide">
<img src="assets/images/waning_crescent.webp" alt="Waning Crescent">
</div>
<button class="btn btn-next"><i class="fa-solid fa-chevron-right"></i></button>
<button class="btn btn-prev"><i class="fa-solid fa-chevron-left"></i></button>
</div>
</div>
</main>
<!-- Page Footer -->
<footer class="container-fluid">
<div class="row">
<div class="col-12 col-md-6 text-center text-md-start">
Find us on:
<a href="https://www.facebook.com" target="_blank" rel="noopener"
aria-label="Find us on Facebook (link opens in a new tab)">
<i class="fa-brands fa-facebook"></i>
</a>
<a href="https://www.twitter.com" target="_blank" rel="noopener"
aria-label="Find us on Twitter (link opens in a new tab)">
<i class="fa-brands fa-twitter"></i>
</a>
<a href="https://www.instagram.com" target="_blank" rel="noopener"
aria-label="Find us on Instagram (link opens in a new tab)">
<i class="fa-brands fa-instagram"></i>
</a>
</div>
<div class="col-12 col-md-6 text-center text-md-end">
Copyright © <a href="https://github.com/NataliaCzeladka" target="_blank" rel="noopener" aria-label="Check my GitHub account (links opens in a new tab)">Natalia Czeladka 2023</a>
</div>
</div>
</footer>
<!-- Script links for Bootstrap and custom JavaScript code -->
<script src="assets/js/gallery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous">
</script>
</body>
</html>