Skip to content

Commit 1a24bad

Browse files
T-Ash-90T-Ash-90
committed
website overhaul
1 parent 4afc2ba commit 1a24bad

File tree

8 files changed

+168
-52
lines changed

8 files changed

+168
-52
lines changed

‎contact.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,22 +9,22 @@
99

1010
<nav>
1111
<a href="index.html">Home</a>
12+
<a href="https://tomashlive.bandcamp.com/" target="_blank">Anhören</a>
13+
<a href="https://www.youtube.com/@tomashlive/" target="_blank">YouTube</a>
1214
<a href="shows.html">Kommende Auftritte</a>
1315
<a href="gallery.html">Fotogalerie</a>
1416
<a href="contact.html">Kontakt</a>
1517
</nav>
1618

1719
<header>
1820
<h1>Kontakt</h1>
19-
<p class="tagline">Wir freuen uns über Ihre Nachricht!</p>
2021
</header>
2122

2223
<section class="contact-info">
23-
<p>Schreiben Sie eine E-Mail an:</p>
24+
<p>Für Auftritte, Gigs oder sonstige Anfragen schreibt mir gerne eine Nachricht an:</p>
2425
<p>
2526
<a href="mailto:tomashlive@pm.me">tomashlive@pm.me</a>
2627
</p>
27-
<p>Tom wird so schnell wie möglich antworten.</p>
2828
</section>
2929

3030
</body>

‎gallery.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@
99

1010
<nav>
1111
<a href="index.html">Home</a>
12+
<a href="https://tomashlive.bandcamp.com/" target="_blank">Anhören</a>
13+
<a href="https://www.youtube.com/@tomashlive/" target="_blank">YouTube</a>
1214
<a href="shows.html">Kommende Auftritte</a>
1315
<a href="gallery.html">Fotogalerie</a>
1416
<a href="contact.html">Kontakt</a>

‎images/bandcamp.jpg‎

5.79 KB
Loading

‎images/tomlogo.jpg‎

24.3 KB
Loading

‎images/youtube.jpg‎

19 KB
Loading

‎index.html‎

Lines changed: 28 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,31 +9,49 @@
99

1010
<nav>
1111
<a href="index.html">Home</a>
12+
<a href="https://tomashlive.bandcamp.com/" target="_blank">Anhören</a>
13+
<a href="https://www.youtube.com/@tomashlive/" target="_blank">YouTube</a>
1214
<a href="shows.html">Kommende Auftritte</a>
1315
<a href="gallery.html">Fotogalerie</a>
1416
<a href="contact.html">Kontakt</a>
1517
</nav>
1618

1719
<header>
18-
<h1>Tom Ash</h1>
19-
<p class="tagline">🎶 Akustischer Fingerstyle-Folk-Rock aus England 🎶</p>
20+
<img src="images/tomlogo.jpg" alt="Tom Ash Logo" class="logo">
21+
<p class="tagline">🎶 Akustischer Fingerstyle-Folk-Rock🎶</p>
2022
</header>
2123

2224
<section class="content">
2325
<p>
24-
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.
26+
<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.
2527
</p>
2628
</section>
2729

28-
<section class="music-links">
29-
<p>
30-
<a href="https://tomashlive.bandcamp.com/" target="_blank">Auf Bandcamp anhören</a> //
31-
<a href="https://www.youtube.com/@tomashlive" target="_blank">Auf YouTube folgen</a>
32-
</p>
30+
<section class="video">
31+
<iframe
32+
width="600"
33+
height="400"
34+
src="https://www.youtube.com/embed/nFNo059hWog"
35+
title="Tom Ash Live Performance"
36+
frameborder="0"
37+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
38+
allowfullscreen>
39+
</iframe>
3340
</section>
3441

35-
<section>
36-
<img src="images/tom2.jpg" alt="Tom Ash">
42+
<section class="music-links">
43+
<a href="https://tomashlive.bandcamp.com/" target="_blank">
44+
<div class="music-item">
45+
<img src="images/bandcamp.jpg" alt="Auf Bandcamp anhören" class="music-logo">
46+
<span>Auf Bandcamp anhören</span>
47+
</div>
48+
</a>
49+
<a href="https://www.youtube.com/@tomashlive" target="_blank">
50+
<div class="music-item">
51+
<img src="images/youtube.jpg" alt="Auf YouTube folgen" class="music-logo">
52+
<span>Auf YouTube folgen</span>
53+
</div>
54+
</a>
3755
</section>
3856

3957
</body>

‎shows.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@
99

1010
<nav>
1111
<a href="index.html">Home</a>
12+
<a href="https://tomashlive.bandcamp.com/" target="_blank">Anhören</a>
13+
<a href="https://www.youtube.com/@tomashlive/" target="_blank">YouTube</a>
1214
<a href="shows.html">Kommende Auftritte</a>
1315
<a href="gallery.html">Fotogalerie</a>
1416
<a href="contact.html">Kontakt</a>

‎styles.css‎

Lines changed: 133 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,114 @@
1+
/* ---------------- Base Styles ---------------- */
12
body {
2-
font-family: Helvetica, Arial, sans-serif;
3+
font-family: 'Montserrat', Helvetica, Arial, sans-serif;
34
margin: 0;
4-
padding: 40px 20px;
5-
background-color: #ffffff;
5+
padding: 20px;
6+
background-color: #fdfdfd;
67
color: #111;
78
text-align: center;
9+
line-height: 1.6;
10+
}
11+
12+
h1 {
13+
font-size: 3rem;
14+
margin-bottom: 0.2em;
15+
font-weight: 700;
16+
letter-spacing: 1px;
17+
}
18+
19+
.logo {
20+
max-width: 600px;
21+
width: 100%;
22+
height: auto;
23+
margin-bottom: 15px;
24+
filter: drop-shadow(0 6px 15px rgba(0,0,0,0.2));
825
}
926

27+
.tagline {
28+
color: #777;
29+
font-style: italic;
30+
}
31+
32+
/* ---------------- Navigation ---------------- */
1033
nav {
34+
display: flex;
35+
justify-content: center;
36+
gap: 25px;
1137
margin-bottom: 40px;
38+
flex-wrap: wrap;
1239
}
1340

1441
nav a {
15-
margin: 0 15px;
1642
text-decoration: none;
1743
color: #555;
18-
font-weight: bold;
44+
font-weight: 600;
45+
padding: 8px 15px;
46+
transition: all 0.3s ease;
47+
border-radius: 5px;
1948
}
2049

2150
nav a:hover {
22-
color: #000;
51+
background-color: #0073e6;
52+
color: #fff;
2353
}
2454

25-
h1 {
26-
font-size: 3em;
27-
margin-bottom: 0.2em;
55+
/* ---------------- Content Sections ---------------- */
56+
section {
57+
margin: 60px 0;
2858
}
2959

30-
.tagline {
31-
color: #777;
60+
.content {
61+
max-width: 720px;
62+
margin: 0 auto;
63+
font-size: 1.1rem;
3264
}
3365

34-
img {
35-
max-width: 400px;
36-
width: 100%;
66+
/* ---------------- Video ---------------- */
67+
.video iframe {
68+
max-width: 100%;
3769
height: auto;
70+
border-radius: 12px;
71+
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
3872
}
3973

40-
section {
41-
margin: 60px 0;
74+
/* ---------------- Music Links as Modern Buttons ---------------- */
75+
.music-links {
76+
margin: 40px 0;
77+
display: flex;
78+
justify-content: center;
79+
gap: 40px;
80+
flex-wrap: wrap;
4281
}
4382

44-
.content {
45-
max-width: 700px;
46-
margin: 0 auto;
47-
line-height: 1.6;
83+
.music-item {
84+
display: flex;
85+
flex-direction: column;
86+
align-items: center;
87+
text-align: center;
4888
}
4989

50-
.shows-list {
51-
list-style: none;
52-
padding: 0;
90+
.music-item .music-logo {
91+
width: 150px;
92+
height: 150px;
93+
object-fit: cover;
94+
border-radius: 12px;
95+
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
96+
margin-bottom: 12px;
97+
transition: transform 0.3s, box-shadow 0.3s;
5398
}
5499

55-
.shows-list li {
56-
margin: 20px 0;
100+
.music-item .music-logo:hover {
101+
transform: scale(1.05);
102+
box-shadow: 0 12px 25px rgba(0,0,0,0.2);
57103
}
58104

59-
.music-links a {
60-
display: inline-block;
61-
margin: 10px 0;
62-
font-weight: bold;
63-
text-decoration: none;
105+
.music-item span {
106+
font-weight: 600;
64107
color: #0073e6;
108+
font-size: 1.1rem;
65109
}
66110

67-
.music-links a:hover {
68-
color: #005bb5;
69-
}
70-
111+
/* ---------------- Gallery ---------------- */
71112
.gallery-list {
72113
display: flex;
73114
flex-direction: column;
@@ -80,8 +121,8 @@ section {
80121
max-width: 500px;
81122
width: 100%;
82123
height: auto;
83-
border-radius: 8px;
84-
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
124+
border-radius: 12px;
125+
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
85126
}
86127

87128
.gallery-list figcaption {
@@ -90,19 +131,72 @@ section {
90131
color: #555;
91132
}
92133

134+
/* ---------------- Contact Info ---------------- */
93135
.contact-info {
94136
text-align: center;
95137
margin: 60px 0;
96-
font-size: 1.2em;
138+
font-size: 1.2rem;
97139
}
98140

99141
.contact-info a {
100142
color: #0073e6;
101-
font-weight: bold;
143+
font-weight: 600;
102144
text-decoration: none;
103145
}
104146

105147
.contact-info a:hover {
106-
color: #005bb5;
107148
text-decoration: underline;
108149
}
150+
151+
/* ---------------- Shows ---------------- */
152+
.shows-list {
153+
list-style: none;
154+
padding: 0;
155+
margin: 0;
156+
}
157+
158+
.shows-list li {
159+
margin: 20px 0;
160+
padding: 15px;
161+
background-color: #f7f7f7;
162+
border-radius: 8px;
163+
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
164+
transition: transform 0.2s, box-shadow 0.2s;
165+
}
166+
167+
.shows-list li:hover {
168+
transform: translateY(-3px);
169+
box-shadow: 0 8px 16px rgba(0,0,0,0.15);
170+
}
171+
172+
/* ---------------- Responsive ---------------- */
173+
@media (max-width: 1024px) {
174+
.music-item .music-logo {
175+
width: 250px;
176+
height: 250px;
177+
}
178+
}
179+
180+
@media (max-width: 768px) {
181+
.music-item .music-logo {
182+
width: 200px;
183+
height: 200px;
184+
}
185+
186+
h1 {
187+
font-size: 2.2rem;
188+
}
189+
190+
.content {
191+
font-size: 1rem;
192+
}
193+
194+
nav {
195+
gap: 15px;
196+
}
197+
198+
.shows-list li {
199+
padding: 12px;
200+
margin: 15px 0;
201+
}
202+
}

0 commit comments

Comments
 (0)