mayankagarwal2402/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Simple Responsive</title>
	<link rel="stylesheet" href="style.css">
	<style>
		body {
			margin: 0;
			padding: 0;
			border: 0;
		}

		* {
			box-sizing: border-box;
		}

		.section {
			background: silver;
			position: relative;
		}

		.content {
			max-width: 960px;
			margin: 0 auto;
			background: gray;
		}

		.col {
			min-height: 500px;
			width: 100%;
		}

		#organize .col1 {
			background: blue;
		}

		#organize .col2 {
			background: aqua;
		}

		#easier .col1 {
			background: orange;
		}

		#easier .col2 {
			background: yellow;
		}

		#discover .col1 {
			background: #727E34;
		}

		#discover .col2 {
			background: #B0CA33;
		}

		#discover .col3 {
			background: #CEF02A;
		}

		/* desktops */
		@media screen and (min-width: 480px) {
			.content {
				display: flex;  /* just to remove white space between two child inline blocks */
			}

			.col {
				width: 50%;
				display: inline-block;
			}

			#easier .col1 {
				width: 75%;
			}

			#easier .col2 {
				width: 25%;
			}

			#discover .col1 {
				width: 50%;
			}

			#discover .col2 {
				width: 30%;
			}

			#discover .col3 {
				width: 20%;
			}
		}

	</style>
</head>
<body>
	<div id="wrapper">
		<div class="section" id="organize">
			<div class="content">
				<div class="col col1"></div>
				<div class="col col2"></div>
			</div>
		</div>
		<div class="section" id="easier">
			<div class="content">
				<div class="col col1"></div>
				<div class="col col2"></div>
			</div>
		</div>
		<div class="section" id="discover">
			<div class="content">
				<div class="col col1"></div>
				<div class="col col2"></div>
				<div class="col col3"></div>
			</div>
		</div>
	</div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Simple Responsive</title>
	<link rel="stylesheet" href="style.css">
	<style>
	body {
	margin: 0;
	padding: 0;
	border: 0;
	}

	* {
	box-sizing: border-box;
	}

	.section {
	background: silver;
	position: relative;
	}

	.content {
	max-width: 960px;
	margin: 0 auto;
	background: gray;
	}

	.col {
	min-height: 500px;
	width: 100%;
	}

	#organize .col1 {
	background: blue;
	}

	#organize .col2 {
	background: aqua;
	}

	#easier .col1 {
	background: orange;
	}

	#easier .col2 {
	background: yellow;
	}

	#discover .col1 {
	background: #727E34;
	}

	#discover .col2 {
	background: #B0CA33;
	}

	#discover .col3 {
	background: #CEF02A;
	}

	/* desktops */
	@media screen and (min-width: 480px) {
	.content {
	display: flex; /* just to remove white space between two child inline blocks */
	}

	.col {
	width: 50%;
	display: inline-block;
	}

	#easier .col1 {
	width: 75%;
	}

	#easier .col2 {
	width: 25%;
	}

	#discover .col1 {
	width: 50%;
	}

	#discover .col2 {
	width: 30%;
	}

	#discover .col3 {
	width: 20%;
	}
	}

	</style>
	</head>
	<body>
	<div id="wrapper">
	<div class="section" id="organize">
	<div class="content">
	<div class="col col1"></div>
	<div class="col col2"></div>
	</div>
	</div>
	<div class="section" id="easier">
	<div class="content">
	<div class="col col1"></div>
	<div class="col col2"></div>
	</div>
	</div>
	<div class="section" id="discover">
	<div class="content">
	<div class="col col1"></div>
	<div class="col col2"></div>
	<div class="col col3"></div>
	</div>
	</div>
	</div>
	</body>
	</html>