CSS Blitz: Task List UI

README.md

Task List 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 width of the entire block is 300px.
• See the CSS section below for colors and fonts.

Text content

Feel free to copy/paste:

Review existing privacy documents
13 Jan 2018

Remind that EBA negotiations are to commence
21 Jan 2018

Schedule regular coffee updates
Due in 12 days

Images

You may use these images:

https://s3.amazonaws.com/uifaces/faces/twitter/sindresorhus/128.jpg
https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/128.jpg
https://s3.amazonaws.com/uifaces/faces/twitter/idiot/128.jpg
https://s3.amazonaws.com/uifaces/faces/twitter/jsa/128.jpg

CSS

Feel free to copy/paste:

// Colors
$ochre: #F69A00;
$tomato: #E5585F;
$background: #f7f7f7;

// Metrics
$width: 300px;

// Font
$font: 'Roboto', sans-serif;

// Fonts (Roboto)
@import url('https://fonts.googleapis.com/css?family=Roboto: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/PQBQvq?editors=1100