diff --git a/package-lock.json b/package-lock.json index 331ee1c..2a961b1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "my-app", "version": "0.0.0", "dependencies": { + "lucide-react": "^0.525.0", "react": "^19.1.0", "react-dom": "^19.1.0" }, @@ -2239,6 +2240,14 @@ "yallist": "^3.0.2" } }, + "node_modules/lucide-react": { + "version": "0.525.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.525.0.tgz", + "integrity": "sha512-Tm1txJ2OkymCGkvwoHt33Y2JpN5xucVq1slHcgE6Lk0WjDfjgKWor5CdVER8U6DvcfMwh4M8XxmpTiyzfmfDYQ==", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/minimatch": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", diff --git a/package.json b/package.json index df83f7f..d8ba6cd 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "preview": "vite preview" }, "dependencies": { + "lucide-react": "^0.525.0", "react": "^19.1.0", "react-dom": "^19.1.0" }, diff --git a/src/App.css b/src/App.css index f6e3b53..3927e3f 100644 --- a/src/App.css +++ b/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; +} \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index dbd25f4..7bc115f 100644 --- a/src/App.jsx +++ b/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 ( -
-

Hello React

-

This is a clean React + Vite project.

- - - +
+
+
) } -export default App +export default App \ No newline at end of file diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx new file mode 100644 index 0000000..4c5b534 --- /dev/null +++ b/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 ( + + + ) +} + +export default Footer \ No newline at end of file diff --git a/src/components/Header.jsx b/src/components/Header.jsx new file mode 100644 index 0000000..ec74355 --- /dev/null +++ b/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 ( + + <> + + + + {open && +
+ + setOpen(false)} className='exit' color='red' size={28}/> + +
+

Module-1

+

Module-2

+

Module-3

+

Module-4

+
+
+ } + + + + + + + + ) +} + +export default Header \ No newline at end of file diff --git a/src/index.css b/src/index.css index 08a3ac9..610d9e4 100644 --- a/src/index.css +++ b/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; +} \ No newline at end of file diff --git a/src/style/FooterStyle.css b/src/style/FooterStyle.css new file mode 100644 index 0000000..2bf4e70 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/src/style/HeaderStyle.css b/src/style/HeaderStyle.css new file mode 100644 index 0000000..88ec757 --- /dev/null +++ b/src/style/HeaderStyle.css @@ -0,0 +1,116 @@ +.outer-container{ + background-color: black; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + padding: 8px 12px; + +} + +.burger-menu{ + display: none; +} + +.exit{ + cursor: pointer; +} + +.heading-container{ + display: flex; + flex-direction: row; + gap: 20px; + padding: 10px 5px 3px 5px; +} + +.heading-container p{ + cursor: pointer; +} + + +.heading-container p:hover{ + + color: rgb(234, 229, 229); + text-decoration: underline; + transition:color all 0.3s ease; +} + +.exit{ + position: absolute; + top: 10px; + right: 10px; +} + +.sidemenu{ + position: fixed; + top: 0; + right: 0; + width: 200px; + height: 100vh; + background-color: black; + display: flex; + justify-content: center; + align-items: center; + animation: slideanim 0.3s ease forwards; +} + + +@keyframes slideanim{ + + from{ + transform: translateX(100%); + } + + to{ + transform: translateX(0); + } + +} + + + +.menu-container{ + display: flex; + flex-direction: column; + gap:20px; +} + +.menu-container p{ + cursor: pointer; + padding: 8px; + border-radius: 10px; +} + + +.menu-container p:hover{ + + color: black; + background-color: white; +} + +@media (max-width:700px){ + + .burger-menu{ + display: block; + cursor: pointer; + } + + .outer-container h1{ + font-size: 20px; + } + + .heading-container{ + display: none; + } +} + +@media (max-width:600px){ + .outer-container{ + padding: 4px 6px; + + } + .outer-container h1{ + font-size: 15px; + } + +} \ No newline at end of file