Merge pull request #301 from 992manav/feat/responsive

Implemented responsive design for Mobile veiw

style/style.css

@@ -64,7 +64,7 @@ section {
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  text-decoration:none;
+  text-decoration: none;
 }
 
 #navbar-link-list-container {
@@ -104,7 +104,7 @@ section {
   transition: color 0.3s ease;
 }
 .navbar a::after {
-  content: '';
+  content: "";
   position: absolute;
   width: 100%;
   height: 2px;
@@ -200,7 +200,7 @@ section {
   top: -75px;
   transition: transform 0.2s;
   background-color: #fff;
-  opacity:98%;
+  opacity: 98%;
 }
 
 /*Banner section styling*/
@@ -406,12 +406,12 @@ section {
   box-shadow: 1px 3px 14px rgba(0, 0, 0, 0.088);
   width: 325px;
   text-align: center;
-  margin: 50px 20px;
-  padding: 20px;
+  margin: 25px 10px;
+  padding: 10px;
   border-radius: 25px;
   background-color: #fff;
-  height: 400px;
-  transition: all 0.5s ease;
+  min-height: 400px;
+  transition: all 0.4s ease;
   position: relative;
 }
 
@@ -427,27 +427,29 @@ section {
 .card-details h1 {
   font-family: "Space Mono", cursive;
   text-transform: capitalize;
+  font-size: 2rem;
 }
 
 .card-details h5 {
-  font-size: 15px;
+  font-size: 1rem;
+  font-weight: 500;
 }
 
 .card-details p {
   font-family: "Space Mono", cursive;
-  font-size: 15px;
 }
 
 .card:hover {
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
-  scale:1.05;
+  scale: 1.05;
   transition: 1s ease !important ;
   background: linear-gradient(145deg, #f0f0f0, #ffffff);
 }
 
-.card::before, .card::after {
-  content: '';
-  position: absolute;
+.card::before,
+.card::after {
+  content: "";
+  position: relative;
   width: 0;
   height: 0;
   border: 2px solid transparent;
@@ -469,13 +471,14 @@ section {
   border-right-color: #c87cee;
 }
 
-.card:hover::before, .card:hover::after {
+.card:hover::before,
+.card:hover::after {
   width: 100%;
   height: 100%;
 }
 
 .social-icon a {
-  font-size: 1.5rem;
+  font-size: 1rem;
   width: 3rem;
   height: 3rem;
   color: rgb(10, 3, 50);
@@ -555,14 +558,14 @@ section {
 }
 /*help section style*/
 .contribute {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .contribute-container {
   padding: 50px;
-  margin-bottom: 40PX;
+  margin-bottom: 40px;
   width: 800px;
   text-align: center;
   align-items: center;