Skip to content

Commit 2ff0767

Browse files
aayush105aayush105
authored
Add a responsive Minecraft-themed landing page using HTML & CSS only (#800)
* Added MineCraft Theme Landing Page * Added ScreenShot for Reference
2 parents 4c8b8ed + 00c874b commit 2ff0767

7 files changed

Lines changed: 275 additions & 0 deletions

File tree

‎MineCraft-Builders/Demo.png‎

161 KB
Loading

‎MineCraft-Builders/Html/index.html‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Minecraft Builders Club</title>
7+
<link rel="stylesheet" href="../css/style.css" />
8+
<link href="https://fonts.cdnfonts.com/css/minecraft-4" rel="stylesheet">
9+
</head>
10+
<body>
11+
<!-- HEADER -->
12+
<header class="site-header">
13+
<div class="container">
14+
<h1 class="logo">Minecraft Builders Club</h1>
15+
<nav class="navbar">
16+
<ul>
17+
<li><a href="#home">Home</a></li>
18+
<li><a href="#about">About</a></li>
19+
<li><a href="#gallery">Gallery</a></li>
20+
<li><a href="#contact">Contact</a></li>
21+
</ul>
22+
</nav>
23+
</div>
24+
</header>
25+
26+
<!-- HERO -->
27+
<section id="home" class="hero">
28+
<div class="container">
29+
<h2>Build. Create. Survive.</h2>
30+
<p>Join the community of creative builders crafting worlds block by block!</p>
31+
<img src="../Img/hero.png" alt="Minecraft landscape" />
32+
<a href="#contact" class="btn">Join Now</a>
33+
</div>
34+
</section>
35+
36+
<!-- ABOUT -->
37+
<section id="about" class="about container">
38+
<h2>About Our Club</h2>
39+
<p>
40+
We are a global group of Minecraft enthusiasts who love to build, explore,
41+
and share amazing creations. Whether you're a redstone engineer or a cozy
42+
cottage designer — you belong here!
43+
</p>
44+
<ul>
45+
<li>Weekly build challenges</li>
46+
<li>Server collaborations</li>
47+
<li>Beginner tutorials</li>
48+
</ul>
49+
</section>
50+
51+
<!-- GALLERY -->
52+
<section id="gallery" class="gallery container">
53+
<h2>Block Gallery</h2>
54+
<div class="card-grid">
55+
<div class="card">
56+
<img src="../Img/castle.png" alt="Castle build" />
57+
<h3>Epic Castle</h3>
58+
<p>A medieval fortress built with stone and imagination.</p>
59+
</div>
60+
61+
<div class="card">
62+
<img src="../Img/house.png" alt="Modern house" />
63+
<h3>Modern House</h3>
64+
<p>Clean lines, glass walls — luxury Minecraft living!</p>
65+
</div>
66+
67+
<div class="card">
68+
<img src="../Img/island.png" alt="Fantasy world" />
69+
<h3>Fantasy Realm</h3>
70+
<p>Floating islands, dragons, and magic everywhere.</p>
71+
</div>
72+
</div>
73+
</section>
74+
75+
<!-- CONTACT -->
76+
<section id="contact" class="contact container">
77+
<h2>Join Our World</h2>
78+
<form class="contact-form">
79+
<label for="name">Your Name:</label>
80+
<input type="text" id="name" name="name" required />
81+
82+
<label for="email">Email:</label>
83+
<input type="email" id="email" name="email" required />
84+
85+
<label for="message">Why do you love Minecraft?</label>
86+
<textarea id="message" name="message" rows="4" required></textarea>
87+
88+
<button type="submit" class="btn">Submit</button>
89+
</form>
90+
</section>
91+
92+
<!-- FOOTER -->
93+
<footer class="site-footer">
94+
<div class="container">
95+
<p>© 2025 Minecraft Builders Club — Crafted with ❤️ and blocks.</p>
96+
</div>
97+
</footer>
98+
</body>
99+
</html>

‎MineCraft-Builders/Img/castle.png‎

294 KB
Loading

‎MineCraft-Builders/Img/hero.png‎

10.4 MB
Loading

‎MineCraft-Builders/Img/house.png‎

937 KB
Loading

‎MineCraft-Builders/Img/island.png‎

284 KB
Loading

‎MineCraft-Builders/css/style.css‎

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
@import url('https://fonts.cdnfonts.com/css/minecraft-4');
2+
3+
/* Basic Reset */
4+
* {
5+
box-sizing: border-box;
6+
margin: 0;
7+
padding: 0;
8+
}
9+
10+
body {
11+
font-family: 'Minecraft', sans-serif;
12+
background-color: #5c913b;
13+
color: #fff;
14+
line-height: 1.6;
15+
}
16+
17+
/* Reusable */
18+
.container {
19+
width: 90%;
20+
max-width: 1100px;
21+
margin: auto;
22+
}
23+
24+
h2 {
25+
text-align: center;
26+
margin-bottom: 1rem;
27+
text-shadow: 2px 2px #2a2a2a;
28+
}
29+
30+
/* HEADER */
31+
.site-header {
32+
background: url('../images/dirt-texture.png') repeat;
33+
padding: 1rem 0;
34+
border-bottom: 5px solid #3c2a0e;
35+
}
36+
37+
.logo {
38+
font-size: 1.8rem;
39+
color: #fff;
40+
text-shadow: 2px 2px #000;
41+
}
42+
43+
.navbar ul {
44+
display: flex;
45+
justify-content: flex-end;
46+
list-style: none;
47+
}
48+
49+
.navbar li {
50+
margin-left: 20px;
51+
}
52+
53+
.navbar a {
54+
color: #fff;
55+
text-decoration: none;
56+
padding: 8px 12px;
57+
background: #3c2a0e;
58+
border-radius: 4px;
59+
box-shadow: 2px 2px #222;
60+
}
61+
62+
.navbar a:hover {
63+
background: #745b32;
64+
}
65+
66+
/* HERO */
67+
.hero {
68+
text-align: center;
69+
padding: 2rem 0;
70+
background: #79c05a;
71+
}
72+
73+
.hero img {
74+
width: 100%;
75+
max-width: 600px;
76+
border: 5px solid #3c2a0e;
77+
border-radius: 4px;
78+
margin-top: 1rem;
79+
}
80+
81+
.btn {
82+
display: inline-block;
83+
background: #3c2a0e;
84+
color: #fff;
85+
padding: 10px 20px;
86+
text-decoration: none;
87+
margin-top: 1rem;
88+
border: 3px solid #2a2a2a;
89+
box-shadow: 3px 3px #222;
90+
}
91+
92+
.btn:hover {
93+
background: #745b32;
94+
}
95+
96+
/* ABOUT */
97+
.about {
98+
background: #3c2a0e;
99+
padding: 2rem 0;
100+
text-align: center;
101+
}
102+
103+
.about ul {
104+
list-style-type: square;
105+
display: inline-block;
106+
text-align: left;
107+
margin-top: 1rem;
108+
}
109+
110+
/* GALLERY */
111+
.gallery {
112+
background: #79c05a;
113+
padding: 2rem 0;
114+
}
115+
116+
.card-grid {
117+
display: flex;
118+
flex-wrap: wrap;
119+
gap: 20px;
120+
justify-content: center;
121+
}
122+
123+
.card {
124+
background: #3c2a0e;
125+
padding: 1rem;
126+
max-width: 300px;
127+
text-align: center;
128+
border: 3px solid #2a2a2a;
129+
border-radius: 6px;
130+
box-shadow: 3px 3px #111;
131+
}
132+
133+
.card img {
134+
width: 100%;
135+
border-radius: 4px;
136+
}
137+
138+
/* CONTACT */
139+
.contact {
140+
background: #3c2a0e;
141+
padding: 2rem 0;
142+
}
143+
144+
.contact-form {
145+
max-width: 500px;
146+
margin: auto;
147+
}
148+
149+
input,
150+
textarea {
151+
width: 100%;
152+
padding: 10px;
153+
border: 3px solid #2a2a2a;
154+
border-radius: 4px;
155+
margin-bottom: 1rem;
156+
font-family: 'Minecraft', sans-serif;
157+
}
158+
159+
/* FOOTER */
160+
.site-footer {
161+
text-align: center;
162+
padding: 1rem 0;
163+
background: #2a2a2a;
164+
border-top: 5px solid #3c2a0e;
165+
}
166+
167+
/* RESPONSIVE */
168+
@media (max-width: 768px) {
169+
.navbar ul {
170+
flex-direction: column;
171+
align-items: center;
172+
}
173+
.card-grid {
174+
flex-direction: column;
175+
}
176+
}

0 commit comments

Comments
 (0)