|
|
| Line 1: |
Line 1: |
| <!DOCTYPE html>
| |
| <html lang="en">
| |
| <head>
| |
| <meta charset="UTF-8" />
| |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" />
| |
| <title>Alpha: Season 2</title>
| |
| <style>
| |
| body {
| |
| font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
| |
| margin: 0;
| |
| padding: 16px;
| |
| background: #fff;
| |
| color: #111827;
| |
| }
| |
|
| |
|
| .season2-block {
| |
| border: 1px solid #e5e7eb;
| |
| border-radius: 12px;
| |
| background: #ffffff;
| |
| box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
| |
| overflow: hidden;
| |
| margin: 12px 0;
| |
| width: 100%;
| |
| max-width: 900px;
| |
| }
| |
|
| |
|
| .season2-inner {
| |
| display: grid;
| |
| grid-template-columns: 130px auto;
| |
| gap: 12px;
| |
| padding: 8px 12px;
| |
| align-items: center;
| |
| }
| |
|
| |
| .season2-media img {
| |
| width: 112px;
| |
| height: auto;
| |
| border-radius: 8px;
| |
| object-fit: cover;
| |
| display: block;
| |
| }
| |
|
| |
| .season2-content {
| |
| display: grid;
| |
| row-gap: 4px;
| |
| }
| |
|
| |
| .season2-headline {
| |
| font-size: 18px;
| |
| font-weight: 700;
| |
| color: #111827;
| |
| margin: 0;
| |
| }
| |
|
| |
| .season2-subtitle {
| |
| font-size: 16px;
| |
| font-weight: 500;
| |
| color: #4b5563;
| |
| margin: 0;
| |
| }
| |
|
| |
| .season2-button {
| |
| display: inline-block;
| |
| background: linear-gradient(
| |
| 90deg,
| |
| rgb(99, 102, 241) 0%,
| |
| rgb(168, 85, 247) 50%,
| |
| rgb(52, 211, 153) 100%
| |
| );
| |
| color: #fff;
| |
| font-weight: 600;
| |
| text-decoration: none;
| |
| padding: 6px 12px;
| |
| font-size: 13px;
| |
| border-radius: 8px;
| |
| transition: transform 0.15s ease;
| |
| width: fit-content;
| |
| }
| |
|
| |
| .season2-button:hover {
| |
| transform: scale(1.03);
| |
| }
| |
|
| |
| /* ✅ Mobile fix: stack image above text */
| |
| @media (max-width: 640px) {
| |
| .season2-inner {
| |
| grid-template-columns: 1fr;
| |
| gap: 8px;
| |
| }
| |
| .season2-media {
| |
| justify-content: center; /* center the image */
| |
| }
| |
| .season2-content {
| |
| text-align: center; /* center-align text/buttons for mobile */
| |
| }
| |
| }
| |
| </style>
| |
| </head>
| |
| <body>
| |
| <section class="season2-block" aria-labelledby="season2-heading">
| |
| <div class="season2-inner">
| |
| <!-- Left image -->
| |
| <div class="season2-media">
| |
| <img src="https://treeverse.wiki/images/4/48/Tv_trophy.png" alt="Season 2 teaser" />
| |
| </div>
| |
|
| |
| <!-- Right content -->
| |
| <div class="season2-content">
| |
| <p class="season2-headline">🔥 Alpha: Season 2</p>
| |
| <p id="season2-heading" class="season2-subtitle">Sneak peek at what's to come</p>
| |
| <a href="https://treeverse.wiki/index.php?title=Season_2" class="season2-button">Learn More ➜</a>
| |
| </div>
| |
| </div>
| |
| </section>
| |
| </body>
| |
| </html>
| |
|
| |
|
|
| |
|
