added images. added responsiveness logic

Author: T-Ash-90

images/tomashlive.jpg

@@ -18,12 +18,16 @@
 
     <header>
         <img src="images/tomlogo.jpg" alt="Tom Ash Logo" class="logo">
-        <p class="tagline">🎶 Akustischer Fingerstyle-Folk-Rock🎶</p>
+        <p class="tagline">🎶 Modern-Acoustic Fingerstyle-Folk-Rock aus Großbritannien 🎶</p>
     </header>
 
+    <section class="collage">
+        <img src="images/tomashlive.jpg" alt="Tom Ash Live" class="image">
+    </section>
+
     <section class="content">
         <p>
-          <br>Tom Ash ist ein Singer-Songwriter aus Nottingham, England. Mit einem breitgefächerten Spektrum an Einflüssen hat Tom Jahre damit verbracht, seinen eigenen Sound zu kreieren. Dieser ist geprägt von einem einzigartigen Mix aus Fingerstyle-Gitarrenspiel, fesselnden Vocals und gefühlvollen Texten. Ein abwechslungsreiches Repertoire aus eigenen Songs und verschiedensten Coverversionen sorgen bei jedem Publikum für Unterhaltung.
+          Tom Ash ist ein Singer-Songwriter aus Nottingham, England. Mit einem breitgefächerten Spektrum an Einflüssen hat Tom Jahre damit verbracht, seinen eigenen Sound zu kreieren. Dieser ist geprägt von einem einzigartigen Mix aus Fingerstyle-Gitarrenspiel, fesselnden Vocals und gefühlvollen Texten. Ein abwechslungsreiches Repertoire aus eigenen Songs und verschiedensten Coverversionen sorgen bei jedem Publikum für Unterhaltung.
         </p>
     </section>
 
@@ -38,17 +42,14 @@
     </section>
 
     <section class="music-links">
-        <a href="https://tomashlive.bandcamp.com/" target="_blank">
-            <div class="music-item">
-                <img src="images/bandcamp.jpg" alt="Auf Bandcamp anhören" class="music-logo">
-                <span>Auf Bandcamp anhören</span>
-            </div>
+        <a href="https://tomashlive.bandcamp.com/" target="_blank" class="music-item">
+            <img src="images/bandcamp.jpg" alt="Auf Bandcamp anhören" class="music-logo">
+            <span>Auf Bandcamp anhören</span>
         </a>
-        <a href="https://www.youtube.com/@tomashlive" target="_blank">
-            <div class="music-item">
-                <img src="images/youtube.jpg" alt="Auf YouTube folgen" class="music-logo">
-                <span>Auf YouTube folgen</span>
-            </div>
+
+        <a href="https://www.youtube.com/@tomashlive" target="_blank" class="music-item">
+            <img src="images/youtube.jpg" alt="Auf YouTube folgen" class="music-logo">
+            <span>Auf YouTube folgen</span>
         </a>
     </section>
 

index.html

@@ -17,7 +17,7 @@ h1 {
 }
 
 .logo {
-    max-width: 600px;
+    max-width: 720px;
     width: 100%;
     height: auto;
     margin-bottom: 15px;
@@ -29,6 +29,27 @@ h1 {
     font-style: italic;
 }
 
+.collage {
+    text-align: center;
+    margin: 60px 0;
+}
+
+.image {
+    width: 100%;
+    max-width: 720px;
+    height: auto;
+    display: block;
+    margin: 0 auto;
+
+    border-radius: 12px;
+
+    box-shadow:
+        0 10px 25px rgba(0, 0, 0, 0.15),
+        0 4px 10px rgba(0, 0, 0, 0.08);
+
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
 /* ---------------- Navigation ---------------- */
 nav {
     display: flex;
@@ -77,7 +98,7 @@ section {
 }
 
 
-/* ---------------- Music Links as Modern Buttons ---------------- */
+/* ---------------- Music Links ---------------- */
 .music-links {
     margin: 40px 0;
     display: flex;
@@ -91,27 +112,34 @@ section {
     flex-direction: column;
     align-items: center;
     text-align: center;
+    text-decoration: none;
+    transition: transform 0.3s ease;
 }
 
-.music-item .music-logo {
-    width: 100px;
-    height: 100px;
-    object-fit: cover;
-    border-radius: 12px;
+.music-logo {
+    width: clamp(60px, 8vw, 80px);
+    aspect-ratio: 1 / 1;
+    object-fit: contain;
+
+    padding: 12px;
+    background: white;
+    border-radius: 16px;
+
     box-shadow: 0 8px 20px rgba(0,0,0,0.15);
     margin-bottom: 12px;
-    transition: transform 0.3s, box-shadow 0.3s;
+
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 
-.music-item .music-logo:hover {
-    transform: scale(1.05);
-    box-shadow: 0 12px 25px rgba(0,0,0,0.2);
+.music-item:hover .music-logo {
+    transform: translateY(-4px);
+    box-shadow: 0 12px 30px rgba(0,0,0,0.2);
 }
 
 .music-item span {
     font-weight: 600;
     color: #0073e6;
-    font-size: 1.1rem;
+    font-size: 1.05rem;
 }
 
 /* ---------------- Gallery ---------------- */
@@ -176,19 +204,7 @@ section {
 }
 
 /* ---------------- Responsive ---------------- */
-@media (max-width: 1024px) {
-    .music-item .music-logo {
-        width: 250px;
-        height: 250px;
-    }
-}
-
 @media (max-width: 768px) {
-    .music-item .music-logo {
-        width: 200px;
-        height: 200px;
-    }
-
     h1 {
         font-size: 2.2rem;
     }