Skip to content

Commit 37b5fd5

Browse files
Asymtode712Asymtode712
committed
2 parents 74955cf + efe82ac commit 37b5fd5

File tree

11 files changed

+816
-83
lines changed

11 files changed

+816
-83
lines changed

‎Website/404.html‎

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Page Not Found | ML Repos</title>
8+
<link rel="icon" href="logo-bg.png" type="image/png">
9+
<style>
10+
body {
11+
display: flex;
12+
justify-content: center;
13+
align-items: center;
14+
height: 100vh;
15+
margin: 0;
16+
background-color: #f8f8f8;
17+
font-family: Arial, sans-serif;
18+
overflow: hidden;
19+
}
20+
21+
.container {
22+
text-align: center;
23+
padding: 0 20px;
24+
}
25+
26+
.game-container {
27+
position: relative;
28+
width: 80vw;
29+
height: 80vh;
30+
max-width: 600px;
31+
max-height: 400px;
32+
margin-bottom: 20px;
33+
}
34+
35+
.logo {
36+
position: absolute;
37+
width: 80px;
38+
height: 80px;
39+
background-image: url('logo-bg.png');
40+
background-size: contain;
41+
background-repeat: no-repeat;
42+
cursor: pointer;
43+
}
44+
45+
h1 {
46+
font-size: 2.5rem;
47+
color: #333;
48+
padding: 10px;
49+
text-align: center;
50+
}
51+
52+
p {
53+
font-size: 1.2rem;
54+
color: #666;
55+
padding: 5px 20px;
56+
}
57+
58+
.score {
59+
font-size: 1.3rem;
60+
color: #333;
61+
margin-bottom: 20px;
62+
text-align: left;
63+
}
64+
65+
a {
66+
color: #551a8b;
67+
font-size: 1.2rem;
68+
}
69+
70+
a:hover {
71+
color: #72469b;
72+
}
73+
74+
a:active {
75+
color: rgb(47, 47, 247);
76+
}
77+
78+
/* Notification Popup Styles */
79+
.notification {
80+
position: fixed;
81+
top: 20px;
82+
right: 20px;
83+
background-color: #333;
84+
color: #fff;
85+
padding: 15px 25px;
86+
border-radius: 8px;
87+
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
88+
opacity: 0;
89+
transform: translateY(-30px);
90+
transition: opacity 0.5s, transform 0.5s;
91+
z-index: 1000;
92+
}
93+
94+
.notification.show {
95+
opacity: 1;
96+
transform: translateY(0);
97+
}
98+
99+
.close-btn {
100+
position: absolute;
101+
top: 10px;
102+
right: 10px;
103+
margin-left: 15px;
104+
color: #ff7373;
105+
cursor: pointer;
106+
background: none;
107+
border: none;
108+
font-size: 1.2rem;
109+
font-weight: bold;
110+
}
111+
112+
/* Media Queries for responsiveness */
113+
@media (max-width: 768px) {
114+
h1 {
115+
font-size: 2rem;
116+
/* Further adjust font size */
117+
}
118+
119+
.score {
120+
font-size: 1rem;
121+
/* Further adjust font size */
122+
}
123+
124+
p {
125+
font-size: 0.9rem;
126+
/* Further adjust font size */
127+
}
128+
}
129+
130+
@media (max-width: 480px) {
131+
.game-container {
132+
width: 100vw;
133+
/* Full width on very small screens */
134+
height: 50vh;
135+
/* Adjust height */
136+
}
137+
138+
.logo {
139+
width: 60px;
140+
/* Smaller logo size */
141+
height: 60px;
142+
}
143+
144+
h1 {
145+
font-size: 1.5rem;
146+
/* Further adjust font size */
147+
}
148+
149+
p {
150+
font-size: 0.8rem;
151+
/* Further adjust font size */
152+
}
153+
154+
.score {
155+
font-size: 0.9rem;
156+
/* Further adjust font size */
157+
}
158+
159+
.notification {
160+
padding: 8px 15px;
161+
/* Adjust padding */
162+
max-width: 70%;
163+
/* Full width on very small screens */
164+
}
165+
166+
.close-btn {
167+
font-size: 0.9rem;
168+
}
169+
}
170+
</style>
171+
</head>
172+
173+
<body>
174+
<!-- <img src="logo-bg.png" alt="RecodeHive logo"> -->
175+
<div class="container">
176+
<div class="score" id="score">Score: 0</div>
177+
<div class="game-container" id="game-container">
178+
<div class="logo" id="logo"></div>
179+
<h1>404 - Page Not Found</h1>
180+
<p>Sorry, the page you're looking for does not exist. Try catching the logo!</p>
181+
<a href="/">Go Back Home</a>
182+
</div>
183+
</div>
184+
<!-- Notification Popup -->
185+
<div class="notification" id="notification">
186+
Oops! Looks like you've wandered off track. While you're here, try catching the logo for some fun.
187+
<button class="close-btn" id="close-btn">&times;</button>
188+
</div>
189+
190+
<!-- // linking script -->
191+
<script src="js/404.js"></script>
192+
</body>
193+
194+
</html>

‎Website/about.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>About | ML Repos</title>
7+
<link rel="icon" href="logo-bg.png" type="image/png">
8+
</head>
9+
<body>
10+
<h1>This is the about page</h1>
11+
</body>
12+
</html>

‎Website/contact.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Contact | ML Repos</title>
7+
<link rel="icon" href="logo-bg.png" type="image/png">
8+
</head>
9+
<body>
10+
<h1>This is the Contact page</h1>
11+
</body>
12+
</html>

‎Website/faq.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>FAQ | ML Repos</title>
7+
<link rel="icon" href="logo-bg.png" type="image/png">
8+
</head>
9+
<body>
10+
<h1>This is the FAQ page</h1>
11+
</body>
12+
</html>

0 commit comments

Comments
 (0)