cleaned teams

omen1650ti · Dec 6, 2022 · 616e6f4 · 616e6f4
1 parent e114dc8
commit 616e6f4
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 12 deletions.
diff --git a/src/pages/Teams/TeamCard.js b/src/pages/Teams/TeamCard.js
@@ -2,19 +2,25 @@ import React from 'react'
 import './Teams.css'
 
 const TeamCard = ({id, name, image}) => {
-    if(id%2===0){
-        return(
-            <div className="team_card team_up">
-            <img src={image} className='team_person_image' alt="" />
-            <p className='team_person_name'> {name} </p>     
-             </div>
-        )
-    }
+//     if(id%2===0){
+//         return(
+//             <div className="team_up">
+//             <div class="card 1">
+//   <div class="card_image"> <img src="https://i.redd.it/b3esnz5ra34y.jpg" /> </div>
+//   <div class="card_title title-white">
+//     <p>Card Title</p>
+//   </div>
+// </div>
+//              </div>
+//         )
+//     }
   return (
-    <div  className="team_card">
-            <img src={image} className='team_person_image' alt="" />
-            <p className='team_person_name'> {name} </p>
+    <div class="card 1">
+    <div class="card_image"> <img src={image} /> </div>
+    <div class="card_title title-white">
+      <p>{name}</p>
     </div>
+  </div>
   )
 }
 

diff --git a/src/pages/Teams/Teams.css b/src/pages/Teams/Teams.css
@@ -20,4 +20,62 @@
     border-radius: 3rem;
     width: 10rem;
     height: 10rem;
-}
+}
+
+
+
+/* new */
+
+.card {
+    margin: 30px auto;
+    width: 300px;
+    height: 300px;
+    border-radius: 40px;
+  box-shadow: 5px 5px 30px 7px rgba(0,0,0,0.25), -5px -5px 30px 7px rgba(0,0,0,0.22);
+    cursor: pointer;
+    transition: 0.4s;
+  }
+
+  .card .card_image {
+    width: inherit;
+    height: inherit;
+    border-radius: 40px;
+  }
+
+  .card .card_image img {
+    width: inherit;
+    height: inherit;
+    border-radius: 40px;
+    object-fit: cover;
+  }
+
+  .card .card_title {
+    text-align: center;
+    /* border-radius: 0px 0px 40px 40px; */
+    border-radius: 10px ;
+    font-family: sans-serif;
+    font-weight: bold;
+    font-size: 30px;
+    margin-top: -80px;
+    height: 40px;
+    opacity: 100px;
+
+  }
+
+  .card:hover {
+    transform: scale(0.9, 0.9);
+    box-shadow: 5px 5px 30px 15px rgba(0,0,0,0.25), 
+      -5px -5px 30px 15px rgba(0,0,0,0.22);
+  }
+
+  .title-white {
+    color: #ffff;
+    display: flex;
+    background: linear-gradient(180deg,rgba(20, 131, 222, 0.97),#21b8cb),#efffec;
+    padding: 2px 3px 2px 3px;
+    width: fit-content;
+    justify-content: center;
+    height: fit-content;
+    font-family: 'Robotto';
+  }
+