Skip to content

Commit 1aea0db

Browse files
deepakhack1deepakhack1
committed
added respnside design
1 parent 17e28e4 commit 1aea0db

File tree

2 files changed

+156
-0
lines changed

2 files changed

+156
-0
lines changed

‎deepak/coloumn-drop.html

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>coloumn drop</title>
6+
<style>
7+
.container
8+
{ display: flex;
9+
flex-wrap: wrap;
10+
max-width:1000px;
11+
margin: 0 auto;
12+
}
13+
.box
14+
{
15+
width: 100%;
16+
height:200px;
17+
}
18+
.box1
19+
{
20+
background-color: aqua;
21+
}
22+
.box2
23+
{
24+
background-color: black;
25+
26+
}
27+
.box3
28+
{
29+
background-color:blue}
30+
.box4
31+
{
32+
background-color: teal;
33+
}
34+
.box5
35+
{
36+
background-color: blueviolet;
37+
}
38+
@media screen and (min-width: 600px){
39+
.box1
40+
{
41+
width: 60%;
42+
order: 2;
43+
}
44+
.box2
45+
{
46+
width:40%;
47+
order:1;
48+
}
49+
.box3
50+
{
51+
52+
order: 3;
53+
}
54+
.box4
55+
{
56+
57+
order: 4;
58+
} .box5
59+
{
60+
61+
order: 5;
62+
}
63+
@media screen and (min-width: 800px){
64+
.box1
65+
{
66+
width:60%;
67+
}
68+
.box2,.box3
69+
{
70+
width: 20%;
71+
}
72+
}
73+
74+
}
75+
</style>
76+
</head>
77+
<body>
78+
<div class="container">
79+
<div class="box box1"></div>
80+
<div class="box box2"></div>
81+
<div class="box box3"></div>
82+
<div class="box box4"></div>
83+
<div class="box box5"></div>
84+
</div>
85+
</html>

‎deepak/layout-shifter.html

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>layout shifter</title>
6+
<style>
7+
8+
.container
9+
{
10+
display: flex;
11+
flex-wrap: wrap;
12+
max-width:1000px;
13+
margin: 0 auto;
14+
}
15+
16+
.box
17+
{
18+
width: 100%;
19+
height:200px;
20+
}
21+
.box1
22+
{
23+
background-color: aqua;
24+
25+
}
26+
.box2
27+
{
28+
background-color: black;
29+
30+
}
31+
.box3
32+
{
33+
background-color:blue;
34+
}
35+
36+
@media screen and (min-width:600px ) {
37+
.box1
38+
{
39+
height: 100vh;
40+
width: 20%;
41+
}
42+
.box2
43+
{
44+
height: 50vh;
45+
}
46+
.box3
47+
{
48+
height: 50vh;
49+
}
50+
.container1 {
51+
width:80%;
52+
}
53+
}
54+
55+
</style>
56+
</head>
57+
<body>
58+
<div class="container">
59+
<div class="box box1"></div>
60+
<div class="container1">
61+
62+
63+
<div class="box box2"></div>
64+
<div class="box box3"></div>
65+
66+
</div>
67+
</div>
68+
69+
70+
</body>
71+
</html>

0 commit comments

Comments
 (0)