⚡ View mockup · Start coding ⚡
- 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,
Forkthe Codepen page and share with us the URL.
- The width of the entire block is
300px. - See the CSS section below for colors and fonts.
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
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.jpgFeel 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/[email protected]/sanitize.css');
html {
background: $background;
// Start coding here!
}
Sample implementation (spoilers!): https://codepen.io/anon/pen/PQBQvq?editors=1100