diff --git a/Ajey/column drop/index.html b/Ajey/column drop/index.html
new file mode 100644
index 0000000..9cc8de7
--- /dev/null
+++ b/Ajey/column drop/index.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
+
+
+
+ New HMTL document by NewJect
+
+
+
+
+
+
+
+
+
+
diff --git a/Ajey/column drop/style.css b/Ajey/column drop/style.css
new file mode 100644
index 0000000..b9d2912
--- /dev/null
+++ b/Ajey/column drop/style.css
@@ -0,0 +1,42 @@
+.container {
+ display: flex;
+ flex-wrap: wrap;
+ width: 100%;
+ max-width: 800px;
+ position: relative;
+ margin: auto;
+
+}
+.box {
+ width: 100%;
+ height: 200px;
+}
+
+.box1 {
+ background-color: black;
+
+}
+
+.box2 {
+ background-color:orange;
+}
+
+.box3 {
+ background-color: blue;
+}
+
+
+@media screen and (min-width:600px){
+ .box{
+ width: 100%;
+ order:3;
+ }
+ .box1{
+ width: 80%;
+ order:2;
+ }
+ .box2{
+ width: 20%;
+ order:1;
+ }
+}
\ No newline at end of file
diff --git a/Ajey/layout_shifter/index.html b/Ajey/layout_shifter/index.html
new file mode 100644
index 0000000..69e6d6f
--- /dev/null
+++ b/Ajey/layout_shifter/index.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+
+
+
+
+ New HMTL document by NewJect
+
+
+
+
+
+
+
+
+
+
diff --git a/Ajey/layout_shifter/style.css b/Ajey/layout_shifter/style.css
new file mode 100644
index 0000000..1f52f2a
--- /dev/null
+++ b/Ajey/layout_shifter/style.css
@@ -0,0 +1,82 @@
+.container {
+ display: flex;
+ flex-wrap: wrap;
+ width: 100%;
+ width: 1200px;
+ position: relative;
+ margin: auto;
+ /* height: 500px;*/
+}
+
+body,
+html {
+ height: 100%;
+}
+
+.box {
+ width: 100%;
+ height: 200px;
+}
+
+.bbox {
+ background: black;
+ height: 300px;
+ display: flex;
+ flex-wrap: wrap;
+
+}
+
+
+.box1 {
+ background-color: black;
+
+}
+
+.box2 {
+ background-color: orange;
+ height: 300px;
+}
+
+.box3 {
+ background-color: blue;
+ height: 700px;
+}
+
+
+
+@media screen and (min-width:600px) {
+ .box1 {
+ height: 200px;
+ }
+ .box2 {
+ height: 300px;
+ }
+ .box3 {
+ height: 400px;
+ }
+}
+
+
+@media screen and (min-width:900px) {
+
+
+ .box1 {
+ height: 100vh;
+ width: 10%;
+ /* float: left;*/
+ }
+ .bbox {
+ width: 90%;
+ height: 100vh;
+ transition: ease;
+ /* float: left;*/
+ }
+ .box2,
+ .box3
+
+ {
+ height: 50vh;
+ }
+
+
+}
diff --git a/Ajey/mostly-fluid/index.html b/Ajey/mostly-fluid/index.html
new file mode 100644
index 0000000..4781443
--- /dev/null
+++ b/Ajey/mostly-fluid/index.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
+
+
+
+ New HMTL document by NewJect
+
+
+
+
+
+
+
+
+
diff --git a/Ajey/mostly-fluid/style.css b/Ajey/mostly-fluid/style.css
new file mode 100644
index 0000000..d243376
--- /dev/null
+++ b/Ajey/mostly-fluid/style.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: black;
+
+}
+
+.box2 {
+ background-color: orange;
+}
+
+.box3 {
+ background-color: green;
+}
+
+.box4 {
+ background-color: grey;
+}
+
+.box5 {
+ background-color: maroon;
+}
+
+
+@media screen and (min-width:600px){
+ .box{
+ width:50%;
+ }
+ .box1{
+ height: 300px;
+ width: 100%
+ }
+
+}
+
+
+@media screen and (min-width:900px){
+ .box{
+ width:33.33%;
+
+ }
+ .box1{
+ height: 331px;
+ width: 60%
+ }
+ .box2{
+ height: 331px;
+ width: 40%
+ }
+
+}