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
+
+
+
+
+
+
+
+
+