This repository has been archived by the owner on Sep 15, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 37
/
reviews.html
244 lines (226 loc) · 8.26 KB
/
reviews.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
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
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
The Matrix Movies Website, a Hacktoberfest Project for Beginners
</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="apple-touch-icon"
sizes="180x180"
href="./img/favicons/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./img/favicons/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="./img/favicons/favicon-16x16.png"
/>
<link rel="manifest" href="./img/favicons/site.webmanifest" />
<link
href="https://fonts.googleapis.com/css2?family=Arvo:wght@700&family=Ubuntu&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./css/default.css" />
<link rel="stylesheet" href="./css/pages/reviews.css" />
<style>
h1,
h2,
p {
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}
/* Set a background color for the body */
body {
background-color: #f3f0f0;
color: #fff;
}
/* Style the reviews section */
.reviews-section {
width: 80%;
margin: 0 auto;
padding: 20px;
/* background-color: #333; */
border: 1px solid #555;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
line-height: 1.6;
background-image: url(./img/wallpapers/wallpaper1.png),
linear-gradient(rgba(0, 0, 0, 0.442), rgba(0, 0, 0, 0.448));
background-repeat: no-repeat;
background-size: cover;
}
.review {
margin-bottom: 20px;
border: 1px solid #555;
padding: 10px;
background-color: #00000063;
color: #fff;
border-radius: 5px;
display: flex;
box-shadow: 2px 2px 10px rgba(167, 166, 166, 0.3);
flex-direction: column;
}
.btn1 {
background-color: green;
border: none;
border-radius: 20px;
margin-right: 15px;
padding: 10px 20px;
color: white;
font-size: 17px;
cursor: pointer;
transition: background-color 0.3s, color 0.3s;
outline: none;
transition: background-color 0.3s, color 0.3s;
}
.btn1:hover {
background-color: #4caf50;
color: white;
font-weight: bold;
transform: scale(1.05);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
h6 {
font-weight: bold;
margin: 0;
margin-bottom: 5px;
color: #fff;
}
p {
margin-bottom: 10px;
}
button {
padding: 5px;
color: white;
background-color: green;
box-shadow: 3px 3px 10px 2px rgba(206, 205, 205, 0.3);
}
button:hover {
background-color: rgb(2, 177, 2);
}
</style>
</head>
<body>
<div class="screen">
<header id="header" onclick="window.location.href='index.html';">
<!-- js/header.js -->
</header>
<navbar id="navbar"><!-- js/navbar.js --></navbar>
<section class="reviews-section">
<button id="prev-button" class="btn1">Previous</button>
<button id="next-button" class="btn1">Next</button>
<h3>Reviews</h3>
<div class="review">
<h6>Masterpiece!</h6>
<p>October 8, 2023 Review of "The Matrix" by A. L.</p>
<p>
"The Matrix" is an absolute masterpiece that redefined science
fiction cinema. Keanu Reeves delivers a stellar performance as Neo,
a character we can all relate to. We watch his journey from a
computer hacker to becoming the savior of humanity. This film is
both thrilling and thought-provoking. Groundbreaking special effects
and great action sequences, still hold up even years after its
release. With it's compelling story, unforgettable characters, and
philosophical depth, "The Matrix" remains a timeless classic that
continues to captivate and inspire audiences worldwide.
</p>
</div>
<div class="review">
<h6>Best Sci-Fi: The Matrix</h6>
<p>October 3, 2023 Review of "The Matrix" by C. F.</p>
<p>
Love this movie! Keanu Reeves, Laurence Fishburne, and Carrie-Anne
Moss deliver amazing performances. The whole idea of a simulated
reality is haunting, but the action scenes are way cool. Plus, that
iconic bullet-dodging scene! It's the kind of movie I can watch over
and over and still find something new to appreciate. Whether you're
into philosophy or just love a good ol' sci-fi action flick, "The
Matrix" has got you covered.
</p>
</div>
<div class="review">
<h6>so so</h6>
<p>October 2, 2023 Review of "The Matrix Revolutions" by N. P.</p>
<p>
"The Matrix Revolutions" is a visually stunning finale to the epic
movie trilogy. The action sequences are nothing short of
mind-blowing, and Keanu Reeves once again shines as Neo. The battle
scenes in the real world, of the war between humans and machines are
gritty and intense. Plus, the special effects and cinematography are
top-notch.
</p>
<p>
However, while the action is awesome, the story is confusing
sometimes, especially with the new characters. The pacing can be
uneven, with some moments dragging on while others feel rushed. It's
also a bit of a letdown that some questions raised in the previous
films aren't fully answered. But all in all, it's a great part of
the movies series and worth watching especially for the fans.
</p>
</div>
</section>
<!--reviews-section-->
<footer id="footer"><!-- js/footer.js --></footer>
</div>
<script>
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
anchor.addEventListener("click", function (e) {
e.preventDefault();
document.querySelector(this.getAttribute("href")).scrollIntoView({
behavior: "smooth",
});
});
});
// Make the navbar interactive (replace 'navbar' with your actual navbar element)
// const navbar = document.getElementById('navbar');
// navbar.innerHTML = `
// <ul class="navbar-container" >
// <li><a href="characters.html">Characters</a></li>
// <li><a href="plot.html">Plot</a></li>
// <li><a href="scenes.html">Favourite Scenes</a></li>
// <li><a href="cast-crew.html">Cast & Crew</a></li>
// <li><a href="reviews.html">Reviews</a></li>
// <li><a href="games.html">Games</a></li>
// </ul>
// `;
const reviews = document.querySelectorAll(".review");
let currentIndex = 0;
function showReview(index) {
reviews.forEach((review, i) => {
review.style.display = i === index ? "block" : "none";
});
}
function nextReview() {
currentIndex = (currentIndex + 1) % reviews.length;
showReview(currentIndex);
}
function prevReview() {
currentIndex = (currentIndex - 1 + reviews.length) % reviews.length;
showReview(currentIndex);
}
// Show the initial review
showReview(currentIndex);
// Add event listeners for next and previous buttons
document
.getElementById("next-button")
.addEventListener("click", nextReview);
document
.getElementById("prev-button")
.addEventListener("click", prevReview);
</script>
<script src="js/header.js"></script>
<script src="js/navbar.js"></script>
<script src="js/topbutton.js"></script>
<script src="js/footer.js"></script>
</body>
</html>