diff --git a/icons/github.png b/icons/github.png new file mode 100644 index 0000000..921c14f Binary files /dev/null and b/icons/github.png differ diff --git a/icons/instagram.png b/icons/instagram.png new file mode 100644 index 0000000..06bdb76 Binary files /dev/null and b/icons/instagram.png differ diff --git a/icons/linkedin.png b/icons/linkedin.png new file mode 100644 index 0000000..c1511e6 Binary files /dev/null and b/icons/linkedin.png differ diff --git a/index.html b/index.html index 7a7ec04..133c495 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,7 @@
+
+

Kontakt

+

Am besten nimmt man mit mir über eine dieser Plattformen kontakt auf, dort bin ich aktiv und bemerke die Nachrichten sehr schnell.

+
+ + + +
+
+ \ No newline at end of file diff --git a/style.css b/style.css index c5a79f8..f7b6116 100644 --- a/style.css +++ b/style.css @@ -211,7 +211,7 @@ body { flex-direction: column; justify-content: center; align-items: center; - height: 400px; /* Erhöht die Höhe für den zusätzlichen Text */ + height: 400px; text-decoration: none; color: white; font-size: 24px; @@ -222,28 +222,71 @@ body { cursor: pointer; transition: transform 0.3s ease, background-color 0.3s ease, border 0.3s ease; overflow: hidden; - padding: 10px; /* Fügt Innenabstand hinzu */ + padding: 10px; } .grd-item img { - height: 200px; /* Erhöht die Höhe des Bildes */ - width: 100%; /* Lässt das Bild die gesamte Breite des Buttons einnehmen */ - object-fit: contain; /* Behält das Seitenverhältnis des Bildes bei */ - margin-bottom: 10px; /* Fügt Abstand unter dem Bild hinzu */ + height: 200px; + width: 100%; + object-fit: contain; + margin-bottom: 10px; } .grd-item h2 { - margin: 10px 0 5px 0; /* Fügt Abstand über und unter dem Titel hinzu */ + margin: 10px 0 5px 0; font-size: 18px; } .grd-item p { - font-size: 14px; /* Reduziert die Schriftgröße der Beschreibung */ - text-align: center; /* Zentriert den Beschreibungstext */ + font-size: 14px; + text-align: center; } .grd-item:hover { transform: scale(1.1); background-color: #555; border: 2px solid #666; +} + +/*Kontakt*/ + +#kontakt { + margin: 20em auto; + text-align: center; +} + +.circle-container { + display: flex; + justify-content: center; + gap: 20px; + margin-top: 20px; +} + +.circle { + display: flex; + justify-content: center; + align-items: center; + width: 100px; + height: 100px; + border-radius: 50%; + background-color: #333; + border: 2px solid #444; + cursor: pointer; + transition: transform 0.3s ease, background-color 0.3s ease, border 0.3s ease; +} + +.circle img { + width: 50px; + height: 50px; +} + +.circle:hover { + transform: scale(1.1); + background-color: #555; + border: 2px solid #666; +} + +#kontakt p{ + font-size: 20px; + color:white; } \ No newline at end of file