A Trip To The Beach

#devchallenge #frontendchallenge #css #javascript

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; }
}