Skip to content

Commit 7756b97

Browse files
arvindkalraarvindkalra
committed
Adding my work
1 parent 4dc2157 commit 7756b97

File tree

6 files changed

+233
-0
lines changed

6 files changed

+233
-0
lines changed

‎Arvind-Kalra/Column Drop/CDStyle.css

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
.parent{
2+
display: flex;
3+
flex-wrap: wrap;
4+
justify-content: flex-start;
5+
}
6+
.block1{
7+
height: 200px;
8+
background-color: #ff0e09;
9+
}
10+
.block2{
11+
height: 200px;
12+
background-color: #c62828;
13+
}
14+
.block3{
15+
height: 200px;
16+
background-color: #e53935;
17+
}
18+
@media screen and (max-width: 992px){
19+
.block1,.block2,.block3{
20+
width:100%;
21+
}
22+
}
23+
@media screen and (min-width: 992px) and (max-width: 1200px){
24+
.block1{
25+
order:2;
26+
width:75%;
27+
height: 400px;
28+
}
29+
.block2{
30+
order:1;
31+
width: 25%;
32+
height: 400px;
33+
}
34+
.block3{
35+
order:3;
36+
width:100%;
37+
}
38+
}
39+
@media screen and (min-width: 1200px){
40+
.block1{
41+
order:2;
42+
width:50%;
43+
height: 400px;
44+
}
45+
.block2{
46+
order:1;
47+
width: 25%;
48+
height: 400px;
49+
}
50+
.block3{
51+
order:3;
52+
width:25%;
53+
height: 400px;
54+
}
55+
}

‎Arvind-Kalra/Column Drop/index.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Column Drop</title>
6+
<link rel="stylesheet" href="CDStyle.css">
7+
</head>
8+
<body>
9+
<div class="parent">
10+
<div class="block1">
11+
12+
</div>
13+
<div class="block2">
14+
15+
</div>
16+
<div class="block3">
17+
18+
</div>
19+
</div>
20+
</body>
21+
</html>

‎Arvind-Kalra/Layout Shifter/index.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Layout Shifter</title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="stylesheet.css">
7+
</head>
8+
<body>
9+
<div class="container">
10+
<div class="box1"></div>
11+
<div class="box2">
12+
<div class="box3"></div>
13+
<div class="box4"></div>
14+
</div>
15+
</div>
16+
</body>
17+
</html>

‎Arvind-Kalra/Layout Shifter/stylesheet.css

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
.container{
2+
display: flex;
3+
flex-flow: wrap;
4+
flex-direction: row;
5+
}
6+
7+
.container div{
8+
min-height: 150px;
9+
min-width: 150px;
10+
}
11+
12+
.box1, .box2, .box3{
13+
width:100%;
14+
}
15+
16+
.box1 {
17+
background-color: rgb(100,0,140);
18+
}
19+
20+
.box2 {
21+
background-color: rgb(0,20,205);
22+
}
23+
24+
.box3 {
25+
background-color: rgb(20,120,240);
26+
}
27+
28+
@media screen and (min-width: 657px) {
29+
.box1{
30+
width: 25%
31+
}
32+
.box2{
33+
width: 75%;
34+
}
35+
}

‎Arvind-Kalra/MostlyFluid/index.html

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Mostly Fluid</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="stylesheet" href = "stylesheet.css">
8+
</head>
9+
<body>
10+
<div class="parent">
11+
<div class="box1">
12+
13+
</div>
14+
<div class="box2">
15+
16+
</div>
17+
<div class="box3">
18+
19+
</div>
20+
<div class="box4">
21+
22+
</div>
23+
<div class="box5">
24+
25+
</div>
26+
</div>
27+
</body>
28+
</html>

‎Arvind-Kalra/MostlyFluid/stylesheet.css

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
.parent{
2+
display: flex;
3+
flex-wrap: wrap;
4+
justify-content: flex-start;
5+
}
6+
div div{
7+
height: 200px;
8+
}
9+
.box1{
10+
background-color: aqua;
11+
}
12+
.box2{
13+
background-color: blue;
14+
}
15+
.box3{
16+
background-color: #dbff3c;
17+
}
18+
.box4{
19+
background-color: #ff1ec8;
20+
}
21+
.box5{
22+
background-color: #52ff0d;
23+
}
24+
.box6{
25+
background-color: #ff0e09;
26+
}
27+
@media screen and (max-width: 600px){
28+
.box1{
29+
width:100%;
30+
}
31+
.box2{
32+
width:100%;
33+
}
34+
.box3{
35+
width:100%;
36+
}
37+
.box4{
38+
width:100%;
39+
}
40+
.box5{
41+
width:100%;
42+
}
43+
}
44+
@media screen and (min-width: 600px) and (max-width: 992px){
45+
.box1{
46+
width:100%;
47+
}
48+
.box2{
49+
width:50%;
50+
}
51+
.box3{
52+
width:50%;
53+
}
54+
.box4{
55+
width:50%;
56+
}
57+
.box5{
58+
width:50%;
59+
}
60+
}
61+
@media screen and (min-width: 992px){
62+
.box1{
63+
width:60%;
64+
}
65+
.box2{
66+
width:40%;
67+
}
68+
.box3{
69+
width:33.33%;
70+
}
71+
.box4{
72+
width:33.33%;
73+
}
74+
.box5{
75+
width:33.33%;
76+
}
77+
}

0 commit comments

Comments
 (0)