Requested changes

Author: AuraOfDivinity

src/components/Activities/ActivityCard.css

@@ -0,0 +1,49 @@
+.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;
+}

src/components/Activities/ActivityCard.js

@@ -1,46 +1,25 @@
 import React from "react";
-import { Card } from "react-bootstrap";
+import "./ActivityCard.css";
+
 const ActivityCard = props => {
   return (
-    <div>
-      <Card
-        style={{
-          width: "65em",
-          marginBottom: "2vh",
-          border: "1px solid #d4d0cf"
-        }}
-        className="shadow-lg"
-      >
-        <Card.Img
-          variant="top"
-          src={props.activity.img}
-          style={{ height: "175px", objectFit: "cover" }}
-        />
-        <Card.Body>
-          <Card.Title>
-            <div style={{ width: "300px", margin: "0 auto" }}>
-              <h3
-                style={{
-                  textTransform: "capitalize",
-                  overflowWrap: "break-word"
-                }}
-              >
-                {props.activity.title}
-              </h3>
-            </div>
-          </Card.Title>
-          <Card.Text style={{ textTransform: "capitalize" }}>
-            {props.activity.text}
-          </Card.Text>
-          <a
-            href={props.activity.link}
-            class="btn btn-sm btn-primary"
-            style={{ backgroundColor: "#22247A" }}
-          >
-            Read More
-          </a>
-        </Card.Body>
-      </Card>
+    <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" }}>
+          {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>
+      </div>
     </div>
   );
 };

src/pages/Home/Components/Activities.js

@@ -1,7 +1,5 @@
-import React, { Component } from "react";
+import React from "react";
 import ActivityCard from "../../../components/Activities/ActivityCard";
-import KWoC from "../images/kwoc_logo.png";
-import workshop19 from "../images/workshop.jpg";
 import "./common.css";
 
 class Activities extends React.Component {
@@ -23,11 +21,11 @@ class Activities extends React.Component {
         return res.json();
       })
       .then(resData => {
-        for (let i = 0; i < 4; i++) {
+        console.log(resData);
+        for (let i = 0; i < 3; i++) {
           let obj = {};
           obj.title = resData.items[i].title;
           obj.link = resData.items[i].link;
-
           let m,
             urls = [],
             str = resData.items[i].content_encoded,
@@ -37,6 +35,16 @@ class Activities extends React.Component {
             urls.push(m[1]);
           }
           obj.img = urls[0];
+
+          let reg = /<\s*p[^>]*>([^<]*)<\s*\/\s*p\s*>/;
+          let stream = resData.items[i].content_encoded.match(reg);
+
+          obj.description =
+            stream[1]
+              .split(" ")
+              .slice(0, 20)
+              .join(" ") + "...";
+
           activities.push(obj);
         }
         this.setState({ activities: activities }, () => {
@@ -51,16 +59,14 @@ class Activities extends React.Component {
     return (
       <div id="activity">
         <h1 className="component-heading">Activities</h1>
-        <div class="container">
-          <div
-            class="row"
-            style={{
-              display: "flex",
-              justifyContent: "space-around"
-            }}
-          >
+        <div className="container-fluid d-flex justify-content-center">
+          <div className="row">
             {this.state.activities.map((currentActivity, index) => {
-              return <ActivityCard key={index} activity={currentActivity} />;
+              return (
+                <div className="col-md-4">
+                  <ActivityCard key={index} activity={currentActivity} />
+                </div>
+              );
             })}
           </div>
         </div>