💄 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,10 +35,12 @@ 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"
/> />
<div>
<h2>Stefan Arnold</h2> <h2>Stefan Arnold</h2>
<h3>Inhaber</h3> <h3>Inhaber</h3>
</div> </div>
</div> </div>
</div>
</FadeIn> </FadeIn>
</div> </div>
</main> </main>

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,26 +2,37 @@
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;
} }
div {
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
h2 { h2 {
// margin: 0 1rem; // margin: 0 1rem;
margin: 0; margin: 0;
@@ -36,3 +47,4 @@
} }
} }
} }
}