Skip to content

Fix: Updated 404 page, added navbar and footer components #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
SlyPredator merged 1 commit into from
Jan 2, 2026
Merged

Fix: Updated 404 page, added navbar and footer components #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
309 changes: 108 additions & 201 deletions 404.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,246 +3,153 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />

<title>RIGNITC | Page Not Found</title>
<link rel="icon" type="image/png" href="https://mummanajagadeesh.github.io/RIGNITC/assets/images/logo.webp">
<link rel="canonical" href="https://rignitc.com/404" />
<link rel="icon" type="image/png" href="/assets/images/logog.webp" />

<!-- Global styles -->
<link rel="stylesheet" href="/src/styles/fonts.css" />
<link rel="stylesheet" href="/src/styles/navbar.css" />
<link rel="stylesheet" href="/src/styles/footer.css" />
<link rel="stylesheet" href="/src/styles/cursor.css" />

<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;600;800&family=Sora:wght@400;600&family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;600;800&family=Sora:wght@400;600&family=Orbitron:wght@400;700&display=swap" rel="stylesheet" />

<style>
/* ================= NAVBAR ================= */
nav {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(10, 10, 10, 0.8);
backdrop-filter: blur(18px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(180%);
padding: 14px 40px;
border-radius: 16px;
border: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 6px 28px rgba(0,0,0,0.55);
z-index: 1000;
min-width: 65%;
max-width: 1100px;
font-family: "Inter", "Segoe UI", "Roboto", sans-serif;
:root {
--bg:#000;
--fg:#fff;
--radius:14px;
}
.logo { display:block;width:50px;height:auto;z-index:2; }
.logo img { width:100%;height:auto;display:block; }
.nav-links { display:flex;gap:2.2rem;z-index:2; }
.nav-links a {
text-decoration:none;
font-weight:500;
padding:6px 2px;
transition:all 0.35s ease;
color:#cfcfcf;
position:relative;
letter-spacing:0.5px;
font-size:0.95rem;
}
.nav-links a::after {
content:"";
position:absolute;
left:0;
bottom:-6px;
width:100%;
height:1.5px;
background:linear-gradient(90deg,#666,#aaa,#666);
border-radius:2px;
transform:scaleX(0);
transform-origin:right;
transition:transform 0.35s ease;
}
.nav-links a:hover::after { transform:scaleX(1);transform-origin:left; }
.nav-links a:hover {
color:#f1f1f1;
text-shadow:0 0 10px rgba(255,255,255,0.4);
transform:translateY(-2px);
}
.btn-sponsor {
background:linear-gradient(135deg,#2a2a2a,#111);
color:#e0e0e0;
border:1px solid rgba(255,255,255,0.25);
border-radius:12px;
padding:11px 28px;
font-weight:700;
font-size:0.95rem;
text-decoration:none;
letter-spacing:1px;
text-transform:uppercase;
transition:transform 0.35s ease,box-shadow 0.35s ease,border 0.35s ease;
position:relative;
overflow:hidden;
z-index:1;
box-shadow:inset 0 1px 3px rgba(255,255,255,0.08),0 4px 18px rgba(0,0,0,0.6);

* {
box-sizing:border-box;
margin:0;
padding:0;
}
.btn-sponsor::before {
content:"";
position:absolute;
top:0;left:-75%;
width:50%;height:100%;
background:linear-gradient(120deg,transparent,rgba(255,255,255,0.3),transparent);
transform:skewX(-20deg);
transition:left 0.8s ease;

html, body {
min-height:100%;
}
.btn-sponsor:hover::before { left:130%; }
.btn-sponsor:hover {
transform:translateY(-2px) scale(1.03);
border-color:rgba(255,255,255,0.35);
box-shadow:0 6px 20px rgba(255,255,255,0.15),inset 0 1px 4px rgba(255,255,255,0.1);
background:linear-gradient(135deg,#333,#1a1a1a);

body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
background: var(--bg);
color: var(--fg);
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto;
}
nav.dark { background:linear-gradient(145deg,#1c1c1c,#101010);border:1px solid rgba(255,255,255,0.12); }
nav.dark .nav-links a { color:#bdbdbd; }
nav.dark .nav-links a:hover { color:#fff; }
nav.dark .btn-sponsor { background:linear-gradient(135deg,#2e2e2e,#111); }

@media (max-width:768px) {
nav {
padding:12px 18px;
min-width:92%;
max-width:92%;
border-radius:14px;
position:relative;
}
.logo { width:42px;margin:0; }
.nav-links {
max-height:0;
overflow:hidden;
flex-direction:column;
gap:1rem;
position:absolute;
top:100%;
left:0;
width:100%;
padding:0 16px;
background:rgba(20,20,20,0.95);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
border-radius:0 0 14px 14px;
box-shadow:0 6px 20px rgba(0,0,0,0.65);
transition:max-height 0.35s ease,padding 0.35s ease;
}
nav:hover .nav-links,nav:focus-within .nav-links { max-height:400px;padding:16px; }
nav::after {
content:"≡";
font-size:1.6rem;
color:#fff;
position:absolute;
right:16px;
top:50%;
transform:translateY(-50%);
line-height:1;
pointer-events:none;
}
nav>.btn-sponsor { display:none!important; }
.nav-links .btn-sponsor { display:block;width:100%;text-align:center;margin-top:8px;order:99; }

/* main should take remaining space */
main {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 120px 22px;
width: 100%;
}

/* =============== PAGE STYLES =============== */
:root{--bg:#000;--fg:#fff;--radius:14px;}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;min-height:100%;overflow-y:scroll}
body{
background:var(--bg);
color:var(--fg);
font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
padding:120px 22px;
/* footer should stretch full width */
#footer-placeholder {
width: 100%;
}

/* New: animated PNG wrapper */
.error-art{
.error-art {
display:flex;
flex-direction:column;
align-items:center;
gap:14px;
margin:40px 0 20px;
}
.error-art img{
width:min(680px,92vw);
height:auto;
border-radius:16px;
box-shadow:0 8px 30px rgba(0,0,0,0.55);
border:1px solid rgba(255,255,255,0.08);

.error-art img {
filter: grayscale(100%) contrast(100%);
width: min(680px, 92vw);
border-radius: 16px;
box-shadow: 0 8px 30px rgba(0,0,0,0.55);
border: 1px solid rgba(255,255,255,0.08);
}

.tagline{color:rgba(255,255,255,0.85);font-weight:600;margin-top:10px;font-size:1rem;}
.error-message{font-size:1.3rem;color:rgba(255,255,255,.82);margin-bottom:24px;}
.home-link{
display:inline-block;
.tagline {
font-weight:600;
color:rgba(255,255,255,0.85);
margin-top:10px;
}

.error-message {
font-size:1.2rem;
color:rgba(255,255,255,.8);
margin-bottom:24px;
}

.home-link {
background:var(--fg);
color:var(--bg);
text-decoration:none;
padding:12px 28px;
border-radius:var(--radius);
text-decoration:none;
font-weight:700;
transition:all .3s ease;
transition:.3s ease;
}
.home-link:hover{background:rgba(255,255,255,.85);color:var(--bg);}
@media(max-width:720px){
.error-message{font-size:1.1rem}

.home-link:hover {
background:rgba(255,255,255,.85);
}

/* Optional: keep "404" for screen readers only */
.sr-only{
position:absolute!important;
width:1px;height:1px;
padding:0;margin:-1px;overflow:hidden;
clip:rect(0,0,0,0);white-space:nowrap;border:0;
.sr-only {
position:absolute;
width:1px;
height:1px;
overflow:hidden;
clip:rect(0,0,0,0);
}
</style>
</head>

<body>
<!-- NAV -->
<nav class="dark" id="navbar">
<a href="../" class="logo">
<img src="https://mummanajagadeesh.github.io/RIGNITC/assets/images/logo.webp" alt="RIGNITC logo" style="filter: grayscale(1) invert(1);">
</a>
<div class="nav-links">
<a href="../about/">About Us</a>
<a href="../projects/">Projects</a>
<a href="../achievements/">Achievements</a>
<a href="../activities/">Activities</a>
<a href="../team/">Team</a>
<a href="../contact/">Contact</a>
</div>
<a class="btn-sponsor" href="../contact/?name=Your%20name%20%2F%20organization&email=contact%40company.com&message=Interested%20in%20discussing%20partnership%20or%20sponsorship%20possibilities%2E
">Sponsor Us</a>
</nav>

<!-- MAIN -->
<!-- Navbar -->
<div id="navbar-placeholder"></div>

<!-- Main content -->
<main>
<!-- Screen-reader-only fallback text -->
<h1 class="sr-only">404 — Page Not Found</h1>

<!-- Animated PNG instead of the big 404 text -->
<figure class="error-art" aria-label="Page not found">
<img
src="https://rignitc.com/assets/images/main/404.webp"
alt="Animated illustration for a missing page"
loading="eager"
decoding="async"
style="
filter: grayscale(100%) contrast(200%);
image-rendering: pixelated;
"
/>

<figure class="error-art">
<img
src="https://rignitc.com/assets/images/main/404.webp"
alt="Page not found illustration"
loading="eager"
/>
</figure>

<div class="tagline">Oops! The page you are looking for does not exist.</div>
<br>
<p class="error-message">It might have been moved or never existed. You can return to the homepage.</p>
<p class="error-message">
It might have been moved or never existed.
</p>

<a href="https://rignitc.com" class="home-link">Go Back Home</a>
</main>
<script src="./assets/js/mobile-navbar.js"></script>

<!-- Footer -->
<div id="footer-placeholder"></div>

<!-- Cursor -->
<div class="cursor"></div>
<div class="cursor-ring"></div>

<!-- Scripts -->
<script src="/src/scripts/cursor.js"></script>
<script src="/src/scripts/mobile-navbar.js"></script>
<script src="/src/scripts/componentLoader.js"></script>
<script>
loadComponent("navbar-placeholder", "/src/components/navbar.html");
loadComponent("footer-placeholder", "/src/components/footer.html");
</script>
</body>
</html>
</html>
4 changes: 4 additions & 0 deletions src/pages/activities/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@
<meta name="keywords" content="RIGNITC activities, robotics workshops, technical exhibitions, NIT Calicut, engineering workshops, robotics demonstrations, tech exhibitions, student activities" />
<meta name="robots" content="index, follow" />
<meta name="author" content="RIGNITC" />
<link rel="stylesheet" href="/src/styles/navbar.css" />
<link rel="stylesheet" href="/src/styles/cursor.css" />
<link rel="stylesheet" href="/src/styles/fonts.css" />


<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
Expand Down