プレビュー
HTML
<section>
<header>Head</header>
<nav>Nav</nav>
<article>Main</article>
<footer>Foot</footer>
</section>
CSS
:root {
--ink: #241c16;
--paper: #fffaf1;
--accent: #d4552b;
--accent-2: #4338ca;
--on-accent: #fff;
--muted: #6a6156;
--line: #d7ccb8;
--chip: #efe6d6;
}
section {
display: grid;
grid-template:
"head head" auto
"nav main" 1fr
"foot foot" auto
/ 7rem 1fr;
min-height: 14rem;
gap: 0.5rem;
}
header { grid-area: head; }
nav { grid-area: nav; }
article { grid-area: main; }
footer { grid-area: foot; }
header, nav, article, footer {
padding: 0.7rem;
border-radius: 0.7rem;
background: var(--paper);
}
header, footer { background: var(--chip); }
nav { background: var(--ink); color: var(--on-accent); }