From 6a59f09d6f5a69f3e9c4e13b41ab29dc6c4cc992 Mon Sep 17 00:00:00 2001 From: "quarkspubg2@gmail.com" Date: Thu, 10 Oct 2024 21:17:17 +0530 Subject: [PATCH 1/4] Added footer component --- src/components/Footer/Footer.css | 52 ++++++++++++++++++++++++++++++++ src/components/Footer/Footer.jsx | 40 ++++++++++++++++++++++++ 2 files changed, 92 insertions(+) create mode 100644 src/components/Footer/Footer.css create mode 100644 src/components/Footer/Footer.jsx diff --git a/src/components/Footer/Footer.css b/src/components/Footer/Footer.css new file mode 100644 index 0000000..02675c3 --- /dev/null +++ b/src/components/Footer/Footer.css @@ -0,0 +1,52 @@ +footer { + background-color: #333; /* Dark background */ + color: #fff; /* White text */ + padding: 20px 0; /* Padding for the footer */ + text-align: center; /* Centered text */ +} + +.footer-container { + max-width: 1200px; /* Max width for footer content */ + margin: 0 auto; /* Centering the footer */ + padding: 0 20px; /* Side padding */ + display: flex; /* Flexbox for alignment */ + flex-direction: column; /* Stack items vertically */ + align-items: center; /* Center items */ +} + +.footer-links { + margin-bottom: 15px; /* Space between sections */ +} + +.footer-links h4 { + margin-bottom: 10px; /* Space below the header */ + font-size: 1.2rem; /* Larger font for header */ +} + +.footer-links ul { + list-style-type: none; /* Remove default list styles */ + padding: 0; /* Remove padding */ + display: flex; /* Use flexbox for horizontal alignment */ + justify-content: center; /* Center the list */ + gap: 20px; /* Space between links */ +} + +.footer-links li { + margin: 0; /* No margin needed for list items */ +} + +.footer-links a { + color: #5c88ff; /* Link color */ + text-decoration: none; /* Remove underline */ + transition: color 0.3s; /* Smooth color transition */ +} + +.footer-links a:hover { + text-decoration: underline; /* Underline on hover */ + color: #ff7a7a; /* Change color on hover */ +} + +.footer-info { + font-size: 0.9rem; /* Smaller text */ + margin-top: 15px; /* Space above the info text */ +} diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx new file mode 100644 index 0000000..17a3635 --- /dev/null +++ b/src/components/Footer/Footer.jsx @@ -0,0 +1,40 @@ +// Footer.jsx +import React from "react"; +import "./Footer.css"; + +const Footer = () => { + return ( + + ); +}; + +export default Footer; // Ensure this line is present From 200c3ae23e9dde3f6d35739086e9c457b5003b85 Mon Sep 17 00:00:00 2001 From: "quarkspubg2@gmail.com" Date: Thu, 10 Oct 2024 21:19:36 +0530 Subject: [PATCH 2/4] Added footer component --- src/components/HomePage.jsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/HomePage.jsx b/src/components/HomePage.jsx index 797265b..49dc6b3 100644 --- a/src/components/HomePage.jsx +++ b/src/components/HomePage.jsx @@ -2,6 +2,7 @@ import React from 'react' import Navbar from './Navbar/Navbar' import Homebox from './Homebox/Homebox' import Contentbox from './Contentbox/Contentbox' +import Footer from './Footer/Footer' function HomePage(props) { return ( @@ -9,6 +10,7 @@ function HomePage(props) { + );