From fc47e39710865cbcd38249d2b059eab4b4d81592 Mon Sep 17 00:00:00 2001 From: shradha-khapra Date: Sat, 13 Jan 2018 22:56:53 +0530 Subject: [PATCH 1/2] responsive design:layout shifter & column-drop --- winterbatch2018/shradha/column-drop.html | 45 ++++++++++++++++++ winterbatch2018/shradha/layout-shifter.html | 18 +++++++ winterbatch2018/shradha/style.css | 52 +++++++++++++++++++++ 3 files changed, 115 insertions(+) create mode 100644 winterbatch2018/shradha/column-drop.html create mode 100644 winterbatch2018/shradha/layout-shifter.html create mode 100644 winterbatch2018/shradha/style.css diff --git a/winterbatch2018/shradha/column-drop.html b/winterbatch2018/shradha/column-drop.html new file mode 100644 index 0000000..e889e61 --- /dev/null +++ b/winterbatch2018/shradha/column-drop.html @@ -0,0 +1,45 @@ + + + + + column-drop + + + +
+
+
+
+
+ + \ No newline at end of file diff --git a/winterbatch2018/shradha/layout-shifter.html b/winterbatch2018/shradha/layout-shifter.html new file mode 100644 index 0000000..6535bf1 --- /dev/null +++ b/winterbatch2018/shradha/layout-shifter.html @@ -0,0 +1,18 @@ + + + + + layout-shifter + + + + +
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/winterbatch2018/shradha/style.css b/winterbatch2018/shradha/style.css new file mode 100644 index 0000000..862a7d8 --- /dev/null +++ b/winterbatch2018/shradha/style.css @@ -0,0 +1,52 @@ +.bigbox{ height:100%; + margin:0 auto; + width:500px; + display:flex; + flex-wrap:wrap; + + justify-content: center; +} +.box1,.box2,.box3{ + width:300px; + height:100px; +} +.b { width:100%; +} +.box1{ background-color: mediumslateblue; + +} +.box2{ background-color: dimgrey; + +} +.box3{ background-color: darkgrey; + +} +@media screen and (max-width:600px){ + .bigbox{ width:100%;} + .box1,.box2,.box3{ + width:100%; + height:200px; + } +} + + + + +@media screen and (min-width:600px) and (max-width:900px){ + .bigbox{ width:100%;} + .box1{ width:20%; height:400px;} + .box2{ + width: 100%; height:200px; + } + .box3{ width:100%; height:200px;} + .b{ width:80%;height:400px;} +} +@media screen and (min-width:900px){ + .bigbox{ width:75%;} + .box1{ width:20%; height:400px;} + .box2{ + width: 100%; height:200px; + } + .box3{ width:100%; height:200px;} + .b{ width:80%;height:400px;} +} From a487fdedca3a31b53b00f0c85e32e88206e6abe0 Mon Sep 17 00:00:00 2001 From: shradha-khapra Date: Sat, 13 Jan 2018 23:07:13 +0530 Subject: [PATCH 2/2] responsive design: column drop & layout shifter --- .../shradha => WinterBatch2018/shradha - Copy}/column-drop.html | 0 .../shradha - Copy}/layout-shifter.html | 0 .../shradha => WinterBatch2018/shradha - Copy}/style.css | 0 3 files changed, 0 insertions(+), 0 deletions(-) rename {winterbatch2018/shradha => WinterBatch2018/shradha - Copy}/column-drop.html (100%) rename {winterbatch2018/shradha => WinterBatch2018/shradha - Copy}/layout-shifter.html (100%) rename {winterbatch2018/shradha => WinterBatch2018/shradha - Copy}/style.css (100%) diff --git a/winterbatch2018/shradha/column-drop.html b/WinterBatch2018/shradha - Copy/column-drop.html similarity index 100% rename from winterbatch2018/shradha/column-drop.html rename to WinterBatch2018/shradha - Copy/column-drop.html diff --git a/winterbatch2018/shradha/layout-shifter.html b/WinterBatch2018/shradha - Copy/layout-shifter.html similarity index 100% rename from winterbatch2018/shradha/layout-shifter.html rename to WinterBatch2018/shradha - Copy/layout-shifter.html diff --git a/winterbatch2018/shradha/style.css b/WinterBatch2018/shradha - Copy/style.css similarity index 100% rename from winterbatch2018/shradha/style.css rename to WinterBatch2018/shradha - Copy/style.css