/* ========================================================= Zen Garden Revisited — practice stylesheet A remix of three techniques studied from real submissions: - #196 "Elegance in Simplicity" (Mani Sheriar): negative-margin centering - #217 "Screen Filler" (Elliot Jay Stocks): mobile-first fluid layout - #209 "CSS Co., Ltd." (Benjamin Klemm): text-hiding heading technique Colors, spacing and typography choices below are my own — only the layout TECHNIQUES are adapted from the originals. ========================================================= */ * { margin: 0; padding: 0; } /* border-box reset — technique from #217 "Screen Filler". Makes width/height include padding+border so percentage layouts don't blow out when you add padding. */ *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { font-family: Georgia, "Times New Roman", serif; background: #1f2421; color: #2b2b2b; line-height: 1.6; padding: 24px 0; } /* --------------------------------------------------------- Technique 1 — negative-margin centering (from #196) Old-school way to center a fixed-width block before "margin: 0 auto" was reliable everywhere: push the left edge to the middle of the viewport with left:50%, then pull it back by half the box's own width. --------------------------------------------------------- */ .page-wrapper { position: relative; width: 760px; left: 50%; margin-left: -380px; /* half of 760px */ background: #f6f3ea; box-shadow: 0 0 40px rgba(0, 0, 0, 0.4); } .intro { background: #ea2e49; color: #fff; padding: 40px 40px 30px; position: relative; } /* --------------------------------------------------------- Technique 2 — hide real text, show a styled "graphic" heading in its place (from #209 "CSS Co., Ltd.") Original used background-image + a fixed width/height box with the text pushed off-screen. Here the same text-hiding trick is reused with a CSS-drawn badge instead of an image, so the HTML text is still there for screen readers, but the visible heading is fully styled by CSS. --------------------------------------------------------- */ .intro header h1 { text-indent: 100%; white-space: nowrap; overflow: hidden; height: 46px; background: repeating-linear-gradient( 45deg, #fff 0 10px, transparent 10px 20px ); background-color: transparent; border-bottom: 3px solid #fff; } .intro header h2 { text-indent: 100%; white-space: nowrap; overflow: hidden; height: 20px; margin-top: 8px; background: #fff; opacity: 0.85; width: 60%; } .summary { margin-top: 24px; font-size: 0.95em; } .summary .p1 { font-weight: bold; } .preamble { background: rgba(255, 255, 255, 0.12); padding: 20px; margin-top: 24px; } .preamble h3, .main h3 { font-family: "Trebuchet MS", Arial, sans-serif; text-transform: uppercase; letter-spacing: 2px; font-size: 0.9em; color: #ea2e49; margin-bottom: 10px; } .preamble h3 { color: #fff; } .main { padding: 30px 40px; } .main > div { margin-bottom: 28px; } .requirements p[role="contentinfo"] { border-top: 1px dashed #ccc; margin-top: 12px; padding-top: 12px; font-style: italic; font-size: 0.85em; color: #777; } /* the sample HTML's six empty catch-all divs at the end of — legacy hooks for extra imagery, unused in this design */ .extra1, .extra2, .extra3, .extra4, .extra5, .extra6 { display: none; } .sidebar { background: #2b2b2b; color: #eee; padding: 24px 30px; } .sidebar h3 { font-family: "Trebuchet MS", Arial, sans-serif; color: #f6c453; text-transform: uppercase; letter-spacing: 1px; font-size: 0.85em; margin-bottom: 8px; margin-top: 18px; } .sidebar h3:first-child { margin-top: 0; } .sidebar ul { list-style: none; } .sidebar li { padding: 4px 0; font-size: 0.9em; } .sidebar a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.3); } .sidebar a:hover { border-color: #f6c453; } footer { background: #ea2e49; color: #fff; padding: 16px 40px; font-size: 0.8em; } /* --------------------------------------------------------- Technique 3 — mobile-first breakpoints (from #217) Small screens get the simple single-column stack above; past 700px we switch the wrapper to a fixed, centered width and let the two content columns sit side by side. --------------------------------------------------------- */ @media screen and (max-width: 700px) { .page-wrapper { width: 92%; left: 0; margin-left: 0; } body { padding: 12px 0; } } @media screen and (min-width: 700px) { .main { display: flex; flex-wrap: wrap; gap: 0 30px; } .main > div { flex: 1 1 45%; } /* footer is a direct child of .main too (see the real sample markup) — give it the full row on its own rather than squeezing into a column */ .main > footer { flex-basis: 100%; margin-top: 10px; } }