diff --git a/Shreya Resposive Designs/columndrop.css b/Shreya Resposive Designs/columndrop.css
new file mode 100644
index 0000000..f14fd85
--- /dev/null
+++ b/Shreya Resposive Designs/columndrop.css
@@ -0,0 +1,80 @@
+*{
+ margin: 0px;
+ overflow-x: hidden;
+}
+
+.align{
+ width: 100%;
+ height: 50px;
+ background-color: blue;
+}
+
+.container{
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.box{
+ width: 25%;
+ height: 100vh;
+}
+
+.box2{
+ background-color: grey;
+ width: 50%;
+}
+
+.box1{
+ background-color: #0dccfc;
+ width: 25%;
+}
+
+.box3{
+ background-color: orange;
+ width: 25%;
+}
+
+@media(min-width: 720px) and (max-width: 900px){
+ .box1{
+ width: 33.33%;
+ }
+
+ .box2{
+ width: 66.66%;
+ }
+
+ .box3{
+ width: 100%;
+ height: 200px;
+ }
+}
+
+@media(min-width: 480px) and (max-width: 720px){
+ .box{
+ width: 100%;
+ height: 321px
+ }
+
+ .box2{
+ order: 0;
+ }
+
+ .box1{
+ order: 1;
+ }
+
+ .box3{
+ order: 2;
+ }
+}
+
+@media(max-width: 480px){
+ .box{
+ width: 100%;
+ height: 200px;
+ }
+
+ .box1{
+ height: 120vh;
+ }
+}
diff --git a/Shreya Resposive Designs/columndrop.html b/Shreya Resposive Designs/columndrop.html
new file mode 100644
index 0000000..78bcd0f
--- /dev/null
+++ b/Shreya Resposive Designs/columndrop.html
@@ -0,0 +1,24 @@
+
+
+
+
+
+ Page Title
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Shreya Resposive Designs/layoutshifter.css b/Shreya Resposive Designs/layoutshifter.css
new file mode 100644
index 0000000..0ce0e83
--- /dev/null
+++ b/Shreya Resposive Designs/layoutshifter.css
@@ -0,0 +1,89 @@
+*{
+ margin: 0;
+ box-sizing: border-box;
+}
+.container{
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+}
+
+.box{
+ height: 100vh;
+}
+
+.box1{
+ width: 29%;
+ background-color: teal;
+}
+
+.box2{
+ width: 70%;
+}
+
+.box3{
+ width: 100%;
+ height: 50%;
+ background-color: black;
+}
+
+
+.box4{
+ width: 100%;
+ height: 50%;
+ background-color: green;
+}
+
+
+@media(min-width: 480px) and (max-width: 900px){
+ .container{
+ width: 100%;
+ }
+ .box1{
+ width: 100%;
+ height: 200px;
+ }
+
+ .box2{
+ width: 100%;
+ height: 600px;
+ }
+
+ .box3{
+ width: inherit;
+ height: 40%;
+ }
+
+ .box4{
+ width: inherit;
+ height: 60%;
+ }
+}
+
+@media(max-width: 480px){
+ .container{
+ width: 100%;
+ }
+
+ .box1{
+ width: 100%;
+ height: 200px;
+ }
+
+ .box2{
+ width: 100%;
+ height: 500px;
+ }
+
+ .box2 > .box3{
+ width: inherit;
+ height: 150px;
+ }
+
+ .box2 > .box4{
+ width: inherit;
+ height: 350px;
+ }
+}
+
+/* calc function is used to calculate the calculation between two different unit */
\ No newline at end of file
diff --git a/Shreya Resposive Designs/layoutshifter.html b/Shreya Resposive Designs/layoutshifter.html
new file mode 100644
index 0000000..fcf8af7
--- /dev/null
+++ b/Shreya Resposive Designs/layoutshifter.html
@@ -0,0 +1,19 @@
+
+
+
+
+
+ Page Title
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Shreya Resposive Designs/mostlyfluid.css b/Shreya Resposive Designs/mostlyfluid.css
new file mode 100644
index 0000000..14243b1
--- /dev/null
+++ b/Shreya Resposive Designs/mostlyfluid.css
@@ -0,0 +1,66 @@
+.container{
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ /* border: 2px solid black; */
+ margin: 0 auto;
+}
+
+.box{
+ width: 25%;
+ height: 200px;
+}
+
+.box1{
+ width: 60%;
+ background-color: rebeccapurple;
+}
+
+.box2{
+ width: 40%;
+ background-color: red;
+}
+
+.box3{
+ background-color: aqua;
+}
+
+.box4{
+ background-color: lightcoral;
+}
+
+.box5{
+ background-color: steelblue;
+}
+
+.box6{
+ background-color: rgb(150, 16, 139);
+}
+
+@media(max-width: 480px){
+ .box{
+ width: 100%;
+ }
+
+ .box1{
+ height: 100vh;
+ }
+}
+
+@media(min-width: 480px) and (max-width: 720px){
+ .box{
+ width: 50%;
+ }
+ .box1{
+ width: 100%;
+ }
+ .box6{
+ width: 100%;
+ }
+}
+
+@media(min-width: 720px){
+ .container{
+ width: 720px;
+ }
+}
\ No newline at end of file
diff --git a/Shreya Resposive Designs/mostlyfluid.html b/Shreya Resposive Designs/mostlyfluid.html
new file mode 100644
index 0000000..d6d3bd1
--- /dev/null
+++ b/Shreya Resposive Designs/mostlyfluid.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+ Page Title
+
+
+
+
+
+
+
\ No newline at end of file