CSS Blitz: Emoji dialog UI

README.md

Emoji dialog UI

⚡ View mockup · View redpen · 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.

CSS

• Colors:

  $text: #2B3036;
  $tomato: #EB4D4B;

• Metrics:

  $dialog-width: 224px;
  $dialog-height: 224px;
  $button-height: 64px;

• Fonts:

  $font: 'Roboto', sans-serif;

• CSS imports:

  @import url('https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,700');
  @import url('https://cdn.jsdelivr.net/npm/sanitize.css@5.0.0/sanitize.css');

* * *

Tips and hints

• Want a tomato? Copy this emoji: 🍅

• Need uppercase? text-transform: uppercase; letter-spacing: 0.1em; (adjust letter spacing as you see fit.)

• To vertically center something (eg, #all), use flexbox:

  html, body { height: 100%; }
  body { display: flex; }
  #all { margin: auto; width: 96px; height: 96px; background: blue; }