diff --git a/Ketan Verma/Column Drop/cd.css b/Ketan Verma/Column Drop/cd.css new file mode 100644 index 0000000..5e02491 --- /dev/null +++ b/Ketan Verma/Column Drop/cd.css @@ -0,0 +1,69 @@ +.container{ + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +.box{ + height: 200px; + width: 100%; +} +.box1{ + background-color: #06418e; + height: 200px; + order: 1; +} +.box2{ + background-color: #2a77e0; + order: 2; +} +.box3{ + background-color: #c8dbfc; + order: 3; +} + +@media(max-width:480px) and (min-width:200px){ + .box{ + width: 100%; + } + .box1{ + height: 400px; + } +} +@media(min-width:600px) and (max-width:735px) { + .box1{ + width:70%; + order: 2; + height: 600px; + + } + .box2{ + width:30%; + order: 1; + height: 600px; + } + .box3{ + width:100%; + order: 3; + height: 300px; + } + +} +@media(max-width:2560px) and (min-width:735px){ + .box1{ + width:50%; + order: 2; + height: 600px; + + } + .box2{ + width:25%; + order: 1; + height: 600px; + } + .box3{ + width:25%; + order: 3; + height: 600px; + } +} diff --git a/Ketan Verma/Column Drop/columndrop.html b/Ketan Verma/Column Drop/columndrop.html new file mode 100644 index 0000000..8a78408 --- /dev/null +++ b/Ketan Verma/Column Drop/columndrop.html @@ -0,0 +1,21 @@ + + + + + Page Title + + + + + +
+
+
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/Ketan Verma/Layout Shifter/layoutshifter.html b/Ketan Verma/Layout Shifter/layoutshifter.html new file mode 100644 index 0000000..4c3f5f7 --- /dev/null +++ b/Ketan Verma/Layout Shifter/layoutshifter.html @@ -0,0 +1,22 @@ + + + + + Page Title + + + + + +
+
+
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/Ketan Verma/Layout Shifter/ls.css b/Ketan Verma/Layout Shifter/ls.css new file mode 100644 index 0000000..8a85d3b --- /dev/null +++ b/Ketan Verma/Layout Shifter/ls.css @@ -0,0 +1,76 @@ +.container{ + display: flex; + flex-wrap: wrap; + justify-content: center; +} +/* body{ + margin: 0px; +} */ + +.box{ + height: 200px; + width: 100%; +} +.box1{ + background-color: #06418e; + height: 250px; + width: 100%; +} +.box2{ + background-color: #2a77e0; + height: 350px; +} +.box3{ + background-color: #c8dbfc; + height: 450px; +} + +@media(max-width:480px) and (min-width:200px){ + .box1{ + width: 100%; + height: 200px; + } + .box2{ + height: 400px; + } + .box3{ + height: 600px; + } +} +@media(min-width:600px) and (max-width:735px) { + .box1{ + width:20%; + height: 600px; + + } + .box4{ + width: 80%; + } + .box2{ + height: 300px; + } + .box3{ + height: 300px; + } + +} +@media(max-width:2560px) and (min-width:735px){ + .box1{ + width:20%; + height: 800px; + + } + .box4{ + width: 80%; + } + .box2{ + height: 400px; + } + .box3{ + height: 400px; + } + .container{ + width: 850px; + } + +} diff --git a/Ketan Verma/Mostly Fluid/mf.css b/Ketan Verma/Mostly Fluid/mf.css new file mode 100644 index 0000000..4889143 --- /dev/null +++ b/Ketan Verma/Mostly Fluid/mf.css @@ -0,0 +1,102 @@ +.container{ + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +.box{ + height: 400px; + width: 50%; +} +.box1{ + background-color: #06418e; + width:100%; + height:400px; +} +.box2{ + background-color: #2a77e0; +} +.box3{ + background-color: #c8dbfc; +} +.box4{ + background-color: #d6e0f1; +} +.box5{ + background-color: #e0e2e5; +} +/* @media(max-width:480px) and (min-width:200px){ + .box1{ + height:600px; + } + .box2{ + height:200px; + width:100%; + } + .box3{ + height:200px; + width:100%; + } + .box4{ + height:200px; + width:100%; + } + .box5{ + height:200px; + width:100%; + } +} +@media (min-width:735px){ + .box1{ + width:432px; + } + .box2{ + width:288px; + } + .box3{ + width:240px; + } + .box4{ + width:240px; + } + .box5{ + width:240px; + } + /* + .box1{ + width:60%; + } + .box2{ + width:40%; + } + .box3{ + width:33%; + } + .box4{ + width:33%; + } + .box5{ + width:33%; + } */ + .container{ + width: 720px; + margin: auto 0; + } +} +@media(max-width:735px) and (min-width:600px){ + .box1{ + width:60%; + } + .box2{ + width:40%; + } + .box3{ + width:33%; + } + .box4{ + width:33%; + } + .box5{ + width:33%; + } +} */ \ No newline at end of file diff --git a/Ketan Verma/Mostly Fluid/mostlyfluid.html b/Ketan Verma/Mostly Fluid/mostlyfluid.html new file mode 100644 index 0000000..fb36397 --- /dev/null +++ b/Ketan Verma/Mostly Fluid/mostlyfluid.html @@ -0,0 +1,25 @@ + + + + + Page Title + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+ + + \ No newline at end of file