Skip to content

Commit 0b361bd

Browse files
iamwithabhiiamwithabhi
committed
asd
1 parent 150ed43 commit 0b361bd

File tree

1 file changed

+79
-0
lines changed

1 file changed

+79
-0
lines changed

‎Kanishk/layoutshifter.html

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=10">
6+
<title>
7+
Layout Shifter
8+
</title>
9+
<style>
10+
.box1, .box2,.box3{
11+
width: 100%;
12+
height: 200px;
13+
}
14+
.box1{
15+
background-color: pink;
16+
}
17+
.box2{
18+
background-color: aqua;
19+
}
20+
.box3{
21+
background-color: red;
22+
}
23+
.container{
24+
display: flex;
25+
flex-wrap: wrap;
26+
/*flex-direction: row;*/
27+
/*justify-content: space-around;*/
28+
width: 1100px;
29+
height: 600px;
30+
margin: 0 auto;
31+
32+
}
33+
34+
@media only screen and (max-width:720px){
35+
.container{
36+
margin: 0px ;
37+
}
38+
.box1,.container2{
39+
width: 100%;
40+
}
41+
.box2{
42+
order:2;
43+
}
44+
.box3{
45+
order:3;
46+
}
47+
48+
}
49+
50+
@media only screen and (min-width: 720px){
51+
.box1{
52+
height: 400px;
53+
width:20%;
54+
}
55+
.container2{
56+
width:80%;
57+
}
58+
}
59+
60+
</style>
61+
</head>
62+
63+
<body>
64+
<div class="container">
65+
<div class="box1">
66+
67+
</div>
68+
<div class="container2">
69+
<div class="box2">
70+
71+
</div>
72+
<div class="box3">
73+
74+
</div>
75+
</div>
76+
77+
</div>
78+
</body>
79+
</html>

0 commit comments

Comments
 (0)