Skip to content

Commit 46caa18

Browse files
aishanya11aishanya11
committed
aishanya
1 parent 917928a commit 46caa18

28 files changed

+434
-629
lines changed

‎Avani/Column Drop/index.html

+21-21
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
1-
<!DOCTYPE html>
2-
<html>
3-
<head>
4-
<meta charset="utf-8">
5-
<title></title>
6-
<meta name="viewport" content="width=device-width , intial-scale=1;">
7-
<link rel="stylesheet" type="text/css" href="style.css">
8-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
9-
</head>
10-
11-
12-
<body>
13-
<div class="par">
14-
<div class="box1"></div>
15-
<div class="box2"></div>
16-
<div class="box3"></div>
17-
</div>
18-
19-
20-
</body>
21-
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title></title>
6+
<meta name="viewport" content="width=device-width , intial-scale=1;">
7+
<link rel="stylesheet" type="text/css" href="style.css">
8+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
9+
</head>
10+
11+
12+
<body>
13+
<div class="par">
14+
<div class="box1"></div>
15+
<div class="box2"></div>
16+
<div class="box3"></div>
17+
</div>
18+
19+
20+
</body>
21+
2222
</html>

‎Avani/Column Drop/style.css

+112-112
Original file line numberDiff line numberDiff line change
@@ -1,113 +1,113 @@
1-
.par
2-
{
3-
display: flex;
4-
flex-wrap: wrap;
5-
}
6-
7-
.box1
8-
{
9-
background-color: #95a6c1;
10-
}
11-
12-
.box2
13-
{
14-
background-color: #debaef;
15-
}
16-
17-
.box3
18-
{
19-
background-color: #b3bc9e;
20-
}
21-
22-
23-
24-
@media screen and (max-width: 768px)
25-
{
26-
.box1
27-
{
28-
height: 110vh;
29-
width: 100%;
30-
}
31-
.box2
32-
{
33-
height: 50vh;
34-
width: 100%;
35-
}
36-
.box3
37-
{
38-
height: 50vh;
39-
width: 100%;
40-
}
41-
}
42-
43-
44-
45-
46-
@media screen and (min-width: 768px) and (max-width: 992px)
47-
{
48-
.box1, .box2, .box3
49-
{
50-
height: 60vh;
51-
width: 100%;
52-
53-
}
54-
}
55-
56-
57-
58-
59-
60-
@media screen and (min-width: 992px) and (max-width: 1200px)
61-
{
62-
.box1, .box2
63-
{
64-
height: 100vh;
65-
}
66-
67-
.box1
68-
{
69-
width: 30%;
70-
order:2;
71-
}
72-
73-
.box2
74-
{
75-
width: 70%;
76-
order: 1;
77-
}
78-
79-
.box3
80-
{
81-
height: 40vh;
82-
width: 100%;
83-
order:3;
84-
}
85-
}
86-
87-
88-
89-
90-
@media screen and (min-width: 1200px)
91-
{
92-
.box1
93-
{
94-
height: 100vh;
95-
width: 50%;
96-
order: 2;
97-
98-
}
99-
.box2
100-
{
101-
height: 100vh;
102-
width: 25%;
103-
order: 1;
104-
}
105-
106-
.box3
107-
{
108-
height: 100vh;
109-
width: 25%;
110-
order: 3;
111-
112-
}
1+
.par
2+
{
3+
display: flex;
4+
flex-wrap: wrap;
5+
}
6+
7+
.box1
8+
{
9+
background-color: #95a6c1;
10+
}
11+
12+
.box2
13+
{
14+
background-color: #debaef;
15+
}
16+
17+
.box3
18+
{
19+
background-color: #b3bc9e;
20+
}
21+
22+
23+
24+
@media screen and (max-width: 768px)
25+
{
26+
.box1
27+
{
28+
height: 110vh;
29+
width: 100%;
30+
}
31+
.box2
32+
{
33+
height: 50vh;
34+
width: 100%;
35+
}
36+
.box3
37+
{
38+
height: 50vh;
39+
width: 100%;
40+
}
41+
}
42+
43+
44+
45+
46+
@media screen and (min-width: 768px) and (max-width: 992px)
47+
{
48+
.box1, .box2, .box3
49+
{
50+
height: 60vh;
51+
width: 100%;
52+
53+
}
54+
}
55+
56+
57+
58+
59+
60+
@media screen and (min-width: 992px) and (max-width: 1200px)
61+
{
62+
.box1, .box2
63+
{
64+
height: 100vh;
65+
}
66+
67+
.box1
68+
{
69+
width: 30%;
70+
order:2;
71+
}
72+
73+
.box2
74+
{
75+
width: 70%;
76+
order: 1;
77+
}
78+
79+
.box3
80+
{
81+
height: 40vh;
82+
width: 100%;
83+
order:3;
84+
}
85+
}
86+
87+
88+
89+
90+
@media screen and (min-width: 1200px)
91+
{
92+
.box1
93+
{
94+
height: 100vh;
95+
width: 50%;
96+
order: 2;
97+
98+
}
99+
.box2
100+
{
101+
height: 100vh;
102+
width: 25%;
103+
order: 1;
104+
}
105+
106+
.box3
107+
{
108+
height: 100vh;
109+
width: 25%;
110+
order: 3;
111+
112+
}
113113
}

‎Avani/Layout shifter/index.html

+22-22
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
1-
<!DOCTYPE html>
2-
<html>
3-
<head>
4-
<title>Layout Shifter</title>
5-
<meta name="viewport" content="width=device-width , intial-scale=1;">
6-
<link rel="stylesheet" type="text/css" href="style.css">
7-
8-
</head>
9-
<body>
10-
11-
<div class="spar">
12-
13-
14-
<div class="box1"></div>
15-
<div class="par ">
16-
<div class="box2"></div>
17-
<div class="box3"></div>
18-
</div>
19-
20-
</div>
21-
22-
</body>
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Layout Shifter</title>
5+
<meta name="viewport" content="width=device-width , intial-scale=1;">
6+
<link rel="stylesheet" type="text/css" href="style.css">
7+
8+
</head>
9+
<body>
10+
11+
<div class="spar">
12+
13+
14+
<div class="box1"></div>
15+
<div class="par ">
16+
<div class="box2"></div>
17+
<div class="box3"></div>
18+
</div>
19+
20+
</div>
21+
22+
</body>
2323
</html>

0 commit comments

Comments
 (0)