<h1>To-do</h1>
<h2>To tick off an item, select its text and press <b>ctrl+B</b> (Windows) or <b>cmd+B</b> (Mac)</h2><br />
<div contenteditable>
<div>
Finish the codepen you started
</div>
<div>
Drink more coffee
</div>
</div>
body {
font-family: sans-serif;
font-family: "Quicksand", sans-serif;
color: #333;
text-indent: 1.5em;
font-size: 1.1em;
background-color: #eee;
width: 96vw;
max-width: 600px;
margin: 0 auto;
}
h2 {
padding: 0 2em;
text-indent: 0;
opacity: 0.7;
font-size: 0.84em;
font-weight: normal;
}
span b {
color: #000;
}
h1 {
font-size: 3em;
margin-bottom: 0.2em;
color: deeppink;
}
div {
background-color: #fff;
border: 1px solid #fff;
border-radius: 8px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
}
div:focus {
outline: none;
}
div div {
position: relative;
background-color: deeppink;
color: #fff;
margin: 16px;
border-radius: 999px;
line-height: 3em;
border: none;
box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}
div b {
text-decoration: line-through;
font-weight: normal;
display: none;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.