Merge pull request #1 from zuri-training/alpha

404, 504 and Base Pages
zuri-training · Jul 29, 2022 · cfd0cbf · cfd0cbf
2 parents 351b403 + 57f7b45
commit cfd0cbf
Show file tree

Hide file tree

Showing 19 changed files with 365 additions and 0 deletions.
diff --git a/404_error.html b/404_error.html
@@ -0,0 +1,90 @@
+<!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">
+    <title>Document</title>
+    <style>
+
+        /* Imported the font "Inter" from the google font library. */
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap');
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        /* To make it easier to access certain values and change them globally,
+            a root style system has been created. Mainly for colors, fonts, etc. */
+        :root {
+            --bkg: #00A9A5;
+            --txt: #fff;
+            --txt2: #424242;
+            --font1: 'Inter', sans-serif;
+        }
+
+        body {
+            width: 100%;
+        }
+
+        /* The error element styling */
+        .error {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            height: 700px;
+            gap: 24px;
+        }
+
+        .error img {
+            width: 500px;
+        }
+
+        .error h1 {
+            font-family: var(--font1);
+            font-size: 26px;
+            font-weight: 700;
+            text-align: center;
+            color: var(--txt2);
+        }
+        .error button {
+            padding: 14px 28px;
+            border-radius: 8px;
+            border: none;
+            background-color:var(--bkg);
+            color: var(--txt);
+            font-family: var(--font1);
+            font-size: 16px;
+            font-weight: 700;
+        }
+
+        @media screen and (max-width: 400px){
+            .error {
+                width: 80%;
+                margin: 0 auto;
+
+            }
+            .error img {
+                width: 350px;
+            }
+            .error h1, button {
+                font-family: var(--font1);
+                font-size: 16px;
+                font-weight: 700; 
+            }
+        }
+    </style>
+</head>
+<body>
+    <main>
+        <div class="error">
+            <img src="assets/image 1.png" alt="404 image">
+            <h1>Oops, We can't seem to find<br>
+                the page that you are looking for.</h1>
+            <button>Back to Home</button>
+        </div>
+    </main>
+</body>
+</html>
diff --git a/504_error.html b/504_error.html
@@ -0,0 +1,103 @@
+<!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">
+    <title>Document</title>
+    <style>
+
+        /* Imported the font "Inter" from the google font library. */
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap');
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        /* To make it easier to access certain values and change them globally,
+            a root style system has been created. Mainly for colors, fonts, etc. */
+        :root {
+            --bkg: #00A9A5;
+            --txt: #fff;
+            --txt2: #424242;
+            --font1: 'Inter', sans-serif;
+        }
+
+        body {
+            width: 100%;
+            /* display: flex;
+            align-items: center;
+            justify-content: center; */
+        }
+
+        /* The error element styling */
+        .error {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            height: 700px;
+            gap: 24px;
+            margin-top: 25px;
+        }
+
+        .error img {
+            width: 775px;
+        }
+
+        .error h1 {
+            font-family: var(--font1);
+            font-size: 28px;
+            font-weight: 700;
+            text-align: center;
+            color: var(--txt2);
+            line-height: 34px;
+        }
+        .error button {
+            padding: 14px 28px;
+            border-radius: 8px;
+            border: none;
+            background-color:var(--bkg);
+            color: var(--txt);
+            font-family: var(--font1);
+            font-size: 16px;
+            font-weight: 700;
+        }
+
+        @media screen and (max-width: 400px){
+            .error {
+                width: 80%;
+                margin: 0 auto;
+                gap: 32px;
+
+            }
+            .error img {
+                width: 375px;
+            }
+            .error h1, button {
+                font-family: var(--font1);
+                font-size: 14px;
+                font-weight: 700;
+                text-align: left;
+            }
+            .error br {
+                display: none;
+            }
+            .error .mobile {
+                display: inline-block;
+            }
+        }
+    </style>
+</head>
+<body>
+    <main>
+        <div class="error">
+            <img src="assets/rafiki.png" alt="504 image">
+            <h1>The server encountered a temporary error and could not complete<br>
+                your request. <br class="mobile">Please try again in 30 seconds.</h1>
+            <button>Reload page</button>
+        </div>
+    </main>
+</body>
+</html>
diff --git a/assets/404 PAGE NOT FOUND - Desktop.png b/assets/404 PAGE NOT FOUND - Desktop.png
diff --git a/assets/Forgot Password - Mobile.png b/assets/Forgot Password - Mobile.png
diff --git a/assets/Forgot password - Desktop.png b/assets/Forgot password - Desktop.png
diff --git a/assets/IMAGE (1).png b/assets/IMAGE (1).png
diff --git a/assets/IMAGE.png b/assets/IMAGE.png
diff --git a/assets/Icon.png b/assets/Icon.png
diff --git a/assets/Page not Found - Mobile.png b/assets/Page not Found - Mobile.png
diff --git a/assets/Search.png b/assets/Search.png
diff --git a/assets/Sign in page.png b/assets/Sign in page.png
diff --git a/assets/Yasmine.jpg b/assets/Yasmine.jpg
diff --git a/assets/bell.png b/assets/bell.png
diff --git a/assets/hamburger.png b/assets/hamburger.png
diff --git a/assets/image 1.png b/assets/image 1.png
diff --git a/assets/mic.png b/assets/mic.png
diff --git a/assets/rafiki.png b/assets/rafiki.png
diff --git a/assets/video_upload.png b/assets/video_upload.png
diff --git a/base.html b/base.html
@@ -0,0 +1,172 @@
+<!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">
+    <title>Base page</title>
+    <style>
+        @import url("https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Roboto:wght@100;300&display=swap");
+
+        * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+        /* outline: 1px solid green; */
+        }
+        :root {
+            --bkg: #00A9A5;
+            --txt: #fff;
+            --txt2: #424242;
+            --font1: 'Inter', sans-serif;
+        }
+        body {
+            width: 100%;
+            background-color: rgb(180, 171, 189);
+        }
+        header {
+            display: flex;
+            flex-direction: column;
+            gap: 100px;
+        }
+
+        .container {
+            background-color: #ffffff;
+        }
+
+
+        /* Unregistered Nav Bar */
+        nav {
+            margin: 0 40px;
+            height: 72px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+        nav a {
+            text-decoration: none;
+        }
+        .leftnav {
+            display: flex;
+            gap: 25px;
+        }
+        .middle {
+            display: flex;
+            gap: 25px;
+        }
+        .search {
+            display: flex;
+            gap: 0;
+        }
+        .search input {
+            font-family: var(--font1);
+            font-weight: 700;
+            font-size: 14px;
+            color: #A6A6A6;;
+            width: 480px;
+            height: 40px;
+            padding: 12px 16px;
+            border-radius: 4px 0px 0px 4px;
+            border: 1px solid #A6A6A6;
+        }
+        .search button {
+            width: 50px;
+            height: 40px;
+            border-radius: 0px 4px 4px 0px;
+            border: 1px solid #A6A6A6;
+            cursor: pointer;
+        }
+        .search button img {
+            width: 18px;
+        }
+        .middle .micbtn {
+            background-color: transparent;
+            border: none;
+        }
+        .middle button img {
+            width: 18px;
+            height: 22px;
+            cursor: pointer;
+        }
+        nav ul {
+            display: flex;
+            gap: 25px;
+            list-style: none;
+        }
+        nav ul li button {
+            font-family: var(--font1);
+            font-weight: 700;
+            font-size: 14px;
+            border: none;
+            border-radius: 2.5px;
+            background-color: var(--bkg);
+            color: var(--txt);
+            padding: 10px 30px;
+            cursor: pointer;
+        }
+
+        /* Registered Nav Bar */
+        nav .rightnav {
+            display: flex;
+            gap: 25px;
+            justify-content: center;
+            align-items: center;
+        }
+        .rightnav button {
+            background-color: transparent;
+            border: none;
+        }
+        nav .rightnav .icons {
+            width: 22px;
+        }
+    </style>
+</head>
+<body>
+    <!-- This will be used to store elements that will exist on other pages eg
+        Navigation Bar, Likes and Comments, etc. -->
+    <!-- Unregistered Nav Bar HTML -->
+    <header>
+        <div class="container">
+            <nav class="unregistered">
+                <div class="leftnav">
+                    <a href=""><img src="assets/hamburger.png" alt=""></a>
+                    <a href=""><img src="assets/Icon.png" alt=""></a>
+                </div>
+                <div class="middle">
+                    <div class="search">
+                        <input type="search" placeholder="Search?" id="">
+                        <button><img src="assets/Search.png" alt=""></button>
+                    </div>
+                    <button class="micbtn"><img class="mic" src="assets/mic.png" alt=""></button>
+                </div>
+                <ul>
+                    <li><button>Sign In</button></li>
+                    <li><button style="background-color: #EEEEEE; color:#00A9A5">Sign Up</button></li>
+                </ul>
+            </nav>
+        </div>
+
+        <!-- Registered Nav Bar HTML -->
+        <div class="container">
+            <nav class="registered">
+                <div class="leftnav">
+                    <a href=""><img src="assets/hamburger.png" alt=""></a>
+                    <a href=""><img src="assets/Icon.png" alt=""></a>
+                </div>
+                <div class="middle">
+                    <div class="search">
+                        <input type="search" placeholder="Search?" id="">
+                        <button><img src="assets/Search.png" alt=""></button>
+                    </div>
+                    <button class="micbtn"><img class="mic" src="assets/mic.png" alt=""></button>
+                </div>
+                <div class="rightnav">
+                    <button><img  class="icons" src="assets/video_upload.png" alt=""></button>
+                    <button ><img class="icons" src="assets/bell.png" alt=""></button>
+                    <button"><img style="border-radius: 100%; width: 32px;" src="assets/Yasmine.jpg" alt=""></button>
+                </div>
+            </nav>
+        </div>
+    </header>
+</body>
+</html>