CSS Blitz: Welcome Dialog UI

README.md

Welcome Dialog UI

⚡ View mockup · Start coding ⚡

Instructions

• You have 15 minutes to implement this UI.
• Text, colors, and other assets are provided for you.
• Some basic CSS is provided for you.
• You can search online if you get stuck.
• When you're done, Fork the Codepen page and share with us the URL.

Notes

• The height of the entire block is 512px.
• See the CSS section below for colors and fonts.

Text content

Feel free to copy/paste:

Sign up today
Get started on your free style profile.
Get Started
Email not required

Images

You may use these images:

https://source.unsplash.com/fr0J5-GIVyg/272x512

CSS

Feel free to copy/paste:

// Colors
$text: #222222;
$background: #56CCF2;

// Metrics
$height: 512px;

// Font
$font: 'Work Sans', sans-serif;

// Fonts (Roboto)
@import url('https://fonts.googleapis.com/css?family=Work+Sans:400,700');

// CSS reset
@import url('https://cdn.jsdelivr.net/npm/sanitize.css@5.0.0/sanitize.css');

html {
  background: $background;
  // Start coding here!
}

Sample implementation (spoilers!): https://codepen.io/anon/pen/gvjvaq?editors=1100