<input id="1" type="checkbox" />
<label for="1"></label>
<input id="2" type="checkbox" />
<label for="2"></label>
<input id="3" type="checkbox" />
<label for="3"></label>
<input id="4" type="checkbox" />
<label for="4"></label>
<input id="5" type="checkbox" />
<label for="5"></label>
<footer>
0/5 gifts wrapped
</footer>
<article class="you-win">Good job!</article>
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
* {
box-sizing: border-box;
margin: 0;
}
body,
html {
font: bold 30px/1 'Open Sans', sans-serif;
}
body {
color: white;
text-align: center;
user-select: none;
}
.you-win {
align-items: center;
background: linear-gradient(#b6480c, #6c0d05);
display: flex;
font-size: 2rem;
height: 100vh;
justify-content: center;
position: absolute;
top: 100vh;
width: 100vw;
}
footer {
background: #146b3a;
padding: 0.25rem;
height: 1.5rem;
width: 100vw;
position: absolute;
bottom: 0;
}
input {
zoom: 3;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.