Add footer (WIP), edit body style

src/components/Footer/index.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import styled from "styled-components";
+
+const Footer = () => {
+ return (
+ <Container>
+ <Sponsors></Sponsors>
+ <About></About>
+ <Fixed></Fixed>
+ </Container>
+ );
+};
+
+export default Footer;
+
+const Container = styled.div`
+ width: 100%;
+
+ position: absolute;
+ bottom: 0;
+`;
+
+const Sponsors = styled.div`
+ //////////////////////////
+ background-color: deeppink;
+ //////////////////////////
+`;
+
+const About = styled.div`
+ width: 100%;
+ height: 12rem;
+
+ //////////////////////////
+ background-color: gray;
+ //////////////////////////
+`;
+
+const Fixed = styled.div`
+ position: fixed;
+ bottom: 0;
+
+ width: 100%;
+ height: 2.5rem;
+
+ //////////////////////////
+ background-color: skyblue;
+ //////////////////////////
+`;

src/components/Nav/index.tsx

@@ -81,7 +81,7 @@ const Container = styled.div`
  align-items: center;
 
  /////////////////////////
- border: 1px solid black;
+ background-color: bisque;
  /////////////////////////
 `;
 

src/routes.tsx

@@ -1,3 +1,4 @@
+import Footer from "components/Footer";
 import Nav from "components/Nav";
 import Home from "pages/Home";
 import SponsorList from "pages/Sponsor";
@@ -14,6 +15,7 @@ const Router = () => {
  <Route path="/404" />
  <Route path="*" element={<Navigate replace to={"/404"} />} />
  </Routes>
+ <Footer />
  </BrowserRouter>
  );
 };

src/style.scss

@@ -1,5 +1,7 @@
 body {
- margin: 0 16px;
+ margin: 0;
 
  min-height: 100vh;
+
+ position: relative;
 }