Footer

package.json

@@ -16,6 +16,7 @@
     "@vitejs/plugin-react": "^2.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.7.1",
     "react-router-dom": "^6.4.3",
     "vite": "^3.2.3"
   },

src/App.jsx

@@ -2,15 +2,19 @@ import { Routes, Route } from "react-router-dom";
 
 import { Home } from "./Pages";
 
-import { Navbar } from "./Components";
+import { Navbar,Button,Footer } from "./Components";
+
 
 const App = () => {
   return (
     <>
+
       <Navbar />
       <Routes>
         <Route path="/" element={<Home />} />
       </Routes>
+      <Footer/>
+
     </>
   );
 };

src/Components/Footer/Footer.jsx

@@ -0,0 +1,39 @@
+import styles from "./Footer.module.scss";
+import React from "react";
+import {FiFacebook, FiLinkedin} from "react-icons/fi"
+import {AiOutlineInstagram} from "react-icons/ai"
+
+
+
+const Footer = () =>{
+    return(
+        <>
+
+
+         <div className={styles.containerContact}>
+            <p className={styles.contactHeader}>Contact<span className={styles.infoGrad}> Info</span></p>
+            <div className={styles.credInfo}>
+                <p className={styles.credItems}>Address<span className={styles.credText}>National Institute of Technology Silchar Cachar, Assam</span></p>
+                <p className={styles.credItems}>Website<span className={styles.credText}>www.nits.ac.in</span></p>
+                <p className={styles.credItems}>Email<span className={styles.credText}>xxxx@xxx.com</span></p>
+                <p className={styles.credItems}>Phone Number<span className={styles.credText}>+91-xxxxxxxxxx</span></p>
+            </div>
+
+        </div>
+        <div className={styles.containerFooter}>
+            <p className= {styles.footerDesc}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lacus, purus tincidunt tellus eros. Feugiat velit id sed sit id velit, adipiscing pulvinar orci. Et, bibendum nibh pellentesque id sagittis adipiscing lorem. Elit egestas bibendum morbi vitae, nullam nunc sagittis eget.</p>
+           <div className= {styles.iconSection} >
+            <a href="#" target={"_blank"} rel="noopener noreferrer"><FiFacebook  className= {styles.facebookIcon}/></a>
+            <a href="#" target={"_blank"} rel="noopener noreferrer"><AiOutlineInstagram className= {styles.instaIcon} /></a>
+            <a href="#" target={"_blank"} rel="noopener noreferrer"><FiLinkedin className= {styles.linkedinIcon} /></a>
+            </div>
+
+        </div> 
+
+
+        </>
+
+    )
+}
+
+export default Footer

src/Components/Footer/Footer.module.scss

@@ -0,0 +1,120 @@
+
+
+.containerContact {
+    display: flex;
+    flex-direction: column;
+    padding-top: 8.375rem;
+    text-align: center;
+
+}
+
+.contactHeader, .infoGrad{
+font-family: var(--srijan4-font-2),var(--srijan4-font-1),Verdana, Geneva, Tahoma, sans-serif;  
+font-size: 3rem;
+line-height: 3.5rem;
+font-weight: 700;
+}
+
+.infoGrad{
+    background: var(--srijan4-gradient-6);
+    -webkit-text-fill-color: transparent;
+    -webkit-background-clip: text;
+
+}
+
+
+
+.credInfo {
+
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    margin-top: 4.5rem;
+    font-size: 1.5rem;
+    line-height: 1.75rem;
+    text-align: center;
+}
+.credItems{
+    width: 16.5rem;
+    margin-right: 2.0625rem;
+    margin-left: 2.0625rem;
+    font-family: var(--srijan4-font-2),var(--srijan4-font-1),Verdana, Geneva, Tahoma, sans-serif;
+}
+.credText{
+    font-weight: 900;
+    display: block;
+    margin-top: 0.5rem;
+}
+
+.containerFooter{
+    margin-top: 6.5rem;
+    background-color: var(--srijan4-dark-grey);
+
+}
+.footerDesc{
+    max-width: 60.625rem;
+    margin: auto;
+   padding-top: 6.1875rem;
+    font-size: 1.5rem;
+    font-weight: 900;
+    line-height: 2.4375rem;
+    text-align: center;
+    color: var(--srijan4-light-grey);
+}
+
+.facebookIcon{
+    width: 2.91rem;
+    height: 2.91rem;
+    color: var(--srijan4-white);
+    margin-right: 4.1475rem;
+    margin-left: 4.1475rem;
+
+}
+.instaIcon{
+    width: 2.91rem;
+    height: 2.91rem;
+    color: var(--srijan4-white);
+    margin-right: 4.1475rem;
+
+}
+.linkedinIcon
+{
+    width: 2.91rem;
+    height: 2.91rem;
+    color: var(--srijan4-white);
+    margin-right: 4.1475rem;
+}
+.iconSection
+{
+    display: flex;
+    justify-content: center;
+    margin-top: 5.4375rem;
+    padding-bottom: 9.25rem;
+
+}
+
+@media screen and (max-width: 1200px)
+{
+    .contactHeader, .infoGrad{
+        font-size: 3rem;
+        margin-bottom: 3rem;
+
+    }
+    .credInfo{
+        flex-direction: column;
+        max-width: 80vh;
+        margin: auto;
+
+    }
+    .credItems{
+        margin: 0;
+        margin-bottom: 2rem;
+    }
+    .footerDesc{
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+
+
+}
+

src/Components/index.jsx

@@ -1,4 +1,5 @@
 import Button from "./Button/Button";
 import Navbar from "./Navbar/Navbar";
+import Footer from "./Footer/Footer";
 
-export { Button, Navbar };
+export { Button, Navbar, Footer };

src/index.scss

@@ -1,19 +1,29 @@
 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
+@font-face{
+  font-family: 'Gilroy-Bold';
+  src: url('/fonts/gilroy/Gilroy-Bold.ttf')
+}
 
 :root {
-
+
+  --srijan4-font-2: "Gilroy-Bold", sans-serif;
   --srijan4-font-1: "Poppins", sans-serif;
 
   --srijan4-dark-blue: #010044;
   --srijan4-dark-pink: #B4015F;
   --srijan4-med-pink: #EA0064;
   --srijan4-light-pink: #FF5F9F;
+  --srijan4-dark-grey: #15131A;
+  --srijan4-light-grey: #ffffffa3;
+  --srijan4-white: #fff;
+
 
   --srijan4-gradient-1: linear-gradient(180.56deg, #0704B9 -22.26%, #B4015F 159.83%);
   --srijan4-gradient-2: linear-gradient(161.91deg, #010044 0%, #030156 28.12%, #02014C 66.54%, #B4015F 114.02%);
   --srijan4-gradient-3: linear-gradient(161.91deg, #010044 0%, #02014C 66.54%);
   --srijan4-gradient-4: linear-gradient(161.91deg, #02010D 0%, #040344 66.54%);
   --srijan4-gradient-5: linear-gradient(175.09deg, #010044 -8.29%, #030156 24.29%, #02014C 68.8%, #B4015F 123.8%);
+  --srijan4-gradient-6: linear-gradient(180deg, rgba(182,33,254,1) 35%, rgba(31,209,249,1) 100%);
 
   --heading-1-text-weight: 600;
   --heading-2-text-weight: 500;