Untitled

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Homework2</title>
		<style>
			body {
				padding: 0;
				margin: 0;
				overflow-x: hidden;
				height: 200vh;
			}

			.bigboxcontainer {
				width: 100vw;
				height: 100vh;
			}
			.bigbox {
				width: 300px;
				height: 300px;
			}
			.bigtopleft {
				/* position: ???; */
				top: 0;
				left: 0;
				background-color: #f1c40f;
			}
			.bigtopright {
				/* position: ???; */
				top: 0;
				right: 0;
				background-color: #e67e22;
			}
			.bigbottomleft {
				/* position: ???; */
				bottom: 0;
				left: 0;
				background-color: #2ecc71;
			}
			.bigbottomright {
				/* position: ???; */
				bottom: 0;
				right: 0;
				background-color: #3498db;
			}

			.smallcontainer {
				/* position: ???; */
				width: 20vw;
				height: 20vh;
				background-color: #95a5a6;
			}
			.smallbox {
				width: 20%;
				height: 20%;
			}
			.smalltopleft {
				/* position: ???; */
				top: 0;
				left: 0;
				background-color: #f1c40f;
			}
			.smalltopright {
				/* position: ???; */
				top: 0;
				right: 0;
				background-color: #e67e22;
			}
			.smallbottomleft {
				/* position: ???; */
				bottom: 0;
				left: 0;
				background-color: #2ecc71;
			}
			.smallbottomright {
				/* position: ???; */
				bottom: 0;
				right: 0;
				background-color: #3498db;
			}
			.center {
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		</style>
	</head>
	<body>
		<div class="bigboxcontainer">
			<div class="bigbox bigtopleft">1</div>
			<div class="bigbox bigtopright">2</div>
			<div class="bigbox bigbottomleft">3</div>
			<div class="bigbox bigbottomright">4</div>
		</div>
		<div class="smallcontainer center">
			<div class="smallbox smalltopleft">a</div>
			<div class="smallbox smalltopright">b</div>
			<div class="smallbox smallbottomleft">c</div>
			<div class="smallbox smallbottomright">d</div>
		</div>
	</body>
</html>
Editor is loading...