84 lines
1.7 KiB
HTML
84 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>The Wizard's Tower</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #0a0a0f;
|
|
color: #e0d8c8;
|
|
font-family: Georgia, 'Times New Roman', serif;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.4rem;
|
|
font-weight: normal;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
margin-bottom: 3rem;
|
|
color: #8a7f6a;
|
|
}
|
|
|
|
.doors {
|
|
display: flex;
|
|
gap: 4rem;
|
|
}
|
|
|
|
.door {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-decoration: none;
|
|
color: #e0d8c8;
|
|
padding: 2rem 3rem;
|
|
border: 1px solid #2a2520;
|
|
transition: border-color 0.3s, color 0.3s;
|
|
}
|
|
|
|
.door:hover {
|
|
border-color: #8a7f6a;
|
|
color: #fff;
|
|
}
|
|
|
|
.door-name {
|
|
font-size: 1.2rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.door-desc {
|
|
font-size: 0.8rem;
|
|
color: #6a6050;
|
|
}
|
|
|
|
.door:hover .door-desc {
|
|
color: #8a7f6a;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.doors { flex-direction: column; gap: 2rem; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>The Wizard's Tower</h1>
|
|
<nav class="doors">
|
|
<a href="/world/" class="door">
|
|
<span class="door-name">The Workshop</span>
|
|
<span class="door-desc">Enter the world</span>
|
|
</a>
|
|
<a href="/blog/" class="door">
|
|
<span class="door-name">The Scrolls</span>
|
|
<span class="door-desc">Read the words</span>
|
|
</a>
|
|
</nav>
|
|
</body>
|
|
</html>
|