A Pen by SaFou SaRah on CodePen.
Created
January 15, 2020 00:09
-
-
Save CodeMyUI/454d9f8625eddd12d52fcf2f97fb132e to your computer and use it in GitHub Desktop.
CSS3 To-Do List
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="tasks"> | |
<!-- title --> | |
<h1>CSS3 To-Do List</h1> | |
<!-- task 1 --> | |
<input id='label-1' type='checkbox' checked/> | |
<label for='label-1'> | |
<h2>Eat My Breakfast | |
<span>oatmeal, fruits & morning tea</span> | |
</h2> | |
</label> | |
<!-- task 2 --> | |
<input id='label-2' type='checkbox' checked/> | |
<label for='label-2'> | |
<h2>e-mail processing | |
<span>art&&code, personal</span> | |
</h2> | |
</label> | |
<!-- task 3 --> | |
<input id='label-3' type='checkbox'/> | |
<label for='label-3'> | |
<h2>Meditation | |
<span>out of my mind</span> | |
</h2> | |
</label> | |
<!-- task 4 --> | |
<input id='label-4' type='checkbox'/> | |
<label for='label-4'> | |
<h2>Code, Code, Code | |
<span>hit f12 & let's get wasted</span> | |
</h2> | |
</label> | |
<!-- task 5 --> | |
<input id='label-5' type='checkbox'/> | |
<label for='label-5'> | |
<h2>Watch Screencast | |
<span>Ruby on Rails, yeah!</span> | |
</h2> | |
</label> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* tiny reset */ | |
html, body { | |
margin: 0; | |
padding: 0; | |
border: 0; | |
font-size: 100%; | |
} | |
/* body */ | |
body{ | |
background: #4d244e; | |
font-family: sans-serif; | |
border-top: 5px solid #aa8e8d; | |
} | |
/* title */ | |
h1{ | |
color: #aa8e8d; | |
text-align: center; | |
font-size: 32px; | |
font-weight: 900; | |
} | |
/* tasks */ | |
.tasks{ | |
width: 300px; | |
height: 405px; | |
position: absolute; | |
top: 20%; | |
left: 0px; | |
right: 0px; | |
margin: 0px auto; | |
} | |
input[type=checkbox] { | |
display: none; | |
} | |
label{ | |
background: #ae5f75; | |
height: 69px; | |
width: 100%; | |
display: block; | |
border-bottom: 1px solid #2C3E50; | |
color: #fff; | |
text-transform: capitalize; | |
font-weight: 900; | |
font-size: 11px; | |
letter-spacing: 1px; | |
text-indent: 20px; | |
cursor: pointer; | |
transition: all 0.7s ease; | |
position: relative; | |
padding: 5px; | |
box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
-webkit-box-sizing: border-box; | |
} | |
label h2 span{ | |
display: block; | |
font-size: 12px; | |
text-transform: capitalize; | |
font-weight: normal; | |
color: #fff; | |
} | |
label:before{ | |
content:""; | |
width: 20px; | |
height: 20px; | |
background: #fff; | |
display: block; | |
position: absolute; | |
border-radius: 100%; | |
right: 20px; | |
top: 30%; | |
transition: border 0.7s ease | |
} | |
#label-1:checked ~ label[for=label-1], | |
#label-2:checked ~ label[for=label-2], | |
#label-3:checked ~ label[for=label-3], | |
#label-4:checked ~ label[for=label-4], | |
#label-5:checked ~ label[for=label-5]{ | |
background: #6d335c; | |
border-bottom: 1px solid #34495E; | |
color: #d37b79; | |
} | |
#label-1:checked ~ label[for=label-1] h2 span, | |
#label-2:checked ~ label[for=label-2] h2 span, | |
#label-3:checked ~ label[for=label-3] h2 span, | |
#label-4:checked ~ label[for=label-4] h2 span, | |
#label-5:checked ~ label[for=label-5] h2 span{ | |
color: #f6bd66; | |
} | |
#label-1:checked ~ label[for=label-1]:before, | |
#label-2:checked ~ label[for=label-2]:before, | |
#label-3:checked ~ label[for=label-3]:before, | |
#label-4:checked ~ label[for=label-4]:before, | |
#label-5:checked ~ label[for=label-5]:before{ | |
background: url("https://i.imgur.com/eoPQ05r.png") no-repeat center center; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment