This content originally appeared on DEV Community and was authored by annie.exe
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
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;
This content originally appeared on DEV Community and was authored by annie.exe
annie.exe | Sciencx (2021-08-13T22:48:57+00:00) DailyUI #003 – Landing Page (CodePen). Retrieved from https://www.scien.cx/2021/08/13/dailyui-003-landing-page-codepen/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.