Skip to content

Commit 55a5a82

Browse files
KomeOnKomeOn
committed
New Season Coming
1 parent c13a2f9 commit 55a5a82

File tree

6 files changed

+291
-0
lines changed

6 files changed

+291
-0
lines changed

‎Sanket/Column Drop/column_drop.html

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

‎Sanket/Column Drop/column_drop_styles.css

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
.container {
2+
display: flex;
3+
flex-wrap: wrap;
4+
justify-content: center;
5+
}
6+
.box {
7+
width: 300px;
8+
height: 300px;
9+
}
10+
.box1 {
11+
background-color: #164388;
12+
}
13+
.box2 {
14+
background-color: #3979d9;
15+
}
16+
.box3 {
17+
background-color: #cadbf8;
18+
}
19+
20+
@media(min-width: 1000px)
21+
{
22+
.box1 {
23+
width: 60%;
24+
height: 640px;
25+
order: 2;
26+
}
27+
.box2 {
28+
width: 20%;
29+
height: 640px;
30+
order: 1;
31+
}
32+
.box3 {
33+
width: 20%;
34+
height: 640px;
35+
order: 3;
36+
}
37+
}
38+
@media(min-width: 720px) and (max-width: 1000px)
39+
{
40+
.box1 {
41+
width: 70%;
42+
height: 620px;
43+
order: 2;
44+
}
45+
.box2 {
46+
width: 30%;
47+
height: 620px;
48+
order: 1;
49+
}
50+
.box3 {
51+
width: 100%;
52+
order: 3;
53+
}
54+
}
55+
@media(min-width: 480px) and (max-width: 720px)
56+
{
57+
.box1 {
58+
width: 100%;
59+
height: 400px;
60+
}
61+
.box2 {
62+
width: 100%;
63+
height: 400px;
64+
}
65+
.box3 {
66+
width: 100%;
67+
height: 400px;
68+
}
69+
}
70+
@media(max-width: 480px)
71+
{
72+
.box1 {
73+
width: 100%;
74+
height: 620px;
75+
}
76+
.box2 {
77+
width: 100%;
78+
height: 620px;
79+
}
80+
.box3 {
81+
width: 100%;
82+
height: 620px;
83+
}
84+
}

‎Sanket/Layoust Shifter/layout_shifter.html

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

‎Sanket/Layoust Shifter/layout_shifter_styles.css

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
main {
2+
display: flex;
3+
flex-wrap: wrap;
4+
justify-content: center;
5+
}
6+
.container {
7+
width: 300px;
8+
height: 620px;
9+
}
10+
aside {
11+
width: 150px;
12+
height: 620px;
13+
}
14+
.box {
15+
width: inherit;
16+
height: 50%;
17+
}
18+
.box1 {
19+
background-color: #164388;
20+
width: inherit;
21+
height: inherit;
22+
}
23+
.box2 {
24+
background-color: #3979d9;
25+
}
26+
.box3 {
27+
background-color: #cadbf8;
28+
}
29+
30+
@media(min-width: 720px)
31+
{
32+
.container {
33+
width: 70%;
34+
}
35+
.box {
36+
width: 100%;
37+
}
38+
aside {
39+
width: 20%;
40+
}
41+
.box1 {
42+
width: 100%;
43+
}
44+
45+
}
46+
@media (max-width: 720px)
47+
{
48+
aside{
49+
width: 100%;
50+
height: 140px;
51+
}
52+
.box1 {
53+
width: 100%;
54+
height: 100%;
55+
}
56+
.container {
57+
width: 100%;
58+
}
59+
.box2 {
60+
width: 100%;
61+
height: 400px;
62+
}
63+
.box3 {
64+
width: 100%;
65+
height: 600px;
66+
}
67+
}
68+
69+

‎Sanket/Mostly Fluid/mostly_fluid.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
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.0">
7+
<link rel="stylesheet" href="mostly_fluid_styles.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="box box1"></div>
12+
<div class="box box2"></div>
13+
<div class="box box3"></div>
14+
<div class="box box4"></div>
15+
<div class="box box5"></div>
16+
</div>
17+
</body>
18+
</html>

‎Sanket/Mostly Fluid/mostly_fluid_styles.css

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
.container {
2+
display: flex;
3+
flex-wrap: wrap;
4+
justify-content: center;
5+
}
6+
.box {
7+
width: 300px;
8+
height: 300px;
9+
}
10+
.box1 {
11+
background-color: #164388;
12+
}
13+
.box2 {
14+
background-color: #3979d9;
15+
}
16+
.box3 {
17+
background-color: #cadbf8;
18+
}
19+
.box4 {
20+
background-color: #d6e0ef;
21+
}
22+
.box5 {
23+
background-color: #e0e2e6;
24+
}
25+
26+
@media(min-width: 720px)
27+
{
28+
.box1 {
29+
width: 50%;
30+
}
31+
.box2 {
32+
width: 30%;
33+
}
34+
.box3 {
35+
width: 26.6%;
36+
}
37+
.box4 {
38+
width: 26.6%;
39+
}
40+
.box5 {
41+
width: 26.6%;
42+
}
43+
}
44+
@media(min-width: 480px) and (max-width: 720px)
45+
{
46+
.box1 {
47+
width: 100%;
48+
}
49+
.box2 {
50+
width: 50%;
51+
}
52+
.box3 {
53+
width: 50%;
54+
}
55+
.box4 {
56+
width: 50%;
57+
}
58+
.box5 {
59+
width: 50%;
60+
}
61+
}
62+
@media(max-width: 480px)
63+
{
64+
.box1 {
65+
width: 100%;
66+
height: 630px;
67+
}
68+
.box2 {
69+
width: 100%;
70+
height: 310px;
71+
}
72+
.box3 {
73+
width: 100%;
74+
height: 310px;
75+
}
76+
.box4 {
77+
width: 100%;
78+
height: 310px;
79+
}
80+
.box5 {
81+
width: 100%;
82+
height: 310px;
83+
}
84+
}

0 commit comments

Comments
 (0)