[add] Banner component improved [Fixes #51]

bilal · bilal · commit 6dfae7378801 · 2022-06-18T16:41:03.000+05:00
diff --git a/components/Banner.jsx b/components/Banner.jsx
@@ -1,15 +1,13 @@
 import React from "react";
-import styles from "../styles/Banner.module.css";
 
 const Banner = () => {
   return (
     <div>
-      <div className={styles.module}>
-        <h2 className={styles.stripe}></h2>
-        <h1 className={styles.text}>UNDER CONSTRUCTION</h1>
+      <div className="banner">
+        <div className="stripe"></div>
+        <div className="text">UNDER CONSTRUCTION</div>
       </div>
     </div>
   );
 };
-
 export default Banner;
diff --git a/pages/_app.jsx b/pages/_app.jsx
@@ -1,9 +1,11 @@
 import Navbar from "../components/Navbar.jsx";
 import "../styles/globals.css";
+import Banner from "../components/Banner.jsx";
 
 function MyApp({ Component, pageProps }) {
   return (
     <>
+      <Banner />
       <Navbar />
       <Component {...pageProps} />
     </>
diff --git a/pages/index.jsx b/pages/index.jsx
@@ -1,15 +1,12 @@
 import Head from "next/head";
 import Banner from "../components/Banner";
 import Image from "next/image";
-// import styles from '../styles/Home.module.css'
 import logo from "../public/reactdevske.svg";
 
 export default function Home() {
   return (
     <div className="">
-      
       <Head>
-      <Banner />
         <title>React Devs Kenya</title>
         <meta
           name="description"
diff --git a/styles/Banner.module.css b/styles/Banner.module.css
diff --git a/styles/globals.css b/styles/globals.css
@@ -9,7 +9,7 @@ body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-    background-color: #333333;
+  background-color: #333333;
 }
 
 a {
@@ -20,3 +20,28 @@ a {
 * {
   box-sizing: border-box;
 }
+
+/* styles for top under construction banner start here*/
+
+.banner {
+  background: white;
+}
+
+.banner>div {
+  padding: 1rem;
+}
+
+.stripe {
+  background: repeating-linear-gradient(-55deg, #222, rgb(34, 34, 34) 10px, rgb(229, 194, 0) 10px, rgb(229, 194, 0) 20px);
+}
+
+.text {
+  font-family: Verdana, Geneva, Tahoma, sans-serif;
+  text-align: center;
+  font-weight: bolder;
+  color: #222;
+  font-size: clamp(1rem, 1vw, 2rem);
+  background-color: rgb(229, 194, 0);
+}
+
+/* styles for top under construction banner end here*/
