Scribd
Upload
10 views

css

Uploaded by

Balwant Birajdar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
10 views

css

Uploaded by

Balwant Birajdar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

/* section {

width: 100%;
margin-top: 10rem;
display: flex;
justify-content: center;
} */

.todo-container {
align-items: center;
display: flex;
flex-direction: column;
min-height: 100vh;
padding-top: 3%;
background-image: linear-gradient(100deg, #001214, #001f29);
color: white;
transition: 0.3s linear;
overflow: hidden;
}

.header,
.form,
.datetime {
margin: 0 1rem;
min-height: 10vh;
width: 100%;
}

.header {
align-items: center;
display: flex;
flex-direction: column;
justify-content: space-around;
font-size: 3rem;
min-height: 25vh;
width: 100%;
}

section h1 {
color: #fff;
font-size: 4.8rem;
text-align: center;
}

.date-time {
font-size: 2.4rem;
text-align: center;
}

form {
display: flex;
font-size: 1.7rem;
justify-content: center;
margin: 15px 0;
padding: 0.8rem;
width: 100%;
}

form input {
padding: 10px;
font-size: 1.8rem;
letter-spacing: 0.1rem;
border: none;
outline: none;
/* border-radius: 15; */
border-top-left-radius: 17px;
border-bottom-left-radius: 17px;
max-width: 500px;
transition: background-color 200ms ease-in-out;
width: 100%;
background-color: #f2f3f4;
color: var(--primary-color);
}

form input:hover {
cursor: text;
}

form input::placeholder {
color: white;
opacity: 0.7;
}

button {
border: none;
outline: none;
transition: box-shadow 200ms ease, background-color 200ms ease-in-out;
background-color: #2c3e50;
color: rgb(0, 0, 0);
}

form button:hover {
cursor: pointer;
background-color: #f1c40f;
}

form button {
padding: 10.8px;
font-size: 17px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
min-width: 100px;
background-color: #5dade2;
color: var(--secondary-color);
}

span {
margin-right: 3.2rem;
}

.myUnOrdList {
display: flex;
justify-content: center;
align-items: center;
max-width: 1200px;
}

.todo-list {
min-width: 25%;
/* To remove the bullets of unordered list */
list-style: none;
}

.todo-item {
margin: 2.4rem;
/*word-wrap: break-word;
*/ /*flex-wrap: wrap;
*/
font-size: 20px;
color: #1c2833;
border-radius: 30px;
transition: background-color 200ms ease-in-out;
background-color: #f2f3f4;
min-width: 35rem;
max-width: 40rem;
padding: 1.6rem 3rem;
display: grid;
grid-template-columns: 1fr 0.3fr 0.3fr;
justify-content: start;
gap: 1.6rem;
/*align-items: center;
*/ /*wrapsthelinks*/
overflow-wrap: anywhere;
}

li span {
max-width: 20rem;
color: #1c2833;
}

.check-btn,
.delete-btn {
font-size: 3rem;
cursor: pointer;
width: 3rem;
height: 3rem;
border-radius: 80%;
margin: 0 5px;
background-color: #fff;
color: rgb(0, 0, 0);
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.check-btn {
color: #fff;
background-color: #2ecc71;
}

.delete-btn {
color: #fff;
background-color: #e74c3c;
}

.checkList {
text-decoration: line-through;
}
.notCheckList {
text-decoration: none;
}

.clear-btn {
background-color: #e74c3c;
font-size: 1.6rem;
padding: 1rem 2.2rem;
border-radius: 0.3rem;
-webkit-border-radius: 0.3rem;
-moz-border-radius: 0.3rem;
-ms-border-radius: 0.3rem;
-o-border-radius: 0.3rem;
}

.clear-btn:hover {
background-color: #8d1407;
}

You might also like