├── README.md ├── index.html ├── photos └── preview.png └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # 404-Not-Found-Template 2 | This is a 404 template made using HTML and CSS 3 | 4 | Below is the preview of this 404 page: 5 | 6 | ![Preview of 404 page](https://github.com/tilakjain123/404-Not-Found-Template/blob/main/photos/preview.png) 7 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 404 Not Found | Evil Corp 10 | 11 | 12 | 13 | 14 |
15 | 27 |
28 |
29 |

Evil Corp

30 |
31 |
32 |

404 :(

33 |
34 |

Looks like you have lost your way!

35 | 36 |
37 |
38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /photos/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tilakjain123/404-Not-Found-Template/8b98326f14add89e63442e34e38c159a8db30f31/photos/preview.png -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap'); 2 | * { 3 | margin: 0; 4 | /*reset*/ 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | :root{ 9 | --white: rgb(236, 235, 232); 10 | } 11 | body{ 12 | font-family: 'Roboto', sans-serif; 13 | color: var(--white); 14 | overflow: hidden; 15 | } 16 | a{ 17 | text-decoration: none; 18 | color: var(--white); 19 | } 20 | /* background */ 21 | .area { 22 | background: #4e54c8; 23 | background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8); 24 | width: 100%; 25 | position: fixed; 26 | z-index: -1; 27 | height: 100vh; 28 | } 29 | .circles { 30 | position: absolute; 31 | top: 0; 32 | left: 0; 33 | width: 100%; 34 | height: 100%; 35 | overflow: hidden; 36 | } 37 | .circles li { 38 | position: absolute; 39 | display: block; 40 | list-style: none; 41 | width: 20px; 42 | height: 20px; 43 | background: rgba(255, 255, 255, 0.2); 44 | animation: animate 25s linear infinite; 45 | bottom: -150px; 46 | } 47 | .circles li:nth-child(1) { 48 | left: 25%; 49 | width: 80px; 50 | height: 80px; 51 | animation-delay: 0s; 52 | } 53 | .circles li:nth-child(2) { 54 | left: 10%; 55 | width: 20px; 56 | height: 20px; 57 | animation-delay: 2s; 58 | animation-duration: 12s; 59 | } 60 | .circles li:nth-child(3) { 61 | left: 70%; 62 | width: 20px; 63 | height: 20px; 64 | animation-delay: 4s; 65 | } 66 | .circles li:nth-child(4) { 67 | left: 40%; 68 | width: 60px; 69 | height: 60px; 70 | animation-delay: 0s; 71 | animation-duration: 18s; 72 | } 73 | .circles li:nth-child(5) { 74 | left: 65%; 75 | width: 20px; 76 | height: 20px; 77 | animation-delay: 0s; 78 | } 79 | .circles li:nth-child(6) { 80 | left: 75%; 81 | width: 110px; 82 | height: 110px; 83 | animation-delay: 3s; 84 | } 85 | .circles li:nth-child(7) { 86 | left: 35%; 87 | width: 150px; 88 | height: 150px; 89 | animation-delay: 7s; 90 | } 91 | .circles li:nth-child(8) { 92 | left: 50%; 93 | width: 25px; 94 | height: 25px; 95 | animation-delay: 15s; 96 | animation-duration: 45s; 97 | } 98 | .circles li:nth-child(9) { 99 | left: 20%; 100 | width: 15px; 101 | height: 15px; 102 | animation-delay: 2s; 103 | animation-duration: 35s; 104 | } 105 | .circles li:nth-child(10) { 106 | left: 85%; 107 | width: 150px; 108 | height: 150px; 109 | animation-delay: 0s; 110 | animation-duration: 11s; 111 | } 112 | 113 | @keyframes animate { 114 | 115 | 0% { 116 | transform: translateY(0) rotate(0deg); 117 | opacity: 1; 118 | border-radius: 0; 119 | } 120 | 121 | 100% { 122 | transform: translateY(-1000px) rotate(720deg); 123 | opacity: 0; 124 | border-radius: 50%; 125 | } 126 | } 127 | /* website name (title) */ 128 | .title{ 129 | position: absolute; 130 | top: 2rem; 131 | left: 2rem; 132 | } 133 | .title h3::first-letter{ 134 | font-size: 1.8em; 135 | } 136 | /* main class */ 137 | .main{ 138 | display: flex; 139 | flex-wrap: wrap; 140 | height: 100vh; 141 | align-content: center; 142 | justify-content: center; 143 | padding: 10px; 144 | } 145 | /* error 404 */ 146 | .error{ 147 | margin: auto; 148 | } 149 | .error h1{ 150 | font-size: 12rem; 151 | } 152 | .msg{ 153 | margin: auto; 154 | text-align: center; 155 | } 156 | .msg p{ 157 | font-size: 1.3rem; 158 | margin: 4px 0; 159 | } 160 | .btn{ 161 | padding: 10px 13px; 162 | outline: none; 163 | border: 1px solid var(--white); 164 | cursor: pointer; 165 | background: transparent; 166 | border-radius: 4px; 167 | color: var(--white); 168 | margin: 1rem 0; 169 | transition: 0.2s; 170 | font-size: 1.3rem; 171 | } 172 | .btn:hover{ 173 | background: var(--white); 174 | color: rgb(14, 13, 13); 175 | } 176 | /* responsive media queries */ 177 | @media (max-width: 800px){ 178 | .error h1{ 179 | font-size: 6rem; 180 | } 181 | } 182 | --------------------------------------------------------------------------------