talobyte · talobyte · May 14, 2022
diff --git a/Text Responsive 404 website.txt b/Text Responsive 404 website.txt
@@ -0,0 +1,16 @@
+========== HOME ==========
+.home__subtitle
+Error 404
+
+.home__title
+Hey Buddy
+
+.home__description
+We can't seem to find the page <br> you are looking for.
+
+.home__button
+Go Home
+
+.home__footer
+(554) 987-654
+[email protected]
diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -0,0 +1,93 @@
+/*=============== GOOGLE FONTS ===============*/
+@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap");
+
+/*=============== VARIABLES CSS ===============*/
+:root {
+  --header-height: 3.5rem;
+
+  /*========== Colors ==========*/
+  /*Color mode HSL(hue, saturation, lightness)*/
+  --first-color: hsl(38, 69%, 59%);
+  --text-color: hsl(38, 8%, 8%);
+
+  /*========== Font and typography ==========*/
+  /*.5rem = 8px | 1rem = 16px ...*/
+  --body-font: 'Space Grotesk', sans-serif;
+  --biggest-font-size: 2.375rem;
+  --normal-font-size: .938rem;
+  --smaller-font-size: .75rem;
+}
+
+/* Responsive typography */
+@media screen and (min-width: 1024px) {
+  :root {
+    --biggest-font-size: 5rem;
+    --normal-font-size: 1rem;
+    --smaller-font-size: .813rem;
+  }
+}
+
+/*=============== BASE ===============*/
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+body {
+  font-family: var(--body-font);
+  font-size: var(--normal-font-size);
+  font-weight: 500;
+  color: var(--text-color);
+}
+
+ul {
+  list-style: none;
+}
+
+a {
+  text-decoration: none;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+/*=============== REUSABLE CSS CLASSES ===============*/
+.container {
+  max-width: 1024px;
+  margin-left: 1.5rem;
+  margin-right: 1.5rem;
+}
+
+.main {
+  overflow: hidden; /* For the animations ScrollReveal */
+}
+
+/*=============== HEADER & NAV ===============*/
+
+
+/* Show menu */
+
+
+/*=============== HOME ===============*/
+
+
+/* Animate ghost */
+
+
+/*=============== BREAKPOINTS ===============*/
+/* For small devices */
+
+
+/* For medium devices */
+
+
+/* For large devices */
+
+
+/* For 2K resolutions (2048 x 1152, 2048 x 1536) */
+
+
+/* For 4K resolutions (3840 x 2160, 4096 x 2160) */
diff --git a/assets/img/ghost-img.png b/assets/img/ghost-img.png
diff --git a/assets/js/main.js b/assets/js/main.js
@@ -0,0 +1,7 @@
+/*=============== SHOW MENU ===============*/
+
+
+/*=============== REMOVE MENU MOBILE ===============*/
+
+
+/*=============== SCROLL REVEAL ANIMATION ===============*/
diff --git a/assets/js/scrollreveal.min.js b/assets/js/scrollreveal.min.js
diff --git a/index.html b/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+    <html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+        <!--=============== BOXICONS ===============-->
+
+
+        <!--=============== CSS ===============-->
+        <link rel="stylesheet" href="">
+
+        <title>Responsive 404 website - Bedimcode</title>
+    </head>
+    <body>
+        <!--==================== HEADER ====================-->
+        <header class="header">
+
+        </header>
+
+        <!--==================== MAIN ====================-->
+        <main class="main">
+            <!--==================== HOME ====================-->
+            <section class="home">
+
+            </section>
+        </main>
+
+        <!--=============== SCROLLREVEAL ===============-->
+        <script src=""></script>
+
+        <!--=============== MAIN JS ===============-->
+        <script src=""></script>
+    </body>
+</html>
diff --git a/preview.png b/preview.png