In diesem Video zeige ich euch eine einfache aber sehr schöne Methode wie ihr euer Team auf der Webseite vorstellen könnt und zwar so, dass nicht nur ein kleiner Text platz hat sondern auch die Social Media Profile der Leute.
Es ist wirklich sehr schön und einfach und man kann es sehr schnell an seine eigenen Ideen anpassen.
Video Anleitung
Quellcode
Denkt einfach daran, HTML Code in den HTML Bereich, CSS in den style.css und dann sollte es gehen 🙂
Der HTML Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <div class="container"> <div class="image"> <img src="generated-photos-child.jpg"> </div> <div class="details"> <h2>Lukas Mustermann</h2> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </p> <span class="social"> <a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-youtube"></i></a> <a href="#"><i class="fa fa-linkedin"></i></a> </span> </div> </div> |
Der CSS Code
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 | .container {
width: 600px;
height: 600px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-shadow: 0px 0px 20px #000;
}
.image, .details {
position: absolute;
width: 100%;
height: 100%;
}
.details {
padding: 20px;
box-sizing: border-box;
background: rgba(255,255,255,0.7);
transform: scale(0);
transition: 0.5s;
transform-origin: bottom right;
}
.social {
margin-top: 100px;
display: block;
}
.social a {
font-size: 2em;
margin: 10px;
color: white;
background-color: #e74c3c;
padding: 20px 30px 20px 30px;
text-align: center;
transition: 1s;
}
.social a:hover {
background-color: #e74c3c;
color: #4F7BF1;
}
h2 {
margin-bottom: 50px;
font-size: 25px;
}
.container:hover .details {
transform: scale(1);
} |
0 Kommentare