Requested Changes

Author: AuraOfDivinity

package.json

@@ -24,6 +24,7 @@
     "markdown-it-task-lists": "^2.1.1",
     "marked": "^0.8.0",
     "react": "^16.12.0",
+    "react-awesome-modal": "^2.0.5",
     "react-bootstrap": "^1.0.0-beta.16",
     "react-dom": "^16.12.0",
     "react-markdown": "^4.3.1",

src/components/Activities/ActivityCard.js

@@ -1,24 +1,16 @@
-import React from "react";
-import "./ActivityCard.css";
+import React from 'react';
+import './ActivityCard.css';
 
 const ActivityCard = props => {
   return (
-    <div className="card text-center activity overflow-hidden">
-      <img src={props.activity.img} alt="" className="card-img-top activity" />
+    <div className='card text-center activity overflow-hidden'>
+      <img src={props.activity.img} alt='' className='card-img-top activity' />
 
-      <div className="card-body text-dark flex-column d-flex">
-        <h4 className="card-title activity" style={{ height: "200px" }}>
+      <div className='card-body text-dark flex-column d-flex'>
+        <h4 className='card-title activity' style={{ height: '100' }}>
           {props.activity.title}
         </h4>
-        <p className="card-text text-secondary">{props.activity.description}</p>
-
-        <a
-          href={props.activity.link}
-          className="activity btn btn-outline-primary mt-auto btn-block align-self-end"
-          style={{ marginTop: "auto" }}
-        >
-          Read More
-        </a>
+        <p className='card-text text-secondary'>{props.activity.description}</p>
       </div>
     </div>
   );

src/pages/Blogs/BlogList.css

@@ -0,0 +1,69 @@
+.card.activity {
+  width: 20rem;
+  height: 400px;
+}
+
+.card.activity:hover {
+  box-shadow: 5px 10px 20px 1px rgba(0, 0, 0, 0.253);
+}
+
+.card.activity.card-body {
+  padding: 3rem 0;
+}
+
+.card.activity.card-text {
+  font-size: 0.9rem;
+  padding: 0.4rem 1.9rem;
+}
+
+.container.fluid.row {
+  padding-top: 6rem;
+}
+
+.card-img-top.activity {
+  transform: scale(1);
+  transition: transform 0.5s ease;
+  height: 150px;
+  object-fit: scale-down;
+}
+
+.card-img-top.activity:hover {
+  transform: scale(1.8);
+  overflow: hidden;
+}
+
+.btn.activity {
+  color: #22247a;
+  background-color: #fff;
+  border-color: #22247a;
+}
+
+.btn.activity:hover {
+  color: #fff;
+  background-color: #22247a;
+  border-color: #22247a;
+}
+
+.card-title.activity {
+  font-weight: bold;
+  height: 100px;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: #3133aa;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #22247a;
+}