DEV Community

Cover image for A Trip To The Beach
Mads Stoumann
Mads Stoumann

Posted on

6

A Trip To The Beach

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!

Beach

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; }
}
Enter fullscreen mode Exit fullscreen mode

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (1)

Collapse
 
jess profile image
Jess Lee

🙌

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more