Main Page: Difference between revisions
No edit summary |
No edit summary |
||
| 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> | |||
<!-- Hero / Banner Section --> | |||
<div class="hero"> | |||
<!-- Replace src with an InZOI-themed banner or official image if available --> | |||
<img src="https://via.placeholder.com/1200x400.png?text=InZOI+Banner" alt="InZOI Banner" /> | |||
<h1>Welcome to the InZOI Wiki!</h1> | |||
<p>Your hub for the upcoming life simulation game</p> | |||
</div> | |||
<!-- Brief Intro / Welcome Text --> | |||
<div class="section" style="margin-bottom: 2rem;"> | |||
<p> | |||
<strong>About InZOI:</strong> InZOI is an upcoming life simulation game offering | |||
<em>immersive storytelling</em>, in-depth character customization, and a vibrant open world. | |||
Whether you’re a seasoned life-sim pro or brand new to the genre, we hope this wiki helps you | |||
explore and discover everything InZOI has to offer! | |||
</p> | |||
</div> | |||
<!-- Main Content Sections --> | |||
<div class="sections"> | |||
<!-- News & Updates --> | |||
<div class="section"> | |||
<h2>News & Updates</h2> | |||
<ul> | |||
<li><strong>Dev Blog #4:</strong> New sneak peeks on NPC interactions</li> | |||
<li><strong>Beta Sign-Up:</strong> Early access details released</li> | |||
<li><strong>Patch Notes:</strong> Minor bug fixes and optimization</li> | |||
</ul> | |||
<p><a href="#">See all news</a></p> | |||
</div> | |||
<!-- Getting Started --> | |||
<div class="section"> | |||
<h2>Getting Started</h2> | |||
<ul> | |||
<li><a href="#">Beginner's Guide</a></li> | |||
<li><a href="#">Frequently Asked Questions</a></li> | |||
<li><a href="#">Basic Controls</a></li> | |||
<li><a href="#">Tips for First-Time Players</a></li> | |||
</ul> | |||
</div> | |||
</div> | |||
<div class="sections"> | |||
<!-- Featured Articles --> | |||
<div class="section"> | |||
<h2>Featured Articles</h2> | |||
<ul> | |||
<li><a href="#">All About NPCs & Relationships</a></li> | |||
<li><a href="#">Crafting 101: Essential Recipes</a></li> | |||
<li><a href="#">Town Building & Upgrades</a></li> | |||
</ul> | |||
</div> | |||
<!-- Community Projects --> | |||
<div class="section"> | |||
<h2>Community Projects</h2> | |||
<ul> | |||
<li><a href="#">Wanted Pages</a> — help us fill in missing info!</li> | |||
<li><a href="#">Stubs to Expand</a> — add screenshots, tips, and data</li> | |||
<li><a href="#">Editing Tutorials</a> — learn how to contribute effectively</li> | |||
</ul> | |||
</div> | |||
</div> | |||
<!-- Footer Section --> | |||
<footer> | |||
<p> | |||
<em>This wiki is a community effort.</em><br /> | |||
Not affiliated with the official InZOI development team. All game-related assets belong to their respective owners. | |||
</p> | |||
<p> | |||
<a href="#">Official Website</a> | | |||
<a href="#">Developer's Twitter</a> | | |||
<a href="#">Community Discord</a> | |||
</p> | |||
</footer> | |||
</body> | |||
</html> | |||
Revision as of 15:17, 11 January 2025
<!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>
<img src="https://via.placeholder.com/1200x400.png?text=InZOI+Banner" alt="InZOI Banner" />
Welcome to the InZOI Wiki!
Your hub for the upcoming life simulation game
About InZOI: InZOI is an upcoming life simulation game offering immersive storytelling, in-depth character customization, and a vibrant open world. Whether you’re a seasoned life-sim pro or brand new to the genre, we hope this wiki helps you explore and discover everything InZOI has to offer!
News & Updates
- Dev Blog #4: New sneak peeks on NPC interactions
- Beta Sign-Up: Early access details released
- Patch Notes: Minor bug fixes and optimization
<a href="#">See all news</a>
Getting Started
- <a href="#">Beginner's Guide</a>
- <a href="#">Frequently Asked Questions</a>
- <a href="#">Basic Controls</a>
- <a href="#">Tips for First-Time Players</a>
Featured Articles
- <a href="#">All About NPCs & Relationships</a>
- <a href="#">Crafting 101: Essential Recipes</a>
- <a href="#">Town Building & Upgrades</a>
Community Projects
- <a href="#">Wanted Pages</a> — help us fill in missing info!
- <a href="#">Stubs to Expand</a> — add screenshots, tips, and data
- <a href="#">Editing Tutorials</a> — learn how to contribute effectively
<footer>
This wiki is a community effort.
Not affiliated with the official InZOI development team. All game-related assets belong to their respective owners.
<a href="#">Official Website</a> | <a href="#">Developer's Twitter</a> | <a href="#">Community Discord</a>
</footer>
</body> </html>