This is a submission for [Frontend Challenge v24.04.17]((https://dev.to/challenges/frontend-2024-05-29), Glam Up My Markup: Beaches
What I Built
I built a beautiful day at the beach, using the text about beaches as sand!
Demo
Journey
Not much CSS required. It's a radial-gradient
for the sun and a linear-gradient
for the sky. The <main>
-element has been styled with a sandy background, and I've removed all the default styling from it's children using all: unset;
:
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
body {
align-content: end;
background:
radial-gradient(circle, #ffff00 65%, #0000 67.5%) 90% 5% / 10cqb 10cqb no-repeat,
linear-gradient(180deg, #00bfff, #add8e6) 0% 0% / 100% 100% no-repeat;
color: #f3f3f399;
display: grid;
font-family: "Bebas Neue", sans-serif;
font-size: 3vh;
margin: 0;
min-height: 100vh;
overflow: hidden;
}
header {
letter-spacing: .1em;
line-height: 1;
padding-inline: 2ch;
}
main {
background: #FFFFE3;
line-height: .75;
text-align: justify;
* { all: unset; }
}
Top comments (1)
🙌