technobyte-nitkkr · anjali3500 · Jan 17, 2022
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "dat.gui": "^0.7.7",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-owl-carousel": "^2.3.3",
     "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.0",
     "sass": "^1.46.0",

diff --git a/public/index.html b/public/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>  
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />

diff --git a/src/App.js b/src/App.js
@@ -5,13 +5,17 @@ import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import Developers from "./Pages/developers";
 import Home from "./Pages/home/Home";
 import Team from "./Pages/team/team";
+import Category from "./Pages/category/Category";
 
 function App() {
   return (
     <div className="App">
       <Router>
         <Routes>
-          <Route path="/" element={<Home />}></Route>
+          <Route path="/" element={<Home />}>
+
+          </Route>
+          <Route path="/categories" element ={<Category />} />
         </Routes>
       </Router>
     </div>

diff --git a/src/Pages/category/CardsCat.css b/src/Pages/category/CardsCat.css
@@ -0,0 +1,55 @@
+.bodycard {
+  text-align: center;
+  font-family: Arial;
+
+}
+
+.a-box {
+  display: inline-block;
+  width: 240px;
+  text-align: center;
+}
+
+.img-container {
+    height: 230px;
+    width: 200px;
+    overflow: hidden;
+    border-radius: 0px 0px 20px 20px;
+    display: inline-block;
+    z-index:99;
+}
+
+.img-container .img {
+    transform: skew(0deg, -13deg);
+    height: 250px;
+    margin: -35px 0px 0px -70px;
+}
+
+.inner-skew {
+    display: inline-block;
+    border-radius: 20px;
+    overflow: hidden;
+    padding: 0px;
+    transform: skew(0deg, 13deg);
+    font-size: 0px;
+    margin: 30px 0px 0px 0px;
+    background: #c8c2c2;
+    height: 250px;
+    width: 200px;
+}
+
+.text-container {
+  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
+  padding: 120px 20px 20px 20px;
+  border-radius: 20px;
+  background: #fff;
+  margin: -120px 0px 0px 0px;
+  line-height: 19px;
+  font-size: 14px;
+}
+
+.text-container h3 {
+  margin: 20px 0px 10px 0px;
+  color: #04bcff;
+  font-size: 18px;
+}
diff --git a/src/Pages/category/CardsCat.js b/src/Pages/category/CardsCat.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import "./CardsCat.css"
+
+function CardsCat(props) {
+    return (
+      <div className='bodycard'>
+      <div className="a-box">
+      <div className="img-container">
+        <div className="img-inner">
+          <div className="inner-skew">
+            <img className="img" src={props.img}></img>
+          </div>
+        </div>
+      </div>
+      <div className="text-container">
+        <h3>{props.name}</h3>
+
+      </div>
+
+    </div>
+    </div>
+
+
+    );
+}
+
+export default CardsCat
diff --git a/src/Pages/category/Category.css b/src/Pages/category/Category.css
@@ -0,0 +1,23 @@
+
+body{
+	background-color: black;
+}
+.title  
+{  
+        margin-bottom: 20px;  
+        padding:20px  
+}  
+.img  
+{  
+        height: 260px;width:100%  
+}  
+.category-heading
+{
+    font-size: 5rem;
+    color:white;
+    text-shadow: 0 0 10px #03bcf4, 0 0 20px #03bcf4, 0 0 40px #03bcf4,
+      0 0 80px #03bcf4, 0 0 160px #03bcf4;
+	  text-align: center;
+	  margin-bottom: 5%;
+
+}
diff --git a/src/Pages/category/Category.js b/src/Pages/category/Category.js
@@ -0,0 +1,94 @@
+import React, { useEffect, useState } from "react";
+import OwlCarousel from "react-owl-carousel";
+import axios from "axios";
+import CardsCat from "./CardsCat";
+import "owl.carousel/dist/assets/owl.carousel.css";
+import "owl.carousel/dist/assets/owl.theme.default.css";
+
+import "./Category.css";
+// import Heading from "./heading.js";
+function Category() {
+  const options = {
+    margin: 30,
+    responsiveClass: true,
+    nav: true,
+    dots: true,
+    autoplay: false,
+    // navText: ["<", ">"],
+    smartSpeed: 1000,
+    responsive: {
+      0: {
+        items: 1,
+      },
+      515: {
+        items: 2,
+      },
+      700: {
+        items: 3,
+      },
+      1000: {
+          items: 4,
+      }
+    },
+  };
+  const [data, setData] = useState([]);
+  const [load, setLoad] = useState(false);
+
+  const getData = async () => {
+    try {
+      const res = await axios.get(
+        "https://techspardhabackend.herokuapp.com/events/categories"
+      );
+      setData(res.data.data.categories);
+      console.log(res);
+      //console.log(res.data.data);
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  useEffect(()=>{
+    getData();
+  },[load])
+  useEffect(() => {
+    setLoad(true);
+  }, []);
+
+  return (
+    <div
+      style={{
+        // backgroundImage: "url(" + background + ")",
+        backgroundColor: "#000",
+        backgroundSize: "cover",
+        widht:"100vw",  
+        height: "100vh"    
+    }}
+    >
+      {/* <div class="container-fluid">
+        <Heading />
+      </div> */}
+      {console.log(data)}
+      <div className="category-heading">Categories</div>
+      <div class="container-fluid">
+        {load? <OwlCarousel
+          className="slider-items owl-carousel owl-theme"
+          loop
+          nav
+          {...options}
+        >
+          {data.map((x, index) => {
+            {
+              console.log("Helllooooooooooooooooooooooooooo");
+            }
+            return (
+              <div key={index}>
+                <CardsCat name={x.categoryName} img={x.imgUrl} icon={x.icon} />
+              </div>
+            );
+          })}
+        </OwlCarousel> : <></>}
+      </div>
+    </div>
+  );
+}
+
+export default Category;