50projects50days/todo-list/style.css

73 lines
1.1 KiB
CSS
Raw Normal View History

2020-11-12 17:06:55 +00:00
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');
* {
box-sizing: border-box;
}
body {
background-color: #f5f5f5;
color: #444;
font-family: 'Poppins', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
h1 {
color: rgb(179, 131, 226);
font-size: 10rem;
text-align: center;
opacity: 0.4;
}
form {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
max-width: 100%;
width: 400px;
}
.input {
border: none;
color: #444;
font-size: 2rem;
padding: 1rem 2rem;
display: block;
width: 100%;
}
.input::placeholder {
color: #d5d5d5;
}
.input:focus {
outline-color: rgb(179, 131, 226);
}
.todos {
background-color: #fff;
padding: 0;
margin: 0;
list-style-type: none;
}
.todos li {
border-top: 1px solid #e5e5e5;
cursor: pointer;
font-size: 1.5rem;
padding: 1rem 2rem;
}
.todos li.completed {
color: #b6b6b6;
text-decoration: line-through;
}
small {
color: #b5b5b5;
margin-top: 3rem;
text-align: center;
}