Skip to content

Instantly share code, notes, and snippets.

@Sh00k-ThaD3v
Created June 4, 2022 10:42
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Sh00k-ThaD3v/cd191a26c77281005d2152322d83a0eb to your computer and use it in GitHub Desktop.
Save Sh00k-ThaD3v/cd191a26c77281005d2152322d83a0eb to your computer and use it in GitHub Desktop.
To-do list
<!-- TO DO : Find out how to create new items + congrats message when all done-->
<div class="frame">
<div class="list">
<div class="head">
<div class="title">Friday</div>
<div class="subtitle">March 4, 2016</div>
</div>
<ul>
<li>
<input type="checkbox" id="item-1" name="item-1">
<label for="item-1" class="text">Create a list</label>
<label for="item-1" class="button"></label>
<div class="wrapper">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 98.5 98.5" enable-background="new 0 0 98.5 98.5" xml:space="preserve">
<path class="checkmark" fill="none" stroke-width="8" stroke-miterlimit="10" d="M81.7,17.8C73.5,9.3,62,4,49.2,4
C24.3,4,4,24.3,4,49.2s20.3,45.2,45.2,45.2s45.2-20.3,45.2-45.2c0-8.6-2.4-16.6-6.5-23.4l0,0L45.6,68.2L24.7,47.3"/>
</svg>
</div>
</li>
<li>
<input type="checkbox" id="item-2" name="item-2">
<label for="item-2" class="text">Complete first task</label>
<label for="item-2" class="button"></label>
<div class="wrapper">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 98.5 98.5" enable-background="new 0 0 98.5 98.5" xml:space="preserve">
<path class="checkmark" fill="none" stroke-width="8" stroke-miterlimit="10" d="M81.7,17.8C73.5,9.3,62,4,49.2,4
C24.3,4,4,24.3,4,49.2s20.3,45.2,45.2,45.2s45.2-20.3,45.2-45.2c0-8.6-2.4-16.6-6.5-23.4l0,0L45.6,68.2L24.7,47.3"/>
</svg>
</div>
</li>
<li>
<input type="checkbox" id="item-3" name="item-3">
<label for="item-3" class="text">Write some CSS code</label>
<label for="item-3" class="button"></label>
<div class="wrapper">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 98.5 98.5" enable-background="new 0 0 98.5 98.5" xml:space="preserve">
<path class="checkmark" fill="none" stroke-width="8" stroke-miterlimit="10" d="M81.7,17.8C73.5,9.3,62,4,49.2,4
C24.3,4,4,24.3,4,49.2s20.3,45.2,45.2,45.2s45.2-20.3,45.2-45.2c0-8.6-2.4-16.6-6.5-23.4l0,0L45.6,68.2L24.7,47.3"/>
</svg>
</div>
</li>
<li>
<input type="checkbox" id="item-4" name="item-4">
<label for="item-4" class="text">Amaze the world</label>
<label for="item-4" class="button"></label>
<div class="wrapper">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 98.5 98.5" enable-background="new 0 0 98.5 98.5" xml:space="preserve">
<path class="checkmark" fill="none" stroke-width="8" stroke-miterlimit="10" d="M81.7,17.8C73.5,9.3,62,4,49.2,4
C24.3,4,4,24.3,4,49.2s20.3,45.2,45.2,45.2s45.2-20.3,45.2-45.2c0-8.6-2.4-16.6-6.5-23.4l0,0L45.6,68.2L24.7,47.3"/>
</svg>
</div>
</li>
</ul>
</div>
</div>
// jQuery v3.3.1 is supported
<script src="https://100dayscss.com/codepen/js/jquery.min.js"></script>
@import url('https://fonts.googleapis.com/css?family=Fredericka+the+Great|Zilla+Slab:300,400');
$white: #fff;
$main-color: #643A7A;
body {
background: #201C29;
}
.frame {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
border-radius: 2px;
box-shadow: .5rem .5rem 1rem rgba(0, 0, 0, 0.6);
background: $main-color;
color: #497081;
font-family: 'zilla slab', serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: .9rem;
}
.list {
position: absolute;
width: 240px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: $white;
box-shadow: 1rem 1rem .5rem rgba(0, 0, 0, 0.15);
border-radius: 3px;
}
.list .head {
padding: 20px 0;
margin: 0 30px;
border-bottom: 1px solid rgba(100, 58, 122, .5);
}
.list .title {
font-family: 'fredericka the great', cursive;
font-weight: 500;
text-align: center;
font-size: 2.5rem;
color: rgba(100, 58, 122, .8);
}
.list .subtitle {
font-size: .9rem;
text-align: center;
letter-spacing: .5px;
}
.list ul {
list-style: none;
padding: 4px 0;
margin: 0 30px;
font-weight: 300;
}
.list ul li {
position: relative;
display: block;
margin: 24px 0;
height: 14px;
}
.list ul .text {
float: left;
font-size: 1rem;
cursor: pointer;
transition: all .3s ease-in-out;
}
ul li:nth-of-type(2) {
animation: slide-up 1s;
}
ul li:nth-of-type(3) {
animation: slide-up 1.5s;
}
ul li:nth-of-type(4) {
animation: slide-up 2s;
}
@keyframes slide-up {
0% {
opacity: 0;
transform: translateY(5rem);
}
}
.list ul .button {
position: relative;
z-index: 2;
box-sizing: border-box;
float: right;
width: 20px;
height: 20px;
border: 1px solid fade-out($main-color, .5);
border-radius: 50%;
cursor: pointer;
}
.list ul .checkmark {
position: absolute;
stroke: rgba(100, 58, 122, .5);
fill: none;
stroke-dashoffset: 340;
stroke-dasharray: 360;
}
.list ul input {
display: none;
}
ul li .wrapper {
position: absolute;
width: 20px;
right: 0;
}
.list ul input:checked ~ {
.text {
color: rgba(100, 58, 122, .5);
}
.wrapper .checkmark {
animation: dash .5s ease-out forwards;
opacity: 1;
}
.button {
opacity: 0;
}
}
.checkmark {
display: block;
stroke-width: 8;
opacity: 0;
}
@keyframes dash {
0% {
stroke-dashoffset: 340;
}
100% {
stroke-dashoffset: 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment