├── css
    └── style.css
└── index.html


/css/style.css:
--------------------------------------------------------------------------------
  1 | @media (min-width: 800px) {
  2 | 	.link{
  3 | 		font-style: bold;
  4 | 		font-family: sans-serif;
  5 | 		color: gray;
  6 | 		margin-top: 15%;
  7 | 		margin-left: 10%;
  8 | 		display: inline-block;
  9 | 	}
 10 | 	nav {
 11 | 		display: flex;
 12 | 		flex-direction: row;
 13 | 		border: 5px solid gray;
 14 | 		justify-content: space-evenly;
 15 | 	}
 16 | 
 17 | 	nav>div {
 18 | 		margin-top: 10px;
 19 | 		border: 5px solid gray;
 20 | 		margin-bottom: 10px;
 21 | 		height: 40vh;
 22 | 		width: 45vw;
 23 | 		padding: 1%;
 24 | 
 25 | 
 26 | 	}
 27 | 
 28 | 	.right {
 29 | 		height: 40vh;
 30 | 		width: 45vw;
 31 | 		/* display: flex; */
 32 | 		padding: 1%;
 33 | 	}
 34 | 
 35 | 	.navbar {
 36 | 		display: flex;
 37 | 		border: 1px solid gray;
 38 | 		flex-direction: row;
 39 | 		width: 96%;
 40 | 		padding: 2%;
 41 | 		height: 10vh;
 42 | 
 43 | 	}
 44 | 
 45 | 	.navbar>ul {
 46 | 		list-style: none;
 47 | 		border: 1px solid gray;
 48 | 		width: 60%;
 49 | 		height: 9.5vh;
 50 | 		margin: 0;
 51 | 
 52 | 	}
 53 | 	.navbar>ul>li {
 54 | 		width: 60%;
 55 | 		height: 40%;
 56 | 		font-style: bold;
 57 | 		font-family: sans-serif;
 58 | 		font-size: 40px;
 59 | 		margin-top: 5%;
 60 | 		color: gray;
 61 | 
 62 | 	}
 63 | 
 64 | 	.navbar>.btns {
 65 | 		width: 25%;
 66 | 		margin-left: 8%;
 67 | 		display: flex;
 68 | 		border: 1px solid gray;
 69 | 	}
 70 | 
 71 | 	.navbar>.btns>.btn {
 72 | 		border-radius: 50%;
 73 | 		margin: 7% 3%;
 74 | 		width: 85%;
 75 | 		height: 70%;
 76 | 		border: 1px solid gray;
 77 | 	}
 78 | 	.h3box{
 79 | 		border: 1px solid gray;
 80 | 		width: 100%;
 81 | 		height: 24vh;
 82 | 		margin-top: 2.5%;
 83 | 		font-style: bold;
 84 | 		font-family: sans-serif;
 85 | 		font-size: 40px;
 86 | 		margin-top: 5%;
 87 | 		display: flex;
 88 | 		justify-content: center;
 89 | 		align-items: center;
 90 | 		margin-bottom: 10%;
 91 | 		color: gray;
 92 | 	}
 93 | 	.bottom{
 94 | 		border: 1px solid gray;
 95 | 		height: 45vh;
 96 | 		margin-top: 3vh;
 97 | 		display: flex;
 98 | 		justify-content: space-evenly;
 99 | 	}
100 | 	.bottom>.para{
101 | 	border: 1px solid gray;
102 | 	height: 10vh;
103 | 		width: 47vw;
104 | 		margin-top: 33vh;
105 | 		display: flex;
106 | 		justify-content:flex-start;
107 | 
108 | 	}
109 | 	.bottom>div{
110 | 		border: 1px solid gray;
111 | 		height: 10vh;
112 | 		width: 47vw;
113 | 		margin-top: 33vh;
114 | 		display: flex;
115 | 		justify-content: center;
116 | 
117 | 	}
118 | 	.bottom>div>div{
119 | 		border: 4px solid gray;
120 | 		height: 6vh;
121 | 		width: 15vw;
122 | 		margin-top: 2vh;
123 | 		margin-left: 2%;
124 | 	}
125 | 	.bottom>div>span{
126 | 		font-style: bold;
127 | 		font-family: sans-serif;
128 | 		font-size: 40px;
129 | 		margin-top: 5%;
130 | 		color: gray;
131 | 		margin-left: 10%;
132 | 	}
133 | 	.btn3{
134 | 		display: none;
135 | 	}
136 | }
137 | @media (max-width: 800px) and (min-width:450px) {
138 | 	.link{
139 | 		font-style: bold;
140 | 		font-family: sans-serif;
141 | 		color: gray;
142 | 		margin-top: 15%;
143 | 		margin-left: 10%;
144 | 		display: inline-block;
145 | 	}
146 | 	nav {
147 | 		display: flex;
148 | 		flex-direction: row;
149 | 		border: 5px solid gray;
150 | 		justify-content: center;
151 | 	}
152 | 
153 | 	nav>div {
154 | 		margin-top: 10px;
155 | 		border: 5px solid gray;
156 | 		border-right:none ;
157 | 		margin-bottom: 10px;
158 | 		margin-right: 0%;
159 | 		height: 40vh;
160 | 		width: 43vw;
161 | 		padding: 1%;
162 | 		
163 | 		
164 | 	}
165 | 	
166 | 	.right {
167 | 		height: 40vh;
168 | 		margin-left: 0%;
169 | 		width: 43vw;
170 | 		border: 5px solid gray;
171 | 		border-left: none;
172 | 		/* display: flex; */
173 | 		padding: 1%;
174 | 	}
175 | 
176 | 	.navbar {
177 | 		display: flex;
178 | 		border: 1px solid gray;
179 | 		flex-direction: row;
180 | 		width: 96%;
181 | 		padding: 2%;
182 | 		height: 10vh;
183 | 		justify-content:flex-end ;
184 | 
185 | 	}
186 | 
187 | 	.navbar>ul {
188 | 		list-style: none;
189 | 		border: 1px solid gray;
190 | 		width: 60%;
191 | 		height: 9.5vh;
192 | 		margin: 0;
193 | 		display: none;
194 | 
195 | 	}
196 | 	.navbar>ul>li {
197 | 		width: 60%;
198 | 		height: 40%;
199 | 		font-style: bold;
200 | 		font-family: sans-serif;
201 | 		font-size: 40px;
202 | 		margin-top: 5%;
203 | 		color: gray;
204 | 
205 | 	}
206 | 
207 | 	.navbar>.btns {
208 | 		width: 40%;
209 | 		margin-left: 8%;
210 | 		display: flex;
211 | 		border: 1px solid gray;
212 | 	}
213 | 
214 | 	.navbar>.btns>.btn {
215 | 		border-radius: 50%;
216 | 		margin: 7% 3%;
217 | 		width: 100%;
218 | 		height: 70%;
219 | 		border: 1px solid gray;
220 | 	}
221 | 	.h3box{
222 | 		border: 1px solid gray;
223 | 		width: 200%;
224 | 		height: 26vh;
225 | 		font-style: bold;
226 | 		font-family: sans-serif;
227 | 		font-size: 40px;
228 | 		margin-top: 5%;
229 | 		display: flex;
230 | 		justify-content: center;
231 | 		align-items: center;
232 | 		margin-bottom: 10%;
233 | 		margin-left: -102%;
234 | 		color: gray;
235 | 	}
236 | 	.bottom{
237 | 		border: 1px solid gray;
238 | 		height: 45vh;
239 | 		margin-top: 3vh;
240 | 		display: flex;
241 | 		justify-content: space-evenly;
242 | 	}
243 | 	.bottom>.para{
244 | 	border: 1px solid gray;
245 | 	height: 10vh;
246 | 		width: 45vw;
247 | 		margin-top: 33vh;
248 | 		display: flex;
249 | 		justify-content:flex-start;
250 | 
251 | 	}
252 | 	.bottom>div{
253 | 		border: 1px solid gray;
254 | 		height: 10vh;
255 | 		width: 45vw;
256 | 		margin-top: 33vh;
257 | 		display: flex;
258 | 		justify-content: center;
259 | 
260 | 	}
261 | 	.bottom>div>div{
262 | 		border: 4px solid gray;
263 | 		height: 6vh;
264 | 		width: 15vw;
265 | 		margin-top: 2vh;
266 | 		margin-left: 2%;
267 | 	}
268 | 	.bottom>div>span{
269 | 		font-style: bold;
270 | 		font-family: sans-serif;
271 | 		font-size: 5vw;
272 | 		margin-top: 5%;
273 | 		color: gray;
274 | 		margin-left: 10%;
275 | 	}
276 | }
277 | @media (max-width: 450px) and (min-width:2px) {
278 | 	.link{
279 | 		font-style: bold;
280 | 		font-family: sans-serif;
281 | 		color: gray;
282 | 		margin-top: 15%;
283 | 		font-size: 80%;
284 | 		margin-left: 3%;
285 | 		display: inline-block;
286 | 	}
287 | 	nav {
288 | 		display: flex;
289 | 		flex-direction: row;
290 | 		border: 5px solid gray;
291 | 		justify-content: center;
292 | 		height: 30vh;
293 | 	}
294 | 
295 | 	nav>div {
296 | 		margin-top: 10px;
297 | 		border: 5px solid gray;
298 | 		border-right:none ;
299 | 		margin-bottom: 10px;
300 | 		margin-right: 0%;
301 | 		height: 25vh;
302 | 		width: 41vw;
303 | 		padding: 1%;
304 | 		
305 | 		
306 | 	}
307 | 	
308 | 	.right {
309 | 		height: 25vh;
310 | 		margin-left: 0%;
311 | 		width: 41vw;
312 | 		border: 5px solid gray;
313 | 		border-left: none;
314 | 		display: flex;
315 | 		flex-direction: column;
316 | 		align-items: flex-end;
317 | 		padding: 1%;
318 | 	}
319 | 
320 | 	.navbar {
321 | 		display: flex;
322 | 		border: 1px solid gray;
323 | 		flex-direction: row;
324 | 		width: 80%;
325 | 		padding: 2%;
326 | 		height: 7vh;
327 | 		justify-content:flex-end ;
328 | 
329 | 	}
330 | 
331 | 	.navbar>ul {
332 | 		list-style: none;
333 | 		border: 1px solid gray;
334 | 		width: 60%;
335 | 		height: 7vh;
336 | 		margin: 0;
337 | 		display: none;
338 | 
339 | 	}
340 | 	.navbar>ul>li {
341 | 		width: 60%;
342 | 		height: 40%;
343 | 		font-style: bold;
344 | 		font-family: sans-serif;
345 | 		font-size: 40px;
346 | 		margin-top: 5%;
347 | 		color: gray;
348 | 
349 | 	}
350 | 
351 | 	.navbar>.btns {
352 | 		width: 100%;
353 | 		margin-left: 8%;
354 | 		padding: 0% 2%;
355 | 		display: flex;
356 | 		border: 1px solid gray;
357 | 	}
358 | 
359 | 	.navbar>.btns>.btn {
360 | 		border-radius: 50%;
361 | 		margin: 7% 3%;
362 | 		width: 100%;
363 | 		height: 70%;
364 | 		border: 1px solid gray;
365 | 	}
366 | 	.h3box{
367 | 		border: 1px solid gray;
368 | 		width: 200%;
369 | 		height: 15vh;
370 | 		font-style: bold;
371 | 		font-family: sans-serif;
372 | 		font-size: 40px;
373 | 		margin-top: 5%;
374 | 		display: flex;
375 | 		justify-content: center;
376 | 		align-items: center;
377 | 		margin-bottom: 2%;
378 | 		margin-left: -102%;
379 | 		color: gray;
380 | 	}
381 | 	.bottom{
382 | 		border: 1px solid gray;
383 | 		height: 45vh;
384 | 		margin-top: 2vh;
385 | 		display: flex;
386 | 		flex-direction: column;
387 | 		justify-content: center;
388 | 		align-items:center;
389 | 	}
390 | 	.bottom>.para{
391 | 	border: 1px solid gray;
392 | 	height: 7vh;
393 | 		width: 90vw;
394 | 		margin-top: 27vh;
395 | 		display: flex;
396 | 		justify-content:center;
397 | 
398 | 	}
399 | 	.bottom>div{
400 | 		border: 1px solid gray;
401 | 		height: 7vh;
402 | 		width: 90vw;
403 | 		margin-top: 1vh;
404 | 		display: flex;
405 | 		justify-content: center;
406 | 
407 | 	}
408 | 	.bottom>div>div{
409 | 		border: 4px solid gray;
410 | 		height: 4vh;
411 | 		width: 30vw;
412 | 		margin-top: 2%;
413 | 		margin-left: 2%;
414 | 	}
415 | 	.bottom>div>span{
416 | 		font-style: bold;
417 | 		font-family: sans-serif;
418 | 		font-size: 5vw;
419 | 		margin-top: 5%;
420 | 		color: gray;
421 | 		margin-left: 10%;
422 | 	}
423 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 | 	<meta charset="UTF-8">
 6 | 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 | 	<link rel="stylesheet" href="css/style.css">
 9 | 	<title>Flexbox</title>
10 | </head>
11 | 
12 | <body>
13 | 
14 | 	<nav>
15 | 		<div><span class="link">htts://www.flyhyer.com/</span></div>
16 | 		<div class="right">
17 | 			<div class="navbar">
18 | 				<ul>
19 | 					<li>UL</li>
20 | 		<!-- <li></li>
21 | 		<li></li> -->
22 | 				</ul>
23 | 				<div class="btns">
24 | 					<div class="btn"></div>
25 | 					<div class="btn"></div>
26 | 					<div class="btn btn3"></div>
27 | 				</div>
28 | 			</div>
29 | 			<div class="h3box">
30 | H3 box
31 | 			</div>
32 | 		</div>
33 | 	</nav>
34 | 
35 | 
36 | 
37 | 
38 | <div class="bottom">
39 | 	<div class="para"><span>Paragraph elem</span></div>
40 | 	<div class="footlink">
41 | 		<div></div>
42 | 		<div></div>
43 | 	</div>
44 | </div>
45 | 
46 | </body>
47 | 
48 | </html>


--------------------------------------------------------------------------------