diff --git a/Anshul Gautam/Column Drop/columndrop.html b/Anshul Gautam/Column Drop/columndrop.html
new file mode 100644
index 0000000..46dc060
--- /dev/null
+++ b/Anshul Gautam/Column Drop/columndrop.html	
@@ -0,0 +1,84 @@
+<!-- ANSHUL GAUTAM
+	 IIIT-D
+-->
+
+<!DOCTYPE html>
+<html>
+<head>
+	<title>
+		COLUMNN DROP
+	</title>
+	<style>
+		.container {					/*parent*/
+			display: flex;
+			flex-wrap: wrap;
+			max-width: 900px;
+			margin: 0 auto;
+		}
+		.box {
+			height: 200px;
+			width: 100%;
+		}
+		.box1 {
+			background-color: navy;
+			order: 1;
+		}
+		.box2 {
+			background-color: tomato;
+			order: 2;
+		}
+		.box3 {
+			background-color: skyblue;
+			order: 3;
+		}
+		.box4 {
+			background-color: yellow;
+			order: 4;
+		}
+		.box5 {
+			background-color: green;
+			order: 5;
+		}
+		@media screen and (min-width: 600px) {
+			.box1 {
+				width: 60%;
+				order: 2;
+			}
+			.box2 {
+				width: 40%;
+				order: 1;
+			}
+			.box3 {
+				order: 3;
+				width: 
+			}
+			.box4 {
+				order: 4;
+			}
+			.box5 {
+				order: 5;
+			}
+		}
+		@media screen and (min-width: 800px) {
+			.box1 {
+				width: 60%;
+			}
+			.box2 {
+				width: 20%;
+			}
+			.box3 {
+				width: 20%;
+			}
+		}
+	</style>
+</head>
+<body>
+	<div class="container">
+		<div class="box box1"></div>
+		<div class="box box2"></div>
+		<div class="box box3"></div>
+		<div class="box box4"></div>
+		<div class="box box5"></div>
+	</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/Anshul Gautam/Layout Shifter/layoutshifter.html b/Anshul Gautam/Layout Shifter/layoutshifter.html
new file mode 100644
index 0000000..6d0e7df
--- /dev/null
+++ b/Anshul Gautam/Layout Shifter/layoutshifter.html	
@@ -0,0 +1,88 @@
+<!-- ANSHUL GAUTAM
+	 IIIT-D
+-->
+
+<!DOCTYPE html>
+<html>
+<head>
+	<title>
+		LAYOUT SHIFTER
+	</title>
+	<style>
+		.container {					/*parent*/
+			display: flex;
+			flex-wrap: wrap;
+			max-width: 1200px;
+			margin: 0 auto;
+		}
+		.box {
+			height: 242px;
+			width: 100%;
+			}
+		.box1 {
+			background-color: navy;
+			color: lavender;
+			max-height: 700px;
+			overflow-y: scroll;
+		}
+		
+		.box3 {
+			background-color: skyblue;
+			font-size: 20px;
+		}
+		.box4 {
+			background-color: yellow;
+		}
+		@media screen and (min-width: 600px) {
+			.container {
+				height: 700px;
+			}
+			.box1 {
+				height: 100%;
+				width: 20%;
+			}
+			.box2 {
+				width: 80%;
+				height: 100%;
+			}
+			.box3 {
+				height: 50%;
+			}
+			.box4 {
+				height: 50%;
+			}
+		}
+	</style>
+</head>
+<body>
+	<div class="container">
+		<div class="box box1"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+		proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+		<div class="box box2">
+			<div class="box box3"> <strong> UKRAINE </strong></div>
+			<div class="box box4"></div>
+		</div>
+	</div>
+</body>
+</html>
diff --git a/Anshul Gautam/Mostly Fluid/mostlyfluid.html b/Anshul Gautam/Mostly Fluid/mostlyfluid.html
new file mode 100644
index 0000000..e0e9195
--- /dev/null
+++ b/Anshul Gautam/Mostly Fluid/mostlyfluid.html	
@@ -0,0 +1,66 @@
+<!-- ANSHUL GAUTAM
+	 IIIT-D
+-->
+
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		MOSTLY FLUID
+	</title>
+	<style>
+		.container {					/*parent*/
+			display: flex;
+			flex-wrap: wrap;
+			max-width: 900px;
+			margin: 0 auto;
+		}
+		.box {
+			height: 200px;
+			width: 100%;
+		}
+		.box1 {
+			background-color: navy;
+		}
+		.box2 {
+			background-color: tomato;
+		}
+		.box3 {
+			background-color: skyblue;
+		}
+		.box4 {
+			background-color: yellow;
+		}
+		.box5 {
+			background-color: green;
+		}
+		@media screen and (min-width: 600px) {
+			.box2, .box3, .box4, .box5 {
+				width: 50%;
+			}
+		}
+		@media screen and (min-width: 800px) {
+			.box1 {
+				width: 60%;
+			}
+			.box2 {
+				width: 40%;
+			}
+			.box3, .box4, .box5 {
+				width: 33.33%;
+			}
+		}
+
+	</style>
+</head>
+<body>
+	<div class="container">
+		<div class="box box1"></div>
+		<div class="box box2"></div>
+		<div class="box box3"></div>
+		<div class="box box4"></div>
+		<div class="box box5"></div>
+	</div>
+</body>
+</html>
\ No newline at end of file
