Skip to content
This repository was archived by the owner on Aug 18, 2020. It is now read-only.

Commit 1634a07

Browse files
author
TheSparkPlays
committed
Responsive Design
1 parent 40af1f6 commit 1634a07

5 files changed

+129
-70
lines changed

‎37b1ab24-f698-4b37-8fd7-9244638e06a3.jpg

-1.28 MB
Binary file not shown.

‎css/main.css

+86-39
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ html,body {
1717
}
1818

1919
hr {
20-
width: 420px;
20+
max-width: 420px;
2121
color: #718093;
2222
}
2323

@@ -55,70 +55,85 @@ a:hover {
5555

5656
/* Navbar */
5757

58-
#navbar {
59-
position: sticky;
60-
top: 0;
61-
z-index:1;
62-
}
63-
64-
ul {
65-
list-style-type: none;
66-
margin: 0;
67-
padding: 0;
58+
.topnav {
59+
list-style-type: none;
6860
overflow: hidden;
6961
background-color: white;
62+
box-shadow: 0px 6px 13px -7px rgba(0,0,0,0.20);
63+
transition: all .2s ease-in;
7064
font-weight: 700;
7165
text-transform: uppercase;
72-
transition: all .2s ease-in;
73-
box-shadow: 0px 6px 13px -7px rgba(0,0,0,0.10);
74-
}
75-
76-
ul .max-width {
77-
max-width: 1280px;
78-
margin: 0 auto;
79-
box-shadow: none;
66+
position: sticky;
67+
top: 0;
68+
z-index: 1;
8069
}
8170

82-
li {
71+
.topnav a {
8372
float: left;
84-
}
85-
86-
li a {
8773
display: block;
88-
color: #34495e;
74+
color: black;
8975
text-align: center;
9076
padding: 24px 26px;
91-
font-size: 17px;
9277
text-decoration: none;
78+
font-size: 17px;
9379
}
9480

95-
li a:hover {
81+
.topnav a:hover {
9682
color: #3498db;
97-
transition: all .2s ease-in;
9883
}
9984

100-
.active {
101-
color: #3498db;
85+
.topnav .icon {
86+
display: none;
87+
}
88+
89+
@media screen and (max-width: 800px) {
90+
.topnav a:not(:first-child) {display: none;}
91+
.topnav a.icon {
92+
float: right;
93+
display: block;
94+
}
95+
}
96+
97+
@media screen and (max-width: 800px) {
98+
.topnav.responsive {position: relative;}
99+
.topnav.responsive .icon {
100+
position: absolute;
101+
right: 0;
102+
top: 0;
103+
}
104+
.topnav.responsive a {
105+
float: none;
106+
display: block;
107+
text-align: left;
108+
}
109+
}
110+
111+
@media screen and (min-width: 800px) {
112+
div .max-width {
113+
max-width: 60%;
114+
margin: 0 auto;
115+
box-shadow: none;
116+
}
102117
}
103118

104119
/* End Navbar */
105120

106121
#head {
107122
background-image: url("https://i.imgur.com/9GkIEjN.png");
108123
margin: 0;
109-
padding: 200px;
124+
padding: 222px 0px 222px 0px;
110125
text-align: center;
111126
color: white;
112127
}
113128

114129
#head h1 {
115-
font-size: 50px;
130+
font-size: 55px;
116131
font-weight: 700;
117132
text-transform: uppercase;
118133
}
119134

120135
#head h3 {
121-
font-size: 20px;
136+
font-size: 22px;
122137
text-transform: uppercase;
123138
}
124139

@@ -160,19 +175,19 @@ li a:hover {
160175

161176
#banner {
162177
background-image: url("https://i.imgur.com/XL2PAd3.png");
163-
padding: 75px;
178+
padding: 75px 0px 75px 0px;
164179
text-align: center;
165180
}
166181

167182
#banner2 {
168183
background-image: url("https://i.imgur.com/8P27W9N.png");
169-
padding: 75px;
184+
padding: 75px 0px 75px 0px;
170185
text-align: center;
171186
}
172187

173188
#banner3 {
174189
background-image: url("https://i.imgur.com/MljFIMA.png");
175-
padding: 75px;
190+
padding: 75px 0px 75px 0px;
176191
text-align: center;
177192
}
178193

@@ -248,6 +263,7 @@ li a:hover {
248263
#staff .staffblock {
249264
transform: none;
250265
transition: all .2s ease-in;
266+
margin-bottom: 5px;
251267
}
252268

253269
#staff .staffblock:hover {
@@ -295,13 +311,22 @@ li a:hover {
295311
#gamemodes .mode-inv {
296312
margin: 15px;
297313
text-align: right;
314+
padding: 50px;
298315
max-width: 1280px
299316
}
300317

301-
#gamemodes .img {
302-
margin: 15px;
303-
padding: 50px;
304-
max-width: 1280px
318+
@media screen and (min-width: 800px) {
319+
#gamemodes .img {
320+
margin: 15px;
321+
padding: 50px;
322+
max-width: 1280px
323+
}
324+
}
325+
326+
@media screen and (max-width: 799px) {
327+
#gamemodes .img {
328+
padding: 50px 0px 50px 0px;
329+
}
305330
}
306331

307332
#gamemodes .fixed-width {
@@ -380,4 +405,26 @@ footer {
380405
padding: 0;
381406
text-align: center;
382407
transition: all .2s ease-in;
408+
}
409+
410+
@media screen and (min-width: 800px) {
411+
.res-img {
412+
width: 480px;
413+
}
414+
}
415+
416+
@media screen and (max-width: 799px) {
417+
.res-img {
418+
width: 100%; }
419+
}
420+
421+
@media screen and (min-width: 800px) {
422+
.res-img-sm {
423+
height: 110px;
424+
}
425+
}
426+
427+
@media screen and (max-width: 799px) {
428+
.res-img-sm {
429+
width: 100%; }
383430
}

‎index.html

+43-31
Original file line numberDiff line numberDiff line change
@@ -44,15 +44,16 @@
4444
<body>
4545

4646
<!-- Navbar -->
47-
<ul class="nav" id="navbar">
48-
<ul class="max-width">
49-
<li><a href="#head">Home</a></li>
50-
<li><a href="#about">About</a></li>
51-
<li><a href="#gamemodes">Gamemodes</a></li>
52-
<li><a href="#vote">Vote</a></li>
53-
<li><a href="#staff">Staff</a></li>
54-
</ul>
55-
</ul>
47+
<div class="topnav" id="myTopnav">
48+
<div class="max-width">
49+
<a href="#head">Home</a>
50+
<a href="#about">About</a>
51+
<a href="#gamemodes">Gamemodes</a>
52+
<a href="#vote">Vote</a>
53+
<a href="#staff">Staff</a>
54+
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
55+
</div>
56+
</div>
5657
<!-- End Navbar -->
5758

5859
<!-- Header (Banner) -->
@@ -125,13 +126,13 @@ <h1>GAMEMODES</h1>
125126
<hr>
126127
<!-- First Gamemode -->
127128
<div class="row fixed-width">
128-
<div class="col mode">
129+
<div class="col-md mode">
129130
<h2>SURVIVAL</h2>
130131
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu elementum justo. Morbi in venenatis dui. Mauris quis efficitur orci, ut venenatis massa. Pellentesque gravida ante sit amet condimentum tristique. Suspendisse at gravida nunc, mattis sagittis velit. Pellentesque molestie mauris risus, et elementum metus mattis sit amet. Aliquam id ex ac augue tempor convallis. Nunc id consequat nibh. Suspendisse rhoncus nulla at nisl egestas vulputate vel vitae ex. In est nibh, tempus vitae ipsum vel, eleifend dictum diam. Ut dapibus massa sed turpis dictum pretium. Mauris tempus sapien sit amet turpis sodales, sit amet sollicitudin augue tincidunt. Donec ullamcorper suscipit laoreet.</p>
131132
</div>
132133
<!-- Gamemode Image -->
133-
<div class="col img">
134-
<img width="480" src="https://via.placeholder.com/1920x1080">
134+
<div class="col-md img">
135+
<img class="res-img" src="https://via.placeholder.com/1920x1080">
135136
</div>
136137
<!-- End Gamemode Image -->
137138
</div>
@@ -140,11 +141,11 @@ <h2>SURVIVAL</h2>
140141
<!-- Second Gamemode -->
141142
<div class="row fixed-width">
142143
<!-- Image Second Gamemode -->
143-
<div class="col img">
144-
<img width="480" src="https://via.placeholder.com/1920x1080">
145-
</div>
144+
<div class="col-md img">
145+
<img class="res-img" src="https://via.placeholder.com/1920x1080">
146+
</div>
146147
<!-- End Image Second Gamemode -->
147-
<div class="col mode">
148+
<div class="col-md mode">
148149
<h2>FACTIONS</h2>
149150
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu elementum justo. Morbi in venenatis dui. Mauris quis efficitur orci, ut venenatis massa. Pellentesque gravida ante sit amet condimentum tristique. Suspendisse at gravida nunc, mattis sagittis velit. Pellentesque molestie mauris risus, et elementum metus mattis sit amet. Aliquam id ex ac augue tempor convallis. Nunc id consequat nibh. Suspendisse rhoncus nulla at nisl egestas vulputate vel vitae ex. In est nibh, tempus vitae ipsum vel, eleifend dictum diam. Ut dapibus massa sed turpis dictum pretium. Mauris tempus sapien sit amet turpis sodales, sit amet sollicitudin augue tincidunt. Donec ullamcorper suscipit laoreet.</p>
150151
</div>
@@ -153,13 +154,13 @@ <h2>FACTIONS</h2>
153154
</section>
154155
<!-- Start Third Gamemode -->
155156
<div class="row fixed-width">
156-
<div class="col mode">
157+
<div class="col-md mode">
157158
<h2>CREATIVE</h2>
158159
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu elementum justo. Morbi in venenatis dui. Mauris quis efficitur orci, ut venenatis massa. Pellentesque gravida ante sit amet condimentum tristique. Suspendisse at gravida nunc, mattis sagittis velit. Pellentesque molestie mauris risus, et elementum metus mattis sit amet. Aliquam id ex ac augue tempor convallis. Nunc id consequat nibh. Suspendisse rhoncus nulla at nisl egestas vulputate vel vitae ex. In est nibh, tempus vitae ipsum vel, eleifend dictum diam. Ut dapibus massa sed turpis dictum pretium. Mauris tempus sapien sit amet turpis sodales, sit amet sollicitudin augue tincidunt. Donec ullamcorper suscipit laoreet.</p>
159160
</div>
160161
<!-- Image Third Gamemode -->
161-
<div class="col img">
162-
<img width="480" src="https://via.placeholder.com/1920x1080">
162+
<div class="col-md img">
163+
<img class="res-img" src="https://via.placeholder.com/1920x1080">
163164
</div>
164165
<!-- End Image Third Gamemode -->
165166
</div>
@@ -181,24 +182,24 @@ <h1>VOTE FOR OUR SERVER</h1>
181182
<hr>
182183
<div class="row votelist">
183184
<!-- First Vote Link -->
184-
<div class="col voteblock">
185-
<img height="110px;" src="https://www.planetminecraft.com/images/layout/planetminecraft_logo.png">
185+
<div class="col-md voteblock">
186+
<img class="res-img-sm" src="https://www.planetminecraft.com/images/layout/planetminecraft_logo.png">
186187
<h2>PlanetMinecraft</h2>
187188
<a href="#">Vote now</a>
188189
</div>
189190
<!-- End First Vote Link -->
190191

191192
<!-- Second Vote Link -->
192-
<div class="col voteblock">
193-
<img height="110px;" src="https://yt3.ggpht.com/-St0amFDpbC0/AAAAAAAAAAI/AAAAAAAAAAA/eZlt0WfF-F8/s288-mo-c-c0xffffffff-rj-k-no/photo.jpg">
193+
<div class="col-md voteblock">
194+
<img class="res-img-sm" src="https://yt3.ggpht.com/-St0amFDpbC0/AAAAAAAAAAI/AAAAAAAAAAA/eZlt0WfF-F8/s288-mo-c-c0xffffffff-rj-k-no/photo.jpg">
194195
<h2>ServerPact</h2>
195196
<a href="#">Vote now</a>
196197
</div>
197198
<!-- End Second Vote Link -->
198199

199200
<!-- Third Vote Link -->
200-
<div class="col voteblock">
201-
<img height="110px;" src="https://minecraft-server-list.com/minelog/wp-content/uploads/High-Res-App-Icon.jpg">
201+
<div class="col-md voteblock">
202+
<img class="res-img-sm" src="https://minecraft-server-list.com/minelog/wp-content/uploads/High-Res-App-Icon.jpg">
202203
<h2>MinecraftMP</h2>
203204
<a href="#">Vote now</a>
204205
</div>
@@ -225,23 +226,23 @@ <h1>OUR STAFF</h1>
225226
<!-- First Row Staff -->
226227
<div class="row stafflist">
227228
<!-- First Staff Member -->
228-
<div class="col staffblock">
229+
<div class="col-md staffblock">
229230
<img width="100px;" src="https://mamaneedsahobby.files.wordpress.com/2013/09/steve-face.jpg?w=1000&h=">
230231
<h2>Some dude</h2>
231232
<p>Owner</p>
232233
</div>
233234
<!-- End First Staff Member -->
234235

235236
<!-- Second Staff Member -->
236-
<div class="col staffblock">
237+
<div class="col-md staffblock">
237238
<img width="100px;" src="https://mamaneedsahobby.files.wordpress.com/2013/09/steve-face.jpg?w=1000&h=">
238239
<h2>Some dude</h2>
239240
<p>Co-Owner</p>
240241
</div>
241242
<!-- End Second Staf Member -->
242243

243244
<!-- Third Staff Member -->
244-
<div class="col staffblock">
245+
<div class="col-md staffblock">
245246
<img width="100px;" src="https://mamaneedsahobby.files.wordpress.com/2013/09/steve-face.jpg?w=1000&h=">
246247
<h2>Some dude</h2>
247248
<p>Admin</p>
@@ -253,23 +254,23 @@ <h2>Some dude</h2>
253254
<!-- Second Row Staff Member -->
254255
<div class="row stafflist">
255256
<!-- Fourth Staff Member -->
256-
<div class="col staffblock">
257+
<div class="col-md staffblock">
257258
<img width="100px;" src="https://mamaneedsahobby.files.wordpress.com/2013/09/steve-face.jpg?w=1000&h=">
258259
<h2>Some dude</h2>
259260
<p>Admin</p>
260261
</div>
261262
<!-- End Fourth Staff Member -->
262263

263264
<!-- Fifth Staff Member -->
264-
<div class="col staffblock">
265+
<div class="col-md staffblock">
265266
<img width="100px;" src="https://mamaneedsahobby.files.wordpress.com/2013/09/steve-face.jpg?w=1000&h=">
266267
<h2>Some dude</h2>
267268
<p>Moderator</p>
268269
</div>
269270
<!-- End Fifth Staff Member -->
270271

271272
<!-- Sixth Staff Member -->
272-
<div class="col staffblock">
273+
<div class="col-md staffblock">
273274
<img width="100px;" src="https://mamaneedsahobby.files.wordpress.com/2013/09/steve-face.jpg?w=1000&h=">
274275
<h2>Some dude</h2>
275276
<p>Moderator</p>
@@ -314,5 +315,16 @@ <h2>Some dude</h2>
314315
</script>
315316
<!-- End Smooth Scrolling Script -->
316317

318+
<script>
319+
function myFunction() {
320+
var x = document.getElementById("myTopnav");
321+
if (x.className === "topnav") {
322+
x.className += " responsive";
323+
} else {
324+
x.className = "topnav";
325+
}
326+
}
327+
</script>
328+
317329
</body>
318330
</html>

‎onepage-minecraft-server-website-v1.1.zip

-62.2 KB
Binary file not shown.

‎onepage-minecraft-website-v1.0.0.zip

-1.15 MB
Binary file not shown.

0 commit comments

Comments
 (0)