Skip to content

Commit 0f37039

Browse files
sarthak7838aayusharora
sarthak7838
authored and
aayusharora
committed
Sarthak Goel Responsive Design (#39)
1 parent 9ac6306 commit 0f37039

File tree

3 files changed

+229
-0
lines changed

3 files changed

+229
-0
lines changed

‎Sarthak Goel/patterns-columndrop.html

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

‎Sarthak Goel/patterns-layoutshifter.html

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>LayoutShifter</title>
6+
<style>
7+
.container{
8+
max-width:1000px;
9+
margin:0 auto;
10+
}
11+
12+
.box{
13+
background-color: yellow;
14+
width:100%;
15+
height:200px;
16+
}
17+
.box>.inner_box:nth-child(1){
18+
width:100%;
19+
height:200px;
20+
background-color: blue;
21+
}
22+
.box>.inner_box:nth-child(2){
23+
width:100%;
24+
height:200px;
25+
background-color: red;
26+
}
27+
28+
@media(min-width:600px) {
29+
.container{
30+
display:flex;
31+
flex-wrap:wrap;
32+
}
33+
.box:nth-child(1){
34+
width:20%;
35+
}
36+
37+
.box:nth-child(2)
38+
{
39+
width:80%;
40+
}
41+
.box>.inner_box:nth-child(1),.box>.inner_box:nth-child(2){
42+
height:100px;
43+
44+
}
45+
46+
47+
}
48+
49+
50+
</style>
51+
</head>
52+
<body>
53+
<div class="container">
54+
<div class="box">
55+
</div>
56+
<div class="box">
57+
<div class="inner_box"></div>
58+
<div class="inner_box"></div>
59+
</div>
60+
</div>
61+
</body>
62+
</html>

‎Sarthak Goel/patterns-mostlyfluid.html

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>MostlyFluid</title>
6+
<style>
7+
.container{
8+
max-width:1024px;
9+
margin: 0 auto;
10+
}
11+
.container>.box{
12+
width:100%;
13+
height:150px;
14+
}
15+
16+
.box:nth-child(1){
17+
background-color: blue;
18+
}
19+
20+
.box:nth-child(2){
21+
background-color: green;
22+
}
23+
24+
.box:nth-child(3){
25+
background-color: yellow;
26+
}
27+
28+
.box:nth-child(4){
29+
background-color: orange;
30+
}
31+
32+
.box:nth-child(5){
33+
background-color: red;
34+
}
35+
36+
@media(min-width:480px){
37+
.container{
38+
display:flex;
39+
flex-wrap:wrap;
40+
}
41+
.container>.box{
42+
width:50%;
43+
}
44+
.box:nth-child(1)
45+
{
46+
width:100%;
47+
}
48+
}
49+
@media(min-width:720px){
50+
.container{
51+
display:flex;
52+
flex-wrap:wrap;
53+
}
54+
.container>.box{
55+
width:33.33%;
56+
}
57+
.box:nth-child(1)
58+
{
59+
width:60%;
60+
}
61+
.box:nth-child(2){
62+
width:40%;
63+
}
64+
}
65+
66+
67+
</style>
68+
</head>
69+
<body>
70+
<div class="container">
71+
<div class="box"></div>
72+
<div class="box"></div>
73+
<div class="box"></div>
74+
<div class="box"></div>
75+
<div class="box"></div>
76+
77+
</div>
78+
</body>
79+
</html>

0 commit comments

Comments
 (0)