finished footer section

Author: suportdevs

client/src/components/Footer/Footer.jsx

@@ -1,8 +1,40 @@
+import { Link } from "react-router-dom";
+import classes from "./Footer.module.css";
+import { FaLinkedin, FaMagnifyingGlass, FaSquareFacebook, FaSquareTwitter } from "react-icons/fa6";
 export default function Footer(){
  return (
- <>
- 
- <h1>Footer</h1>
- </>
+ <div className={classes.footer}>
+ <div className={classes.footer_top}>
+
+ <div>
+ <Link to="/"><h2>BLOG</h2></Link>
+ </div>
+ <div>
+ <Link to="/">Home</Link>
+ <Link to="/contact">Contact</Link>
+ <Link to="/about">About</Link>
+ <Link to="/posts">Posts</Link>
+ <Link to="/categories">Categories</Link>
+ </div>
+ <div>
+ <Link to="/">Privacy Police</Link>
+ <Link to="/contact">Terms of Use</Link>
+ <Link to="/about">FAQ</Link>
+ <Link to="/about">Suport</Link>
+ <Link to="/about">Report</Link>
+
+ </div>
+ </div>
+ <hr />
+ <div className={classes.footer_bottom}>
+ <span>Copyright ©, 2023, All Rights Reserved</span>
+ <div>
+ <FaSquareFacebook className={classes.icon}/>
+ <FaSquareTwitter className={classes.icon}/>
+ <FaLinkedin className={classes.icon}/>
+ <FaMagnifyingGlass className={classes.icon}/>
+ </div>
+ </div>
+ </div>
  )
 }

client/src/components/Footer/Footer.module.css

@@ -0,0 +1,45 @@
+.footer{
+ padding: 50px 80px;
+ background-color: #0b0b0b;
+ color: gray;
+}
+.footer_top{
+ display: flex;
+ justify-content: space-between;
+}
+.footer_top div{
+ display: flex;
+ flex-direction: column;
+}
+.footer_top div a{
+ color: white;
+}
+hr{
+ background-color: gray;
+ margin-top: 50px;
+}
+.footer_bottom{
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding-top: 50px;
+}
+.icon{
+ margin-left: 10px;
+}
+
+/* On screens that are 992px or less, set the background color to blue */
+@media screen and (max-width: 992px) {
+ 
+}
+
+/* On screens that are 600px or less, set the background color to olive */
+@media screen and (max-width: 600px) {
+ .footer_top, .footer_bottom{
+ flex-direction: column;
+ }
+ .footer_bottom{
+ text-align: center;
+ justify-content: center;
+ }
+}