console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TODO-LIST</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form>
<fieldset class="todo-list">
<legend class="todo-title">~Reading List~</legend>
<label class="todo-content">
<input type="checkbox">
<i class="check"></i>
<span>Introduction to Christian</span>
</label>
<label class="todo-content">
<input type="checkbox">
<i class="check"></i>
<span>Introduction to Orthdox</span>
</label>
<label class="todo-content">
<input type="checkbox">
<i class="check"></i>
<span>Idk what 2 write</span>
</label>
</fieldset>
</form>
</body>
</html>
*{
padding: 0;
margin: 0;
}
body{
background-color: #c0dfd9;
}
html, body{
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.todo-list{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
border:1px solid #b3c3bf;
width:250px;
height: 250px;
margin:0 auto;
}
.todo-list:hover{
box-shadow:10px 10px 25px #b3c3bf;
}
.todo-content, .todo-title{
color:#58564e;
}
.todo-content input[type="checkbox"]{
opacity: 0;
}
.todo-content input[type="checkbox"]+.check{
position: absolute;
left:667px;
width: 10px;
height: 10px;
border: 2px solid #58564e;
transition: 0.2s;
}
.todo-content input[type="checkbox"]:checked+.check{
height: 5px;
border-top: transparent;
border-right: transparent;
-webkit-transform: rotate(-45deg);
}
.todo-content input[type="checkbox"]:checked~span{
color:#879e98;
text-decoration: line-through;
}