Add files via upload

src/components/card.css

@@ -0,0 +1,84 @@
+.flip-card-container-main {
+  padding: 1px auto;
+  width: 200px;
+  height: 160px;
+  perspective: 1000px;
+  border-radius: 5px;
+}
+
+.flip-card {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transition: transform 1s;
+  transform-style: preserve-3d;
+}
+
+.flip-card-container:hover .flip-card {
+  transform: rotateY(180deg);
+  /* <=>  rotateY(.5turn) */
+}
+
+.flip-card-container-main:hover .flip-card {
+  transform: rotateY(180deg);
+  /* <=>  rotateY(.5turn) */
+}
+
+/* Position the front and back side */
+
+.flip-card-front,
+.flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-backface-visibility: hidden;
+  /* Safari */
+  backface-visibility: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-radius: 5px;
+  /* border-radius: 0.5rem; */
+}
+
+.flip-card-front {
+  background-color: rgb(0, 0, 0);
+  color: rgb(198, 31, 31);
+}
+
+.flip-card-back {
+  transform: rotateY(180deg);
+  background: #88273a;
+  background: -webkit-linear-gradient(to top, #3f5efb, #fc466b);
+  background: linear-gradient(to top, #3f5efb, #fc466b);
+  position: relative;
+}
+
+.name {
+  top: 10px;
+  color: azure;
+}
+
+.Position {
+  top: 25px;
+  font-weight: 9000;
+  color: azure;
+}
+
+.heading {
+  margin-top: 65px;
+  margin-bottom: 65px;
+  color: aliceblue;
+  padding-bottom: 5px;
+}
+
+.whole {
+  display: grid;
+  justify-content: space-evenly;
+  grid-template-columns: auto auto auto auto;
+   grid-row-gap: 29px;
+   padding-bottom: 50px;
+
+   padding-left: 30px;
+   padding-right: 30px;
+}

src/components/card.js

@@ -0,0 +1,45 @@
+import coder from "./components/coder.jpg";
+import React from "react";
+import Aos from "aos";
+import "aos/dist/aos.css";
+import "./components/card.css";
+import name_list from "./components/name_list";
+
+function Card() {
+  Aos.init({ duration: 2000, offset: 200 });
+  {
+    function This_card(props) {
+      return (
+        <div class="flip-card-container-main" data-aos="fade-up">
+          <div class="flip-card">
+            <div class="flip-card-front">
+              <img src={props.img} alt="" class="fm" />
+            </div>
+            <div class="flip-card-back">
+              <div class="name">
+                <h3>{props.Name}</h3>
+              </div>
+              <div class="Position">
+                <h3>{props.Position}</h3>
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div className="repeat">
+        <div className="heading" data-aos="zoom-in">
+          <center>
+            <h1>Our Team</h1>
+          </center>
+        </div>
+
+        {<div className="whole">{detail_array.map(This_card)};</div>}
+      </div>
+    );
+  }
+}
+
+export default Card;

src/components/head.css

@@ -0,0 +1,45 @@
+
+
+
+.heading {
+    margin-top: 65px;
+    margin-bottom: 65px;
+    color: aliceblue;
+}
+
+img {
+    width: 190px;
+    height: 150px;
+    border-radius: 5px;
+}
+.content {
+    text-align: left;
+    vertical-align: middle;
+    margin-right: 60px;
+}
+
+img.anig {
+    width: 400px;
+    height: 260px;
+    border-radius: 15px;
+}
+
+
+
+.us {
+    color: whitesmoke;
+    padding: 100px;
+    margin-top: 50px;
+    background-color: rgb(70, 37, 108);
+    margin-left: 100px;
+    margin-right: 100px;
+    margin-bottom: 150px;
+    display: flex;
+    flex-direction: row;
+    border-radius: 15px;
+}
+
+
+
+
+

src/components/head.js

@@ -0,0 +1,43 @@
+import team from "./components/team.gif";
+import "./components/head.css";
+import React from "react";
+import Aos from "aos";
+import "aos/dist/aos.css";
+
+function Head() {
+  Aos.init({ duration: 2000, offset: 200 });
+  return (
+    <div>
+      <div className="heading" data-aos="zoom-in">
+        <center>
+          <h1>About Us</h1>
+        </center>
+      </div>
+
+      <div className="us" data-aos="fade-up">
+        <div className="content">
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia
+            quaerat sapiente qui laboriosam officia impedit dolore quasi tenetur
+            quas, accusantium enim corporis atque officiis pariatur! Minus
+            perspiciatis porro mollitia enim delectus consequatur doloremque
+            tempore laborum excepturi voluptatibus vel, magnam aliquid vitae
+            officiis quidem aperiam nesciunt, repudiandae quasi nemo nihil
+            impedit quam. Ullam officiis vel amet quo, repudiandae saepe
+            accusamus ipsa voluptatibus doloremque dolores eveniet
+            exercitationem quas adipisci? Repellat recusandae quo ullam itaque
+            quis eum blanditiis beatae expedita distinctio veritatis quos, sit
+            delectus? Quis nostrum culpa aperiam perspiciatis minima eaque
+            officiis alias architecto, ratione molestiae nulla et pariatur est
+            voluptatum doloremque!
+          </p>
+        </div>
+        <div className="ani">
+          <img src={team} alt="team" className="anig" data-aos="zoom-in-left" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Head;

src/components/name_list.js

@@ -0,0 +1,146 @@
+import coder from "./components/coder.jpg";
+
+const name_list = [
+  {
+    Name: "XYZ",
+    Position: "Position",
+    img: coder,
+  },
+  {
+    Name: "XYZ",
+    Position: "Position",
+    img: coder,
+  },
+  {
+    Name: "XYZ",
+    Position: "Position",
+    img: coder,
+  },
+  {
+    Name: "XYZ",
+    Position: "Position",
+    img: coder,
+  },
+  {
+    Name: "XYZ",
+    Position: "Position",
+    img: coder,
+  },
+  {
+    Name: "XYZ",
+    Position: "Position",
+    img: coder,
+  },
+  {
+    Name: "XYZ",
+    Position: "Position",
+    img: coder,
+  },
+  {
+    Name: "XYZ",
+    Position: "Position",
+    img: coder,
+  },
+  {
+    Name: "XYZ",
+    Position: "Position",
+    img: coder,
+  },
+  {
+    Name: "XYZ",
+    Position: "Position",
+    img: coder,
+  },
+  {
+    Name: "XYZ",
+    Position: "Position",
+    img: coder,
+  },
+  {
+    Name: "XYZ",
+    Position: "Position",
+    img: coder,
+  },
+  {
+    Name: "XYZ",
+    Position: "Position",
+    img: coder,
+  },
+  {
+    Name: "XYZ",
+    Position: "Position",
+    img: coder,
+  },
+  {
+    Name: "XYZ",
+    Position: "Position",
+    img: coder,
+  },
+  {
+    Name: "XYZ",
+    Position: "Position",
+    img: coder,
+  },
+  {
+    Name: "XYZ",
+    Position: "Position",
+    img: coder,
+  },
+  {
+    Name: "XYZ",
+    Position: "Position",
+    img: coder,
+  },
+  {
+    Name: "XYZ",
+    Position: "Position",
+    img: coder,
+  },
+  {
+    Name: "XYZ",
+    Position: "Position",
+    img: coder,
+  },
+  {
+    Name: "XYZ",
+    Position: "Position",
+    img: coder,
+  },
+  {
+    Name: "XYZ",
+    Position: "Position",
+    img: coder,
+  },
+  {
+    Name: "XYZ",
+    Position: "Position",
+    img: coder,
+  },
+  {
+    Name: "XYZ",
+    Position: "Position",
+    img: coder,
+  },
+  {
+    Name: "XYZ",
+    Position: "Position",
+    img: coder,
+  },
+  {
+    Name: "XYZ",
+    Position: "Position",
+    img: coder,
+  },
+  {
+    Name: "XYZ",
+    Position: "Position",
+    img: coder,
+  },
+  {
+    Name: "XYZ",
+    Position: "Position",
+    img: coder,
+  },
+];
+
+export default detail_array;