Initial Commits

src/Components/Team/Team_subheader/Teamsubheader.css

@@ -0,0 +1,34 @@
+#teamsub {
+  display: flex;
+}
+
+#teamsub img {
+  width: 100%;
+  opacity: 10%;
+}
+
+.left {
+  position: absolute;
+  top: 30%;
+  left: 10%;
+  font-size: 25px;
+}
+
+.left h3 {
+  font-size: 35px;
+}
+
+.left p {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.left a {
+  color: black;
+  text-decoration: none;
+}
+
+.left a:hover {
+  color: var(--main-color);
+  transition: 0.5s;
+}

src/Components/Team/Team_subheader/Teamsubheader.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import './Teamsubheader.css'
+import { Link } from "react-router-dom";
+import subheaderimg from "../../../Assets/subhero.png";
+
+const teamsubheader = () => {
+  return (
+    <section id="teamsub">
+      <img src={subheaderimg} alt="" />
+
+      <div className="left">
+        <p>
+          <h3>Team</h3>
+          <Link to="/">Home</Link> / Team
+        </p>
+      </div>
+    </section>
+  )
+}
+
+export default teamsubheader

src/Components/Team/Teamsection/Teamsection.css

@@ -0,0 +1,44 @@
+#team{
+    display: flex;
+    flex-direction: column;
+    padding: 100px 170px;
+    gap: 50px;
+}
+
+.team_section{
+    display: flex;
+    justify-content: space-between;
+}
+
+.team_member{
+    display: flex;
+    flex-direction: column;
+    width: 30%;
+    background-color: #f6f6f6;
+    box-shadow: 0 20px 10px 0 rgba(0,0,0,.08);
+}
+
+.team_member:hover{
+    box-shadow: 0 20px 10px 0 rgba(0, 0, 0, 0.37);
+    transition: 0.5s;
+}
+
+.team_member_description{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 30px;
+    background-color: white;
+}
+
+.team_member_img img{
+    width: 100%;
+}
+
+.team_member_description h3{
+    font-size: 25px;
+}
+
+.team_member_description p{
+    color: var(--text-color);
+}

src/Components/Team/Teamsection/Teamsection.jsx

@@ -0,0 +1,94 @@
+import React from "react";
+import "./Teamsection.css";
+import team1 from "../../../Assets/team_member1.png";
+import team2 from "../../../Assets/team_member2.png";
+import team3 from "../../../Assets/team_member3.png";
+import team4 from "../../../Assets/team_member4.png";
+import team5 from "../../../Assets/team_member5.png";
+import team6 from "../../../Assets/team_member6.png";
+
+const Teamsection = () => {
+  return (
+    <section id="team">
+      <div className="team_section">
+        {/* team 1 */}
+
+        <div className="team_member">
+          <div className="team_member_img">
+            <img src={team1} alt="" />
+          </div>
+          <div className="team_member_description">
+            <h3>Luke Miller</h3>
+            <p>Salesman</p>
+          </div>
+        </div>
+
+        {/* team 2 */}
+
+        <div className="team_member">
+          <div className="team_member_img">
+            <img src={team2} alt="" />
+          </div>
+          <div className="team_member_description">
+            <h3>Michael Diaz</h3>
+            <p>Business Owner</p>
+          </div>
+        </div>
+
+        {/* team 3 */}
+
+        <div className="team_member">
+          <div className="team_member_img">
+            <img src={team3} alt="" />
+          </div>
+          <div className="team_member_description">
+            <h3>Briana Ross</h3>
+            <p>Photographer</p>
+          </div>
+        </div>
+      </div>
+
+      {/* row 2 */}
+
+      <div className="team_section">
+        {/* team 1 */}
+
+        <div className="team_member">
+          <div className="team_member_img">
+            <img src={team4} alt="" />
+          </div>
+          <div className="team_member_description">
+            <h3>Lauren Rivera</h3>
+            <p>Car Detailist</p>
+          </div>
+        </div>
+
+        {/* team 5 */}
+
+        <div className="team_member">
+          <div className="team_member_img">
+            <img src={team5} alt="" />
+          </div>
+          <div className="team_member_description">
+            <h3>Martin Rizz</h3>
+            <p>Mechanic</p>
+          </div>
+        </div>
+
+        {/* team 6 */}
+
+        <div className="team_member">
+          <div className="team_member_img">
+            <img src={team6} alt="" />
+          </div>
+          <div className="team_member_description">
+            <h3>Caitlyn Hunt</h3>
+            <p>Manager</p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Teamsection;

src/Pages/Team.jsx

@@ -1,8 +1,15 @@
 import React from 'react'
+import Teamsection from '../Components/Team/Teamsection/Teamsection';
+import Teamsubheader from '../Components/Team/Team_subheader/Teamsubheader';
+import Aboutbanner from '../Components/About/Aboutbanner/Aboutbanner'
 
 const Team = () => {
   return (
-    <div>Team</div>
+    <div>
+      <Teamsubheader/>
+      <Teamsection/>
+      <Aboutbanner />
+    </div>
   )
 }