Merge pull request #110 from tsg-iitkgp/committee

Added image to contacts card

src/pages/Homepage/Committee/CommitteeCard.js

@@ -10,6 +10,7 @@ export default function CommitteeCard({ data }) {
           <div className={Styles.content}>
             <h2>{data.number}</h2>
             <h3>{data.heading}</h3>
+            <img src={data.background} />
             {/* <p>{data.description}</p> */}
           </div>
         </div>

src/pages/Homepage/Committee/CommitteesHome.js

@@ -1,33 +1,39 @@
 import React from "react";
 import Styles from "../../../styles/pages/home.module.css";
 import CommitteeCard from "./CommitteeCard";
+
 export default function CommitteesHome() {
   const data = [
     {
       number: 1,
       heading: "Sports and Games",
       description: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, totam velit? Iure nemo labore inventore?`,
       route: "/committees/sports",
+      background: "/data/media/images/committee/Sports.jpg",
     },
     {
       number: 2,
       heading: "Social and Cultural",
       description: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, totam velit? Iure nemo labore inventore?`,
       route: "/committees/socult",
+      background: "/data/media/images/committee/Socult.jpg",
     },
     {
       number: 3,
       heading: "Technology",
       description: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, totam velit? Iure nemo labore inventore?`,
       route: "/committees/tech",
+      background: "/data/media/images/committee/Technology.jpg",
     },
     {
       number: 4,
       heading: "Students' Welfare",
       description: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, totam velit? Iure nemo labore inventore?`,
       route: "/committees/welfare",
+      background: "/data/media/images/committee/StudentsWelfare.jpg",
     },
   ];
+
   return (
     <div data-aos="zoom-in-up" className={Styles.container}>
       <div className={Styles.committeesSection}>

src/pages/Homepage/Committee/committee-card.module.css

@@ -53,7 +53,12 @@
 }
 
 .card .box .content h3 {
+  position: absolute;
   font-size: 1.8rem;
+  font-weight: 500;
+  top: 45%;
+  left: 10%;
+  right: 10%;
   color: #fff;
   z-index: 1;
   transition: 0.5s;
@@ -95,3 +100,13 @@
     min-width: 500px;
   }
 }
+
+.card .box .content img{
+  /* height: 20px;
+  width: 20px; */
+  size: cover;
+  height: 450px;
+  width: 460px;
+  opacity: 0.4;
+  z-index: -1;
+}