DailyUI #003 - Landing Page (CodePen)

#codepen #css #design #100daysofcode

DailyUI Challenge #003 - a landing page for my bear puppy Coconut.

Font:
- Raleway

Color Scheme:
- #604A4C - the shade of brown
- #F6E7CB - page background color
- #F4D1AE - shade of tan for bottom left blob
- #A7ABDD - shade of purple for top left blob
- #708D81 - shade of green for bottom right blob
- #00272B - dark colored text

How I made the color blobs for the background

The color blobs are made on Figma, exported as SVGs, and uploaded to a GitHub Gist.

Then in the CSS for .landingpage:

Set the background color
Set the background image with the 3 gist URLs
Set the size for how big you want each blob to be
Set the position of where you want each blob to be placed.
We want no repeat and no overflow.

background-color: #f6e7cb;
background-image: url("https://gist.githubusercontent.com/anniedotexe/8ab1f7baa078c8024144e232dc3e6763/raw/913759318c00a3110706509c566e9da5335dfa3c/purple-blob.svg"),
        url("https://gist.githubusercontent.com/anniedotexe/8ab1f7baa078c8024144e232dc3e6763/raw/913759318c00a3110706509c566e9da5335dfa3c/tan-blob.svg"),
        url("https://gist.githubusercontent.com/anniedotexe/8ab1f7baa078c8024144e232dc3e6763/raw/913759318c00a3110706509c566e9da5335dfa3c/green-blob.svg");
background-size: 35%, 48%, 11%;
background-position: right top, left bottom, right bottom;
background-repeat: no-repeat;
overflow: hidden;