|
|
| Line 1: |
Line 1: |
| <!DOCTYPE html>
| |
| <html lang="en">
| |
| <head>
| |
| <meta charset="UTF-8" />
| |
| <title>InZOI Wiki - Front Page</title>
| |
| <style>
| |
| /* ------------ Basic Reset and Body Styles ------------ */
| |
| * {
| |
| margin: 0;
| |
| padding: 0;
| |
| box-sizing: border-box;
| |
| }
| |
| body {
| |
| font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
| |
| background-color: #fefefe;
| |
| color: #333;
| |
| line-height: 1.6;
| |
| max-width: 1200px;
| |
| margin: 0 auto;
| |
| padding: 0 1rem;
| |
| }
| |
|
| |
| /* ------------ Hero / Banner Section ------------ */
| |
| .hero {
| |
| position: relative;
| |
| text-align: center;
| |
| margin: 1rem 0 2rem 0;
| |
| border-radius: 8px;
| |
| overflow: hidden;
| |
| }
| |
| .hero img {
| |
| width: 100%;
| |
| height: auto;
| |
| display: block;
| |
| border-radius: 8px;
| |
| opacity: 0.8;
| |
| }
| |
| .hero h1 {
| |
| position: absolute;
| |
| top: 50%;
| |
| left: 50%;
| |
| transform: translate(-50%, -50%);
| |
| color: #fff;
| |
| font-size: 3rem;
| |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
| |
| }
| |
| .hero p {
| |
| position: absolute;
| |
| top: 65%;
| |
| left: 50%;
| |
| transform: translate(-50%, -50%);
| |
| color: #fff;
| |
| font-size: 1.25rem;
| |
| text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
| |
| }
| |
|
| |
| /* ------------ Main Sections (Grid Layout) ------------ */
| |
| .sections {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
| |
| grid-gap: 1rem;
| |
| margin-bottom: 2rem;
| |
| }
| |
| .section {
| |
| background-color: #fff;
| |
| padding: 1rem;
| |
| border-radius: 8px;
| |
| box-shadow: 0 1px 3px rgba(0,0,0,0.1);
| |
| }
| |
| .section h2 {
| |
| font-size: 1.5rem;
| |
| margin-bottom: 0.5rem;
| |
| color: #2c3e50;
| |
| }
| |
| .section ul {
| |
| list-style: disc inside;
| |
| margin-left: 1rem;
| |
| }
| |
| .section a {
| |
| color: #2e86c1;
| |
| text-decoration: none;
| |
| }
| |
| .section a:hover {
| |
| text-decoration: underline;
| |
| }
| |
|
| |
| /* ------------ Footer Section ------------ */
| |
| footer {
| |
| margin-top: 2rem;
| |
| padding: 1rem;
| |
| text-align: center;
| |
| font-size: 0.875rem;
| |
| color: #666;
| |
| }
| |
| footer a {
| |
| color: #666;
| |
| text-decoration: none;
| |
| }
| |
| footer a:hover {
| |
| text-decoration: underline;
| |
| }
| |
|
| |
| /* ------------ Responsive Tweaks ------------ */
| |
| @media (max-width: 600px) {
| |
| .hero h1 {
| |
| font-size: 2rem;
| |
| }
| |
| .hero p {
| |
| font-size: 1rem;
| |
| }
| |
| }
| |
| </style>
| |
| </head>
| |
|
| |
| <body> | | <body> |
| <!-- Hero / Banner Section --> | | <!-- Hero / Banner Section --> |
