💄 Update Team Card Style

This commit is contained in:
stefan080106
2022-09-20 15:41:31 +02:00
parent 03b9e3e75c
commit 2cb34c8b40
3 changed files with 36 additions and 22 deletions

View File

@@ -35,8 +35,10 @@ export default function Home() {
src="https://cdn.discordapp.com/attachments/933369908341932052/983361091063128124/Profile_Image2.png" src="https://cdn.discordapp.com/attachments/933369908341932052/983361091063128124/Profile_Image2.png"
alt="ProfileImage" alt="ProfileImage"
/> />
<h2>Stefan Arnold</h2> <div>
<h3>Inhaber</h3> <h2>Stefan Arnold</h2>
<h3>Inhaber</h3>
</div>
</div> </div>
</div> </div>
</FadeIn> </FadeIn>

View File

@@ -1 +1 @@
.teamContainer{width:100%;display:flex;justify-content:space-around;align-items:center;flex-wrap:wrap}.teamContainer div{height:300px;width:250px;border:1px solid #000;border-radius:10px;text-align:center}.teamContainer div img{-o-object-fit:cover;object-fit:cover;width:100%;height:75%;border-top-left-radius:10px;border-top-right-radius:10px}.teamContainer div h2{margin:0;padding:0}.teamContainer div h3{margin:0;padding:0;color:gray;font-weight:normal} .teamContainer{width:100%;display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}.teamContainer>div{height:260px;width:250px;display:flex;justify-content:space-around;align-items:center;flex-direction:column;border-radius:10px;box-shadow:rgba(0,0,0,.24) 0px 3px 15px;text-align:center}.teamContainer>div img{-o-object-fit:cover;object-fit:cover;width:50%;height:50%;border-radius:50%}.teamContainer>div div{display:flex;justify-content:space-around;align-items:center;flex-direction:column}.teamContainer>div div h2{margin:0;padding:0}.teamContainer>div div h3{margin:0;padding:0;color:gray;font-weight:normal}

View File

@@ -2,37 +2,49 @@
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-around; justify-content: flex-start;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
div { > div {
height: 300px; height: 260px;
width: 250px; width: 250px;
border: 1px solid black; display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
border-radius: 10px; border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 15px;
text-align: center; text-align: center;
img { img {
object-fit: cover; object-fit: cover;
width: 100%; width: 50%;
height: 75%; height: 50%;
border-top-left-radius: 10px; border-radius: 50%;
border-top-right-radius: 10px;
} }
h2 { div {
// margin: 0 1rem; display: flex;
margin: 0; justify-content: space-around;
padding: 0; align-items: center;
} flex-direction: column;
h3 {
// margin: -0.5rem 1rem; h2 {
margin: 0; // margin: 0 1rem;
padding: 0; margin: 0;
color: grey; padding: 0;
font-weight: normal; }
h3 {
// margin: -0.5rem 1rem;
margin: 0;
padding: 0;
color: grey;
font-weight: normal;
}
} }
} }
} }