basit
/
personal-web
mirror of https://github.com/rjbasitali/personal-web
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
personal-web/public/404.html

378 lines
9.1 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script>
(function(w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({
"gtm.start": new Date().getTime(),
event: "gtm.js"
});
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
dl = l != "dataLayer" ? "&l=" + l : "";
j.async = true;
j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, "script", "dataLayer", "GTM-XXXXXXX");
</script>
<title>404 Page Not Found | Raditian</title>
<style>
.rad-fade-in {
will-change: opacity, transform;
animation-name: rad-fade-in-fallback;
animation-duration: 5s;
animation-fill-mode: both;
}
@keyframes rad-fade-in-fallback {
0% {
opacity: 0;
}
75% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fonts-loaded .rad-fade-in.rad-waiting {
animation-name: none;
opacity: 0;
}
.fonts-loaded .rad-fade-in.rad-animate {
animation-name: rad-fade-in;
animation-duration: 1.1s;
animation-fill-mode: both;
}
@keyframes rad-fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.rad-fade-in-long {
will-change: opacity, transform;
animation-name: rad-fade-in-long-fallback;
animation-duration: 8s;
animation-fill-mode: both;
}
@keyframes rad-fade-in-long-fallback {
0% {
opacity: 0;
}
75% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fonts-loaded .rad-fade-in-long.rad-waiting {
animation-name: none;
opacity: 0;
}
.fonts-loaded .rad-fade-in-long.rad-animate {
animation-name: rad-fade-in-long;
animation-duration: 2s;
animation-fill-mode: both;
}
@keyframes rad-fade-in-long {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.rad-fade-down {
will-change: opacity, transform;
animation-name: rad-fade-down-fallback;
animation-duration: 5s;
animation-fill-mode: both;
transform: translateY(-30px);
}
@keyframes rad-fade-down-fallback {
0% {
opacity: 0;
transform: translateY(-30px);
}
75% {
opacity: 0;
transform: translateY(-30px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fonts-loaded .rad-fade-down.rad-waiting {
animation-name: none;
opacity: 0;
transform: translateY(-30px);
}
.fonts-loaded .rad-fade-down.rad-animate {
animation-name: rad-fade-down;
animation-duration: 1.1s;
}
@keyframes rad-fade-down {
0% {
opacity: 0;
transform: translateY(-30px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.rad-scale-down {
will-change: opacity, transform;
animation-name: rad-scale-down-fallback;
animation-duration: 5s;
animation-fill-mode: both;
transform-origin: 50% 0;
}
@keyframes rad-scale-down-fallback {
0% {
opacity: 0;
transform: scaleY(0.95);
}
75% {
opacity: 0;
transform: scaleY(0.95);
}
100% {
opacity: 1;
transform: scaleY(1);
}
}
.fonts-loaded .rad-scale-down.rad-waiting {
animation-name: none;
opacity: 0;
transform: scaleY(0.95);
}
.fonts-loaded .rad-scale-down.rad-animate {
animation-name: rad-scale-down;
animation-duration: 1.1s;
animation-fill-mode: both;
}
@keyframes rad-scale-down {
0% {
opacity: 0;
transform: scaleY(0.95);
}
100% {
opacity: 1;
transform: scaleY(1);
}
}
</style>
<link rel="stylesheet" href='https://rjbasitali.com/css/main.css' />
<link rel="stylesheet" href='https://rjbasitali.com/css/rad-icons.css' />
</head>
<body>
<header class="header fixed-top rad-animation-group" id="header">
<div class="container rad-fade-in">
<nav class="navbar navbar-expand-lg navbar-light p-0">
<a class="navbar-brand" href="https://rjbasitali.com/">
<span>Basit</span>
<span>Ali</span>
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent, #header"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-lg-auto">
<li class="nav-item">
<a class="nav-link" href="https://rjbasitali.com/">HOME</a>
</li>
<li class="nav-item">
<a data-scroll class="nav-link" href="#about"
>ABOUT</a
>
</li>
<li class="nav-item">
<a data-scroll class="nav-link" href="#experience"
>EXPERIENCE</a
>
</li>
<li class="nav-item">
<a data-scroll class="nav-link" href="#contact"
>CONTACT</a
>
</li>
</ul>
</div>
</nav>
</div>
</header>
<section class="section four-o-four">
<div class="container text-center">
<h1 class="display-1">404</h1>
<h4>Page not found</h4>
<p>
Sorry, but the page you were looking for could not be found.
</p>
<a href="https://rjbasitali.com/" class="btn btn-primary">Back to homepage</a>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="footer__left">
<div class="footer__copy">
© RjBasitAli. All rights reserved.
</div>
</div>
<div class="footer__links">
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link" href="/">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://rjbasitali.com/">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://rjbasitali.com/">EXPERIENCE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://rjbasitali.com/">CONTACT</a>
</li>
</ul>
</div>
<div class="footer__right">
<a href="https://radity.com/"
><img
src="https://rjbasitali.com/"
srcset="https://rjbasitali.com/ 1x, https://rjbasitali.com/ 2x"
alt=""
/></a>
</div>
</div>
</footer>
<script src='https://rjbasitali.com/js/rad-animations.js'></script>
<script src='https://rjbasitali.com/js/library/lozad.min.js'></script>
<script>
window.addEventListener("load", function() {
var observer = window.lozad(".lozad", {
rootMargin: window.innerHeight / 2 + "px 0px",
threshold: 0.01
});
observer.observe();
});
</script>
<script src='https://rjbasitali.com/js/library/jquery-3.3.1.slim.min.js'></script>
<script src='https://rjbasitali.com/js/library/bootstrap.min.js'></script>
<script src='https://rjbasitali.com/js/sticky-header.js'></script>
<script src='https://rjbasitali.com/js/library/smooth-scroll.polyfills.min.js'></script>
<script src='https://rjbasitali.com/js/library/fontfaceobserver.js'></script>
<script>
(function(w) {
if (w.document.documentElement.className.indexOf("fonts-loaded") > -1) {
return;
}
var fontA = new w.FontFaceObserver("Inter", {
weight: 300
});
var fontB = new w.FontFaceObserver("Inter", {
weight: 400
});
var fontC = new w.FontFaceObserver("Inter", {
weight: 500
});
var fontD = new w.FontFaceObserver("Inter", {
weight: 600
});
var fontE = new w.FontFaceObserver("Inter", {
weight: 700
});
var fontF = new w.FontFaceObserver("Inter", {
weight: 900
});
w.Promise.all([fontA.load(), fontC.load(), fontF.load()]).then(function() {
w.document.documentElement.className += " fonts-loaded";
});
})(this);
</script>
<script>
const scroll = new SmoothScroll('a[href*="#"]');
$('a.nav-link').on('click', () => {
const navbar = $('.navbar-collapse');
if (navbar && navbar.hasClass('show')) {
$('.navbar-toggler').click();
}
})
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink