Merge pull request #11 from trisha-thakur/trisha

blogs page complete and shardeum added to events

Author: Anubhav-Pathak

src/assets/images/blog/Rectangle 11.png

@@ -1,3 +1,34 @@
+.cards {
+  display: flex;
+  margin-top: 10%;
+}
+
+.card-elements {
+   position: relative;
+   margin-right: 80px;
+}
+
+.box {
+  height: 300px;
+  width: 300px;
+  /* position: absolute; */
+  z-index: 1;
+}
+
+.card {
+  height: 300px;
+  width: 300px;
+  position: absolute;
+  z-index: 2;
+  top: 0px; 
+  left: 0px;
+}
+
+.card:hover{
+  top:50px;
+  left:0px;
+}
+
 .medium-widget-article__item {
   padding: 3px !important;
   box-sizing: border-box !important;

src/assets/images/blog/ai.png

@@ -1,27 +1,32 @@
 import React from "react";
-import { Button } from "reactstrap";
+import box from "../../assets/images/blog/box.png"
+import bc from "../../assets/images/blog/bc.png"
+import ai from "../../assets/images/blog/ai.png"
+import web from "../../assets/images/blog/web.png"
+// import { Button } from "reactstrap";
 
 import "./Blog.css";
 
 const Blog = () => {
-    // useEffect(() => {
-    //     // try {
-    //     //   var widget = document.getElementById("medium-widget");
-    //     //   if (!!widget) {
-    //     //     window.mediumWidget();
-    //     //   }
-    //     // } catch (e) {
-    //     //   window.location.reload();
-    //     // }
-    // }, []);
+  // useEffect(() => {
+  //     // try {
+  //     //   var widget = document.getElementById("medium-widget");
+  //     //   if (!!widget) {
+  //     //     window.mediumWidget();
+  //     //   }
+  //     // } catch (e) {
+  //     //   window.location.reload();
+  //     // }
+  // }, []);
 
-    return (
-        <React.Fragment>
-            <div className="col-12 col-lg-9 mx-auto">
-                <h1 data-aos="zoom-in-up" style={{ marginTop: "120px" }}>
-                    DataX
-                </h1>
-                <p style={{ margin: "30px auto" }}>
+  return (
+    <React.Fragment>
+      <div className="col-12 col-lg-9 mx-auto">
+        <h1 data-aos="zoom-in-up" style={{ marginTop: "120px" }}>
+          DataX
+        </h1>
+        <hr/>
+        {/*<p style={{ margin: "30px auto" }}>
                     A Multidisciplinary Tech Journal sharing codes, concepts, experiences,
                     and views.
                 </p>
@@ -30,18 +35,24 @@ const Blog = () => {
                         Publication Link
                     </Button>
                 </a>
-                <hr />
-                {/* <div className="col-11 mx-auto mt-5">
-                    <div
-                        data-aos="zoom-in-up"
-                        data-aos-duration="30000"
-                        id="medium-widget"
-                    ></div>
-                </div>
-                <hr /> */}
+                <hr />*/}
+        <div className="cards">
+            <div className="card-elements" onClick={()=>window.open("https://medium.com/data-science-community-srm/tagged/blockchain")}>
+                <img src={box} className="box" alt="box"></img>
+                <img src={bc } className="card" alt="card"></img>
             </div>
-        </React.Fragment>
-    );
+            <div className="card-elements" onClick={()=>window.open("https://medium.com/data-science-community-srm/tagged/data-science")}>
+                <img src={box} className="box" alt="box"></img>
+                <img src={ai} className="card" alt="card"></img>
+            </div>
+            <div className="card-elements" onClick={()=>window.open("https://medium.com/data-science-community-srm/tagged/web-development")}>
+                <img src={box} className="box" alt="box"></img>
+                <img src={web} className="card" alt="card"></img>
+            </div>
+        </div>
+      </div>
+    </React.Fragment>
+  );
 };
 
 export default Blog;