List Tanggal
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
* {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--hue: 223;
--bg: hsl(var(--hue),90%,90%);
--fg: hsl(var(--hue),90%,10%);
font-size: calc(16px + (24 - 16) * (100vw - 320px) / (2560 - 320));
}
body {
background-color: var(--bg);
color: var(--fg);
display: flex;
font: 1em/1.5 "DM Sans", sans-serif;
height: 100vh;
transition:
background-color var(--trans-dur),
color var(--trans-dur);
}
h1 {
font-size: 2em;
margin: 0 0 1.5rem;
}
h1:before {
content: "🧑💻";
margin-inline-end: 0.375em;
}
h2 {
font-size: 1.5em;
line-height: 1;
margin: 0 0 .75rem;
padding-top: .75rem;
}
main {
margin: auto;
padding: 1.5em;
width: 100%;
max-width: 36em;
}
ol {
flex: 1;
list-style-position: inside;
}
li {
position: relative;
}
span {
position: absolute;
left: 2.25em;
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
:root {
--bg: hsl(var(--hue),90%,10%);
--fg: hsl(var(--hue),90%,90%);
}
}
/* Beyond mobile */
@media (min-width: 768px) {
.lists {
display: flex;
gap: 1.5em;
}
}
</style>
</head>
<body>
<main>
<h1>Isi bulan</h1>
<h2>Tanggal</h2>
<div class="lists">
<ol>
<li><span>Acara </span></li>
<li><span>Scale</span></li>
<li><span>Shiny</span></li>
<li><span>Plastic</span></li>
<li><span>Minimalist</span></li>
<li><span>Strokes</span></li>
<li><span>Layered</span></li>
<li><span>Blocks</span></li>
<li><span>Extruded</span></li>
<li><span>Soft</span></li>
<li><span>Neon</span></li>
</ol>
<ol start="12">
<li><span>LED</span></li>
<li><span>Metal</span></li>
<li><span>Mathematical</span></li>
<li><span>Pendulum</span></li>
<li><span>Binary</span></li>
<li><span>Fire</span></li>
<li><span>Marquee</span></li>
<li><span>Illusion</span></li>
<li><span>Mask</span></li>
<li><span>Perspective</span></li>
<li><span>Etched</span></li>
</ol>
<ol start="23">
<li><span>Progress</span></li>
<li><span>Tally</span></li>
<li><span>LCD</span></li>
<li><span>Tiles</span></li>
<li><span>Wireframe</span></li>
<li><span>Flipped</span></li>
<li><span>Pie</span></li>
<li><span>Words</span></li>
<li><span>Weird</span></li>
</ol>
</div>
</main>
</body>
</html>
0 komentar: