Merge pull request #81 from CodeHarborHub/dev-2

Update code for header for responsive

Author: ajay-dhangar

community/team.md

@@ -21,4 +21,6 @@ If you are interested in joining the team, or would like to contribute to the Op
 
 ## Contributors {#contributors}
 
-[![contributors](https://opencollective.com/codeharborhub/contributors.svg?button=false)](https://opencollective.com/codeharborhub/contributors.svg?button=false)
+<a href="https://github.com/codeharborhub/codeharborhub/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=codeharborhub/codeharborhub" />
+</a>

src/components/HomePage/header.css

@@ -4,7 +4,7 @@
   align-items: center;
   transform-style: preserve-3d;
   overflow: hidden;
-  padding: 3rem 1.5rem;
+  padding: 3rem auto;
 }
 
 .chh__header {
@@ -14,12 +14,13 @@
 }
 
 .chh__header-content {
+  width: 100%;
   flex: 1;
   display: flex;
   justify-content: center;
   align-items: flex-start;
   flex-direction: column;
-  margin-right: 5rem;
+  margin-right: 2rem;
 }
 
 .chh__header-content h1 {
@@ -87,28 +88,27 @@
 }
 
 .chh__header-image {
-  width: 400px;
-  height: 400px;
+  width: auto;
+  height: auto;
   flex: 1 0 0%;
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 0.5rem;
-  background: linear-gradient(
-    90deg,
-    #ff49208d 0%,
-    #ffc80097 25%,
-    #20e3a28d 50%,
-    #ff49208b 75%,
-    #ffc8008a 100%
-  );
-  background-image: url("/bg-img.gif");
+  padding: 0.3rem;  
+  background-image: url("/bg.gif");
   border-radius: 10% 40%;
   border: 1px solid #20e3a2;
 }
 
 .chh__header-image:hover {
-  background-image: url("/bg.gif");
+  background: linear-gradient(
+    90deg,
+    #ff4920f6 0%,
+    #ffc800f3 25%,
+    #20e3a2 50%,
+    #ff4920 75%,
+    #ffc800 100%
+  );
 }
 
 .chh__header-image img {
@@ -277,4 +277,4 @@
     font-size: 12px;
     line-height: 16px;
   }
-}
+}

src/pages/index.js

@@ -19,10 +19,11 @@ export default function Home() {
       title={`Hello from ${siteConfig.title}`}
       description="Welcome to CodeHarborHub. Learn the basics to advanced concepts of web development. html, css, javascript, react, node.js, dsa, and more."
     >
-      <main>        
+      <main>
+        <div className={styles.home__header}>
+          <Header />
+        </div>
 
-        <Header />
-        
         <hr className={styles.home__hr} />
 
         <div className={styles.home__divider}>

src/pages/index.module.css

@@ -1,3 +1,6 @@
+.home__header {
+  margin: 1rem;
+}
 .home__divider h2 {
   text-align: center;
 }