Untitled
unknown
html
a year ago
2.2 kB
9
Indexable
<!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>