Skip to content

Commit d6e25c5

Browse files
KrishLalakiyaKrishLalakiya
committed
improved Mobile view by adding Hamburger menu and centered all images
1 parent bc0f7d4 commit d6e25c5

File tree

2 files changed

+130
-29
lines changed

2 files changed

+130
-29
lines changed

‎MineCraft-Builders/Html/index.html‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,16 @@
88
<link href="https://fonts.cdnfonts.com/css/minecraft-4" rel="stylesheet">
99
</head>
1010
<body>
11-
<!-- HEADER -->
1211
<header class="site-header">
1312
<div class="container">
1413
<h1 class="logo">Minecraft Builders Club</h1>
15-
<nav class="navbar">
14+
15+
<input type="checkbox" id="nav-toggle" class="nav-toggle" />
16+
<label for="nav-toggle" class="nav-toggle-label">
17+
<span></span>
18+
</label>
19+
20+
<nav class="navbar" aria-label="Main navigation">
1621
<ul>
1722
<li><a href="#home">Home</a></li>
1823
<li><a href="#about">About</a></li>
@@ -23,17 +28,15 @@ <h1 class="logo">Minecraft Builders Club</h1>
2328
</div>
2429
</header>
2530

26-
<!-- HERO -->
2731
<section id="home" class="hero">
2832
<div class="container">
2933
<h2>Build. Create. Survive.</h2>
3034
<p>Join the community of creative builders crafting worlds block by block!</p>
31-
<img src="../Img/hero.png" alt="Minecraft landscape" />
35+
<img src="../Img/hero.png" alt="A sprawling Minecraft landscape build" />
3236
<a href="#contact" class="btn">Join Now</a>
3337
</div>
3438
</section>
3539

36-
<!-- ABOUT -->
3740
<section id="about" class="about container">
3841
<h2>About Our Club</h2>
3942
<p>
@@ -48,31 +51,29 @@ <h2>About Our Club</h2>
4851
</ul>
4952
</section>
5053

51-
<!-- GALLERY -->
5254
<section id="gallery" class="gallery container">
5355
<h2>Block Gallery</h2>
5456
<div class="card-grid">
5557
<div class="card">
56-
<img src="../Img/castle.png" alt="Castle build" />
58+
<img src="../Img/castle.png" alt="Epic castle build in Minecraft" />
5759
<h3>Epic Castle</h3>
5860
<p>A medieval fortress built with stone and imagination.</p>
5961
</div>
6062

6163
<div class="card">
62-
<img src="../Img/house.png" alt="Modern house" />
64+
<img src="../Img/house.png" alt="Sleek modern house build in Minecraft" />
6365
<h3>Modern House</h3>
6466
<p>Clean lines, glass walls — luxury Minecraft living!</p>
6567
</div>
6668

6769
<div class="card">
68-
<img src="../Img/island.png" alt="Fantasy world" />
70+
<img src="../Img/island.png" alt="Floating fantasy islands in Minecraft" />
6971
<h3>Fantasy Realm</h3>
7072
<p>Floating islands, dragons, and magic everywhere.</p>
7173
</div>
7274
</div>
7375
</section>
7476

75-
<!-- CONTACT -->
7677
<section id="contact" class="contact container">
7778
<h2>Join Our World</h2>
7879
<form class="contact-form">
@@ -89,11 +90,10 @@ <h2>Join Our World</h2>
8990
</form>
9091
</section>
9192

92-
<!-- FOOTER -->
9393
<footer class="site-footer">
9494
<div class="container">
9595
<p>© 2025 Minecraft Builders Club — Crafted with ❤️ and blocks.</p>
9696
</div>
9797
</footer>
9898
</body>
99-
</html>
99+
</html>

‎MineCraft-Builders/css/style.css‎

Lines changed: 118 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
@import url('https://fonts.cdnfonts.com/css/minecraft-4');
22

3-
/* Basic Reset */
43
* {
54
box-sizing: border-box;
65
margin: 0;
@@ -9,29 +8,35 @@
98

109
body {
1110
font-family: 'Minecraft', sans-serif;
12-
background-color: #5c913b;
13-
color: #fff;
11+
background-color: #79c05a;
12+
color: #2a2a2a;
1413
line-height: 1.6;
1514
}
1615

17-
/* Reusable */
1816
.container {
19-
width: 90%;
2017
max-width: 1100px;
21-
margin: auto;
18+
margin: 0 auto;
19+
padding: 0 1.5rem;
2220
}
2321

2422
h2 {
2523
text-align: center;
2624
margin-bottom: 1rem;
27-
text-shadow: 2px 2px #2a2a2a;
25+
text-shadow: 2px 2px #555;
2826
}
2927

30-
/* HEADER */
3128
.site-header {
3229
background: url('../images/dirt-texture.png') repeat;
3330
padding: 1rem 0;
3431
border-bottom: 5px solid #3c2a0e;
32+
color: #fff;
33+
}
34+
35+
.site-header .container {
36+
display: flex;
37+
justify-content: space-between;
38+
align-items: center;
39+
position: relative;
3540
}
3641

3742
.logo {
@@ -42,7 +47,6 @@ h2 {
4247

4348
.navbar ul {
4449
display: flex;
45-
justify-content: flex-end;
4650
list-style: none;
4751
}
4852

@@ -57,13 +61,18 @@ h2 {
5761
background: #3c2a0e;
5862
border-radius: 4px;
5963
box-shadow: 2px 2px #222;
64+
transition: background-color 0.3s ease;
6065
}
6166

6267
.navbar a:hover {
6368
background: #745b32;
6469
}
6570

66-
/* HERO */
71+
.nav-toggle,
72+
.nav-toggle-label {
73+
display: none;
74+
}
75+
6776
.hero {
6877
text-align: center;
6978
padding: 2rem 0;
@@ -87,17 +96,18 @@ h2 {
8796
margin-top: 1rem;
8897
border: 3px solid #2a2a2a;
8998
box-shadow: 3px 3px #222;
99+
transition: background-color 0.3s ease;
90100
}
91101

92102
.btn:hover {
93103
background: #745b32;
94104
}
95105

96-
/* ABOUT */
97106
.about {
98107
background: #3c2a0e;
99108
padding: 2rem 0;
100109
text-align: center;
110+
color: #fff;
101111
}
102112

103113
.about ul {
@@ -107,9 +117,8 @@ h2 {
107117
margin-top: 1rem;
108118
}
109119

110-
/* GALLERY */
111120
.gallery {
112-
background: #79c05a;
121+
background: #5c913b;
113122
padding: 2rem 0;
114123
}
115124

@@ -122,23 +131,31 @@ h2 {
122131

123132
.card {
124133
background: #3c2a0e;
134+
color: #fff;
125135
padding: 1rem;
126136
max-width: 300px;
137+
width: 100%;
127138
text-align: center;
128139
border: 3px solid #2a2a2a;
129140
border-radius: 6px;
130141
box-shadow: 3px 3px #111;
142+
transition: transform 0.3s ease, box-shadow 0.3s ease;
143+
}
144+
145+
.card:hover {
146+
transform: scale(1.05);
147+
box-shadow: 6px 6px #111;
131148
}
132149

133150
.card img {
134151
width: 100%;
135152
border-radius: 4px;
136153
}
137154

138-
/* CONTACT */
139155
.contact {
140156
background: #3c2a0e;
141157
padding: 2rem 0;
158+
color: #fff;
142159
}
143160

144161
.contact-form {
@@ -154,23 +171,107 @@ textarea {
154171
border-radius: 4px;
155172
margin-bottom: 1rem;
156173
font-family: 'Minecraft', sans-serif;
174+
font-size: 1rem;
157175
}
158176

159-
/* FOOTER */
160177
.site-footer {
161178
text-align: center;
162179
padding: 1rem 0;
163180
background: #2a2a2a;
181+
color: #fff;
164182
border-top: 5px solid #3c2a0e;
165183
}
166184

167-
/* RESPONSIVE */
168185
@media (max-width: 768px) {
186+
.nav-toggle-label {
187+
display: block;
188+
cursor: pointer;
189+
width: 30px;
190+
height: 25px;
191+
position: relative;
192+
}
193+
194+
.nav-toggle-label span,
195+
.nav-toggle-label span::before,
196+
.nav-toggle-label span::after {
197+
display: block;
198+
background: #fff;
199+
height: 4px;
200+
width: 100%;
201+
border-radius: 2px;
202+
position: absolute;
203+
transition: all 0.3s ease;
204+
}
205+
206+
.nav-toggle-label span::before {
207+
content: '';
208+
top: -8px;
209+
}
210+
211+
.nav-toggle-label span::after {
212+
content: '';
213+
top: 8px;
214+
}
215+
216+
.navbar {
217+
position: absolute;
218+
top: 100%;
219+
left: 0;
220+
width: 100%;
221+
background: #3c2a0e;
222+
max-height: 0;
223+
overflow: hidden;
224+
transition: max-height 0.5s ease-in-out;
225+
}
226+
169227
.navbar ul {
170228
flex-direction: column;
171229
align-items: center;
230+
padding: 1rem 0;
231+
}
232+
233+
.navbar li {
234+
margin-left: 0;
235+
width: 100%;
236+
text-align: center;
237+
}
238+
239+
.navbar a {
240+
display: block;
241+
padding: 1rem;
242+
background: none;
243+
box-shadow: none;
244+
border-radius: 0;
245+
}
246+
247+
.navbar a:hover {
248+
background: #745b32;
172249
}
250+
251+
.nav-toggle {
252+
display: none;
253+
}
254+
255+
.nav-toggle:checked ~ .navbar {
256+
max-height: 500px;
257+
}
258+
259+
.nav-toggle:checked + .nav-toggle-label span {
260+
background: transparent;
261+
}
262+
263+
.nav-toggle:checked + .nav-toggle-label span::before {
264+
transform: rotate(45deg);
265+
top: 0;
266+
}
267+
268+
.nav-toggle:checked + .nav-toggle-label span::after {
269+
transform: rotate(-45deg);
270+
top: 0;
271+
}
272+
173273
.card-grid {
174274
flex-direction: column;
275+
align-items: center;
175276
}
176-
}
277+
}

0 commit comments

Comments
 (0)