Minecraft 3D
Minecraft Components
Prompt
Create a Minecraft landing page website in HTML. Build everything in a similar pixel style to Minecraft. Also the colors and contrasts. If possible also in flat 3D style, where it makes sense. Only HTML output, no comments!!
A system prompt was added to support web rendering
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Minecraft - Official Website</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Courier New', monospace;
}
body {
background-color: #7EC740;
background-image:
linear-gradient(rgba(126, 199, 64, 0.8) 1px, transparent 1px),
linear-gradient(90deg, rgba(126, 199, 64, 0.8) 1px, transparent 1px);
background-size: 20px 20px;
color: #333;
overflow-x: hidden;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* Header Styles */
header {
background-color: #6B8CFF;
border: 4px solid #000;
border-bottom: none;
padding: 20px;
margin: 20px;
box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.3);
position: relative;
}
.logo {
font-size: 48px;
font-weight: bold;
color: #FFF;
text-shadow: 4px 4px 0px #000;
text-align: center;
letter-spacing: 2px;
margin-bottom: 20px;
}
.logo span {
display: inline-block;
transform: rotate(-5deg);
}
nav {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;
}
.nav-btn {
background-color: #8B5A2B;
color: #FFF;
border: 3px solid #000;
padding: 12px 24px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
box-shadow: 4px 4px 0px #000;
transition: all 0.1s;
}
.nav-btn:hover {
transform: translate(2px, 2px);
box-shadow: 2px 2px 0px #000;
}
/* Hero Section */
.hero {
background-color: rgba(107, 140, 255, 0.8);
border: 4px solid #000;
padding: 40px;
margin: 20px;
text-align: center;
box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.3);
}
.hero h1 {
font-size: 36px;
color: #FFF;
text-shadow: 3px 3px 0px #000;
margin-bottom: 20px;
}
.hero p {
font-size: 20px;
color: #FFF;
max-width: 800px;
margin: 0 auto 30px;
line-height: 1.6;
}
.cta-button {
background-color: #5AC15A;
color: #FFF;
border: 4px solid #000;
padding: 16px 32px;
font-size: 24px;
font-weight: bold;
cursor: pointer;
box-shadow: 6px 6px 0px #000;
transition: all 0.1s;
}
.cta-button:hover {
transform: translate(3px, 3px);
box-shadow: 3px 3px 0px #000;
}
/* Features Section */
.features {
display: flex;
flex-wrap: wrap;
gap: 30px;
margin: 40px 20px;
}
.feature-card {
background-color: #D2B48C;
border: 4px solid #000;
padding: 20px;
flex: 1;
min-width: 250px;
box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.3);
}
.feature-card h3 {
font-size: 24px;
margin-bottom: 15px;
color: #8B5A2B;
text-shadow: 2px 2px 0px #000;
}
.feature-card p {
font-size: 16px;
line-height: 1.5;
}
/* Blocks Section */
.blocks-section {
background-color: rgba(139, 90, 43, 0.2);
border: 4px solid #000;
padding: 30px;
margin: 40px 20px;
box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.3);
}
.blocks-section h2 {
text-align: center;
font-size: 32px;
color: #8B5A2B;
text-shadow: 3px 3px 0px #000;
margin-bottom: 30px;
}
.blocks-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
.block {
width: 100px;
height: 100px;
border: 3px solid #000;
position: relative;
box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.3);
}
.grass { background-color: #7EC740; }
.dirt { background-color: #8B5A2B; }
.stone { background-color: #9D9D97; }
.wood { background-color: #8B6C3C; }
.cobblestone { background-color: #7F7F7F; }
.sand { background-color: #F4D776; }
/* Footer */
footer {
background-color: #6B8CFF;
border: 4px solid #000;
padding: 30px;
margin: 20px;
text-align: center;
box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.3);
}
.footer-content {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 20px;
}
.footer-section {
flex: 1;
min-width: 200px;
}
.footer-section h3 {
font-size: 20px;
color: #FFF;
margin-bottom: 15px;
text-shadow: 2px 2px 0px #000;
}
.footer-section ul {
list-style: none;
}
.footer-section li {
margin: 8px 0;
}
.footer-section a {
color: #FFF;
text-decoration: none;
font-size: 16px;
}
.footer-section a:hover {
text-decoration: underline;
}
.copyright {
border-top: 2px solid #000;
padding-top: 20px;
color: #FFF;
font-size: 14px;
}
/* 3D Elements */
.minecraft-texture {
background-image:
linear-gradient(45deg, rgba(0,0,0,0.1) 25%, transparent 25%),
linear-gradient(-45deg, rgba(0,0,0,0.1) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, rgba(0,0,0,0.1) 75%),
linear-gradient(-45deg, transparent 75%, rgba(0,0,0,0.1) 75%);
background-size: 10px 10px;
background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
}
.steve-character {
width: 120px;
height: 180px;
background-color: #3A75C4;
border: 4px solid #000;
margin: 0 auto 20px;
position: relative;
box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.3);
}
.steve-head {
width: 60px;
height: 60px;
background-color: #F4B982;
border: 3px solid #000;
margin: 10px auto;
position: relative;
}
.steve-body {
width: 50px;
height: 70px;
background-color: #3A75C4;
border: 3px solid #000;
margin: 0 auto;
}
.steve-legs {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 5px;
}
.steve-leg {
width: 20px;
height: 50px;
background-color: #4D6D92;
border: 3px solid #000;
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="logo">
<span>MINECRAFT</span>
</div>
<nav>
<button class="nav-btn">HOME</button>
<button class="nav-btn">GAME</button>
<button class="nav-btn">COMMUNITY</button>
<button class="nav-btn">STORE</button>
<button class="nav-btn">SUPPORT</button>
</nav>
</header>
<section class="hero">
<h1>CREATE YOUR WORLD</h1>
<p>Minecraft is a game about placing blocks and going on adventures. Explore randomly generated worlds and build amazing things from the simplest of homes to the grandest of castles.</p>
<button class="cta-button">GET MINECRAFT NOW</button>
</section>
<div class="steve-character">
<div class="steve-head"></div>
<div class="steve-body"></div>
<div class="steve-legs">
<div class="steve-leg"></div>
<div class="steve-leg"></div>
</div>
</div>
<div class="features">
<div class="feature-card">
<h3>EXPLORE INFINITE WORLDS</h3>
<p>Experience Minecraft in endless worlds with various biomes, terrain, and creatures. Every world is unique and full of surprises waiting to be discovered.</p>
</div>
<div class="feature-card">
<h3>BUILD AMAZING STRUCTURES</h3>
<p>Use your creativity to build anything you can imagine. From simple houses to complex cities, the only limit is your imagination.</p>
</div>
<div class="feature-card">
<h3>SURVIVE THE NIGHT</h3>
<p>Defend yourself against monsters that come out in the dark. Collect resources, craft tools, and build shelters to survive the night.</p>
</div>
</div>
<section class="blocks-section">
<h2>BLOCK TYPES</h2>
<div class="blocks-grid">
<div class="block grass"></div>
<div class="block dirt"></div>
<div class="block stone"></div>
<div class="block wood"></div>
<div class="block cobblestone"></div>
<div class="block sand"></div>
</div>
</section>
<footer>
<div class="footer-content">
<div class="footer-section">
<h3>GAME</h3>
<ul>
<li><a href="#">Download</a></li>
<li><a href="#">Release Notes</a></li>
<li><a href="#">System Requirements</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</div>
<div class="footer-section">
<h3>COMMUNITY</h3>
<ul>
<li><a href="#">Forums</a></li>
<li><a href="#">Servers</a></li>
<li><a href="#">Guides</a></li>
<li><a href="#">Creations</a></li>
</ul>
</div>
<div class="footer-section">
<h3>SUPPORT</h3>
<ul>
<li><a href="#">Help Center</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Bug Reports</a></li>
<li><a href="#">Status</a></li>
</ul>
</div>
</div>
<div class="copyright">
<p>© 2023 Mojang Studios. MINECRAFT is a trademark of Mojang Studios. All rights reserved.</p>
</div>
</footer>
</div>
</body>
</html>
```Drag to resize
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Minecraft Landing Page</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}
body {
background-color: #6ba964;
color: #3a3a3a;
overflow-x: hidden;
}
header {
background-color: #3a3a3a;
padding: 20px 0;
position: fixed;
width: 100%;
top: 0;
z-index: 100;
border-bottom: 4px solid #2d2d2d;
}
.logo {
font-size: 36px;
color: #fff;
text-align: center;
text-shadow: 2px 2px 4px #000;
letter-spacing: 2px;
}
nav {
text-align: center;
margin-top: 10px;
}
nav a {
color: #fff;
text-decoration: none;
margin: 0 20px;
font-size: 18px;
text-shadow: 1px 1px 2px #000;
padding: 8px 16px;
background-color: #555;
border: 2px solid #2d2d2d;
display: inline-block;
transition: transform 0.2s;
}
nav a:hover {
transform: scale(1.05);
background-color: #666;
}
.hero {
margin-top: 100px;
text-align: center;
padding: 60px 20px;
background: linear-gradient(to bottom, #87ceeb, #6ba964);
border-bottom: 6px solid #2d2d2d;
}
.hero h1 {
font-size: 48px;
text-shadow: 3px 3px 6px #000;
color: #fff;
margin-bottom: 20px;
}
.hero p {
font-size: 24px;
color: #fff;
text-shadow: 2px 2px 4px #000;
margin-bottom: 30px;
}
.btn {
background-color: #3a3a3a;
color: #fff;
padding: 15px 30px;
font-size: 20px;
text-decoration: none;
border: 3px solid #2d2d2d;
display: inline-block;
transition: transform 0.2s, background-color 0.2s;
}
.btn:hover {
transform: scale(1.1);
background-color: #4a4a4a;
}
.features {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 50px 20px;
background-color: #6ba964;
}
.feature-card {
background-color: #8bc34a;
width: 300px;
margin: 20px;
padding: 20px;
text-align: center;
border: 4px solid #2d2d2d;
box-shadow: 8px 8px 0px #2d2d2d;
position: relative;
transition: transform 0.3s;
}
.feature-card:hover {
transform: translate(-5px, -5px);
box-shadow: 13px 13px 0px #2d2d2d;
}
.feature-card h3 {
font-size: 28px;
margin-bottom: 15px;
color: #3a3a3a;
text-shadow: 2px 2px 4px #000;
}
.feature-card p {
font-size: 16px;
color: #3a3a3a;
}
.pixel-art {
width: 100px;
height: 100px;
margin: 0 auto 15px;
background-color: #3a3a3a;
border: 3px solid #2d2d2d;
}
.art-build {
background: linear-gradient(45deg, #8d6e63, #795548);
}
.art-explore {
background: linear-gradient(45deg, #4caf50, #388e3c);
}
.art-survive {
background: linear-gradient(45deg, #f44336, #d32f2f);
}
footer {
background-color: #3a3a3a;
color: #fff;
text-align: center;
padding: 20px 0;
border-top: 4px solid #2d2d2d;
}
footer p {
font-size: 14px;
text-shadow: 1px 1px 2px #000;
}
@media (max-width: 768px) {
.features {
flex-direction: column;
align-items: center;
}
.hero h1 {
font-size: 36px;
}
.hero p {
font-size: 18px;
}
}
</style>
</head>
<body>
<header>
<div class="logo">MINECRAFT</div>
<nav>
<a href="#home">Home</a>
<a href="#download">Download</a>
<a href="#community">Community</a>
<a href="#store">Store</a>
</nav>
</header>
<section class="hero">
<h1>Welcome to Minecraft!</h1>
<p>Build, Explore, and Survive in a Blocky World!</p>
<a href="#download" class="btn">Get Minecraft Now</a>
</section>
<section class="features">
<div class="feature-card">
<div class="pixel-art art-build"></div>
<h3>Build Anything</h3>
<p>Create massive structures or tiny houses with blocks. Your imagination is the limit in this pixelated universe!</p>
</div>
<div class="feature-card">
<div class="pixel-art art-explore"></div>
<h3>Explore Worlds</h3>
<p>Discover vast landscapes, caves, and biomes. Every world is unique and full of surprises!</p>
</div>
<div class="feature-card">
<div class="pixel-art art-survive"></div>
<h3>Survive & Thrive</h3>
<p>Fight off monsters, gather resources, and survive the night. Can you make it to the end?</p>
</div>
</section>
<footer>
<p>© 2023 Minecraft Landing Page. All Rights Reserved.</p>
</footer>
</body>
</html>Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Minecraft</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<style>
:root {
--pixel-size: 4px;
--font-family: 'Press Start 2P', cursive;
--sky-blue: #79a6ff;
--cloud-white: #ffffff;
--grass-top: #6db900;
--grass-side: #5da000;
--dirt-brown: #905a31;
--dirt-dark: #5a3a22;
--stone-grey: #808080;
--stone-dark: #696969;
--wood-plank: #a18055;
--wood-dark: #81623c;
--text-light: #ffffff;
--text-dark: #3a3a3a;
--text-shadow: #555555;
--border-color: #3a3a3a;
--border-inset-light: rgba(255, 255, 255, 0.25);
--border-inset-dark: rgba(0, 0, 0, 0.25);
}
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: var(--font-family);
background-color: var(--dirt-brown);
color: var(--text-light);
-webkit-font-smoothing: none;
-moz-osx-font-smoothing: grayscale;
image-rendering: -webkit-optimize-contrast;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
image-rendering: pixelated;
}
.container {
max-width: 1000px;
margin: 0 auto;
padding: 0 20px;
}
/* --- Pixel Box Shadow --- */
.pixel-border {
border: var(--pixel-size) solid var(--border-color);
box-shadow:
inset calc(var(--pixel-size) * -1) calc(var(--pixel-size) * -1) 0 var(--border-inset-dark),
inset var(--pixel-size) var(--pixel-size) 0 var(--border-inset-light);
}
.pixel-border-raised {
border: var(--pixel-size) solid var(--border-color);
box-shadow:
calc(var(--pixel-size) * 1.5) calc(var(--pixel-size) * 1.5) 0 var(--border-color);
}
/* --- Header / Navigation --- */
header {
background-color: var(--wood-plank);
padding: calc(var(--pixel-size) * 4) 0;
border-bottom: var(--pixel-size) solid var(--border-color);
box-shadow: 0 calc(var(--pixel-size) * 1.5) 0 var(--wood-dark);
position: sticky;
top: 0;
z-index: 100;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.logo {
font-size: 28px;
color: var(--text-light);
text-shadow: calc(var(--pixel-size) * 0.75) calc(var(--pixel-size) * 0.75) 0px var(--text-shadow);
padding: 0 10px;
}
.nav-links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 20px;
}
.nav-links a {
color: var(--text-light);
text-decoration: none;
font-size: 14px;
padding: 8px 12px;
transition: all 0.1s ease-in-out;
text-shadow: 2px 2px 0px var(--text-shadow);
}
.nav-links a:hover {
color: var(--grass-top);
transform: translateY(-2px);
}
/* --- Hero Section --- */
.hero {
background-color: var(--sky-blue);
text-align: center;
position: relative;
overflow: hidden;
border-bottom: var(--pixel-size) solid var(--border-color);
}
.cloud {
width: 100px;
height: 30px;
background: var(--cloud-white);
position: absolute;
border-radius: 2px;
box-shadow:
inset -2px -2px 0px rgba(0,0,0,0.1);
}
.cloud::before, .cloud::after {
content: '';
position: absolute;
background: var(--cloud-white);
border-radius: 2px;
box-shadow: inset -2px -2px 0px rgba(0,0,0,0.1);
}
.cloud::before {
width: 50px;
height: 50px;
top: -25px;
left: 20px;
}
.cloud::after {
width: 30px;
height: 30px;
top: -15px;
right: 15px;
}
.cloud-1 { top: 15%; left: 10%; animation: move-cloud 60s linear infinite; }
.cloud-2 { top: 30%; left: 70%; animation: move-cloud 80s linear infinite 10s; }
.cloud-3 { top: 50%; left: -20%; animation: move-cloud 70s linear infinite 5s; }
@keyframes move-cloud {
from { transform: translateX(0); }
to { transform: translateX(calc(100vw + 200px)); }
}
.hero-content {
position: relative;
z-index: 2;
padding: 100px 20px 150px 20px;
}
.hero h1 {
font-size: 48px;
color: var(--text-light);
margin: 0 0 20px 0;
text-shadow:
calc(var(--pixel-size) * 1) calc(var(--pixel-size) * 1) 0px var(--border-color),
calc(var(--pixel-size) * 1) calc(var(--pixel-size) * -1) 0px var(--border-color),
calc(var(--pixel-size) * -1) calc(var(--pixel-size) * 1) 0px var(--border-color),
calc(var(--pixel-size) * -1) calc(var(--pixel-size) * -1) 0px var(--border-color);
}
.hero p {
font-size: 16px;
margin-bottom: 40px;
color: var(--cloud-white);
text-shadow: 2px 2px 0 var(--border-color);
}
.btn {
display: inline-block;
background-color: var(--grass-top);
color: var(--text-light);
font-family: var(--font-family);
font-size: 20px;
text-decoration: none;
padding: 20px 40px;
border: var(--pixel-size) solid var(--border-color);
position: relative;
transition: all 0.05s linear;
box-shadow:
inset calc(var(--pixel-size) * -1) calc(var(--pixel-size) * -1) 0 var(--grass-side),
inset var(--pixel-size) var(--pixel-size) 0 var(--border-inset-light);
}
.btn::after {
content: '';
position: absolute;
top: var(--pixel-size);
left: var(--pixel-size);
right: var(--pixel-size);
bottom: var(--pixel-size);
z-index: -1;
}
.btn:hover {
transform: translateY(-4px);
}
.btn:active {
transform: translateY(4px);
background-color: var(--grass-side);
box-shadow:
inset calc(var(--pixel-size) * 1) calc(var(--pixel-size) * 1) 0 var(--border-inset-dark);
}
.ground-layer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
z-index: 1;
}
.grass {
background-color: var(--grass-top);
height: 30px;
border-top: var(--pixel-size) solid var(--border-color);
box-shadow: 0 calc(var(--pixel-size) * -1.5) 0 var(--grass-side) inset;
}
.dirt {
background-color: var(--dirt-brown);
background-image:
linear-gradient(45deg, var(--dirt-dark) 25%, transparent 25%),
linear-gradient(-45deg, var(--dirt-dark) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, var(--dirt-dark) 75%),
linear-gradient(-45deg, transparent 75%, var(--dirt-dark) 75%);
background-size: 8px 8px;
background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
height: 70px;
border-top: var(--pixel-size) solid var(--border-color);
}
/* --- Features Section --- */
.features {
background-color: var(--dirt-brown);
padding: 80px 0;
}
.features .container h2 {
font-size: 32px;
text-align: center;
margin-bottom: 60px;
color: var(--text-light);
text-shadow: 3px 3px 0 var(--text-shadow);
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
}
.feature-card {
background-color: var(--stone-grey);
padding: 30px;
text-align: center;
color: var(--text-dark);
}
.feature-card.pixel-border-raised {
box-shadow:
calc(var(--pixel-size) * 1.5) calc(var(--pixel-size) * 1.5) 0px 0px var(--stone-dark);
}
.feature-icon {
font-size: 48px;
margin-bottom: 20px;
line-height: 1;
}
.feature-card h3 {
font-size: 20px;
margin-bottom: 15px;
color: var(--text-light);
text-shadow: 2px 2px 0 var(--text-shadow);
}
.feature-card p {
font-size: 14px;
line-height: 1.6;
margin: 0;
color: #ddd;
text-shadow: 1px 1px 0 var(--text-shadow);
}
/* --- Footer --- */
.site-footer {
background-color: var(--stone-dark);
color: #ccc;
text-align: center;
padding: 40px 20px;
font-size: 12px;
border-top: var(--pixel-size) solid var(--border-color);
text-shadow: 1px 1px 0 var(--border-color);
}
/* --- Responsive Design --- */
@media (max-width: 768px) {
nav {
flex-direction: column;
gap: 20px;
}
.hero h1 {
font-size: 36px;
}
.hero p {
font-size: 14px;
}
.btn {
font-size: 18px;
padding: 15px 30px;
}
}
</style>
</head>
<body>
<header class="pixel-border">
<div class="container">
<nav>
<span class="logo">MINECRAFT</span>
<ul class="nav-links">
<li><a href="#">STORE</a></li>
<li><a href="#">COMMUNITY</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">SUPPORT</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section class="hero">
<div class="cloud cloud-1"></div>
<div class="cloud cloud-2"></div>
<div class="cloud cloud-3"></div>
<div class="hero-content">
<h1>Craft Your World</h1>
<p>Explore infinite worlds and build everything from the simplest of homes to the grandest of castles.</p>
<a href="#" class="btn">GET MINECRAFT</a>
</div>
<div class="ground-layer">
<div class="grass"></div>
<div class="dirt"></div>
</div>
</section>
<section class="features">
<div class="container">
<h2>An Infinite Adventure</h2>
<div class="features-grid">
<div class="feature-card pixel-border-raised">
<div class="feature-icon">⛏️</div>
<h3>Survive & Thrive</h3>
<p>Gather resources, craft tools, and fend off creatures in survival mode. The world is yours to shape.</p>
</div>
<div class="feature-card pixel-border-raised">
<div class="feature-icon">🧱</div>
<h3>Create & Build</h3>
<p>Unleash your imagination in creative mode with unlimited resources. Build anything you can dream of.</p>
</div>
<div class="feature-card pixel-border-raised">
<div class="feature-icon">🤝</div>
<h3>Play With Friends</h3>
<p>Join massive community-run servers or play with friends on your own private Realm. The fun is better together.</p>
</div>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container">
<p>© 2024 Mojang AB. TM Microsoft Corporation.</p>
</div>
</footer>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Minecraft Landing Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<style>
:root {
--mc-green: #6aa84f;
--mc-dark-green: #38761d;
--mc-brown: #7f5a36;
--mc-dark-brown: #3e2a15;
--mc-blue: #76a5af;
--mc-stone: #a8a8a8;
--mc-iron: #dadada;
--mc-grass-hl: #7fd537;
--mc-btn: #b7d677;
--mc-white: #f4f4f4;
--mc-shadow: #2b2b2b;
}
body {
background: linear-gradient(var(--mc-blue), var(--mc-stone) 70%);
margin: 0;
font-family: 'Press Start 2P', monospace;
color: var(--mc-dark-brown);
min-height: 100vh;
user-select: none;
box-sizing: border-box;
}
.mc-header {
display: flex;
flex-direction: column;
align-items: center;
background:
linear-gradient(var(--mc-grass-hl) 0 30px, var(--mc-green) 30px 70px, var(--mc-brown) 70px 100%);
box-shadow: 0 8px 0 0 var(--mc-dark-green), 0 16px 0 0 var(--mc-dark-brown);
padding: 32px 0 60px 0;
position: relative;
z-index: 2;
}
.mc-logo {
font-size: 2.6rem;
letter-spacing: 6px;
color: var(--mc-white);
text-shadow: 3px 3px 0 var(--mc-shadow), 0 0 16px #00000090;
background: linear-gradient(90deg,var(--mc-iron) 70%,#ffffff 100%);
border: 4px solid var(--mc-dark-green);
box-shadow: 0 8px var(--mc-dark-green);
border-radius: 10px 10px 13px 13px;
padding: 20px 30px 18px 30px;
margin-bottom: 18px;
transform: perspective(800px) rotateX(8deg);
display: inline-block;
}
.mc-header-desc {
margin-top: 0;
color: var(--mc-dark-brown);
background: #ffffff55;
border: 2px solid var(--mc-brown);
border-radius: 9px;
font-size: 1.04rem;
padding: 12px 28px 13px 28px;
box-shadow: 0 6px var(--mc-stone);
text-align: center;
max-width: 480px;
}
.mc-main {
margin: 36px auto 0 auto;
max-width: 1030px;
display: flex;
gap: 40px;
justify-content: center;
flex-wrap: wrap;
min-height: 300px;
}
.mc-card {
min-width: 265px;
width: 330px;
background: linear-gradient(180deg,var(--mc-stone) 0% 70%,#ededed 100%);
border: 5px solid var(--mc-dark-brown);
border-radius: 10px;
box-shadow: 0 10px var(--mc-dark-brown),0 24px 28px #00000049;
padding: 26px 20px 22px 20px;
margin-bottom: 18px;
transform: perspective(690px) rotateY(-6deg) rotateX(3deg);
display: flex;
flex-direction: column;
align-items: center;
font-size: 1rem;
}
.mc-card:nth-child(even) {
transform: perspective(690px) rotateY(6deg) rotateX(-3deg);
}
.mc-block {
width: 74px;
height: 74px;
margin-bottom: 22px;
position: relative;
display: flex;
align-items: end;
justify-content: center;
}
.mc-block.grass {
background:
linear-gradient(#7fd537 65%, var(--mc-brown) 75%, #3e2a15 100%);
border: 3px solid #589134;
box-shadow: 0 4px 0 0 #3e2a15;
border-radius: 7px;
}
.mc-block.stone {
background:
linear-gradient(120deg,#aaa 60%, #d2d2d2 100%);
border: 3px solid #757575;
box-shadow: 0 4px 0 0 #757575;
border-radius: 7px;
}
.mc-block.dirt {
background:
linear-gradient(#7f5a36 50%, #a87b4f 100%);
border: 3px solid #3e2a15;
box-shadow: 0 4px 0 0 #3e2a15;
border-radius: 7px;
}
.mc-block.cube3d {
perspective: 160px;
width: 74px;
height: 74px;
margin-bottom: 22px;
display: flex;
justify-content: center;
align-items: center;
}
.mc-cube3d {
width: 56px;
height: 56px;
position: relative;
transform-style: preserve-3d;
transform: rotateX(26deg) rotateY(36deg);
}
.mc-cube-face {
position: absolute;
width: 56px;
height: 56px;
background: linear-gradient(#b7d677 65%, #7fd537 100%);
opacity: 1;
border: 3px solid #3e2a15;
box-sizing: border-box;
border-radius: 4px;
}
.mc-cube3d .top {
transform: rotateX(90deg) translateZ(28px);
background: linear-gradient(#7fd537 40%, #b7d677 100%);
}
.mc-cube3d .bottom {
transform: rotateX(-90deg) translateZ(28px);
background: linear-gradient(#7f5a36 80%, #3e2a15 100%);
}
.mc-cube3d .front {
transform: translateZ(28px);
background: linear-gradient(#a87b4f 50%, #7f5a36 100%);
}
.mc-cube3d .back {
transform: rotateY(180deg) translateZ(28px);
background: linear-gradient(#7f5a36 40%, #3e2a15 100%);
}
.mc-cube3d .left {
transform: rotateY(-90deg) translateZ(28px);
background: linear-gradient(#8a6239 70%, #7f5a36 100%);
}
.mc-cube3d .right {
transform: rotateY(90deg) translateZ(28px);
background: linear-gradient(#a27444 70%, #7f5a36 100%);
}
.mc-card-title {
font-size: 1.24rem;
color: var(--mc-dark-green);
letter-spacing: 2px;
margin-bottom: 10px;
font-weight: bold;
text-shadow: 2px 2px 0 var(--mc-stone);
}
.mc-card-text {
font-size: 0.93rem;
color: var(--mc-dark-brown);
line-height: 1.49;
margin-bottom: 8px;
text-align: center;
text-shadow: 1px 1px 0 #dcdcdc;
}
.mc-btn-group {
margin: 45px 0 20px 0;
display: flex;
gap: 22px;
justify-content: center;
flex-wrap: wrap;
}
.mc-btn {
display: inline-block;
font-family: 'Press Start 2P', monospace;
letter-spacing: 2px;
font-size: 1.13rem;
background: linear-gradient(180deg, var(--mc-btn) 75%, #a2c061 100%);
color: var(--mc-dark-green);
border: 4px solid var(--mc-dark-green);
border-radius: 8px;
box-shadow: 0 6px 0 0 var(--mc-dark-green), 0 10px 18px #00000045;
padding: 16px 32px 16px 32px;
margin: 0 6px;
text-decoration: none;
text-align: center;
cursor: pointer;
transition: transform 0.11s, box-shadow 0.11s;
transform: perspective(320px) rotateX(4deg);
}
.mc-btn:hover {
background: linear-gradient(180deg, #d2ff8a 80%, #c8ed82 100%);
box-shadow: 0 2px 0 0 var(--mc-dark-green), 0 3px 8px #00000098;
transform: scale(1.05) perspective(320px) rotateX(0);
}
.mc-footer {
margin-top: 52px;
background: var(--mc-dark-brown);
color: var(--mc-white);
padding: 22px 0 25px 0;
font-size: 0.86rem;
text-align: center;
user-select: text;
text-shadow: 0 2px 0 #6d5631;
box-shadow: 0 -6px 0 0 #482f11;
border-radius: 12px 12px 0 0;
width: 100%;
letter-spacing: 1px;
}
@media (max-width: 700px) {
.mc-main {
flex-direction: column;
gap: 20px;
align-items: center;
}
.mc-header {
padding-bottom: 35px;
}
}
@media (max-width: 400px) {
.mc-card,.mc-card:nth-child(even) {
min-width: 95vw;
width: 99vw;
padding: 7vw 3vw 9vw 3vw;
box-sizing: border-box;
}
}
</style>
</head>
<body>
<div class="mc-header">
<span class="mc-logo">MINECRAFT</span>
<p class="mc-header-desc">Explore, build, and survive in a pixel-perfect blocky world! Jump into infinite adventures, create with friends, and let your imagination run wild.<br>Welcome to the Minecraft universe!</p>
</div>
<div class="mc-btn-group">
<a class="mc-btn" href="#">Play Now</a>
<a class="mc-btn" href="#">Get Minecraft</a>
<a class="mc-btn" href="#">About</a>
</div>
<main class="mc-main">
<div class="mc-card">
<div class="mc-block cube3d">
<div class="mc-cube3d">
<div class="mc-cube-face top"></div>
<div class="mc-cube-face bottom"></div>
<div class="mc-cube-face front"></div>
<div class="mc-cube-face back"></div>
<div class="mc-cube-face left"></div>
<div class="mc-cube-face right"></div>
</div>
</div>
<div class="mc-card-title">Create & Build</div>
<div class="mc-card-text">Shape your own worlds! Place creative blocks, build epic structures and bring your designs to life—pixel by pixel.</div>
</div>
<div class="mc-card">
<div class="mc-block grass"></div>
<div class="mc-card-title">Adventure Awaits</div>
<div class="mc-card-text">Brave caves, scale high cliffs, and encounter unique mobs! Every journey is different in the boundless wilds of Minecraft.</div>
</div>
<div class="mc-card">
<div class="mc-block stone"></div>
<div class="mc-card-title">Multiplayer Fun</div>
<div class="mc-card-text">Team up with friends online! Build, explore, or survive together in multiplayer worlds and epic minigames.</div>
</div>
</main>
<footer class="mc-footer">
© 2024 Minecraft Fan Page — Inspired by Mojang Studios. Not an official Minecraft site.
</footer>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Minecraft Landing</title>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<style>
:root{
--grass:#5daf34;
--grass-dark:#4c962d;
--dirt:#7a4f19;
--dirt-dark:#5a3912;
--sky:#8ecfff;
--stone:#a0a0a0;
--stone-dark:#7e7e7e;
}
*{box-sizing:border-box;padding:0;margin:0}
body{
font-family:'Press Start 2P',monospace;
background:var(--sky);
color:#fff;
text-shadow:0 2px 0 #000,0 4px 0 #000;
}
header{
background:var(--grass);
border-bottom:8px solid var(--grass-dark);
padding:20px 0;
}
nav{
max-width:1100px;
margin:0 auto;
display:flex;
justify-content:space-between;
align-items:center;
}
nav a{
color:#fff;
text-decoration:none;
margin:0 15px;
font-size:12px;
}
nav a:hover{
color:#000;
}
.hero{
position:relative;
overflow:hidden;
text-align:center;
padding:120px 20px 160px;
}
.clouds{
position:absolute;
top:0;left:0;right:0;bottom:0;
background-image:
repeating-linear-gradient( -45deg, rgba(255,255,255,.9) 0 4px, rgba(255,255,255,0) 4px 20px),
repeating-linear-gradient( 45deg, rgba(255,255,255,.9) 0 4px, rgba(255,255,255,0) 4px 20px);
background-size:200px 200px;
opacity:.25;
animation:move 60s linear infinite;
}
@keyframes move{
from{background-position:0 0,0 0}
to{background-position:1000px 1000px,-1000px 1000px}
}
.title{
font-size:48px;
color:#fff;
line-height:1.2;
letter-spacing:3px;
transform:skewX(-5deg);
display:inline-block;
padding:20px 40px;
background:var(--grass);
border:10px solid var(--grass-dark);
box-shadow:0 12px 0 #000,0 14px 0 var(--grass-dark),0 16px 0 #000;
}
.btn{
display:inline-block;
margin-top:60px;
padding:18px 40px;
background:var(--dirt);
border:8px solid var(--dirt-dark);
color:#fff;
font-size:14px;
text-decoration:none;
box-shadow:0 6px 0 #000;
}
.btn:active{
position:relative;
top:4px;
box-shadow:0 2px 0 #000;
}
section.features{
background:var(--stone);
border-top:12px solid var(--stone-dark);
border-bottom:12px solid var(--stone-dark);
padding:100px 20px;
}
.features-wrap{
max-width:1100px;
margin:0 auto;
display:flex;
flex-wrap:wrap;
gap:40px;
justify-content:center;
}
.block{
width:260px;
height:260px;
position:relative;
perspective:600px;
}
.block .face{
position:absolute;
width:100%;height:100%;
background:var(--grass);
transform-style:preserve-3d;
}
.block .face:before,.block .face:after{
content:'';
position:absolute;
width:100%;height:100%;
left:0;top:0;
background:var(--dirt);
}
.block .face:before{
transform-origin:top;
transform:rotateX(90deg) translateZ(130px);
background:var(--grass-dark);
}
.block .face:after{
transform-origin:left;
transform:rotateY(-90deg) translateZ(130px);
background:var(--dirt-dark);
}
.block-title{
position:absolute;
bottom:-60px;left:50%;
width:100%;
transform:translateX(-50%);
text-align:center;
font-size:14px;
color:#fff;
text-shadow:0 4px 0 #000;
}
footer{
background:#000;
color:#fff;
font-size:10px;
text-align:center;
padding:40px 10px;
}
</style>
</head>
<body>
<header>
<nav>
<div style="font-size:14px;color:#fff;">MineLanding</div>
<div>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Features</a>
<a href="#">Download</a>
</div>
</nav>
</header>
<section class="hero">
<div class="clouds"></div>
<h1 class="title">CRAFT REALMS</h1><br>
<a href="#" class="btn">PLAY NOW</a>
</section>
<section class="features">
<div class="features-wrap">
<div class="block">
<div class="face"></div>
<div class="block-title">ENDLESS WORLDS</div>
</div>
<div class="block">
<div class="face" style="background:var(--water);"></div>
<div class="block-title">MULTIPLAYER</div>
</div>
<div class="block">
<div class="face" style="background:var(--stone);"></div>
<div class="block-title">MOD SUPPORT</div>
</div>
</div>
</section>
<footer>
© 2025 Craft Realms. All blocky rights reserved.
</footer>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Minecraft Landing Page</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
body {
margin: 0;
font-family: 'Press Start 2P', cursive;
background-color: #8B4513;
color: #F5F5DC;
}
.header {
background-color: #228B22;
padding: 20px;
text-align: center;
}
.nav {
display: flex;
justify-content: center;
gap: 20px;
padding: 15px;
background-color: #3A5F0B;
}
.nav a {
color: #F5F5DC;
text-decoration: none;
padding: 10px 20px;
border: 4px solid #5D4037;
image-rendering: pixelated;
}
.hero {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==');
padding: 100px 20px;
text-align: center;
background-color: #7CFC00;
}
.hero h1 {
font-size: 48px;
transform: rotateX(10deg);
text-shadow: 4px 4px 0 #000;
}
.features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding: 50px 20px;
background-color: #8B4513;
}
.feature-box {
background-color: #A0522D;
padding: 20px;
border: 4px solid #5D4037;
transform: rotateY(10deg);
text-align: center;
}
.feature-box h2 {
color: #FFD700;
}
.footer {
background-color: #228B22;
text-align: center;
padding: 20px;
margin-top: 50px;
}
.cta-button {
background-color: #FF4500;
color: white;
padding: 15px 30px;
border: none;
font-family: inherit;
font-size: 18px;
cursor: pointer;
transform: translateZ(10px);
}
</style>
</head>
<body>
<header class="header">
<h1>Minecraft</h1>
</header>
<nav class="nav">
<a href="#play">Play</a>
<a href="#mods">Mods</a>
<a href="#community">Community</a>
</nav>
<section class="hero">
<h1>Build Your World</h1>
<button class="cta-button">Start Crafting</button>
</section>
<section class="features">
<div class="feature-box">
<h2>Survival</h2>
<p>Gather resources and survive the nights</p>
</div>
<div class="feature-box">
<h2>Creative</h2>
<p>Build anything you can imagine</p>
</div>
<div class="feature-box">
<h2>Multiplayer</h2>
<p>Play with friends online</p>
</div>
</section>
<footer class="footer">
<p>© 2023 Minecraft Landing Page</p>
</footer>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Minecraft Landing Page</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
body {
margin: 0;
background: #5D9CEC;
color: #000;
font-family: 'Press Start 2P', monospace;
font-size: 12px;
line-height: 1.2;
}
.pixel-border {
border: 2px solid #222;
}
.pixel-bg {
background: #475F2C;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
header {
text-align: center;
padding: 20px 0;
}
header h1 {
margin: 0;
font-size: 24px;
color: #FFD700;
background: #222;
display: inline-block;
padding: 5px 10px;
}
nav {
display: flex;
justify-content: center;
gap: 20px;
margin: 20px 0;
}
nav a {
text-decoration: none;
color: #000;
background: #B97358;
padding: 5px 10px;
border: 2px solid #222;
transition: background 0.3s;
}
nav a:hover {
background: #C68C53;
}
.hero {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
background: #43A324;
border: 2px solid #222;
margin: 30px 0;
padding: 20px;
}
.hero-content h2 {
font-size: 18px;
color: #FFD700;
background: #222;
padding: 5px 10px;
margin: 10px 0;
}
.hero-content p {
margin-top: 10px;
}
.block {
width: 80px;
height: 80px;
background: #616161;
position: relative;
margin: 10px;
}
.block::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, #888 50%, #555 50%), linear-gradient(to bottom, #888 50%, #555 50%);
background-blend-mode: multiply;
}
.features {
display: flex;
flex-wrap: wrap;
gap: 20px;
background: #43A324;
border: 2px solid #222;
padding: 20px;
margin: 30px 0;
}
.feature {
flex: 1 1 200px;
background: #E3C683;
padding: 10px;
border: 2px solid #222;
}
.gallery {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 30px 0;
}
.screenshot {
flex: 1 1 200px;
background: #222;
padding: 5px;
border: 1px solid #444;
}
.footer {
text-align: center;
background: #FFD700;
border: 2px solid #222;
padding: 20px;
}
button {
background: #B97358;
border: 2px solid #222;
padding: 5px 10px;
cursor: pointer;
font-family: 'Press Start 2P', monospace;
font-size: 10px;
transition: background 0.3s;
}
button:hover {
background: #C68C53;
}
</style>
</head>
<body>
<div class="pixel-border pixel-bg">
<header>
<h1>MINECRAFT</h1>
</header>
<nav>
<a href="#">Download</a>
<a href="#">Gameplay</a>
<a href="#">Merch</a>
<a href="#">Community</a>
</nav>
<section class="hero">
<div class="hero-content">
<h2>Explore Endless Worlds</h2>
<p>Build, explore, and survive in a randomly generated world with cubes!</p>
<button>Start Playing</button>
</div>
<div class="block"></div>
</section>
<section class="features">
<div class="feature">
<h3>Survival</h3>
<p>Gather resources, craft tools, and build shelters to survive the night!</p>
</div>
<div class="feature">
<h3>Creative</h3>
<p>Unlimited blocks? Endless possibilities. Build your dream city in survival or fly!</p>
</div>
<div class="feature">
<h3>Multiplayer</h3>
<p>Join millions of players worldwide. Create servers, play mini-games, and more!</p>
</div>
</section>
<section class="gallery">
<div class="screenshot"></div>
<div class="screenshot"></div>
<div class="screenshot"></div>
</section>
<footer class="footer">
© 2023 Mojang AB | Minecraft is a registered trademark of Microsoft.
</footer>
</div>
</body>
</html>
```Drag to resize
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Minecraft</title>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<style>
:root{
--grass:#5F9E48;
--dirt:#8E5E2F;
--sky:#6EC1FF;
--stone:#747474;
--water:#3F76E4;
--lava:#E27548;
--oak:#94703A;
--leaf:#617C37;
--shadow:#3B3B3B;
}
*{box-sizing:border-box;margin:0;padding:0;text-decoration:none;font-family:'Press Start 2P',sans-serif;color:#fff}
body{background:#87CEEB;display:flex;flex-direction:column;min-height:100vh}
header{background:#333;text-align:center;padding:12px;font-size:14px}
.hero{
display:flex;justify-content:center;align-items:center;
height:260px;background:linear-gradient(var(--sky) 60%,var(--grass));
}
.block-world{
position:relative;width:400px;height:200px;
transform-style:preserve-3d;animation:float 8s infinite ease-in-out;
}
.block{
position:absolute;width:40px;height:40px;
background-size:40px 40px;
image-rendering:pixelated;
box-shadow:inset -4px -4px 0 rgba(0,0,0,0.25);
}
.stone{background:#747474;margin-top:-40px;margin-left:40px}
.grass{background:var(--grass);background-image:
linear-gradient(45deg,var(--grass) 25%,transparent 25%,transparent 75%,var(--grass) 75%),
linear-gradient(45deg,var(--grass) 25%,transparent 25%,transparent 75%,var(--grass) 75%);
background-size:8px 8px;
background-position:0 0,4px 4px
}
.dirt{background:var(--dirt);margin-top:0px;margin-left:40px}
.log{background:var(--oak);margin-left:120px;margin-top:-40px}
.leaf{background:var(--leaf);margin-left:120px;margin-top:-80px}
.water{background:var(--water)}
.lava{background:var(--lava)}
.shadow{position:absolute;bottom:-12px;left:0;width:400%;height:4px;background:rgba(0,0,0,0.25);margin-left:-120px}
@keyframes float{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-12px)}
}
section{
display:flex;flex:1;justify-content:center;gap:32px;padding:40px 20px;
background:linear-gradient(var(--grass),var(--dirt) 80%);
}
.card{
width:220px;background:#654321;border:4px solid #3d2817;
box-shadow:8px 8px 0 #3d2817;
}
.card-header{background:#4CAF50;font-size:10px;padding:12px;text-align:center}
.card-body{padding:16px;font-size:8px;line-height:1.6}
.btn{
display:block;background:#8BC34A;border:none;padding:10px 0;
text-align:center;font-size:8px;cursor:pointer;
margin-top:12px;box-shadow:inset 2px 2px 0 #fff,inset -2px -2px 0 #3E5627;
}
footer{background:#333;text-align:center;padding:20px;font-size:10px}
</style>
</head>
<body>
<header>Minecraft Landing</header>
<div class="hero">
<div class="block-world">
<!-- grass -->
<div class="block grass" style="transform:translate3d(0,0,0)"></div>
<div class="block grass" style="transform:translate3d(40px,0,0)"></div>
<div class="block grass" style="transform:translate3d(80px,0,0)"></div>
<div class="block grass" style="transform:translate3d(120px,0,0)"></div>
<div class="block grass" style="transform:translate3d(160px,0,0)"></div>
<!-- dirt layer -->
<div class="block dirt" style="transform:translate3d(0,40px,0)"></div>
<div class="block dirt" style="translate:40px 40px"></div>
<div class="block dirt" style="transform:translate3d(80px,40px,0)"></div>
<div class="block dirt" style="transform:translate3d(120px,40px,0)"></div>
<div class="block dirt" style="transform:translate3d(160px,40px,0)"></div>
<!-- stone -->
<div class="block stone" style="transform:translate3d(0,-40px,0)"></div>
<div class="block log" style="transform:translate3d(200px,40px,0)"></div>
<div class="block log" style="transform:translate3d(200px,0,0)"></div>
<div class="block leaf" style="transform:translate3d(200px,-40px,0)"></div>
<div class="block water" style="transform:translate3d(240px,0,0)"></div>
<div class="block lava" style="transform:translate3d(280px,0,0)"></div>
<div class="shadow"></div>
</div>
</div>
<section>
<div class="card">
<div class="card-header">Survival</div>
<div class="card-body">
Mine, craft, and survive in a blocky world full of danger. Gather resources, build shelters, and fight mobs.
<button class="btn">Play Survival</button>
</div>
</div>
<div class="card">
<div class="card-header">Creative</div>
<div class="card-body">
Unlimited resources and flight. Create stunning structures and redstone contraptions without limits.
<button class="btn">Play Creative</button>
</div>
</div>
<div class="card">
<div class="card-header">Multiplayer</div>
<div class="card-body">
Join friends online and build or battle together in shared worlds. Servers and realms await!
<button class="btn">Join Server</button>
</div>
</div>
</section>
<footer>© Mojang 2024</footer>
</body>
</html>Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Minecraft Landing Page</title>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
padding: 0;
background-color: #3a7d44; /* Minecraft grass green */
font-family: 'Press Start 2P', cursive;
color: #ffffff;
text-shadow: 2px 2px 4px #000000;
overflow-x: hidden;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
header {
background-color: #7d5a3c; /* Dirt brown */
padding: 40px 0;
text-align: center;
border-bottom: 8px solid #5a3c1e; /* Darker dirt */
box-shadow: 0 8px 0 #3a1e0f; /* Flat 3D shadow */
}
.logo {
font-size: 48px;
letter-spacing: 4px;
text-transform: uppercase;
color: #ffffff;
text-shadow: 4px 4px 0 #000000;
margin-bottom: 20px;
}
.tagline {
font-size: 24px;
margin-bottom: 40px;
}
.button {
display: inline-block;
background-color: #4caf50; /* Green button */
color: #ffffff;
padding: 20px 40px;
text-decoration: none;
font-size: 18px;
border: 4px solid #388e3c;
box-shadow: 4px 4px 0 #2e7d32; /* Flat 3D effect */
transition: all 0.2s;
}
.button:hover {
transform: translate(2px, 2px);
box-shadow: 2px 2px 0 #2e7d32;
}
.section {
padding: 60px 0;
text-align: center;
}
.features {
background-color: #5a3c1e; /* Dark dirt */
border-top: 8px solid #7d5a3c;
border-bottom: 8px solid #7d5a3c;
box-shadow: inset 0 8px 0 #3a1e0f, inset 0 -8px 0 #3a1e0f;
}
.feature-grid {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.feature-item {
background-color: #a1887f; /* Stone gray */
width: 300px;
margin: 20px;
padding: 20px;
border: 4px solid #757575;
box-shadow: 4px 4px 0 #616161; /* Flat 3D */
text-align: left;
}
.feature-title {
font-size: 20px;
margin-bottom: 10px;
}
.feature-desc {
font-size: 14px;
color: #eeeeee;
}
.news {
background-color: #3a7d44; /* Grass */
}
.news-item {
background-color: #ffffff;
color: #000000;
width: 80%;
margin: 20px auto;
padding: 20px;
border: 4px solid #000000;
box-shadow: 4px 4px 0 #000000;
text-align: left;
text-shadow: none;
}
footer {
background-color: #7d5a3c;
padding: 20px;
text-align: center;
border-top: 8px solid #5a3c1e;
box-shadow: 0 -8px 0 #3a1e0f;
}
footer a {
color: #ffffff;
text-decoration: none;
margin: 0 10px;
font-size: 14px;
}
/* Pixelated effect */
img.pixelated {
image-rendering: pixelated;
}
/* Simple flat 3D cube for decoration */
.cube {
width: 100px;
height: 100px;
background-color: #4caf50;
position: relative;
margin: 0 auto 20px;
transform: skewY(-30deg) skewX(30deg);
box-shadow: 20px 20px 0 #388e3c, 40px 40px 0 #2e7d32;
}
</style>
</head>
<body>
<header>
<div class="container">
<div class="logo">Minecraft</div>
<div class="tagline">Build, Explore, Survive!</div>
<a href="#" class="button">Play Now</a>
<a href="#" class="button">Download</a>
</div>
</header>
<section class="section features">
<div class="container">
<h2>Features</h2>
<div class="feature-grid">
<div class="feature-item">
<div class="cube"></div>
<div class="feature-title">Infinite Worlds</div>
<div class="feature-desc">Explore vast landscapes filled with mountains, caves, and oceans.</div>
</div>
<div class="feature-item">
<div class="cube" style="background-color: #ffeb3b; box-shadow: 20px 20px 0 #fbc02d, 40px 40px 0 #f9a825;"></div>
<div class="feature-title">Creative Mode</div>
<div class="feature-desc">Build anything you can imagine with unlimited resources.</div>
</div>
<div class="feature-item">
<div class="cube" style="background-color: #f44336; box-shadow: 20px 20px 0 #d32f2f, 40px 40px 0 #c62828;"></div>
<div class="feature-title">Survival Mode</div>
<div class="feature-desc">Gather resources, craft tools, and fend off monsters.</div>
</div>
</div>
</div>
</section>
<section class="section news">
<div class="container">
<h2>Latest News</h2>
<div class="news-item">
<h3>New Update: Caves & Cliffs</h3>
<p>Discover deeper caves and taller mountains in the latest update!</p>
</div>
<div class="news-item">
<h3>Community Spotlight</h3>
<p>Check out amazing builds from our players around the world.</p>
</div>
</div>
</section>
<footer>
<div class="container">
<a href="#">About</a>
<a href="#">Community</a>
<a href="#">Support</a>
<p>© 2023 Minecraft. All rights reserved.</p>
</div>
</footer>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Minecraft Landing</title>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<style>
:root{
--grass:#7dbb59;
--dirt:#966f33;
--stone:#7f7f7f;
--sky:#78cce4;
--wood:#d9b47c;
--dark:#333;
--light:#eee;
}
*{
box-sizing:border-box;
margin:0;
padding:0;
}
body{
background:var(--sky);
color:var(--dark);
font-family:'Press Start 2P',monospace;
}
header{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px;
background:var(--stone);
box-shadow:0 4px 0 0 var(--dark);
}
.logo{
font-size:20px;
color:var(--light);
text-shadow:2px 2px 0 var(--dark);
}
nav a{
color:var(--light);
text-decoration:none;
margin:0 10px;
font-size:12px;
}
nav a:hover{
color:var(--grass);
}
.hero{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
height:80vh;
text-align:center;
background:linear-gradient(180deg,var(--sky) 0%,var(--grass) 80%);
}
.hero h1{
font-size:48px;
color:var(--stone);
text-shadow:4px 4px 0 var(--dark);
}
.hero p{
font-size:14px;
color:var(--wood);
margin:20px 0;
}
.button{
display:inline-block;
padding:10px 20px;
font-size:12px;
color:var(--light);
background:var(--dirt);
text-decoration:none;
box-shadow:4px 4px 0 var(--dark);
}
.button:hover{
background:var(--grass);
box-shadow:4px 4px 0 var(--dark) inset;
}
.features{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
padding:40px;
background:var(--light);
}
.feature{
background:var(--wood);
padding:20px;
box-shadow:4px 4px 0 var(--dark);
text-align:center;
}
.feature h3{
font-size:14px;
color:var(--stone);
margin-bottom:10px;
}
.feature p{
font-size:10px;
color:var(--dark);
}
footer{
background:var(--stone);
color:var(--light);
text-align:center;
padding:10px;
box-shadow:0 -4px 0 0 var(--dark);
}
</style>
</head>
<body>
<header>
<div class="logo">MINECRAFT</div>
<nav>
<a href="#">Home</a>
<a href="#">Download</a>
<a href="#">Community</a>
<a href="#">Shop</a>
</nav>
</header>
<section class="hero">
<h1>MINECRAFT</h1>
<p>Explore. Build. Survive.</p>
<a href="#" class="button">Download Now</a>
</section>
<section class="features">
<div class="feature">
<h3>Creative Mode</h3>
<p>Unleash your imagination in an infinite world of blocks.</p>
</div>
<div class="feature">
<h3>Survival Mode</h3>
<p>Gather resources, build shelters and survive the night.</p>
</div>
<div class="feature">
<h3>Multiplayer</h3>
<p>Join friends and explore together on custom servers.</p>
</div>
</section>
<footer>
<p>© 2025 Mojang Studios. All rights reserved.</p>
</footer>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Minecraft Landing Page</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
* {
box-sizing: border-box;
}
body {
margin: 0;
background: linear-gradient(180deg, #1c352e 0%, #436f65 100%);
font-family: 'Press Start 2P', cursive;
color: #eedc82;
user-select:none;
}
.container {
max-width: 960px;
margin: auto;
padding: 1rem 1.5rem 3rem 1.5rem;
}
header {
text-align: center;
margin-top: 2rem;
position: relative;
z-index: 1;
}
.logo {
font-size: 4rem;
color: #4a7a27;
letter-spacing: 0.35rem;
text-shadow: 4px 4px 0 #173b0f, 8px 8px 0 #2e5717;
margin-bottom: 0.2rem;
line-height: 1;
}
.logo span {
color: #a3d858;
text-shadow: 4px 4px 0 #5a7e15, 8px 8px 0 #397209;
display: inline-block;
transform-style: preserve-3d;
text-transform: uppercase;
}
nav {
margin: 2rem 0 4rem;
text-align: center;
}
nav a {
color: #acd856;
background: #1f4e07;
border: 4px solid #3c7a0a;
padding: 0.6rem 1.2rem;
margin: 0 10px;
text-decoration: none;
font-size: 1rem;
display: inline-block;
box-shadow:
4px 4px 0 #193a03,
inset 0 0 0 4px #6eb129;
transition: background 0.3s ease;
}
nav a:hover {
background: #3c7a0a;
box-shadow:
4px 4px 0 #275503,
inset 0 0 0 4px #acd856;
color: #d6ff7a;
}
main {
background: linear-gradient(135deg, #98754a 0%, #c2a257 100%);
border: 6px solid #5d3f17;
box-shadow:
8px 8px 0 #392d13;
border-radius: 4px;
padding: 2rem;
color: #3b2e0f;
}
main h2 {
font-size: 2.2rem;
margin-bottom: 1rem;
text-shadow:
2px 2px 0 #735b20,
4px 4px 0 #4c3b11;
letter-spacing: 0.1rem;
}
.features {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
gap: 2rem;
}
.feature {
background: linear-gradient(145deg, #d9c694, #c3b07a);
border: 4px solid #6a561b;
border-radius: 4px;
box-shadow:
4px 4px 0 #4e3e08;
padding: 1.5rem;
text-align: center;
font-size: 0.95rem;
line-height: 1.3;
}
.feature-icon {
margin-bottom: 1rem;
width: 64px;
height: 64px;
margin-left: auto;
margin-right: auto;
image-rendering: pixelated;
}
.feature-title {
font-weight: 700;
margin-bottom: 0.6rem;
font-size: 1.2rem;
text-shadow:
1px 1px 0 #6e5537;
}
footer {
text-align:center;
margin-top: 3rem;
font-size: 0.8rem;
color: #a7a26d;
text-shadow: 1px 1px 0 #253d14;
user-select:none;
}
/* Pixel style flat 3D blocks for hero */
.pixel-block {
display: inline-block;
width: 48px;
height: 48px;
margin: 2px;
position: relative;
image-rendering: pixelated;
}
.pixel-face {
position: absolute;
box-shadow:
inset 1px 1px 0 rgba(255 255 255 / 0.15),
inset -1px -1px 2px rgba(0 0 0 / 0.4);
}
.face-top {
width: 48px;
height: 16px;
background: #82a65a;
border-top: 2px solid #4f7430;
border-left: 2px solid #4f7430;
clip-path: polygon(0 100%, 100% 100%, 75% 0, 25% 0);
top: 0;
left: 0;
z-index: 3;
}
.face-left {
width: 18px;
height: 48px;
background: #5e7d38;
border-left: 2px solid #315014;
border-bottom: 2px solid #315014;
clip-path: polygon(100% 0, 0 25%,0 75%, 100% 100%);
top: 16px;
left: 0;
z-index: 2;
}
.face-right {
width: 30px;
height: 48px;
background: #6d8f42;
border-right: 2px solid #3c6b1b;
border-bottom: 2px solid #3c6b1b;
clip-path: polygon(0 0, 100% 25%,100% 75%, 0 100%);
top: 16px;
left: 18px;
z-index: 1;
}
/* Buttons pixel pressed effect */
nav a:active {
transform: translate(2px,2px);
box-shadow:
2px 2px 0 #275503,
inset 0 0 0 4px #acd856;
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="logo" aria-label="Minecraft logo">
<span>MINE</span><span>C</span><span>RAFT</span>
</div>
</header>
<nav role="navigation" aria-label="Main navigation">
<a href="#play" tabindex="0">Play</a>
<a href="#features" tabindex="0">Features</a>
<a href="#download" tabindex="0">Download</a>
<a href="#community" tabindex="0">Community</a>
</nav>
<main>
<h2>Welcome to the Blocky World</h2>
<p style="max-width:600px; margin:auto; margin-bottom:2rem; letter-spacing: 0.03em;">
Experience the endless creativity and adventure in Minecraft – the iconic pixelated world where you can build, explore and survive. Shape your universe block by block!
</p>
<div style="text-align:center; margin-bottom:3rem;">
<div class="pixel-block" aria-hidden="true">
<div class="pixel-face face-top"></div>
<div class="pixel-face face-left"></div>
<div class="pixel-face face-right"></div>
</div>
<div class="pixel-block" aria-hidden="true">
<div class="pixel-face face-top" style="background:#d8953f; border-top-color:#7e4d19; border-left-color:#7e4d19;"></div>
<div class="pixel-face face-left" style="background:#99672a; border-left-color:#5a3912; border-bottom-color:#5a3912;"></div>
<div class="pixel-face face-right" style="background:#c99733; border-right-color:#7a4a0a; border-bottom-color:#7a4a0a;"></div>
</div>
<div class="pixel-block" aria-hidden="true">
<div class="pixel-face face-top" style="background:#7a9e6e; border-top-color:#30621c; border-left-color:#30621c;"></div>
<div class="pixel-face face-left" style="background:#4d6e3c; border-left-color:#233a08; border-bottom-color:#233a08;"></div>
<div class="pixel-face face-right" style="background:#679f3e; border-right-color:#357613; border-bottom-color:#357613;"></div>
</div>
</div>
<section id="features" class="features" aria-label="Minecraft features">
<article class="feature" tabindex="0">
<svg class="feature-icon" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges">
<rect x="16" y="16" width="32" height="32" fill="#699941" stroke="#3d6317" stroke-width="4"/>
<rect x="22" y="22" width="20" height="20" fill="#acd856" />
<rect x="28" y="28" width="8" height="8" fill="#4a730e" />
</svg>
<h3 class="feature-title">Creative Building</h3>
Let your imagination run wild with unlimited blocks to construct intricate worlds.
</article>
<article class="feature" tabindex="0">
<svg class="feature-icon" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges">
<rect x="16" y="10" width="32" height="44" fill="#7a6d4d" stroke="#4b3f2c" stroke-width="4"/>
<rect x="20" y="16" width="24" height="36" fill="#a5997a" />
<rect x="26" y="24" width="12" height="6" fill="#57462a" />
</svg>
<h3 class="feature-title">Survival Mode</h3>
Gather resources, fend off mobs, and stay alive in a vast pixelated wilderness.
</article>
<article class="feature" tabindex="0">
<svg class="feature-icon" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges">
<circle cx="32" cy="32" r="26" fill="#5c9bd5" stroke="#2c5e8d" stroke-width="4"/>
<rect x="26" y="20" width="12" height="24" fill="#aad4ff" />
<rect x="28" y="40" width="8" height="6" fill="#436fb0" />
</svg>
<h3 class="feature-title">Adventure & Exploration</h3>
Explore caves, strongholds and oceans teeming with secrets and treasures.
</article>
</section>
<section id="download" style="text-align:center; margin-top:3rem;">
<a href="#" style="display:inline-block; border:5px solid #3c7a0a; background:#acd856; color:#2d4101; text-shadow:1px 1px 0 #9fc544; font-size:1.2rem; padding:1rem 3rem; border-radius:0; box-shadow:
6px 6px 0 #234400;
inset 0 0 0 5px #4b7e07;
" role="button" tabindex="0">Download Minecraft</a>
</section>
<section id="community" style="margin-top:4rem; font-size:0.9rem; color:#2f4102;">
<p>
Join millions of players worldwide sharing their creations, mods, and multiplayer adventures.
<br /><br />
<a href="#" style="color:#527d11; text-decoration:underline;">Visit the Community Hub</a>
</p>
</section>
</main>
<footer>
© 2024 Minecraft. Pixel art and design inspired by Minecraft styles.
</footer>
</div>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html>
<head>
<title>Minecraft Landing Page</title>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
background: linear-gradient(#71B8FF 65%, #7C5F3D 65%, #7C5F3D 85%, #5A3F1C 85%);
background-attachment: fixed;
font-family: 'Press Start 2P', cursive;
image-rendering: pixelated;
overflow: hidden;
}
.container {
width: 800px;
margin: 50px auto;
text-align: center;
position: relative;
}
.minecraft-box {
background-color: #8E8E8E;
border: 5px solid;
border-color: #373737 #FFF #FFF #373737;
padding: 30px;
box-shadow: 6px 6px 0 rgba(0,0,0,0.3);
}
.title {
font-size: 48px;
color: #FFD83D;
text-shadow: 4px 4px #9B6D1C;
margin-bottom: 40px;
letter-spacing: -2px;
}
.subtitle {
color: #5DFA5D;
font-size: 16px;
margin-bottom: 30px;
line-height: 1.6;
}
.button-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
margin: 40px 0;
}
.minecraft-button {
width: 300px;
padding: 18px;
background-color: #7AA73D;
border: 4px solid;
border-color: #9B6D1C #FFF #FFF #9B6D1C;
font-family: 'Press Start 2P', cursive;
color: #FFD83D;
font-size: 16px;
text-align: center;
text-shadow: 2px 2px #5C5C00;
cursor: pointer;
transition: transform 0.1s;
}
.minecraft-button:hover {
background-color: #8BB83D;
border-color: #A67D1C #FFF #FFF #A67D1C;
}
.minecraft-button:active {
transform: translateY(4px);
border-color: #5C5C00 #9B6D1C #9B6D1C #5C5C00;
}
.character {
position: absolute;
z-index: -1;
}
#steve {
width: 80px;
bottom: 30px;
left: 100px;
animation: bounce 4s ease-in-out infinite;
}
#creeper {
width: 80px;
bottom: 30px;
right: 100px;
animation: bounce 4s ease-in-out infinite reverse;
}
.cloud {
position: absolute;
background-color: #E8F8FF;
border-radius: 5px;
z-index: -2;
}
#cloud1 { top: 10%; left: 5%; width: 120px; height: 25px; animation: drift 12s linear infinite; }
#cloud2 { top: 25%; left: 55%; width: 80px; height: 20px; animation: drift 8s linear infinite reverse; }
.grass-block {
position: absolute;
width: 100px;
height: 100px;
bottom: 0;
background-image:
linear-gradient(45deg, #7AA73D 25%, transparent 25%, transparent 75%, #7AA73D 75%),
linear-gradient(45deg, #7AA73D 25%, #6C9D22 25%, #6C9D22 75%, #7AA73D 75%);
background-size: 10px 10px;
border: 2px solid #5C5C00;
}
#grass1 { left: 20%; }
#grass2 { left: 35%; }
#grass3 { left: 80%; }
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-30px); }
}
@keyframes drift {
0% { transform: translateX(-100vw); }
100% { transform: translateX(100vw); }
}
</style>
</head>
<body>
<div class="container">
<div class="minecraft-box">
<h1 class="title">MINECRAFT</h1>
<p class="subtitle">CREATE • EXPLORE • SURVIVE</p>
<div class="button-container">
<button class="minecraft-button">PLAY GAME</button>
<button class="minecraft-button">MULTIPLAYER</button>
<button class="minecraft-button">OPTIONS</button>
<button class="minecraft-button">QUIT GAME</button>
</div>
</div>
</div>
<div id="steve" class="character">
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<!-- Steve character -->
<rect x="16" y="8" width="8" height="8" fill="#502500" />
<rect x="16" y="16" width="8" height="16" fill="#502500" />
<rect x="24" y="8" width="24" height="16" fill="#502500" />
<rect x="24" y="24" width="8" height="8" fill="#854B00" />
<rect x="32" y="24" width="8" height="8" fill="#854B00" />
<rect x="40" y="24" width="8" height="8" fill="#854B00" />
<rect x="32" y="32" width="8" height="16" fill="#7C7C7C" />
<rect x="24" y="32" width="8" height="8" fill="#55433B" />
<rect x="40" y="32" width="8" height="8" fill="#55433B" />
<rect x="24" y="40" width="16" height="8" fill="#55433B" />
<rect x="16" y="48" width="8" height="8" fill="#7C7C7C" />
<rect x="40" y="48" width="8" height="8" fill="#7C7C7C" />
<rect x="16" y="32" width="8" height="16" fill="#4573B1" />
<rect x="40" y="32" width="8" height="16" fill="#4573B1" />
</svg>
</div>
<div id="creeper" class="character">
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<!-- Creeper character -->
<rect x="8" y="8" width="48" height="48" fill="#50A050" />
<rect x="16" y="16" width="12" height="12" fill="#202020" />
<rect x="36" y="16" width="12" height="12" fill="#202020" />
<rect x="16" y="40" width="32" height="4" fill="#202020" />
<rect x="28" y="28" width="4" height="8" fill="#202020" />
<rect x="32" y="28" width="4" height="8" fill="#202020" />
</svg>
</div>
<div id="cloud1" class="cloud"></div>
<div id="cloud2" class="cloud"></div>
<div id="grass1" class="grass-block"></div>
<div id="grass2" class="grass-block"></div>
<div id="grass3" class="grass-block"></div>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Minecraft - Official Website</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Press Start 2P', monospace;
background: linear-gradient(135deg, #4CAF50 0%, #388E3C 50%, #2E7D32 100%);
min-height: 100vh;
image-rendering: pixelated;
}
.header {
background: linear-gradient(to bottom, #8BC34A 0%, #689F38 50%, #558B2F 100%);
border-bottom: 4px solid #33691E;
padding: 20px 0;
box-shadow: inset 0 -4px 0 #4CAF50, inset 0 4px 0 #9CCC65;
}
.nav {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
.logo {
font-size: 24px;
color: #FFFFFF;
text-shadow: 2px 2px 0 #2E7D32;
}
.nav-links {
display: flex;
gap: 30px;
}
.nav-link {
color: #FFFFFF;
text-decoration: none;
font-size: 12px;
padding: 10px 15px;
background: linear-gradient(to bottom, #795548 0%, #5D4037 50%, #3E2723 100%);
border: 2px solid #8D6E63;
border-radius: 0;
box-shadow: inset 0 2px 0 #A1887F, inset 0 -2px 0 #4E342E;
transition: all 0.1s;
}
.nav-link:hover {
background: linear-gradient(to bottom, #8D6E63 0%, #6D4C41 50%, #4E342E 100%);
transform: translateY(1px);
}
.hero {
max-width: 1200px;
margin: 0 auto;
padding: 60px 20px;
text-align: center;
}
.hero-title {
font-size: 48px;
color: #FFFFFF;
text-shadow: 4px 4px 0 #2E7D32;
margin-bottom: 20px;
}
.hero-subtitle {
font-size: 14px;
color: #E8F5E8;
text-shadow: 2px 2px 0 #1B5E20;
margin-bottom: 40px;
line-height: 1.5;
}
.cta-buttons {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 60px;
}
.btn {
font-family: 'Press Start 2P', monospace;
font-size: 14px;
padding: 15px 30px;
border: none;
cursor: pointer;
text-transform: uppercase;
transition: all 0.1s;
text-decoration: none;
display: inline-block;
}
.btn-primary {
background: linear-gradient(to bottom, #4CAF50 0%, #388E3C 50%, #2E7D32 100%);
color: #FFFFFF;
border: 3px solid #66BB6A;
box-shadow: inset 0 3px 0 #81C784, inset 0 -3px 0 #1B5E20;
text-shadow: 1px 1px 0 #1B5E20;
}
.btn-primary:hover {
background: linear-gradient(to bottom, #66BB6A 0%, #4CAF50 50%, #388E3C 100%);
transform: translateY(2px);
}
.btn-secondary {
background: linear-gradient(to bottom, #FF9800 0%, #F57C00 50%, #E65100 100%);
color: #FFFFFF;
border: 3px solid #FFB74D;
box-shadow: inset 0 3px 0 #FFCC02, inset 0 -3px 0 #BF360C;
text-shadow: 1px 1px 0 #BF360C;
}
.btn-secondary:hover {
background: linear-gradient(to bottom, #FFB74D 0%, #FF9800 50%, #F57C00 100%);
transform: translateY(2px);
}
.features {
background: linear-gradient(135deg, #795548 0%, #5D4037 50%, #3E2723 100%);
border-top: 4px solid #8D6E63;
border-bottom: 4px solid #3E2723;
box-shadow: inset 0 4px 0 #A1887F, inset 0 -4px 0 #2E2E2E;
padding: 60px 0;
}
.features-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.features-title {
text-align: center;
font-size: 32px;
color: #FFFFFF;
text-shadow: 3px 3px 0 #2E2E2E;
margin-bottom: 50px;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.feature-card {
background: linear-gradient(to bottom, #8D6E63 0%, #6D4C41 50%, #4E342E 100%);
border: 3px solid #A1887F;
box-shadow: inset 0 3px 0 #BCAAA4, inset 0 -3px 0 #3E2723;
padding: 25px;
}
.feature-icon {
width: 60px;
height: 60px;
background: linear-gradient(to bottom, #4CAF50 0%, #388E3C 50%, #2E7D32 100%);
border: 2px solid #66BB6A;
box-shadow: inset 0 2px 0 #81C784, inset 0 -2px 0 #1B5E20;
margin-bottom: 20px;
position: relative;
}
.feature-icon::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30px;
height: 30px;
background: #FFFFFF;
}
.feature-icon.build::before {
border: 3px solid #2E7D32;
}
.feature-icon.survive::before {
background: radial-gradient(circle, #FFFFFF 30%, transparent 30%);
}
.feature-icon.explore::before {
background: linear-gradient(45deg, #FFFFFF 25%, transparent 25%, transparent 75%, #FFFFFF 75%);
}
.feature-title {
font-size: 16px;
color: #FFFFFF;
text-shadow: 2px 2px 0 #2E2E2E;
margin-bottom: 15px;
}
.feature-description {
font-size: 10px;
color: #E0E0E0;
line-height: 1.6;
text-shadow: 1px 1px 0 #2E2E2E;
}
.news {
background: linear-gradient(135deg, #607D8B 0%, #455A64 50%, #263238 100%);
border-top: 4px solid #78909C;
box-shadow: inset 0 4px 0 #90A4AE, inset 0 -4px 0 #1C1C1C;
padding: 60px 0;
}
.news-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.news-title {
text-align: center;
font-size: 32px;
color: #FFFFFF;
text-shadow: 3px 3px 0 #1C1C1C;
margin-bottom: 50px;
}
.news-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
}
.news-card {
background: linear-gradient(to bottom, #78909C 0%, #546E7A 50%, #37474F 100%);
border: 3px solid #90A4AE;
box-shadow: inset 0 3px 0 #B0BEC5, inset 0 -3px 0 #263238;
padding: 25px;
}
.news-date {
font-size: 8px;
color: #B0BEC5;
margin-bottom: 10px;
text-shadow: 1px 1px 0 #1C1C1C;
}
.news-headline {
font-size: 12px;
color: #FFFFFF;
text-shadow: 2px 2px 0 #1C1C1C;
margin-bottom: 15px;
line-height: 1.3;
}
.news-excerpt {
font-size: 8px;
color: #E0E0E0;
line-height: 1.6;
text-shadow: 1px 1px 0 #1C1C1C;
}
.footer {
background: linear-gradient(to bottom, #424242 0%, #212121 50%, #000000 100%);
border-top: 4px solid #616161;
box-shadow: inset 0 4px 0 #757575;
padding: 40px 0 20px;
}
.footer-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
text-align: center;
}
.footer-text {
font-size: 8px;
color: #BDBDBD;
text-shadow: 1px 1px 0 #000000;
margin-bottom: 20px;
}
.footer-links {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
.footer-link {
color: #E0E0E0;
text-decoration: none;
font-size: 8px;
text-shadow: 1px 1px 0 #000000;
}
.footer-link:hover {
color: #FFFFFF;
}
@media (max-width: 768px) {
.hero-title {
font-size: 32px;
}
.nav-links {
display: none;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.features-grid,
.news-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<header class="header">
<nav class="nav">
<div class="logo">MINECRAFT</div>
<div class="nav-links">
<a href="#" class="nav-link">GAME</a>
<a href="#" class="nav-link">COMMUNITY</a>
<a href="#" class="nav-link">MERCHANDISE</a>
<a href="#" class="nav-link">SUPPORT</a>
</div>
</nav>
</header>
<main>
<section class="hero">
<h1 class="hero-title">BUILD YOUR WORLD</h1>
<p class="hero-subtitle">
Explore infinite worlds and build everything from the simplest<br>
of homes to the grandest of castles. Create, explore, and<br>
survive alone or with friends on mobile devices or PC.
</p>
<div class="cta-buttons">
<a href="#" class="btn btn-primary">PLAY NOW</a>
<a href="#" class="btn btn-secondary">LEARN MORE</a>
</div>
</section>
<section class="features">
<div class="features-container">
<h2 class="features-title">GAME FEATURES</h2>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon build"></div>
<h3 class="feature-title">BUILD & CREATE</h3>
<p class="feature-description">
Build from the simplest of homes to the grandest of castles.
Create and explore your very own world where the only limit is what you can imagine.
</p>
</div>
<div class="feature-card">
<div class="feature-icon survive"></div>
<h3 class="feature-title">SURVIVE & THRIVE</h3>
<p class="feature-description">
Survive in hostile environments by crafting tools, building shelter,
and gathering resources while fighting off dangerous creatures.
</p>
</div>
<div class="feature-card">
<div class="feature-icon explore"></div>
<h3 class="feature-title">EXPLORE TOGETHER</h3>
<p class="feature-description">
Team up with friends across different platforms and explore vast
worlds filled with mysteries, adventures, and endless possibilities.
</p>
</div>
</div>
</div>
</section>
<section class="news">
<div class="news-container">
<h2 class="news-title">LATEST NEWS</h2>
<div class="news-grid">
<div class="news-card">
<div class="news-date">DECEMBER 15, 2023</div>
<h3 class="news-headline">NEW UPDATE BRINGS EXCITING FEATURES</h3>
<p class="news-excerpt">
The latest update introduces new biomes, creatures, and building materials
that will enhance your crafting experience like never before.
</p>
</div>
<div class="news-card">
<div class="news-date">DECEMBER 10, 2023</div>
<h3 class="news-headline">COMMUNITY SPOTLIGHT: AMAZING BUILDS</h3>
<p class="news-excerpt">
Check out these incredible community creations that showcase the
limitless creativity possible in the world of Minecraft.
</p>
</div>
<div class="news-card">
<div class="news-date">DECEMBER 5, 2023</div>
<h3 class="news-headline">HOLIDAY EVENT NOW LIVE</h3>
<p class="news-excerpt">
Join the festive celebration with special holiday-themed content,
limited-time items, and seasonal decorations for your world.
</p>
</div>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="footer-container">
<p class="footer-text">© 2023 MOJANG STUDIOS. ALL RIGHTS RESERVED.</p>
<div class="footer-links">
<a href="#" class="footer-link">PRIVACY POLICY</a>
<a href="#" class="footer-link">TERMS OF SERVICE</a>
<a href="#" class="footer-link">CONTACT US</a>
<a href="#" class="footer-link">HELP CENTER</a>
</div>
</div>
</footer>
</body>
</html>
```Drag to resize