From f43e6b10af1fbecb3c18ab73117da7460a93277c Mon Sep 17 00:00:00 2001 From: Nitin Madhukar <46166447+NitinMadhukar@users.noreply.github.com> Date: Wed, 24 Apr 2019 21:36:07 +0530 Subject: [PATCH 1/8] added responsive design --- Nitin Madhukar/columndrop.css | 60 ++++++++++++++++++++++++++ Nitin Madhukar/columndrop.html | 29 +++++++++++++ Nitin Madhukar/layout_shifter.css | 60 ++++++++++++++++++++++++++ Nitin Madhukar/layout_shifter.html | 29 +++++++++++++ Nitin Madhukar/mostlyfluid.css | 67 ++++++++++++++++++++++++++++++ Nitin Madhukar/mostlyfluid.html | 27 ++++++++++++ 6 files changed, 272 insertions(+) create mode 100644 Nitin Madhukar/columndrop.css create mode 100644 Nitin Madhukar/columndrop.html create mode 100644 Nitin Madhukar/layout_shifter.css create mode 100644 Nitin Madhukar/layout_shifter.html create mode 100644 Nitin Madhukar/mostlyfluid.css create mode 100644 Nitin Madhukar/mostlyfluid.html diff --git a/Nitin Madhukar/columndrop.css b/Nitin Madhukar/columndrop.css new file mode 100644 index 0000000..1aa8c1a --- /dev/null +++ b/Nitin Madhukar/columndrop.css @@ -0,0 +1,60 @@ +.container { + display: flex; + flex-wrap: wrap; + width: 100%; + max-width: 800px; + position: relative; + margin: auto; +} +.box { + width: 100%; + height: 200px; +} +.box1 { + background-color: #011627; +} +.box2 { + background-color: #FDFFFC; +} + +.box3 { + background-color :#2EC4B6; +} + +.box4 { + background-color :#E71D36; +} + + +.box5 { + background-color : #FF9F1C; +} + + +@media screen and (min-width:600px){ + .box{ + width: 100%; + order:3; + } + .box1{ + width: 33.33%; + order:2; + } + .box2{ + width: 33.33%; + order:2; + } + .box3{ + width: 33.33%; + order:2; + } + .box4{ + width: 100%; + order:3; + } + .box5{ + width: 100%; + order:1; + } + +} \ No newline at end of file diff --git a/Nitin Madhukar/columndrop.html b/Nitin Madhukar/columndrop.html new file mode 100644 index 0000000..d349d9c --- /dev/null +++ b/Nitin Madhukar/columndrop.html @@ -0,0 +1,29 @@ + + + + + + + + + + + New HTML document by Nitin Madhukar + + + + + +
+
+
+
+
+
+ + +
+ + + + diff --git a/Nitin Madhukar/layout_shifter.css b/Nitin Madhukar/layout_shifter.css new file mode 100644 index 0000000..e9d4749 --- /dev/null +++ b/Nitin Madhukar/layout_shifter.css @@ -0,0 +1,60 @@ +.container { + display: flex; + flex-wrap: wrap; + width: 100%; + max-width: 800px; + position: relative; + margin: auto; +} +.box { + width: 100%; + height: 200px; +} +.box1 { + background-color: #252422; +} +.box2 { + background-color: #CCC5B9; +} + +.box3 { + background-color :#FFFCF2; +} + +.box4 { + background-color :GREEN; +} + + +.box5 { + background-color : BLUE; +} + + +@media screen and (min-width:600px){ + .box{ + width: 100%; + order:3; + } + .box1{ + width: 33.33%; + order:2; + } + .box2{ + width: 33.33%; + order:2; + } + .box3{ + width: 33.33%; + order:2; + } + .box4{ + width: 100%; + order:3; + } + .box5{ + width: 100%; + order:1; + } + +} \ No newline at end of file diff --git a/Nitin Madhukar/layout_shifter.html b/Nitin Madhukar/layout_shifter.html new file mode 100644 index 0000000..71b2044 --- /dev/null +++ b/Nitin Madhukar/layout_shifter.html @@ -0,0 +1,29 @@ + + + + + + + + + + + New HTML document by Nitin Madhukar + + + + + +
+
+
+
+
+
+ + +
+ + + + diff --git a/Nitin Madhukar/mostlyfluid.css b/Nitin Madhukar/mostlyfluid.css new file mode 100644 index 0000000..4347b25 --- /dev/null +++ b/Nitin Madhukar/mostlyfluid.css @@ -0,0 +1,67 @@ +.container { + display: flex; + flex-wrap: wrap; + width: 100%; + position: relative; + max-width:1200px; + margin: 0 auto; + +} + +.box { + width: 100%; + height: 200px; + transition: all 0.7s linear 0s; +} + + +.box1 { + height: 500px; + background-color: #A9E5BB; + +} + +.box2 { + background-color: #FCF6B1; +} + +.box3 { + background-color: #F7B32B; +} + +.box4 { + background-color: #F72C25; +} + +.box5 { + background-color: #2D1E2F; +} + + +@media screen and (min-width:900px){ + .box{ + width:33.33%; + + } + .box1{ + height: 200px; + width: 100%; + } + .box2{ + height: 200px; + width: 100%; + } + .box3{ + height: 200px; + width: 100%; + } + .box4{ + height: 200px; + width: 100%; + } + .box5{ + height: 200px; + width: 100%; + } + +} diff --git a/Nitin Madhukar/mostlyfluid.html b/Nitin Madhukar/mostlyfluid.html new file mode 100644 index 0000000..e7e5d2c --- /dev/null +++ b/Nitin Madhukar/mostlyfluid.html @@ -0,0 +1,27 @@ + + + + + + + + + + + New HTML document by Nitin Madhukar + + + + + +
+
+
+
+
+
+ +
+ + + From 1db84eb74ac4689600021fcea389e907d0c59cda Mon Sep 17 00:00:00 2001 From: Nitin Madhukar <46166447+NitinMadhukar@users.noreply.github.com> Date: Sat, 1 Jun 2019 13:31:15 +0530 Subject: [PATCH 2/8] Delete columndrop.css --- Nitin Madhukar/columndrop.css | 60 ----------------------------------- 1 file changed, 60 deletions(-) delete mode 100644 Nitin Madhukar/columndrop.css diff --git a/Nitin Madhukar/columndrop.css b/Nitin Madhukar/columndrop.css deleted file mode 100644 index 1aa8c1a..0000000 --- a/Nitin Madhukar/columndrop.css +++ /dev/null @@ -1,60 +0,0 @@ -.container { - display: flex; - flex-wrap: wrap; - width: 100%; - max-width: 800px; - position: relative; - margin: auto; -} -.box { - width: 100%; - height: 200px; -} -.box1 { - background-color: #011627; -} -.box2 { - background-color: #FDFFFC; -} - -.box3 { - background-color :#2EC4B6; -} - -.box4 { - background-color :#E71D36; -} - - -.box5 { - background-color : #FF9F1C; -} - - -@media screen and (min-width:600px){ - .box{ - width: 100%; - order:3; - } - .box1{ - width: 33.33%; - order:2; - } - .box2{ - width: 33.33%; - order:2; - } - .box3{ - width: 33.33%; - order:2; - } - .box4{ - width: 100%; - order:3; - } - .box5{ - width: 100%; - order:1; - } - -} \ No newline at end of file From a4a3b38505f0a7e717b4d2a210b6fd989b7dba62 Mon Sep 17 00:00:00 2001 From: Nitin Madhukar <46166447+NitinMadhukar@users.noreply.github.com> Date: Sat, 1 Jun 2019 13:31:25 +0530 Subject: [PATCH 3/8] Delete columndrop.html --- Nitin Madhukar/columndrop.html | 29 ----------------------------- 1 file changed, 29 deletions(-) delete mode 100644 Nitin Madhukar/columndrop.html diff --git a/Nitin Madhukar/columndrop.html b/Nitin Madhukar/columndrop.html deleted file mode 100644 index d349d9c..0000000 --- a/Nitin Madhukar/columndrop.html +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - - - - - - New HTML document by Nitin Madhukar - - - - - -
-
-
-
-
-
- - -
- - - - From 938facf8a647c86fa884fe5268b92e97751467f2 Mon Sep 17 00:00:00 2001 From: Nitin Madhukar <46166447+NitinMadhukar@users.noreply.github.com> Date: Sat, 1 Jun 2019 13:31:35 +0530 Subject: [PATCH 4/8] Delete layout_shifter.css --- Nitin Madhukar/layout_shifter.css | 60 ------------------------------- 1 file changed, 60 deletions(-) delete mode 100644 Nitin Madhukar/layout_shifter.css diff --git a/Nitin Madhukar/layout_shifter.css b/Nitin Madhukar/layout_shifter.css deleted file mode 100644 index e9d4749..0000000 --- a/Nitin Madhukar/layout_shifter.css +++ /dev/null @@ -1,60 +0,0 @@ -.container { - display: flex; - flex-wrap: wrap; - width: 100%; - max-width: 800px; - position: relative; - margin: auto; -} -.box { - width: 100%; - height: 200px; -} -.box1 { - background-color: #252422; -} -.box2 { - background-color: #CCC5B9; -} - -.box3 { - background-color :#FFFCF2; -} - -.box4 { - background-color :GREEN; -} - - -.box5 { - background-color : BLUE; -} - - -@media screen and (min-width:600px){ - .box{ - width: 100%; - order:3; - } - .box1{ - width: 33.33%; - order:2; - } - .box2{ - width: 33.33%; - order:2; - } - .box3{ - width: 33.33%; - order:2; - } - .box4{ - width: 100%; - order:3; - } - .box5{ - width: 100%; - order:1; - } - -} \ No newline at end of file From ee1c03c1389a3e09feacb208c8d1da076c0056b6 Mon Sep 17 00:00:00 2001 From: Nitin Madhukar <46166447+NitinMadhukar@users.noreply.github.com> Date: Sat, 1 Jun 2019 13:31:46 +0530 Subject: [PATCH 5/8] Delete layout_shifter.html --- Nitin Madhukar/layout_shifter.html | 29 ----------------------------- 1 file changed, 29 deletions(-) delete mode 100644 Nitin Madhukar/layout_shifter.html diff --git a/Nitin Madhukar/layout_shifter.html b/Nitin Madhukar/layout_shifter.html deleted file mode 100644 index 71b2044..0000000 --- a/Nitin Madhukar/layout_shifter.html +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - - - - - - New HTML document by Nitin Madhukar - - - - - -
-
-
-
-
-
- - -
- - - - From 4ac3958f404e2417a2837afaf2f01b0cdd165610 Mon Sep 17 00:00:00 2001 From: Nitin Madhukar <46166447+NitinMadhukar@users.noreply.github.com> Date: Sat, 1 Jun 2019 13:31:56 +0530 Subject: [PATCH 6/8] Delete mostlyfluid.html --- Nitin Madhukar/mostlyfluid.html | 27 --------------------------- 1 file changed, 27 deletions(-) delete mode 100644 Nitin Madhukar/mostlyfluid.html diff --git a/Nitin Madhukar/mostlyfluid.html b/Nitin Madhukar/mostlyfluid.html deleted file mode 100644 index e7e5d2c..0000000 --- a/Nitin Madhukar/mostlyfluid.html +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - - - - - - New HTML document by Nitin Madhukar - - - - - -
-
-
-
-
-
- -
- - - From 73096ae6f74d70b425540a543a137748aa034886 Mon Sep 17 00:00:00 2001 From: Nitin Madhukar <46166447+NitinMadhukar@users.noreply.github.com> Date: Sat, 1 Jun 2019 13:32:04 +0530 Subject: [PATCH 7/8] Delete mostlyfluid.css --- Nitin Madhukar/mostlyfluid.css | 67 ---------------------------------- 1 file changed, 67 deletions(-) delete mode 100644 Nitin Madhukar/mostlyfluid.css diff --git a/Nitin Madhukar/mostlyfluid.css b/Nitin Madhukar/mostlyfluid.css deleted file mode 100644 index 4347b25..0000000 --- a/Nitin Madhukar/mostlyfluid.css +++ /dev/null @@ -1,67 +0,0 @@ -.container { - display: flex; - flex-wrap: wrap; - width: 100%; - position: relative; - max-width:1200px; - margin: 0 auto; - -} - -.box { - width: 100%; - height: 200px; - transition: all 0.7s linear 0s; -} - - -.box1 { - height: 500px; - background-color: #A9E5BB; - -} - -.box2 { - background-color: #FCF6B1; -} - -.box3 { - background-color: #F7B32B; -} - -.box4 { - background-color: #F72C25; -} - -.box5 { - background-color: #2D1E2F; -} - - -@media screen and (min-width:900px){ - .box{ - width:33.33%; - - } - .box1{ - height: 200px; - width: 100%; - } - .box2{ - height: 200px; - width: 100%; - } - .box3{ - height: 200px; - width: 100%; - } - .box4{ - height: 200px; - width: 100%; - } - .box5{ - height: 200px; - width: 100%; - } - -} From d9e759b8c91598e87e0c735584cc80e6555a0d85 Mon Sep 17 00:00:00 2001 From: Nitin Madhukar <46166447+NitinMadhukar@users.noreply.github.com> Date: Sat, 1 Jun 2019 13:32:51 +0530 Subject: [PATCH 8/8] Add files via upload --- Nitin Madhukar/columndrop.css | 60 ++++++++++++++++++++++++++ Nitin Madhukar/columndrop.html | 29 +++++++++++++ Nitin Madhukar/layout_shifter.css | 60 ++++++++++++++++++++++++++ Nitin Madhukar/layout_shifter.html | 29 +++++++++++++ Nitin Madhukar/mostlyfluid.css | 67 ++++++++++++++++++++++++++++++ Nitin Madhukar/mostlyfluid.html | 27 ++++++++++++ 6 files changed, 272 insertions(+) create mode 100644 Nitin Madhukar/columndrop.css create mode 100644 Nitin Madhukar/columndrop.html create mode 100644 Nitin Madhukar/layout_shifter.css create mode 100644 Nitin Madhukar/layout_shifter.html create mode 100644 Nitin Madhukar/mostlyfluid.css create mode 100644 Nitin Madhukar/mostlyfluid.html diff --git a/Nitin Madhukar/columndrop.css b/Nitin Madhukar/columndrop.css new file mode 100644 index 0000000..1aa8c1a --- /dev/null +++ b/Nitin Madhukar/columndrop.css @@ -0,0 +1,60 @@ +.container { + display: flex; + flex-wrap: wrap; + width: 100%; + max-width: 800px; + position: relative; + margin: auto; +} +.box { + width: 100%; + height: 200px; +} +.box1 { + background-color: #011627; +} +.box2 { + background-color: #FDFFFC; +} + +.box3 { + background-color :#2EC4B6; +} + +.box4 { + background-color :#E71D36; +} + + +.box5 { + background-color : #FF9F1C; +} + + +@media screen and (min-width:600px){ + .box{ + width: 100%; + order:3; + } + .box1{ + width: 33.33%; + order:2; + } + .box2{ + width: 33.33%; + order:2; + } + .box3{ + width: 33.33%; + order:2; + } + .box4{ + width: 100%; + order:3; + } + .box5{ + width: 100%; + order:1; + } + +} \ No newline at end of file diff --git a/Nitin Madhukar/columndrop.html b/Nitin Madhukar/columndrop.html new file mode 100644 index 0000000..d349d9c --- /dev/null +++ b/Nitin Madhukar/columndrop.html @@ -0,0 +1,29 @@ + + + + + + + + + + + New HTML document by Nitin Madhukar + + + + + +
+
+
+
+
+
+ + +
+ + + + diff --git a/Nitin Madhukar/layout_shifter.css b/Nitin Madhukar/layout_shifter.css new file mode 100644 index 0000000..e9d4749 --- /dev/null +++ b/Nitin Madhukar/layout_shifter.css @@ -0,0 +1,60 @@ +.container { + display: flex; + flex-wrap: wrap; + width: 100%; + max-width: 800px; + position: relative; + margin: auto; +} +.box { + width: 100%; + height: 200px; +} +.box1 { + background-color: #252422; +} +.box2 { + background-color: #CCC5B9; +} + +.box3 { + background-color :#FFFCF2; +} + +.box4 { + background-color :GREEN; +} + + +.box5 { + background-color : BLUE; +} + + +@media screen and (min-width:600px){ + .box{ + width: 100%; + order:3; + } + .box1{ + width: 33.33%; + order:2; + } + .box2{ + width: 33.33%; + order:2; + } + .box3{ + width: 33.33%; + order:2; + } + .box4{ + width: 100%; + order:3; + } + .box5{ + width: 100%; + order:1; + } + +} \ No newline at end of file diff --git a/Nitin Madhukar/layout_shifter.html b/Nitin Madhukar/layout_shifter.html new file mode 100644 index 0000000..71b2044 --- /dev/null +++ b/Nitin Madhukar/layout_shifter.html @@ -0,0 +1,29 @@ + + + + + + + + + + + New HTML document by Nitin Madhukar + + + + + +
+
+
+
+
+
+ + +
+ + + + diff --git a/Nitin Madhukar/mostlyfluid.css b/Nitin Madhukar/mostlyfluid.css new file mode 100644 index 0000000..4347b25 --- /dev/null +++ b/Nitin Madhukar/mostlyfluid.css @@ -0,0 +1,67 @@ +.container { + display: flex; + flex-wrap: wrap; + width: 100%; + position: relative; + max-width:1200px; + margin: 0 auto; + +} + +.box { + width: 100%; + height: 200px; + transition: all 0.7s linear 0s; +} + + +.box1 { + height: 500px; + background-color: #A9E5BB; + +} + +.box2 { + background-color: #FCF6B1; +} + +.box3 { + background-color: #F7B32B; +} + +.box4 { + background-color: #F72C25; +} + +.box5 { + background-color: #2D1E2F; +} + + +@media screen and (min-width:900px){ + .box{ + width:33.33%; + + } + .box1{ + height: 200px; + width: 100%; + } + .box2{ + height: 200px; + width: 100%; + } + .box3{ + height: 200px; + width: 100%; + } + .box4{ + height: 200px; + width: 100%; + } + .box5{ + height: 200px; + width: 100%; + } + +} diff --git a/Nitin Madhukar/mostlyfluid.html b/Nitin Madhukar/mostlyfluid.html new file mode 100644 index 0000000..e7e5d2c --- /dev/null +++ b/Nitin Madhukar/mostlyfluid.html @@ -0,0 +1,27 @@ + + + + + + + + + + + New HTML document by Nitin Madhukar + + + + + +
+
+
+
+
+
+ +
+ + +