Skip to content

Commit

Permalink
Added Error Pages Category and a Component (#1405)
Browse files Browse the repository at this point in the history
  • Loading branch information
@abhirajadhikary06
abhirajadhikary06 authored Dec 16, 2024
1 parent 04d85c5 commit 7cd4992
Show file tree
Hide file tree
Showing 4 changed files with 396 additions and 0 deletions.
43 changes: 43 additions & 0 deletions Components/Error-Pages/404-Error-Page/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!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">
<link rel="stylesheet" href="style.css">
<title>404 Error Page</title>
</head>

<body>
<div id="particles" class="particles">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<main>
<section>
<h1>Page Not Found!</h1>
<div>
<span>4</span>
<span class="circle">0</span>
<span>4</span>
</div>
<p>We are unable to find the page<br>you're looking for.</p>
<div>
<button>Back to Home Page</button>
</div>
</section>
</main>
</body>

</html>
204 changes: 204 additions & 0 deletions Components/Error-Pages/404-Error-Page/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,204 @@
* {
padding: 0;
margin: 0;
}

body {
background: radial-gradient(circle, rgb(28, 27, 90) 0%, rgb(15, 18, 44) 30%, rgb(15, 13, 31) 100%);
height: 100vh;
color: #efefef;
}

.particles {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
}

.particles span {
position: absolute;
top: 10%;
left: 10%;
display: block;
content: '';
width: 6px;
height: 6px;
background: rgba(255, 255, 255, 0.6);
border-radius: 0.5rem;
filter: blur(5px);

}

.particles span:nth-child(2) {
top: 15%;
left: 70%;
filter: blur(3px);
}

.particles span:nth-child(3) {
top: 70%;
left: 40%;
filter: blur(5px);
}

.particles span:nth-child(4) {
top: 52%;
left: 20%;
filter: blur(4px);
}

.particles span:nth-child(5) {
top: 74%;
left: 90%;
filter: blur(5px);
}

.particles span:nth-child(6) {
top: 85%;
left: 10%;
filter: blur(7px);
}

.particles span:nth-child(7) {
top: 67%;
left: 79%;
filter: blur(3px);
}

.particles span:nth-child(8) {
top: 48%;
left: 40%;
filter: blur(4px);
}

.particles span:nth-child(9) {
top: 45%;
left: 30%;
filter: blur(5px);
}

.particles span:nth-child(10) {
top: 96%;
left: 29%;
filter: blur(4px);
}

.particles span:nth-child(11) {
top: 55%;
left: 89%;
filter: blur(6px);
}

.particles span:nth-child(12) {
top: 55%;
left: 60%;
filter: blur(7px);
}

main {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: cursive;
}

main h1 {
font-weight: normal;
}

main h1 {
text-align: center;
text-shadow: 0 0 5px #c3d168a2;
}

main div {
margin-top: 2rem;
text-align: center;
}

main div span {
font-size: 5rem;
line-height: 6rem;
text-shadow: 0 0 7px #c3d168a2;
}

.circle {
user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
display: inline-block;
position: relative;
width: 6rem;
height: 6rem;
text-shadow: none;
background: #e6f1a3 radial-gradient(#f9ffd2, #ecff70);
color: rgba(0, 0, 0, 0);
border-radius: 50%;
box-shadow: 0 0 7px #e7f1a3a2;
}

.circle:after {
display: block;
position: absolute;
content: '';
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
width: 10rem;
height: 4rem;
border-radius: 50%;
border: 2px solid #fafafa;
border-top: 0px solid #fafafa;
border-bottom: 4px solid #fafafa;
z-index: 2
}

.circle:before {
display: block;
position: absolute;
content: '';
top: 50%;
left: 50%;
background: #124;
border-radius: 50%;
width: 4px;
height: 4px;
transform-origin: 2.5rem 0;
transform: translate(-2.5rem, 0) rotate(0deg);
animation: circle-around 5s infinite linear;
}

@keyframes circle-around {
0% {
transform: translate(-2.5rem, 0) rotate(0deg);
}

100% {
transform: translate(-2.5rem, 0) rotate(360deg);
}
}

main p {
margin-top: 3rem;
text-align: center;
text-shadow: 0 0 5px #c3d168a2;
}

main button {
padding: 0.55rem 1.2rem;
border: none;
outline: none;
appearance: none;
border-radius: 1rem;
background: rgb(17, 141, 44);
color: #fafafa;
box-shadow: 0 0 4px #e1f17859;
}

main button:hover {
cursor: pointer;
}
139 changes: 139 additions & 0 deletions assets/html_files/error-pages.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
<!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">
<link rel="icon" type="image/x-icon" href="../images/favicon.png">
<link rel="stylesheet" type="text/css" href="../../style.css">
<link rel="stylesheet" type="text/css" href="../css_files/cursor.css">
<link rel="stylesheet" type="text/css" href="../css_files/search.css">
<link rel="stylesheet" type="text/css" href="../css_files/commonstyle.css">
<link rel="stylesheet" type="text/css" href="../css_files/progressbar.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.8.1/font/bootstrap-icons.min.css">
<script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
<title>Beautiify | Error Pages</title>
</head>

<body>
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div>

<div id="progress-container">
<div id="progress-bar"></div>
</div>

<div class="circle-container">
<div class="circle" style="background-color: #3A0088; left: 504px; top: 59px; scale: 1;"></div>
<div class="circle" style="background-color: rgb(253, 175, 105); left: 504px; top: 59px; scale: 0.95;"></div>
<div class="circle" style="background-color: rgb(248, 157, 99); left: 504px; top: 59px; scale: 0.9;"></div>
<div class="circle" style="background-color: rgb(245, 151, 97); left: 504px; top: 59px; scale: 0.85;"></div>
<div class="circle" style="background-color: rgb(239, 134, 94); left: 504px; top: 59px; scale: 0.8;"></div>
<div class="circle" style="background-color: rgb(236, 128, 93); left: 504px; top: 59px; scale: 0.75;"></div>
<div class="circle" style="background-color: rgb(227, 110, 92); left: 504px; top: 59px; scale: 0.7;"></div>
<div class="circle" style="background-color: rgb(223, 104, 92); left: 504px; top: 59px; scale: 0.65;"></div>
<div class="circle" style="background-color: rgb(213, 88, 92); left: 504px; top: 59px; scale: 0.6;"></div>
<div class="circle" style="background-color: rgb(209, 82, 92); left: 504px; top: 59px; scale: 0.55;"></div>
<div class="circle" style="background-color: rgb(197, 65, 93); left: 504px; top: 59px; scale: 0.5;"></div>
<div class="circle" style="background-color: rgb(192, 59, 93); left: 504px; top: 59px; scale: 0.45;"></div>
<div class="circle" style="background-color: rgb(178, 44, 94); left: 504px; top: 59px; scale: 0.4;"></div>
<div class="circle" style="background-color: rgb(172, 38, 94); left: 504px; top: 59px; scale: 0.35;"></div>
<div class="circle" style="background-color: rgb(156, 21, 95); left: 504px; top: 59px; scale: 0.3;"></div>
<div class="circle" style="background-color: rgb(149, 15, 95); left: 504px; top: 59px; scale: 0.25;"></div>
<div class="circle" style="background-color: rgb(131, 0, 96); left: 504px; top: 59px; scale: 0.2;"></div>
<div class="circle" style="background-color: rgb(124, 0, 96); left: 504px; top: 59px; scale: 0.15;"></div>
<div class="circle" style="background-color: rgb(104, 0, 96); left: 504px; top: 59px; scale: 0.1;"></div>
<div class="circle" style="background-color: rgb(96, 0, 95); left: 504px; top: 59px; scale: 0.05;"></div>
</div>

<header class="header3">
<nav class="navbar">
<a href="../../index.html">
<div class="flex-container">
<div class="flex-item-left"><img src="../images/logo.png" width="37px" height="37px"></div>
<div class="flex-item-right" class="logo">Beautiify</div>
</div>
</a>

<ul class="nav-menu">
<li class="nav-item">
<a href="../../index.html" class="nav-link"><i class="fa-solid fa-house"></i> Home</a>
</li>
<li class="nav-item">
<a href="./about.html" class="nav-link"><i class="fa-solid fa-circle-info"></i> About</a>
</li>
<li class="nav-item">
<a href="../../index.html#components" class="nav-link"><i class="fa-solid fa-icons"></i> Components</a>
</li>
<li class="nav-item">
<a href="./contributor.html" class="nav-link"><i class="fa-solid fa-users"></i> Contributors</a>
</li>
<li class="nav-item">
<a href="./faq.html" class="nav-link"><i class="fa-solid fa-question-circle"></i> FAQ</a>
</li>
<li class="nav-item">
<a href="./contact.html" class="nav-link"><i class="fa-solid fa-phone"></i> Contact</a>
</li>
</ul>
<button id="dark-mode-toggle"></button>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>
</header>

<section>
<div class="heading">Error Pages</div>
<!-- Search Bar -->
<div id="searchBar">
<h1 class="SearchDarkMode">Search Error Page</h1><br>
<!-- Search input container -->
<div id="search-container">
<input type="text" id="componentSearch" placeholder="Enter Error Page Name" oninput="filtereachComponents()">
<!-- Search icon positioned inside the input field -->
<i class="fa fa-search" style="top: 35%; color: gray;"></i>
</div>
</div>

<div class="no-results">
<img src="../images/no-results.png" alt="" height="100px" width="100px">
<h2>Hmmm, we are not getting any result. <br> Our bad - Please try another search!</h2>
</div>

<div class="contain">
<div class="box">
<h1>404 Error Page</h1>
<div class="preview">
<a href="../../Components/Error-Pages/404-Error-Page/index.html" title="Live Preview" target="_blank">
<img src="../images/link.png">
</a>
</div>
<div class="source">
<a href="https://github.com/Rakesh9100/Beautiify/tree/main/Components/Error-Pages/404-Error-Page" title="Source Code" target="_blank">
<img src="../images/github.png">
</a>
</div>
</div>
</div>
</section>

<!-- Scroll To Top Button -->
<div id="progress">
<span id="progress-value" class="bi bi-arrow-up-short"></span>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="../../script.js"></script>
<script src="../js_files/cursor.js"></script>
<script src="../js_files/search.js"></script>
<script src="../js_files/commonscript.js"></script>
</body>

</html>
Loading

0 comments on commit 7cd4992

Please sign in to comment.