<main>
<h1>Welcome!</h1>
<p>Have you seen <a href="https://codersblock.com/">my site</a>? It's where I talk about CSS or whatever.</p>
</main>
:root {
--open: '(';
--close: ')';
--heading-hint: ' ' var(--open) 'this is a heading' var(--close);
--link-hint: ' ' var(--open) attr(href) var(--close);
}
h1::after {
content: var(--heading-hint);
}
a::after {
content: var(--link-hint);
}
*, *::before, *::after {
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
display: grid;
align-items: center;
margin: 0;
color: #e5ddcb;
background-color: #524656;
font: 1.5rem/1.25 'Sansita Swashed', cursive;
}
main {
padding: 20px;
}
h1 {
margin: 0;
line-height: inherit;
font-size: 3.5rem;
}
p {
margin: 20px 0 0;
}
a {
color: #ff8c94;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.