Created Header component and Footer Component

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "lucide-react": "^0.525.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
   },

src/App.css

@@ -1,18 +1,6 @@
-.card {
-  max-width: 400px;
-  margin: 100px auto;
-  padding: 2rem;
-  border: 1px solid #ccc;
-  border-radius: 10px;
-  font-family: sans-serif;
-  text-align: center;
-}
-
-button {
-  padding: 10px 20px;
-  background: teal;
-  color: white;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-}
+.main-page{
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}

src/App.jsx

@@ -1,17 +1,15 @@
-import './App.css'
+import React from 'react'
+import Header from './components/Header'
+import Footer from './components/Footer'
+import "./App.css";
 
 function App() {
   return (
-    <div className="card">
-      <h1>Hello React</h1>
-      <p>This is a clean React + Vite project.</p>
-      <button onClick={() => alert('Clicked!')}>Click Me</button>
-      <footer style={{ textAlign: 'center', marginTop: '2rem' }}>
-  © 2025 vite-react-starter
-</footer>
-
+    <div className='main-page'>
+        <Header/>
+        <Footer/>
     </div>
   )
 }
 
-export default App
+export default App

src/components/Footer.jsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import { Github,Instagram,Facebook} from 'lucide-react'
+import "../style/FooterStyle.css"
+function Footer() {
+  return (
+
+    <footer>
+
+        <div className='footer-section'>
+            <div className='first'>
+                <h1>
+                    Your Project Name
+                </h1>
+
+
+                <div className='menu-container'>
+                    <p>Module-1</p>
+                    <p>Module-2</p>
+                    <p>Module-3</p>
+                    <p>Module-4</p>
+                </div>
+             </div>
+
+            <hr/>
+
+            <div className='contact-us'>
+
+                <Github size={34} />
+                <Facebook size={34} />
+                <Instagram size={34} />
+
+            </div>
+
+            <hr/>
+
+            <div className='other-details'>
+
+                <h2>your copyright details</h2>
+
+                <p>Developer detail</p>
+
+            </div>
+
+        </div>
+
+    </footer>
+  )
+}
+
+export default Footer

src/components/Header.jsx

@@ -0,0 +1,56 @@
+import React, { useState } from 'react'
+import "../style/HeaderStyle.css"
+import {MenuIcon,XCircle} from "lucide-react"
+
+
+function Header() {
+
+  const[open,setOpen]=useState(false);
+
+
+  return (
+
+    <>
+
+    <nav className='outer-container'>
+
+        <h1>Your Project Name</h1>
+
+        <div className='heading-container'>
+            <p>Module-1</p>
+            <p>Module-2</p>
+            <p>Module-3</p>
+            <p>Module-4</p>            
+        </div>
+
+        <div onClick={()=>setOpen(true)} className='burger-menu'>
+
+          <MenuIcon color='white' size={26}/>
+        </div>
+
+    </nav>
+
+      {open && 
+    <div className='sidemenu'>
+
+        <XCircle onClick={()=>setOpen(false)}  className='exit' color='red' size={28}/>
+
+        <div className='menu-container'>
+          <p>Module-1</p>
+          <p>Module-2</p>
+          <p>Module-3</p>
+          <p>Module-4</p>
+        </div>
+    </div>
+  }
+
+  </>
+
+
+
+
+
+  )
+}
+
+export default Header

src/index.css

@@ -1,68 +1,18 @@
-:root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
+* {
   margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
+  padding: 0;
+  box-sizing: border-box;
 }
 
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
 
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+body{
+    color: white;
 }
 
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
+h1{
+    font-size: 2rem;
 }
+
+p{
+    font-size: large;
+}

src/style/FooterStyle.css

@@ -0,0 +1,70 @@
+footer{
+  background-color: #111;
+  color: white;
+  padding: 15px 20px;
+  display: flex;
+  justify-content: center;
+}
+
+.footer-section{
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.first{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.menu-container{
+    display: flex;
+    flex-direction: column;
+    gap:10px;
+}
+
+
+.contact-us{
+    display: flex;
+    justify-content: center;
+    gap: 40px;
+}
+
+.other-details{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+
+@media (max-width:650px){
+
+    .first{
+        flex-direction: column;
+        gap: 20px;
+    }
+
+    .other-details{
+        flex-direction: column;
+        gap: 10px;
+    }
+}
+
+
+@media (max-width:450px){
+
+    .first{
+        flex-direction: column;
+        gap: 10px;
+    }
+
+
+    .other-details{
+        flex-direction: column;
+        gap: 5px;
+    }
+}