Skip to content

Commit 2a9349e

Browse files
UniteOrFallUniteOrFall
committed
PrashantVashisht
1 parent 150ed43 commit 2a9349e

6 files changed

+207
-0
lines changed

‎PrashantVashisht/ColumnDrop.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>ColumnDrop</title>
6+
<link rel="stylesheet" href="columndrop.css">
7+
<meta name="viewport" content="width-device-width,initial-scale=1">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="box one"></div>
12+
<div class="box two"></div>
13+
<div class="box three"></div>
14+
<div class="box four"></div>
15+
<div class="box five"></div>
16+
</div>
17+
</body>
18+
</html>

‎PrashantVashisht/Fluid.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Fluid</title>
6+
<link rel="stylesheet" href="mostlyfluid.css">
7+
<meta name="viewport" content="width-device-width,initial-scale=1">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="box one"></div>
12+
<div class="box two"></div>
13+
<div class="box three"></div>
14+
<div class="box four"></div>
15+
<div class="box five"></div>
16+
</div>
17+
</body>
18+
</html>

‎PrashantVashisht/LayoutShifter.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>LayoutShifter</title>
6+
<link rel="stylesheet" href="layoutshifter.css">
7+
<meta name="viewport" content="width-device-width,initial-scale=1">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="box one"></div>
12+
<div class="box main">
13+
<div class="box two"></div>
14+
<div class="box three"></div>
15+
</div>
16+
</div>
17+
</body>
18+
</html>

‎PrashantVashisht/columndrop.css

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
.box{
2+
width:100%;
3+
height:50px;
4+
5+
}
6+
.container{
7+
width:400px;
8+
display:flex;
9+
flex-wrap: wrap;
10+
}
11+
.one{
12+
background-color: orangered;
13+
}
14+
.two{
15+
background-color: red;
16+
}
17+
.three{
18+
background-color: lightgreen;
19+
}
20+
.four{
21+
background-color: blanchedalmond;
22+
}
23+
.five{
24+
background-color: royalblue;
25+
}
26+
@media screen and (min-width: 600px){
27+
.one{
28+
width: 80%;
29+
order:2;
30+
}
31+
.two{
32+
width:20%;
33+
order:1;
34+
}
35+
.three,.four,.five{
36+
width:100%;
37+
}
38+
.three{
39+
order:3
40+
}
41+
.four{
42+
order:4;
43+
}
44+
.five{
45+
order:5;
46+
}
47+
}

‎PrashantVashisht/layoutshifter.css

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
.box{
2+
width:100%;
3+
height:400px;
4+
5+
}
6+
.box.main{
7+
height:400px;
8+
}
9+
.container{
10+
width:400px;
11+
display:flex;
12+
flex-flow: wrap;
13+
}
14+
.one{
15+
background-color: orangered;
16+
}
17+
.two{
18+
background-color: red;
19+
}
20+
.three{
21+
background-color: lightgreen;
22+
}
23+
@media screen and (min-width: 600px){
24+
.one{
25+
width:10%;
26+
height:400px;
27+
}
28+
.main{
29+
width:90%;
30+
}
31+
.two,.three{
32+
width:100%;
33+
height:50%;
34+
}
35+
}
36+
@media screen and (min-width: 720px){
37+
.container{
38+
margin:120px auto;
39+
}
40+
}

‎PrashantVashisht/mostlyfluid.css

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
.container{
2+
display:flex;
3+
flex-wrap: wrap;
4+
}
5+
.box{
6+
width:100%;
7+
height:50px;
8+
9+
}
10+
.container{
11+
width:400px;
12+
display:flex;
13+
flex-wrap: wrap;
14+
}
15+
.one{
16+
background-color: orangered;
17+
}
18+
.two{
19+
background-color: red;
20+
}
21+
.three{
22+
background-color: lightgreen;
23+
}
24+
.four{
25+
background-color: blanchedalmond;
26+
}
27+
.five{
28+
background-color: royalblue;
29+
}
30+
31+
@media screen and (min-width: 320px) {
32+
.box{
33+
width:50%;
34+
height:60px;
35+
}
36+
.box.one{
37+
width:100%;
38+
height:100px;
39+
}
40+
.box.four{
41+
height:30px;
42+
}
43+
.box.five{
44+
height:30px;
45+
}
46+
47+
}
48+
@media screen and (min-width: 420px) {
49+
.box{
50+
width:33%;
51+
height:50%;
52+
}
53+
.box.one{
54+
width:60%;
55+
}
56+
.box.two{
57+
width:40%;
58+
}
59+
60+
}
61+
@media screen and (min-width: 720px) {
62+
.container{
63+
margin:0 auto;
64+
}
65+
66+
}

0 commit comments

Comments
 (0)