diff --git a/WinterBatch2018/shradha - Copy/column-drop.html b/WinterBatch2018/shradha - Copy/column-drop.html
new file mode 100644
index 0000000..e889e61
--- /dev/null
+++ b/WinterBatch2018/shradha - Copy/column-drop.html
@@ -0,0 +1,45 @@
+
+
+
+
+ column-drop
+
+
+
+
+
+
\ No newline at end of file
diff --git a/WinterBatch2018/shradha - Copy/layout-shifter.html b/WinterBatch2018/shradha - Copy/layout-shifter.html
new file mode 100644
index 0000000..6535bf1
--- /dev/null
+++ b/WinterBatch2018/shradha - Copy/layout-shifter.html
@@ -0,0 +1,18 @@
+
+
+
+
+ layout-shifter
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/WinterBatch2018/shradha - Copy/style.css b/WinterBatch2018/shradha - Copy/style.css
new file mode 100644
index 0000000..862a7d8
--- /dev/null
+++ b/WinterBatch2018/shradha - Copy/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;}
+}