mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-05-15 07:32:52 +00:00
83 lines
2.2 KiB
HTML
83 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
.container {
|
|
border: 1px solid #888;
|
|
display: inline-block;
|
|
width: 128px;
|
|
height: 128px;
|
|
}
|
|
|
|
.container div {
|
|
position: relative;
|
|
}
|
|
|
|
.red {
|
|
background-color: #f00;
|
|
}
|
|
|
|
.yellow {
|
|
background-color: #ff0;
|
|
}
|
|
|
|
.green {
|
|
background-color: #0f0;
|
|
}
|
|
|
|
.blue {
|
|
background-color: #00f;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- square_256x256 -->
|
|
<div class="container">
|
|
<div class="red" style="width: 128px; height: 128px; left: 0px; top: 0px">
|
|
<div class="yellow" style="width: 96px; height: 96px; left: 16px; top: 16px;">
|
|
<div class="green" style="width: 64px; height: 64px; left: 16px; top: 16px;">
|
|
<div class="blue" style="width: 32px; height: 32px; left: 16px; top: 16px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- square_64x64 -->
|
|
<div class="container">
|
|
<div class="red" style="width: 64px; height: 64px; left: 32px; top: 32px;">
|
|
<div class="yellow" style="width: 48px; height: 48px; left: 8px; top: 8px;">
|
|
<div class="green" style="width: 32px; height: 32px; left: 8px; top: 8px;">
|
|
<div class="blue" style="width: 16px; height: 16px; left: 8px; top: 8px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- portrait_128x256 -->
|
|
<div class="container">
|
|
<div class="red" style="width: 64px; height: 128px; left: 32px; top: 0px;">
|
|
<div class="yellow" style="width: 48px; height: 96px; left: 8px; top: 16px;">
|
|
<div class="green" style="width: 32px; height: 64px; left: 8px; top: 16px;">
|
|
<div class="blue" style="width: 16px; height: 32px; left: 8px; top: 16px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- landscape_256x128 -->
|
|
<div class="container">
|
|
<div class="red" style="width: 128px; height: 64px; left: 0px; top: 32px;">
|
|
<div class="yellow" style="width: 96px; height: 48px; left: 16px; top: 8px;">
|
|
<div class="green" style="width: 64px; height: 32px; left: 16px; top: 8px;">
|
|
<div class="blue" style="width: 32px; height: 16px; left: 16px; top: 8px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|