From 57c3398f0f4cec517677728f52749c3d9331e642 Mon Sep 17 00:00:00 2001
From: Shreyas Kaundinya <shreyassk08@gmail.com>
Date: Fri, 15 Oct 2021 11:17:47 +0530
Subject: [PATCH 1/3] Fixes #73 : Event cards height and adds responsiveness to
 event carousel

---
 css/styles.css | 654 ++++++++++++++++++++++++-------------------------
 index.html     | 596 +++++++++++++++++++-------------------------
 2 files changed, 571 insertions(+), 679 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index 111ca53..5e009fc 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1,268 +1,273 @@
-@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');
+@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,700");
 html,
 body {
-    height: 100%;
-    width: 100%;
-    font-family: 'Poppins', sans-serif;
-    color: #1f1e1e;
-    font-size: 2vh;
-    overflow-x: hidden;
-    width: 100%;
+  height: 100%;
+  width: 100%;
+  font-family: "Poppins", sans-serif;
+  color: #1f1e1e;
+  font-size: 2vh;
+  overflow-x: hidden;
+  width: 100%;
 }
 
-
 .arrows {
-    text-align: center;
+  text-align: center;
+  color: white;
 }
 
 #foundingMember {
-    font-size: 18px;
+  font-size: 18px;
 }
 
-@media (min-width:750px) and (max-width:1000px) {
-    #foundingMember {
-        font-size: 13px;
-    }
+@media (min-width: 750px) and (max-width: 1000px) {
+  #foundingMember {
+    font-size: 13px;
+  }
 }
 
 #foundingMember1 {
-    font-size: 18px;
-    padding-bottom: 23px;
+  font-size: 18px;
+  padding-bottom: 23px;
 }
 
-@media (min-width:1001px) {
-    #foundingMember1 {
-        font-size: 18px;
-        padding-bottom: 20px;
-    }
+@media (min-width: 1001px) {
+  #foundingMember1 {
+    font-size: 18px;
+    padding-bottom: 20px;
+  }
 }
 
-@media (min-width:750px) and (max-width:1000px) {
-    #foundingMember1 {
-        font-size: 15px;
-        padding-bottom: 18px;
-    }
+@media (min-width: 750px) and (max-width: 1000px) {
+  #foundingMember1 {
+    font-size: 15px;
+    padding-bottom: 18px;
+  }
 }
 
 html {
-    overflow-x: hidden;
+  overflow-x: hidden;
 }
 
 #header {
-    overflow: hidden;
+  overflow: hidden;
 }
 
 #team {
-    background-color: rgb(203, 217, 231);
+  background-color: rgb(203, 217, 231);
 }
 
 hr {
-    border: none;
-    height: 2px;
-    background-image: linear-gradient(to right, #f0f0f0, #8f8f8f, #f0f0f0);
+  border: none;
+  height: 2px;
+  background-image: linear-gradient(to right, #f0f0f0, #8f8f8f, #f0f0f0);
 }
 
 #particles-js {
-    background-color: #000;
+  background-color: #000;
 }
 
 .navbar {
-    padding: 0.1rem;
+  padding: 0.1rem;
 }
 
 .navbar-nav li {
-    padding-right: 20px;
+  padding-right: 20px;
 }
 
 .nav-link {
-    font-size: 1.1em !important;
+  font-size: 1.1em !important;
 }
 
 .carousel-caption {
-    padding-top: 5rem;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
+  padding-top: 5rem;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
 }
 
 .carousel-caption h3 {
-    font-size: 200%;
-    font-weight: 300;
-    text-shadow: 1px 1px 10px #000;
+  font-size: 200%;
+  font-weight: 300;
+  text-shadow: 1px 1px 10px #000;
 }
 
-
 /*---Media Queries --*/
 
 @media (max-width: 992px) {
-    h1.display-2 {
-        font-size: 8.5vh;
-    }
-    #typed-2 {
-        font-size: 7.5vh;
-    }
+  .card-deck {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    gap: 1rem;
+  }
+
+  .card-deck > .card {
+    min-width: 300px;
+    max-width: 300px;
+  }
+
+  h1.display-2 {
+    font-size: 8.5vh;
+  }
+  #typed-2 {
+    font-size: 7.5vh;
+  }
 }
 
 @media (max-width: 768px) {
-    h1.display-2 {
-        font-size: 5.5vh;
-    }
-    #typed-2 {
-        font-size: 4.5vh;
-    }
+  h1.display-2 {
+    font-size: 5.5vh;
+  }
+  #typed-2 {
+    font-size: 4.5vh;
+  }
 }
 
 @media (max-width: 576px) {
-    h1.display-2 {
-        font-size: 2.5vh;
-    }
-    #typed-2 {
-        font-size: 1.5vh;
-    }
+  h1.display-2 {
+    font-size: 2.5vh;
+  }
+  #typed-2 {
+    font-size: 1.5vh;
+  }
 }
 
 @media (max-width: 360px) {
-    h1.display-2 {
-        font-size: 2.5vh;
-    }
+  h1.display-2 {
+    font-size: 2.5vh;
+  }
 }
 
-
 /*--- Bootstrap Padding Fix --*/
 
 [class*="col-"] {
-    padding: 1rem;
+  padding: 1rem;
 }
 
-.nav-item.active>a {
-    color: rgba(56, 134, 236, 0.815);
+.nav-item.active > a {
+  color: rgba(56, 134, 236, 0.815);
 }
 
-
 /* TRANSPARENT NAV */
 
 .navbar {
-    transition: all 0.4s;
+  transition: all 0.4s;
 }
 
 .navbar .nav-link {
-    color: #fff;
+  color: #fff;
 }
 
 .navbar .nav-link:hover,
 .navbar .nav-link:focus {
-    color: rgb(255, 255, 255);
-    text-decoration: none;
+  color: rgb(255, 255, 255);
+  text-decoration: none;
 }
 
-
 /* Change navbar styling on scroll */
 
 .navbar.active {
-    background-color: white;
-    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.1);
+  background-color: white;
+  box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.1);
 }
 
 .navbar.active .nav-link {
-    color: rgb(51, 51, 51);
+  color: rgb(51, 51, 51);
 }
 
-.navbar.active .nav-item.active>a {
-    color: rgb(59, 83, 219);
+.navbar.active .nav-item.active > a {
+  color: rgb(59, 83, 219);
 }
 
 .navbar.active .nav-link:hover,
 .navbar.active .nav-link:focus {
-    color: #555;
-    text-decoration: none;
+  color: #555;
+  text-decoration: none;
 }
 
 .navbar.active .navbar-brand {
-    color: #555;
+  color: #555;
 }
 
-
 /* Change navbar styling on small viewports */
 
 @media (max-width: 991.98px) {
-    .navbar {
-        background: #fff;
-    }
-    .navbar .navbar-brand,
-    .navbar .nav-link {
-        color: #555;
-    }
-    .navbar .nav-link:hover,
-    .navbar .nav-link:focus {
-        color: rgb(10, 10, 10);
-        text-decoration: none;
-    }
+  .navbar {
+    background: #fff;
+  }
+  .navbar .navbar-brand,
+  .navbar .nav-link {
+    color: #555;
+  }
+  .navbar .nav-link:hover,
+  .navbar .nav-link:focus {
+    color: rgb(10, 10, 10);
+    text-decoration: none;
+  }
 }
 
-
 /* END OF TRANSPARENT NAV */
 
 .nav-link {
-    font-size: 18px;
-    padding: 20px 0px;
-    margin: 0px 20px;
-    display: inline-block;
-    position: relative;
-    opacity: 0.9;
+  font-size: 18px;
+  padding: 20px 0px;
+  margin: 0px 20px;
+  display: inline-block;
+  position: relative;
+  opacity: 0.9;
 }
 
 .nav-link:hover {
-    opacity: 1;
+  opacity: 1;
 }
 
-
 /* :before inserts something before the content of each element */
 
 .nav-link::before {
-    transition: 250ms;
-    height: 3px;
-    content: "";
-    left: -0.1px;
-    position: absolute;
-    background-color: rgb(59, 83, 219)
+  transition: 250ms;
+  height: 3px;
+  content: "";
+  left: -0.1px;
+  position: absolute;
+  background-color: rgb(59, 83, 219);
 }
 
 .nav-link::before {
-    width: 0%;
-    bottom: 10px;
+  width: 0%;
+  bottom: 10px;
 }
 
 .nav-link:hover::before {
-    width: 100%;
+  width: 100%;
 }
 
 .social a {
-    font-size: 1.7rem;
-    padding: 0.5rem;
+  font-size: 1.7rem;
+  padding: 0.5rem;
 }
 
 .fa-facebook {
-    color: #3b5998;
+  color: #3b5998;
 }
 
 .fa-twitter {
-    color: #00aced;
+  color: #00aced;
 }
 
 .fa-github {
-    color: white;
+  color: white;
 }
 
 .black {
-    color: black;
+  color: black;
 }
 
 .fa-instagram {
-    color: #f07d7d;
+  color: #f07d7d;
 }
 
 .fa-linkedin {
-    color: #2867B2;
+  color: #2867b2;
 }
 
 .fa-facebook:hover,
@@ -270,198 +275,188 @@ hr {
 .fa-instagram:hover,
 .fa-linkedin:hover,
 .fa-github:hover {
-    color: #6e6d6d;
+  color: #6e6d6d;
 }
 
-
 /* FOOTER */
 
 .footer-distributed {
-    background: #343d50;
-    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
-    box-sizing: border-box;
-    width: 100%;
-    text-align: left;
-    font: bold 18px sans-serif;
-    color: rgb(175, 174, 174);
-    padding: 25px 25px;
-    /* asjd */
+  background: #343d50;
+  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
+  box-sizing: border-box;
+  width: 100%;
+  text-align: left;
+  font: bold 18px sans-serif;
+  color: rgb(175, 174, 174);
+  padding: 25px 25px;
+  /* asjd */
 }
 
 .footer-distributed .footer-left,
 .footer-distributed .footer-center,
 .footer-distributed .footer-right {
-    display: inline-block;
-    vertical-align: top;
+  display: inline-block;
+  vertical-align: top;
 }
 
-
 /* Footer left */
 
 .footer-distributed .footer-left {
-    width: 40%;
+  width: 40%;
 }
 
-
 /* The company logo */
 
 .footer-distributed h3 {
-    color: #ffffff;
-    margin: 0;
+  color: #ffffff;
+  margin: 0;
 }
 
 .footer-distributed h3 span {
-    color: lightseagreen;
+  color: lightseagreen;
 }
 
-
 /* Footer links */
 
 .footer-distributed .footer-links a {
-    display: inline-block;
-    line-height: 1.8;
-    font-weight: 400;
-    text-decoration: none;
-    color: inherit;
+  display: inline-block;
+  line-height: 1.8;
+  font-weight: 400;
+  text-decoration: none;
+  color: inherit;
 }
 
 .footer-distributed .footer-company-name {
-    color: #222;
-    font-size: 14px;
-    font-weight: normal;
-    margin: 0;
+  color: #222;
+  font-size: 14px;
+  font-weight: normal;
+  margin: 0;
 }
 
-
 /* Footer Center */
 
 .footer-distributed .footer-center {
-    width: 35%;
+  width: 35%;
 }
 
 .footer-distributed .footer-center i {
-    background-color: #33383b;
-    color: #ffffff;
-    font-size: 25px;
-    width: 38px;
-    height: 38px;
-    border-radius: 50%;
-    text-align: center;
-    line-height: 42px;
-    margin: 10px 15px;
-    vertical-align: middle;
+  background-color: #33383b;
+  color: #ffffff;
+  font-size: 25px;
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 42px;
+  margin: 10px 15px;
+  vertical-align: middle;
 }
 
 .footer-distributed .footer-center i.fa-envelope {
-    font-size: 17px;
-    line-height: 38px;
+  font-size: 17px;
+  line-height: 38px;
 }
 
 .footer-distributed .footer-center p {
-    display: inline-block;
-    color: #269dec;
-    font-weight: 400;
-    vertical-align: middle;
-    margin: 0;
+  display: inline-block;
+  color: #269dec;
+  font-weight: 400;
+  vertical-align: middle;
+  margin: 0;
 }
 
 .footer-distributed .footer-center p span {
-    display: block;
-    font-weight: normal;
-    font-size: 14px;
-    line-height: 2;
+  display: block;
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 2;
 }
 
 .footer-distributed .footer-center p a {
-    color: lightseagreen;
-    text-decoration: none;
-    ;
+  color: lightseagreen;
+  text-decoration: none;
 }
 
 .footer-distributed .footer-links a:before {
-    content: "|";
-    font-weight: 300;
-    font-size: 20px;
-    left: 0;
-    color: #fff;
-    display: inline-block;
-    padding-right: 5px;
+  content: "|";
+  font-weight: 300;
+  font-size: 20px;
+  left: 0;
+  color: #fff;
+  display: inline-block;
+  padding-right: 5px;
 }
 
 .footer-distributed .footer-links .link-1:before {
-    content: none;
+  content: none;
 }
 
-
 /* Footer Right */
 
 .footer-distributed .footer-right {
-    width: 20%;
+  width: 20%;
 }
 
 .footer-distributed .footer-company-about {
-    line-height: 20px;
-    color: #92999f;
-    font-size: 13px;
-    font-weight: normal;
-    margin: 0;
+  line-height: 20px;
+  color: #92999f;
+  font-size: 13px;
+  font-weight: normal;
+  margin: 0;
 }
 
 .footer-distributed .footer-company-about span {
-    display: block;
-    color: #ffffff;
-    font-size: 14px;
-    font-weight: bold;
-    margin-bottom: 20px;
+  display: block;
+  color: #ffffff;
+  font-size: 14px;
+  font-weight: bold;
+  margin-bottom: 20px;
 }
 
 .footer-distributed .footer-icons {
-    margin-top: 25px;
+  margin-top: 25px;
 }
 
 .footer-distributed .footer-icons a {
-    display: inline-block;
-    width: 35px;
-    height: 35px;
-    cursor: pointer;
-    background-color: #33383b;
-    border-radius: 2px;
-    font-size: 20px;
-    color: #ffffff;
-    text-align: center;
-    line-height: 35px;
-    margin-right: 3px;
-    margin-bottom: 5px;
+  display: inline-block;
+  width: 35px;
+  height: 35px;
+  cursor: pointer;
+  background-color: #33383b;
+  border-radius: 2px;
+  font-size: 20px;
+  color: #ffffff;
+  text-align: center;
+  line-height: 35px;
+  margin-right: 3px;
+  margin-bottom: 5px;
 }
 
 .footer-distributed .footer-center p a:hover {
-    color: #d5d5d5;
+  color: #d5d5d5;
 }
 
-
 /* If you don't want the footer to be responsive, remove these media queries */
 
 @media (max-width: 880px) {
-    .footer-distributed {
-        font: bold 14px sans-serif;
-    }
-    .footer-distributed .footer-left,
-    .footer-distributed .footer-center,
-    .footer-distributed .footer-right {
-        display: block;
-        width: 100%;
-        margin-bottom: 40px;
-        text-align: center;
-    }
-    .footer-distributed .footer-center i {
-        margin-left: 0;
-    }
+  .footer-distributed {
+    font: bold 14px sans-serif;
+  }
+  .footer-distributed .footer-left,
+  .footer-distributed .footer-center,
+  .footer-distributed .footer-right {
+    display: block;
+    width: 100%;
+    margin-bottom: 40px;
+    text-align: center;
+  }
+  .footer-distributed .footer-center i {
+    margin-left: 0;
+  }
 }
 
-
 /* TIMELINE */
 
-
 /*
 Extra small (xs) devices (portrait phones, less than 576px)
 No media query since this is the default in Bootstrap
@@ -479,59 +474,57 @@ Extra (xl) large devices (large desktops, 1200px and up)
 @media (min-width: 1200px) { ... }
 */
 
-
 /* Meet the team */
 
 .team img {
-    object-fit: cover;
-    width: 250px;
-    height: 250px;
+  object-fit: cover;
+  width: 250px;
+  height: 250px;
 }
 
 .about {
-    font-size: 2.7vh;
+  font-size: 2.7vh;
 }
 
 .blockquote-custom {
-    background-color: #bee7f8;
+  background-color: #bee7f8;
 }
 
 .blockquote-custom-icon {
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    top: -25px;
-    left: 50px;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: -25px;
+  left: 50px;
 }
 
 .font-italic {
-    font-size: 1.5rem;
+  font-size: 1.5rem;
 }
 
 .img-animtion img {
-    width: 100%;
-    height: 250px;
+  width: 100%;
+  height: 250px;
 }
 
 .card {
-    height: 450px;
+  height: 450px;
 }
 
 .card-text {
-    /* justify-content: center; */
-    font-size: 4mm;
+  /* justify-content: center; */
+  font-size: 4mm;
 }
 
-@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
+@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
 #team {
-    background: #eee !important;
+  background: #eee !important;
 }
 
-
 /* .btn-primary:hover,
 .btn-primary:focus {
     background-color: #108d6f;
@@ -546,7 +539,6 @@ Extra (xl) large devices (large desktops, 1200px and up)
     border-color: #007b5e;
 } */
 
-
 /* #team .card {
     border: none;
     background: #ffffff;
@@ -554,130 +546,130 @@ Extra (xl) large devices (large desktops, 1200px and up)
 
 .image-flip:hover .backside,
 .image-flip.hover .backside {
-    -webkit-transform: rotateY(0deg);
-    -moz-transform: rotateY(0deg);
-    -o-transform: rotateY(0deg);
-    -ms-transform: rotateY(0deg);
-    transform: rotateY(0deg);
-    border-radius: .25rem;
+  -webkit-transform: rotateY(0deg);
+  -moz-transform: rotateY(0deg);
+  -o-transform: rotateY(0deg);
+  -ms-transform: rotateY(0deg);
+  transform: rotateY(0deg);
+  border-radius: 0.25rem;
 }
 
 .image-flip:hover .frontside,
 .image-flip.hover .frontside {
-    -webkit-transform: rotateY(180deg);
-    -moz-transform: rotateY(180deg);
-    -o-transform: rotateY(180deg);
-    transform: rotateY(180deg);
+  -webkit-transform: rotateY(180deg);
+  -moz-transform: rotateY(180deg);
+  -o-transform: rotateY(180deg);
+  transform: rotateY(180deg);
 }
 
 .mainflip {
-    -webkit-transition: 1s;
-    -webkit-transform-style: preserve-3d;
-    -ms-transition: 1s;
-    -moz-transition: 1s;
-    -moz-transform: perspective(1000px);
-    -moz-transform-style: preserve-3d;
-    -ms-transform-style: preserve-3d;
-    transition: 1s;
-    transform-style: preserve-3d;
-    position: relative;
+  -webkit-transition: 1s;
+  -webkit-transform-style: preserve-3d;
+  -ms-transition: 1s;
+  -moz-transition: 1s;
+  -moz-transform: perspective(1000px);
+  -moz-transform-style: preserve-3d;
+  -ms-transform-style: preserve-3d;
+  transition: 1s;
+  transform-style: preserve-3d;
+  position: relative;
 }
 
 .frontside {
-    position: relative;
-    -webkit-transform: rotateY(0deg);
-    -ms-transform: rotateY(0deg);
-    z-index: 2;
-    margin-bottom: 30px;
+  position: relative;
+  -webkit-transform: rotateY(0deg);
+  -ms-transform: rotateY(0deg);
+  z-index: 2;
+  margin-bottom: 30px;
 }
 
 .backside {
-    position: absolute;
-    top: 0;
-    left: 0;
-    background: white;
-    -webkit-transform: rotateY(-180deg);
-    -moz-transform: rotateY(-180deg);
-    -o-transform: rotateY(-180deg);
-    -ms-transform: rotateY(-180deg);
-    transform: rotateY(-180deg);
-    -webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
-    -moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
-    box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: white;
+  -webkit-transform: rotateY(-180deg);
+  -moz-transform: rotateY(-180deg);
+  -o-transform: rotateY(-180deg);
+  -ms-transform: rotateY(-180deg);
+  transform: rotateY(-180deg);
+  -webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
+  -moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
+  box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
 }
 
 .frontside,
 .backside {
-    -webkit-backface-visibility: hidden;
-    -moz-backface-visibility: hidden;
-    -ms-backface-visibility: hidden;
-    backface-visibility: hidden;
-    -webkit-transition: 1s;
-    -webkit-transform-style: preserve-3d;
-    -moz-transition: 1s;
-    -moz-transform-style: preserve-3d;
-    -o-transition: 1s;
-    -o-transform-style: preserve-3d;
-    -ms-transition: 1s;
-    -ms-transform-style: preserve-3d;
-    transition: 1s;
-    transform-style: preserve-3d;
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -ms-backface-visibility: hidden;
+  backface-visibility: hidden;
+  -webkit-transition: 1s;
+  -webkit-transform-style: preserve-3d;
+  -moz-transition: 1s;
+  -moz-transform-style: preserve-3d;
+  -o-transition: 1s;
+  -o-transform-style: preserve-3d;
+  -ms-transition: 1s;
+  -ms-transform-style: preserve-3d;
+  transition: 1s;
+  transform-style: preserve-3d;
 }
 
 .frontside .card,
 .backside .card {
-    height: 300px;
+  height: 300px;
 }
 
 .backside .card a {
-    font-size: 18px;
-    color: #007b5e !important;
+  font-size: 18px;
+  color: #007b5e !important;
 }
 
 .frontside .card .card-title,
 .backside .card .card-title {
-    color: #007b5e !important;
+  color: #007b5e !important;
 }
 
 .frontside .card .card-body img {
-    width: 120px;
-    height: 120px;
-    border-radius: 50%;
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
 }
 
 .fa-facebook {
-    color: #3b5998;
-    font-size: 40px;
+  color: #3b5998;
+  font-size: 40px;
 }
 
 .fa-twitter {
-    color: #00aced;
-    font-size: 40px;
-    margin-left: 40px;
-    margin-top: 10px;
+  color: #00aced;
+  font-size: 40px;
+  margin-left: 40px;
+  margin-top: 10px;
 }
 
 .fa-github {
-    margin-left: 20px;
-    color: white;
-    font-size: 40px;
+  margin-left: 20px;
+  color: white;
+  font-size: 40px;
 }
 
 .black {
-    color: black;
+  color: black;
 }
 
 .fa-instagram {
-    margin-left: 20px;
-    color: #f07d7d;
-    font-size: 40px;
+  margin-left: 20px;
+  color: #f07d7d;
+  font-size: 40px;
 }
 
 .fa-linkedin {
-    color: #2867B2;
-    font-size: 40px;
-    margin-left: 20px;
-    margin-top: 10px;
+  color: #2867b2;
+  font-size: 40px;
+  margin-left: 20px;
+  margin-top: 10px;
 }
 
 .fa-facebook:hover,
@@ -685,5 +677,5 @@ Extra (xl) large devices (large desktops, 1200px and up)
 .fa-instagram:hover,
 .fa-linkedin:hover,
 .fa-github:hover {
-    color: #6e6d6d;
-}
\ No newline at end of file
+  color: #6e6d6d;
+}
diff --git a/index.html b/index.html
index 240cffb..db1f4e3 100644
--- a/index.html
+++ b/index.html
@@ -9,10 +9,10 @@
       rel="stylesheet"
       href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
     />
-    <link
+    <!-- <link
       rel="stylesheet"
       href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
-    />
+    /> -->
     <link
       href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght@600&display=swap"
       rel="stylesheet"
@@ -133,7 +133,12 @@ <h3 id="typed-2" style="display: inline"></h3>
           <h1 style="padding-left: 100px" class="font-weight-bold">ABOUT US</h1>
 
           <p
-            style="padding-left: 50px; padding-right: 50px;font-family: 'Titillium Web', sans-serif; font-size:22px;"
+            style="
+              padding-left: 50px;
+              padding-right: 50px;
+              font-family: 'Titillium Web', sans-serif;
+              font-size: 22px;
+            "
             class="about py-4"
           >
             The ACM Student Chapter here at PES University Electronic City
@@ -191,361 +196,256 @@ <h1 style="text-align: center" class="font-weight-bold">
     <!-- EVENTS -->
 
     <div class="jumbotron jumbotron-fluid" id="events">
-      <div class="container shawdow my-5 border-0 p-2">
+      <div class="container my-5 border-0 p-2">
         <h2 class="display-4 text-center">OUR EVENTS</h2>
-        <section class="pt-0 pb-0">
-          <div class="container">
-            <div class="row">
-              <div class="col-6"></div>
-              <div class="col-12">
-                <div
-                  id="carouselExampleIndicators2"
-                  class="carousel slide"
-                  data-ride="carousel"
-                >
-                  <div class="carousel-inner">
-                    <div class="carousel-item active">
-                      <div class="row">
-                        <div class="col-md-4 col-12">
-                          <div
-                            class="
-                              card
-                              bg-white
-                              text-black
-                              shadow
-                              my-5
-                              p-1
-                              border-0
-                            "
-                          >
-                            <div class="img-animtion">
-                              <img
-                                src="./img/gif/Blank.gif"
-                                data-src="img/event_announcement6.png"
-                                alt="HacktoberFest "
-                                class="lazy card-img-top"
-                              />
-                            </div>
-                            <div class="card-body text-center m-1">
-                              <h5 class="card-title">Tensor 2.0</h5>
-                              <p class="card-text text-justify">
-                                The second iteration of our 17-hour datathon.
-                              </p>
-                              <a
-                                href="events/tensor2.html "
-                                class="btn btn-success bg-primary"
-                                >Read More...</a
-                              >
-                            </div>
-                          </div>
-                        </div>
-
-                        <div class="col-md-4 col-12">
-                          <div
-                            class="
-                              card
-                              bg-white
-                              text-black
-                              shadow
-                              my-5
-                              p-1
-                              border-0
-                            "
-                          >
-                            <div class="img-animtion">
-                              <img
-                                src="./img/gif/Blank.gif"
-                                data-src="img/Hacktoberfest2020.jpeg "
-                                alt="hacktoberfest2020 "
-                                class="lazy card-img-top"
-                              />
-                            </div>
-                            <div class="card-body text-center m-1">
-                              <h5 class="card-title">HacktoberFest 2020</h5>
-                              <p class="card-text text-justify">
-                                The second iteration of our Open-Source
-                                hacknight...
-                              </p>
-                              <a
-                                href="events/hacktoberfest_2020.html "
-                                class="btn btn-success bg-primary"
-                                >Read More...</a
-                              >
-                            </div>
-                          </div>
-                        </div>
+        <section class="">
+          <div id="eventsCarousel" class="carousel slide" data-ride="carousel">
+            <div class="carousel-inner py-5">
+              <div class="carousel-item active">
+                <div class="card-deck">
+                  <div class="card bg-white text-black shadow h-auto">
+                    <div class="img-animtion">
+                      <img
+                        src="./img/gif/Blank.gif"
+                        data-src="img/event_announcement6.png"
+                        alt="HacktoberFest "
+                        class="lazy card-img-top"
+                      />
+                    </div>
+                    <div class="card-body text-center m-1">
+                      <h5 class="card-title">Tensor 2.0</h5>
+                      <p class="card-text text-justify">
+                        The second iteration of our 17-hour datathon.
+                      </p>
+                    </div>
+                    <div class="card-footer border-0 text-center">
+                      <a
+                        href="events/tensor2.html "
+                        class="btn btn-success bg-primary"
+                        >Read More...</a
+                      >
+                    </div>
+                  </div>
 
-                        <div class="col-md-4 col-12">
-                          <div
-                            class="
-                              card
-                              bg-white
-                              text-black
-                              shadow
-                              my-5
-                              p-1
-                              border-0
-                            "
-                          >
-                            <div class="img-animtion">
-                              <img
-                                src="./img/gif/Blank.gif"
-                                data-src="img/tensor_card.jpg "
-                                alt="HoC "
-                                class="lazy card-img-top"
-                              />
-                            </div>
-                            <div class="card-body text-center m-1">
-                              <h5 class="card-title">Tensor 1.0</h5>
-                              <p class="card-text text-justify">
-                                The first iteration of our 17-hour datathon.
-                              </p>
-                              <a
-                                href="events/tensor.html"
-                                class="btn btn-success bg-primary"
-                                >Read More...</a
-                              >
-                            </div>
-                          </div>
-                        </div>
-                      </div>
+                  <div class="card bg-white text-black shadow h-auto">
+                    <div class="img-animtion">
+                      <img
+                        src="./img/gif/Blank.gif"
+                        data-src="img/Hacktoberfest2020.jpeg "
+                        alt="hacktoberfest2020 "
+                        class="lazy card-img-top"
+                      />
                     </div>
-                    <div class="carousel-item">
-                      <div class="row">
-                        <div class="col-md-4 col-12">
-                          <div
-                            class="
-                              card
-                              bg-white
-                              text-black
-                              shadow
-                              my-5
-                              p-1
-                              border-0
-                            "
-                          >
-                            <div class="img-animtion">
-                              <img
-                                src="img/gif/Blank.gif"
-                                data-src="img/res_card.png "
-                                alt="Research Talk "
-                                class="lazy card-img-top"
-                              />
-                            </div>
-                            <div class="card-body text-center m-1">
-                              <h5 class="card-title">Research Talk</h5>
-                              <p class="card-text text-justify">
-                                The event provided insights on how to approach
-                                the field of research...
-                              </p>
-                              <a
-                                href="events/research_talk.html "
-                                class="btn btn-success bg-primary"
-                                >Read More...</a
-                              >
-                            </div>
-                          </div>
-                        </div>
+                    <div class="card-body text-center m-1">
+                      <h5 class="card-title">HacktoberFest 2020</h5>
+                      <p class="card-text text-justify">
+                        The second iteration of our Open-Source hacknight...
+                      </p>
+                    </div>
+                    <div class="card-footer border-0 text-center">
+                      <a
+                        href="events/hacktoberfest_2020.html "
+                        class="btn btn-success bg-primary"
+                        >Read More...</a
+                      >
+                    </div>
+                  </div>
 
-                        <div class="col-md-4 col-12">
-                          <div
-                            class="
-                              card
-                              bg-white
-                              text-black
-                              shadow
-                              my-5
-                              p-1
-                              border-0
-                            "
-                          >
-                            <div class="img-animtion">
-                              <img
-                                src="./img/gif/Blank.gif"
-                                data-src="img/headpic.jpg "
-                                alt="HoC "
-                                class="lazy card-img-top"
-                              />
-                            </div>
-                            <div class="card-body text-center m-1">
-                              <h5 class="card-title">Hour of Code</h5>
-                              <p class="card-text text-justify">
-                                A 2-day learning event conducted in The Amaatra
-                                Academy to bring interest in the students...
-                              </p>
-                              <a
-                                href="events/hourofcode.html "
-                                class="btn btn-success bg-primary"
-                                >Read More...</a
-                              >
-                            </div>
-                          </div>
-                        </div>
-                        <div class="col-md-4 col-12">
-                          <div
-                            class="
-                              card
-                              bg-white
-                              text-black
-                              shadow
-                              my-5
-                              p-1
-                              border-0
-                            "
-                          >
-                            <div class="img-animtion">
-                              <img
-                                src="./img/gif/Blank.gif"
-                                data-src="img/Hacktoberfest1.png "
-                                alt="HacktoberFest "
-                                class="lazy card-img-top"
-                              />
-                            </div>
-                            <div class="card-body text-center m-1">
-                              <h5 class="card-title">HacktoberFest 2019</h5>
-                              <p class="card-text text-justify">
-                                A 12-hour &apos;Open Source Hack Night&apos; in
-                                association with Hacktoberfest was held in our
-                                campus...
-                              </p>
-                              <a
-                                href="events/hacktober_fest.html "
-                                class="btn btn-success bg-primary"
-                                >Read More...</a
-                              >
-                            </div>
-                          </div>
-                        </div>
-                      </div>
+                  <div class="card bg-white text-black shadow h-auto">
+                    <div class="img-animtion">
+                      <img
+                        src="./img/gif/Blank.gif"
+                        data-src="img/tensor_card.jpg "
+                        alt="HoC "
+                        class="lazy card-img-top"
+                      />
                     </div>
-                    <div class="carousel-item">
-                      <div class="row">
-                        <div class="col-md-4 col-12">
-                          <div
-                            class="
-                              card
-                              bg-white
-                              text-black
-                              shadow
-                              my-5
-                              p-0.8
-                              border-0
-                            "
-                          >
-                            <div class="img-animtion">
-                              <img
-                                src="img/gif/Blank.gif"
-                                data-src="img/oss_ses.jpg "
-                                alt="OSS "
-                                class="lazy card-img-top"
-                              />
-                            </div>
-                            <div class="card-body text-center m-1">
-                              <h5 class="card-title">Open Source Workshop</h5>
-                              <p class="card-text text-justify">
-                                A workshop to teach the students about Git, Open
-                                Source Software...
-                              </p>
-                              <a
-                                href="events/os_workshop.html "
-                                class="mt-4 btn btn-success bg-primary"
-                                >Read More...</a
-                              >
-                            </div>
-                          </div>
-                        </div>
-                        <div class="col-md-4 col-12">
-                          <div
-                            class="
-                              card
-                              bg-white
-                              text-black
-                              shadow
-                              my-5
-                              p-1
-                              border-0
-                            "
-                          >
-                            <div class="img-animtion">
-                              <img
-                                src="img/gif/Blank.gif"
-                                data-src="img/inaug_cover.JPG"
-                                alt="Inauguration "
-                                class="lazy card-img-top"
-                              />
-                            </div>
-                            <div class="card-body text-center m-1">
-                              <h5 class="card-title">Inauguration</h5>
-                              <p class="card-text text-justify">
-                                The inauguration of our college student chapter
-                                was done by the former...
-                              </p>
-                              <a
-                                href="events/inauguration.html "
-                                class="btn btn-success bg-primary"
-                                >Read More...</a
-                              >
-                            </div>
-                          </div>
-                        </div>
-                        <div class="col-md-4 col-12">
-                          <div
-                            class="
-                              card
-                              bg-white
-                              text-black
-                              shadow
-                              my-5
-                              p-1
-                              border-0
-                            "
-                          >
-                            <div class="img-animtion">
-                              <img
-                                src="img/gif/Blank.gif"
-                                data-src="img/inaug_cover.JPG"
-                                alt="Inauguration "
-                                class="lazy card-img-top"
-                              />
-                            </div>
-                            <div class="card-body text-center m-1">
-                              <h5 class="card-title">Hack Night 2.0</h5>
-                              <p class="card-text text-justify">
-                                Page under construction
-                              </p>
-                              <a
-                                href="events/hacknight2.html "
-                                class="btn btn-success bg-primary"
-                                >Read More...</a
-                              >
-                            </div>
-                          </div>
-                        </div>
-                      </div>
+                    <div class="card-body text-center m-1">
+                      <h5 class="card-title">Tensor 1.0</h5>
+                      <p class="card-text text-justify">
+                        The first iteration of our 17-hour datathon.
+                      </p>
+                    </div>
+                    <div class="card-footer border-0 text-center">
+                      <a
+                        href="events/tensor.html "
+                        class="btn btn-success bg-primary"
+                        >Read More...</a
+                      >
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="carousel-item">
+                <div class="card-deck">
+                  <div class="card bg-white text-black shadow h-auto">
+                    <div class="img-animtion">
+                      <img
+                        src="img/gif/Blank.gif"
+                        data-src="img/res_card.png"
+                        alt="Research Talk "
+                        class="lazy card-img-top"
+                      />
+                    </div>
+                    <div class="card-body text-center m-1">
+                      <h5 class="card-title">Research Talk</h5>
+                      <p class="card-text text-justify">
+                        The event provided insights on how to approach the field
+                        of research...
+                      </p>
+                    </div>
+                    <div class="card-footer border-0 text-center">
+                      <a
+                        href="events/research_talk.html"
+                        class="btn btn-success bg-primary"
+                        >Read More...</a
+                      >
+                    </div>
+                  </div>
+                  <div class="card bg-white text-black shadow h-auto">
+                    <div class="img-animtion">
+                      <img
+                        src="./img/gif/Blank.gif"
+                        data-src="img/headpic.jpg "
+                        alt="HoC "
+                        class="lazy card-img-top"
+                      />
+                    </div>
+                    <div class="card-body text-center m-1">
+                      <h5 class="card-title">Hour of Code</h5>
+                      <p class="card-text text-justify">
+                        A 2-day learning event conducted in The Amaatra Academy
+                        to bring interest in the students...
+                      </p>
+                    </div>
+                    <div class="card-footer border-0 text-center">
+                      <a
+                        href="events/hourofcode.html"
+                        class="btn btn-success bg-primary"
+                        >Read More...</a
+                      >
+                    </div>
+                  </div>
+                  <div class="card bg-white text-black shadow h-auto">
+                    <div class="img-animtion">
+                      <img
+                        src="./img/gif/Blank.gif"
+                        data-src="img/Hacktoberfest1.png"
+                        alt="HacktoberFest "
+                        class="lazy card-img-top"
+                      />
+                    </div>
+                    <div class="card-body text-center m-1">
+                      <h5 class="card-title">HacktoberFest 2019</h5>
+                      <p class="card-text text-justify">
+                        A 12-hour &apos;Open Source Hack Night&apos; in
+                        association with Hacktoberfest was held in our campus...
+                      </p>
+                    </div>
+                    <div class="card-footer border-0 text-center">
+                      <a
+                        href="events/hacktober_fest.html"
+                        class="btn btn-success bg-primary"
+                        >Read More...</a
+                      >
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="carousel-item">
+                <div class="card-deck">
+                  <div class="card bg-white text-black shadow h-auto">
+                    <div class="img-animtion">
+                      <img
+                        src="img/gif/Blank.gif"
+                        data-src="img/oss_ses.jpg "
+                        alt="OSS "
+                        class="lazy card-img-top"
+                      />
+                    </div>
+                    <div class="card-body text-center m-1">
+                      <h5 class="card-title">Open Source Workshop</h5>
+                      <p class="card-text text-justify">
+                        A workshop to teach the students about Git, Open Source
+                        Software...
+                      </p>
+                    </div>
+                    <div class="card-footer border-0 text-center">
+                      <a
+                        href="events/os_workshop.html "
+                        class="btn btn-success bg-primary"
+                        >Read More...</a
+                      >
+                    </div>
+                  </div>
+                  <div class="card bg-white text-black shadow h-auto">
+                    <div class="img-animtion">
+                      <img
+                        src="img/gif/Blank.gif"
+                        data-src="img/inaug_cover.JPG"
+                        alt="Inauguration "
+                        class="lazy card-img-top"
+                      />
+                    </div>
+                    <div class="card-body text-center m-1">
+                      <h5 class="card-title">Inauguration</h5>
+                      <p class="card-text text-justify">
+                        The inauguration of our college student chapter was done
+                        by the former...
+                      </p>
+                    </div>
+                    <div class="card-footer border-0 text-center">
+                      <a
+                        href="events/inauguration.html"
+                        class="btn btn-success bg-primary"
+                        >Read More...</a
+                      >
+                    </div>
+                  </div>
+                  <div class="card bg-white text-black shadow h-auto">
+                    <div class="img-animtion">
+                      <img
+                        src="img/gif/Blank.gif"
+                        data-src="img/inaug_cover.JPG"
+                        alt="Inauguration "
+                        class="lazy card-img-top"
+                      />
+                    </div>
+                    <div class="card-body text-center m-1">
+                      <h5 class="card-title">Hack Night 2.0</h5>
+                      <p class="card-text text-justify">
+                        Page under construction
+                      </p>
+                    </div>
+                    <div class="card-footer border-0 text-center">
+                      <a
+                        href="events/hacknight2.html"
+                        class="btn btn-success bg-primary"
+                        >Read More...</a
+                      >
                     </div>
                   </div>
                 </div>
               </div>
             </div>
-          </div>
-
-          <div class="arrows">
-            <a
-              class="btn btn-primary mb-3 mr-1"
-              href="#carouselExampleIndicators2"
-              role="button"
-              data-slide="prev"
-            >
-              <i class="fa fa-arrow-left"></i>
-            </a>
-            <a
-              class="btn btn-primary mb-3"
-              href="#carouselExampleIndicators2"
-              role="button"
-              data-slide="next"
-            >
-              <i class="fa fa-arrow-right"></i>
-            </a>
+            <div class="arrows">
+              <a
+                class="btn btn-primary mb-3 mr-1"
+                data-target="#eventsCarousel"
+                role="button"
+                data-slide="prev"
+              >
+                <i class="fa fa-arrow-left"></i>
+              </a>
+              <a
+                class="btn btn-primary mb-3"
+                data-target="#eventsCarousel"
+                role="button"
+                data-slide="next"
+              >
+                <i class="fa fa-arrow-right"></i>
+              </a>
+            </div>
           </div>
         </section>
       </div>

From 1ca83e2d277a36b1c7e1b1bf08d3a91ae9a03d92 Mon Sep 17 00:00:00 2001
From: Shreyas Kaundinya <shreyassk08@gmail.com>
Date: Fri, 15 Oct 2021 19:50:35 +0530
Subject: [PATCH 2/3] Fixes lazy loading of images

---
 js/lazyload.js | 52 +++++++++++++++++++++-----------------------------
 1 file changed, 22 insertions(+), 30 deletions(-)

diff --git a/js/lazyload.js b/js/lazyload.js
index 9472ef6..60c7f75 100644
--- a/js/lazyload.js
+++ b/js/lazyload.js
@@ -1,35 +1,27 @@
 document.addEventListener("DOMContentLoaded", function () {
-    let lazyloadImages = document.querySelectorAll("img.lazy");
-    lazyloadImages = Array.from(lazyloadImages);
-    let lazyloadThrottleTimeout;
+  var lazyImages = document.querySelectorAll("img.lazy");
 
-    function lazyload() {
-        if (lazyloadThrottleTimeout) {
-            // if already timeour exists
-            clearTimeout(lazyloadThrottleTimeout);
+  if ("IntersectionObserver" in window) {
+    let lazyImageObserver = new IntersectionObserver(function (entries) {
+      entries.forEach(function (entry) {
+        if (entry.isIntersecting) {
+          let img = entry.target;
+          img.src = img.dataset.src;
+          img.classList.remove("lazy");
+          lazyImageObserver.unobserve(img);
         }
+      });
+    });
 
-        function loadImages() {
-            var scrollTop = window.pageYOffset;
-            lazyloadImages.forEach(function (img, index) {
-                if (img.offsetTop < window.innerHeight + scrollTop) {
-                    img.src = img.dataset.src;
-                    img.classList.remove("lazy");
-                    lazyloadImages.splice(index, 1); // removes the image to prevent further calls to lazy load for this
-                }
-            });
-            if (lazyloadImages.length == 0) {
-                document.removeEventListener("scroll", lazyload);
-                window.removeEventListener("resize", lazyload);
-                window.removeEventListener("orientationChange", lazyload);
-            }
-        }
-
-        lazyloadThrottleTimeout = setTimeout(loadImages, 50);
-    }
-
-    //add event listeners throughout the page
-    document.addEventListener("scroll", lazyload);
-    window.addEventListener("resize", lazyload);
-    window.addEventListener("orientationChange", lazyload);
+    lazyImages.forEach(function (img) {
+      lazyImageObserver.observe(img);
+    });
+  } else {
+    // if intersection observer doesnt exist on browser
+    // load images at once
+    lazyImages.forEach((img) => {
+      img.src = img.dataset.src;
+      img.classList.remove("lazy");
+    });
+  }
 });

From 0af5c3002d7aed315980c03180f949ab5996c638 Mon Sep 17 00:00:00 2001
From: Shreyas Kaundinya <shreyassk08@gmail.com>
Date: Fri, 15 Oct 2021 22:25:21 +0530
Subject: [PATCH 3/3] Fixes :

- Member cards responsiveness
- Member cards github and email icon alignment
- Removal of  duplicate imports of bootstrap and font awesome
---
 css/styles.css |  22 +++
 index.html     | 398 +++++++++++++++++++++++++------------------------
 2 files changed, 222 insertions(+), 198 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index 5e009fc..927dafb 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -679,3 +679,25 @@ Extra (xl) large devices (large desktops, 1200px and up)
 .fa-github:hover {
   color: #6e6d6d;
 }
+
+/* GRID for members  */
+
+.grid {
+  display: grid;
+  place-items: center;
+  /* grid-template-columns: repeat(3, 1fr); */
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 2rem;
+}
+
+@media screen and (max-width: 475px) {
+  .grid {
+    gap: 1rem;
+  }
+}
+
+.grid div {
+  /* max-width: 40ch; */
+  width: 100%;
+  min-height: 400px;
+}
diff --git a/index.html b/index.html
index db1f4e3..30d5dda 100644
--- a/index.html
+++ b/index.html
@@ -459,9 +459,16 @@ <h5 class="card-title">Hack Night 2.0</h5>
         <h1 class="h1-responsive my-6 py-4 headers">OFFICE BEARERS</h1>
         <!-- Grid row -->
         <h3 class="h1-responsive my-6 py-4 headers">Faculty Sponsor</h3>
-        <div class="row">
-          <div class="col-xs-12 col-sm-6 col-md-4"></div>
-          <div class="col-xs-12 col-sm-6 col-md-4">
+        <div
+          class="
+            mx-lg-5 mx-3
+            w-auto
+            d-flex
+            justify-content-center
+            align-items-center
+          "
+        >
+          <div class="member-card">
             <div
               class="image-flip"
               ontouchstart="this.classList.toggle( 'hover'); "
@@ -493,14 +500,14 @@ <h4 class="card-title">Dr.Sandesh Jayanth</h4>
                         members change and ensures university rules are abided
                         by.
                       </p>
-                      <ul class="list-inline">
+                      <ul class="list-inline my-auto">
                         <li class="list-inline-item">
                           <a
                             class="social-icon text-xs-center"
                             target="_blank "
                             href="mailto:sandesh_bj@pes.edu"
                           >
-                            <i class="fa fa-envelope"></i>
+                            <i class="fas fa-envelope fa-2x black"></i>
                           </a>
                         </li>
                       </ul>
@@ -515,8 +522,8 @@ <h4 class="card-title">Dr.Sandesh Jayanth</h4>
 
         <!-- Grid row -->
         <h3 class="h1-responsive my-6 py-4 headers">2020-21</h3>
-        <div class="row mx-4">
-          <div class="col-xs-12 col-sm-6 col-md-4">
+        <div class="grid mx-lg-5 mx-3">
+          <div class="member-card">
             <div
               class="image-flip"
               ontouchstart="this.classList.toggle( 'hover'); "
@@ -540,7 +547,7 @@ <h5 class="text-primary">Chairperson</h5>
                 </div>
                 <div class="backside">
                   <div class="card">
-                    <div class="card-body text-center mt-4">
+                    <div class="card-body text-center">
                       <h4 class="card-title">Venkatavardan R</h4>
                       <p class="card-text">
                         Chair has the overall responsibility for developing
@@ -564,7 +571,7 @@ <h4 class="card-title">Venkatavardan R</h4>
                             target="_blank "
                             href="mailto:vraghuraman@acm.org "
                           >
-                            <i class="fa fa-envelope"></i>
+                            <i class="fas fa-envelope fa-2x black"></i>
                           </a>
                         </li>
                       </ul>
@@ -576,7 +583,7 @@ <h4 class="card-title">Venkatavardan R</h4>
           </div>
           <!-- ./Team member -->
 
-          <div class="col-xs-12 col-sm-6 col-md-4">
+          <div class="member-card">
             <div
               class="image-flip"
               ontouchstart="this.classList.toggle( 'hover'); "
@@ -608,7 +615,7 @@ <h4 class="card-title">Srujan Deshpande</h4>
                         for overseeing the activities and progress of the
                         various committee and chapter programs. of tasks.
                       </p>
-                      <ul class="list-inline">
+                      <ul class="list-inline my-auto">
                         <li class="list-inline-item">
                           <a
                             class="social-icon text-xs-center"
@@ -624,7 +631,7 @@ <h4 class="card-title">Srujan Deshpande</h4>
                             target="_blank "
                             href="mailto:srujandeshpande@acm.org "
                           >
-                            <i class="fa fa-envelope"></i>
+                            <i class="fas fa-envelope fa-2x black"></i>
                           </a>
                         </li>
                       </ul>
@@ -636,7 +643,7 @@ <h4 class="card-title">Srujan Deshpande</h4>
           </div>
           <!-- ./Team member -->
 
-          <div class="col-xs-12 col-sm-6 col-md-4">
+          <div class="member-card">
             <div
               class="image-flip"
               ontouchstart="this.classList.toggle( 'hover'); "
@@ -668,7 +675,7 @@ <h4 class="card-title">Manikya Bardhan</h4>
                         purposes. The Secretary is also the guardian of all the
                         formal meetings and events.
                       </p>
-                      <ul class="list-inline">
+                      <ul class="list-inline my-auto">
                         <li class="list-inline-item">
                           <a
                             class="social-icon text-xs-center"
@@ -684,7 +691,7 @@ <h4 class="card-title">Manikya Bardhan</h4>
                             target="_blank "
                             href="mailto:manikyabard@gmail.com "
                           >
-                            <i class="fa fa-envelope"></i>
+                            <i class="fas fa-envelope fa-2x black"></i>
                           </a>
                         </li>
                       </ul>
@@ -695,7 +702,7 @@ <h4 class="card-title">Manikya Bardhan</h4>
             </div>
           </div>
 
-          <div class="col-xs-12 col-sm-6 col-md-6">
+          <div class="member-card">
             <div
               class="image-flip"
               ontouchstart="this.classList.toggle( 'hover'); "
@@ -726,7 +733,7 @@ <h4 class="card-title">Sanskriti Pattanayak</h4>
                         operation and reporting of the chapter, and of all
                         committees and programs established by the chapter.
                       </p>
-                      <ul class="list-inline">
+                      <ul class="list-inline my-auto">
                         <li class="list-inline-item">
                           <a
                             class="social-icon text-xs-center"
@@ -742,7 +749,7 @@ <h4 class="card-title">Sanskriti Pattanayak</h4>
                             target="_blank "
                             href="mailto:sanskriti.pattanayak@gmail.com "
                           >
-                            <i class="fa fa-envelope"></i>
+                            <i class="fas fa-envelope fa-2x black"></i>
                           </a>
                         </li>
                       </ul>
@@ -753,7 +760,7 @@ <h4 class="card-title">Sanskriti Pattanayak</h4>
             </div>
           </div>
 
-          <div class="col-xs-12 col-sm-6 col-md-6">
+          <div class="member-card">
             <div
               class="image-flip"
               ontouchstart="this.classList.toggle( 'hover'); "
@@ -787,7 +794,7 @@ <h4 class="card-title">Ishita Datta</h4>
                         PR is also incharge of the public relations and social
                         media reach of the chapter.
                       </p>
-                      <ul class="list-inline">
+                      <ul class="list-inline my-auto">
                         <li class="list-inline-item">
                           <a
                             class="social-icon text-xs-center"
@@ -803,7 +810,7 @@ <h4 class="card-title">Ishita Datta</h4>
                             target="_blank "
                             href="mailto:ishitadatta@acm.org "
                           >
-                            <i class="fa fa-envelope"></i>
+                            <i class="fas fa-envelope fa-2x black"></i>
                           </a>
                         </li>
                       </ul>
@@ -818,197 +825,192 @@ <h4 class="card-title">Ishita Datta</h4>
         <h3 class="h1-responsive headers">2019-20</h3>
 
         <section class="pt-5 pb-5">
-          <div class="container">
-            <div class="row">
-              <div class="col-6"></div>
-              <div class="col-12">
-                <div
-                  id="carouselExampleIndicators3"
-                  class="carousel slide"
-                  data-ride="carousel"
-                >
-                  <div class="carousel-inner">
-                    <div class="carousel-item active">
-                      <div class="row">
-                        <div class="frontside col-xs-12 col-sm-6 col-md-3">
-                          <div class="card">
-                            <div class="card-body text-center">
-                              <p>
-                                <img
-                                  class="lazy img-fluid"
-                                  src="img/gif/Blank.gif"
-                                  data-src="img/chair.png"
-                                  alt="card image "
-                                />
-                              </p>
-                              <h4 id="foundingMember" class="card-title">
-                                Ankit Raj
-                              </h4>
-                              <br />
-                              <h5 class="text-primary">Founding Member</h5>
-                            </div>
-                          </div>
+          <div class="container-fluid">
+            <div
+              id="membersCarousel"
+              class="carousel slide"
+              data-ride="carousel"
+            >
+              <div class="carousel-inner">
+                <div class="carousel-item active">
+                  <div class="row">
+                    <div class="frontside col-xs-12 col-sm-6 col-md-3">
+                      <div class="card">
+                        <div class="card-body text-center">
+                          <p>
+                            <img
+                              class="lazy img-fluid"
+                              src="img/gif/Blank.gif"
+                              data-src="img/chair.png"
+                              alt="card image "
+                            />
+                          </p>
+                          <h4 id="foundingMember" class="card-title">
+                            Ankit Raj
+                          </h4>
+                          <br />
+                          <h5 class="text-primary">Founding Member</h5>
                         </div>
-                        <div class="frontside col-xs-12 col-sm-6 col-md-3">
-                          <div class="card">
-                            <div class="card-body text-center">
-                              <p>
-                                <img
-                                  class="lazy img-fluid"
-                                  src="img/gif/Blank.gif"
-                                  data-src="img/Vice-chair.jpeg "
-                                  alt="card image "
-                                />
-                              </p>
-                              <h4 id="foundingMember" class="card-title">
-                                Dhruv Bindra
-                              </h4>
-                              <br />
-                              <h5 class="text-primary">Founding Member</h5>
-                            </div>
-                          </div>
+                      </div>
+                    </div>
+                    <div class="frontside col-xs-12 col-sm-6 col-md-3">
+                      <div class="card">
+                        <div class="card-body text-center">
+                          <p>
+                            <img
+                              class="lazy img-fluid"
+                              src="img/gif/Blank.gif"
+                              data-src="img/Vice-chair.jpeg "
+                              alt="card image "
+                            />
+                          </p>
+                          <h4 id="foundingMember" class="card-title">
+                            Dhruv Bindra
+                          </h4>
+                          <br />
+                          <h5 class="text-primary">Founding Member</h5>
                         </div>
-                        <div class="frontside col-xs-12 col-sm-6 col-md-3">
-                          <div class="card">
-                            <div class="card-body text-center">
-                              <p>
-                                <img
-                                  class="lazy img-fluid"
-                                  src="img/gif/Blank.gif"
-                                  data-src="img/venkat.png"
-                                  alt="card image "
-                                />
-                              </p>
-                              <h4 id="foundingMember" class="card-title">
-                                Venkatavardan R
-                              </h4>
-                              <br />
-                              <h5 class="text-primary">Founding Member</h5>
-                            </div>
-                          </div>
+                      </div>
+                    </div>
+                    <div class="frontside col-xs-12 col-sm-6 col-md-3">
+                      <div class="card">
+                        <div class="card-body text-center">
+                          <p>
+                            <img
+                              class="lazy img-fluid"
+                              src="img/gif/Blank.gif"
+                              data-src="img/venkat.png"
+                              alt="card image "
+                            />
+                          </p>
+                          <h4 id="foundingMember" class="card-title">
+                            Venkatavardan R
+                          </h4>
+                          <br />
+                          <h5 class="text-primary">Founding Member</h5>
                         </div>
-                        <div class="frontside col-xs-12 col-sm-6 col-md-3">
-                          <div class="card">
-                            <div class="card-body text-center">
-                              <p>
-                                <img
-                                  class="lazy img-fluid"
-                                  src="img/gif/Blank.gif"
-                                  data-src="img/secretary.png "
-                                  alt="card image "
-                                />
-                              </p>
-                              <h4 id="foundingMember1" class="card-title">
-                                Omkar Shirigannavar
-                              </h4>
-                              <h5 class="text-primary">Founding Member</h5>
-                            </div>
-                          </div>
+                      </div>
+                    </div>
+                    <div class="frontside col-xs-12 col-sm-6 col-md-3">
+                      <div class="card">
+                        <div class="card-body text-center">
+                          <p>
+                            <img
+                              class="lazy img-fluid"
+                              src="img/gif/Blank.gif"
+                              data-src="img/secretary.png "
+                              alt="card image "
+                            />
+                          </p>
+                          <h4 id="foundingMember1" class="card-title">
+                            Omkar Shirigannavar
+                          </h4>
+                          <h5 class="text-primary">Founding Member</h5>
                         </div>
                       </div>
                     </div>
-                    <div class="carousel-item">
-                      <div class="row">
-                        <div class="frontside col-xs-12 col-sm-6 col-md-3">
-                          <div class="card">
-                            <div class="card-body text-center">
-                              <p>
-                                <img
-                                  class="lazy img-fluid"
-                                  src="img/gif/Blank.gif"
-                                  data-src="img/Meet_ACM.jpg "
-                                  alt="card image "
-                                />
-                              </p>
-                              <h4 id="foundingMember" class="card-title">
-                                Meet Shah
-                              </h4>
-                              <br />
-                              <h5 class="text-primary">Founding Member</h5>
-                            </div>
-                          </div>
+                  </div>
+                </div>
+                <div class="carousel-item">
+                  <div class="row">
+                    <div class="frontside col-xs-12 col-sm-6 col-md-3">
+                      <div class="card">
+                        <div class="card-body text-center">
+                          <p>
+                            <img
+                              class="lazy img-fluid"
+                              src="img/gif/Blank.gif"
+                              data-src="img/Meet_ACM.jpg"
+                              alt="card image "
+                            />
+                          </p>
+                          <h4 id="foundingMember" class="card-title">
+                            Meet Shah
+                          </h4>
+                          <br />
+                          <h5 class="text-primary">Founding Member</h5>
                         </div>
-                        <div class="frontside col-xs-12 col-sm-6 col-md-3">
-                          <div class="card">
-                            <div class="card-body text-center">
-                              <p>
-                                <img
-                                  class="lazy img-fluid"
-                                  src="img/gif/Blank.gif"
-                                  data-src="img/Mohib.jpg "
-                                  alt="card image "
-                                />
-                              </p>
-                              <h4 id="foundingMember" class="card-title">
-                                Mohib Ayub
-                              </h4>
-                              <br />
-                              <h5 class="text-primary">Founding Member</h5>
-                            </div>
-                          </div>
+                      </div>
+                    </div>
+                    <div class="frontside col-xs-12 col-sm-6 col-md-3">
+                      <div class="card">
+                        <div class="card-body text-center">
+                          <p>
+                            <img
+                              class="lazy img-fluid"
+                              src="img/gif/Blank.gif"
+                              data-src="img/Mohib.jpg "
+                              alt="card image "
+                            />
+                          </p>
+                          <h4 id="foundingMember" class="card-title">
+                            Mohib Ayub
+                          </h4>
+                          <br />
+                          <h5 class="text-primary">Founding Member</h5>
                         </div>
-                        <div class="frontside col-xs-12 col-sm-6 col-md-3">
-                          <div class="card">
-                            <div class="card-body text-center">
-                              <p>
-                                <img
-                                  class="lazy img-fluid"
-                                  src="img/gif/Blank.gif"
-                                  data-src="img/yash.jpeg "
-                                  alt="card image "
-                                />
-                              </p>
-                              <h4 id="foundingMember" class="card-title">
-                                Yash Bhardhwaj
-                              </h4>
-                              <br />
-                              <h5 class="text-primary">Founding Member</h5>
-                            </div>
-                          </div>
+                      </div>
+                    </div>
+                    <div class="frontside col-xs-12 col-sm-6 col-md-3">
+                      <div class="card">
+                        <div class="card-body text-center">
+                          <p>
+                            <img
+                              class="lazy img-fluid"
+                              src="img/gif/Blank.gif"
+                              data-src="img/yash.jpeg "
+                              alt="card image "
+                            />
+                          </p>
+                          <h4 id="foundingMember" class="card-title">
+                            Yash Bhardhwaj
+                          </h4>
+                          <br />
+                          <h5 class="text-primary">Founding Member</h5>
                         </div>
-                        <div class="frontside col-xs-12 col-sm-6 col-md-3">
-                          <div class="card">
-                            <div class="card-body text-center">
-                              <p>
-                                <img
-                                  class="lazy img-fluid"
-                                  src="img/gif/Blank.gif"
-                                  data-src="img/kaushik.jpg "
-                                  alt="card image "
-                                />
-                              </p>
-                              <h4 id="foundingMember1" class="card-title">
-                                Kaushik Muralidharan
-                              </h4>
-                              <h5 class="text-primary">Founding Member</h5>
-                            </div>
-                          </div>
+                      </div>
+                    </div>
+                    <div class="frontside col-xs-12 col-sm-6 col-md-3">
+                      <div class="card">
+                        <div class="card-body text-center">
+                          <p>
+                            <img
+                              class="lazy img-fluid"
+                              src="img/gif/Blank.gif"
+                              data-src="img/kaushik.jpg "
+                              alt="card image "
+                            />
+                          </p>
+                          <h4 id="foundingMember1" class="card-title">
+                            Kaushik Muralidharan
+                          </h4>
+                          <h5 class="text-primary">Founding Member</h5>
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
+              <div class="arrows">
+                <a
+                  class="btn btn-primary mb-3 mr-1"
+                  data-target="#membersCarousel"
+                  role="button"
+                  data-slide="prev"
+                >
+                  <i class="fa fa-arrow-left"></i>
+                </a>
+                <a
+                  class="btn btn-primary mb-3"
+                  data-target="#membersCarousel"
+                  role="button"
+                  data-slide="next"
+                >
+                  <i class="fa fa-arrow-right"></i>
+                </a>
+              </div>
             </div>
           </div>
-          <div class="arrows">
-            <a
-              class="btn btn-primary mb-3 mr-1"
-              href="#carouselExampleIndicators3"
-              role="button"
-              data-slide="prev"
-            >
-              <i class="fa fa-arrow-left"></i>
-            </a>
-            <a
-              class="btn btn-primary mb-3"
-              href="#carouselExampleIndicators3"
-              role="button"
-              data-slide="next"
-            >
-              <i class="fa fa-arrow-right"></i>
-            </a>
-          </div>
         </section>
       </section>
     </div>
@@ -1066,13 +1068,13 @@ <h5 class="text-primary">Founding Member</h5>
       </div>
     </footer>
 
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js "></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js "></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js "></script>
-    <script
+    <!-- <script
       src="https://kit.fontawesome.com/de97eeef5c.js "
       crossorigin="anonymous "
-    ></script>
+    ></script> -->
     <script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js "></script>
     <script src="js/main.js "></script>
     <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js "></script>