Eine der wichtigsten Seiten einer Webseite ist die sogenannte ≪About Us≫ Seite – die Kunden möchten nämlich wissen wer hinter der Webseite / Firma / Produkt steht und wer hier nicht vorsichtig ist verliert schnell an Kunden. Aus diesem Grund sollte man sich wirklich Mühe geben, wie man die eigenen Mitarbeiter und sich selbst auf dieser ≪Über uns≫ Seite präsentiert.
Nicht nur ein guter Text ist wichtig, sondern wenn man Mitarbeiter an der Front hat – sollte man die auch vorstellen.
Im heutigen Beitrag zeige ich euch eine Idee wie man so eine Team Seite gestalten kann.
Video
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <div class="team">
<div class="container">
<div class="team-member">
<div class="mitglieder">
<h3>Sara Musterfrau</h3>
<p>CEO</p>
<img src="bilder/sara.jpg" class="profilbild">
</div>
<div class="mitglieder">
<h3>Dorisu Müller</h3>
<p>Team Lead</p>
<img src="bilder/doris.jpg" class="profilbild">
</div>
<div class="mitglieder">
<h3>Max Mustermann</h3>
<p>Programmierer</p>
<img src="bilder/max.jpg" class="profilbild">
</div>
<div class="mitglieder">
<h3>Peter Lustig</h3>
<p>Designer</p>
<img src="bilder/peter.jpg" class="profilbild">
</div>
</div>
</div>
</div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | .team {
padding: 100px 0;
}
.mitglieder {
position: relative;
display: flex;
justify-content: space-between;
padding: 30px 15px;
}
.mitglieder+.mitglieder {
border-top: 1px solid #7d7d7d;
}
.mitglieder:hover {
background-color: #6f007b;
transition: 200ms;
}
.mitglieder img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
z-index: 1;
clip-path: inset(0 0 100% 0);
}
.mitglieder:hover img {
clip-path: inset(0);
transition: 500ms;
}
.mitglieder h3 {
color: #fff;
text-transform: capitalize;
font-size: 25px;
}
.mitglieder p {
color: #fea500;
text-transform: capitalize;
}
@media(max-width:767px) {
.team-member {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.mitglieder+.mitglieder {
border: none;
}
.mitglieder {
display: block;
padding: 0;
margin-bottom: 50px;
}
.mitglieder:hover {
background-color: transparent;
}
.mitglieder img {
position: static;
transform: none;
clip-path: inset(0);
margin-top: 20ps;
}
} |
0 Kommentare