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

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more