108 lines
1.8 KiB
CSS
108 lines
1.8 KiB
CSS
body, html {
|
||
margin: 5;
|
||
padding: 0;
|
||
font-family: Arial, sans-serif;
|
||
background: #fff;
|
||
color: #333;
|
||
}
|
||
header {
|
||
background: #e30613; /* Thömus‑Rot */
|
||
color: #fff;
|
||
padding: 1rem;
|
||
}
|
||
header nav ul {
|
||
list-style: none;
|
||
margin: 10;
|
||
padding: 0;
|
||
display: flex;
|
||
gap: 1rem;
|
||
}
|
||
header nav a {
|
||
color: #fff;
|
||
text-decoration: none;
|
||
}
|
||
header nav a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* Hero */
|
||
.hero {
|
||
position: relative;
|
||
text-align: center;
|
||
color: #fff;
|
||
}
|
||
.hero img {
|
||
width: 100%;
|
||
height: auto;
|
||
display: block;
|
||
object-fit: cover;
|
||
}
|
||
.hero .overlay {
|
||
position: absolute;
|
||
top: 0; left: 0;
|
||
width: 100%; height: 100%;
|
||
background: rgba(0,0,0,0.5);
|
||
}
|
||
.hero .content {
|
||
position: absolute;
|
||
top: 50%; left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
padding: 1rem 2rem;
|
||
}
|
||
.hero .content h2 {
|
||
margin: 0 0 .5rem;
|
||
font-size: 2rem;
|
||
}
|
||
.hero .content a {
|
||
display: inline-block;
|
||
margin-top: 1rem;
|
||
padding: .75rem 1.5rem;
|
||
background: #e30613;
|
||
color: #fff;
|
||
text-decoration: none;
|
||
border-radius: 4px;
|
||
font-weight: bold;
|
||
}
|
||
.hero .content a:hover {
|
||
background: #c00311;
|
||
}
|
||
|
||
/* Tiles */
|
||
.tiles {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
|
||
gap: 1rem;
|
||
padding: 2rem 1rem;
|
||
}
|
||
.tile {
|
||
background: #fafafa;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
text-align: center;
|
||
}
|
||
.tile img {
|
||
width: 100%;
|
||
height: 150px;
|
||
object-fit: cover;
|
||
}
|
||
.tile h3 {
|
||
margin: .5rem 0;
|
||
}
|
||
.tile p {
|
||
padding: 0 1rem 1rem;
|
||
font-size: .9rem;
|
||
color: #555;
|
||
}
|
||
.tile a {
|
||
display: block;
|
||
margin: 0 1rem 1rem;
|
||
padding: .5rem;
|
||
background: #e30613;
|
||
color: #fff;
|
||
text-decoration: none;
|
||
border-radius: 3px;
|
||
}
|
||
.tile a:hover {
|
||
background: #c00311;
|
||
} |