Creative Profil Container mit CSS

von | Dez 17, 2019 | Mein Youtube Kanal | 0 Kommentare

Schlagwörter: CSS

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

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung