Scribd
Upload
5 views3 pages

Todolist Css

The document contains CSS styles for a web application, focusing on layout and design elements such as headings, body background, and various button styles. It includes styles for a todo list interface, with specific classes for input fields, edit and delete buttons, and task containers. The styles emphasize a user-friendly and visually appealing interface with responsive design elements.

Uploaded by

kashif m
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
5 views3 pages

Todolist Css

The document contains CSS styles for a web application, focusing on layout and design elements such as headings, body background, and various button styles. It includes styles for a todo list interface, with specific classes for input fields, edit and delete buttons, and task containers. The styles emphasize a user-friendly and visually appealing interface with responsive design elements.

Uploaded by

kashif m
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/ 3

.

heading {
display: flex;
align-items: center;
justify-content: center;
margin-top: 3rem;

body {
background-color: rgb(89, 89, 215);
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans
Unicode', Geneva, Verdana, sans-serif;

.TodoListitemsContainer {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: aqua;
width: 30%;
border-radius: 7px;
margin: auto;
padding: 11px;
margin-top: 80px;

.input {
padding: 7px 5px;
margin: 5px;
font-size: 20px;
position: relative;
left: -25%;
border-radius: 7px;
/* width: 100%;
height: 100%; */
display: flex;

background-color: #fff;
}

.edit {
background-color: rgb(80, 80, 230);
padding: 2px 5px;
border-radius: 5px;
cursor: pointer;
font-size: 15px;
position: relative;
right:-13.5em;
top: -3em;
font-weight: bold;
padding: 10px 20px;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.5s ease;
}
.edit:hover{
background-color: blue;
}
.delete {
background-color: rgb(226, 80, 80);
padding: 10px 10px;
cursor: pointer;
position: relative;

border-radius: 5px;
font-size: 15px;
position: relative;
right:-13.9em;
top:-3em;
font-weight: bold;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.5s ease;
}
.delete:hover{
background-color: red;
}

.inputText{

margin: 10px;
position: relative;
left: -45px;
padding: 5px 10px;
border-radius: 7px;
font-size:25px;
border: 2px solid rgb(205, 4, 246);
width: 70%;
}

.addTask{

background-color: #19ab06fd;
font-size: 13px;
position: relative;
left:12em;
top:-53px;
font-weight: bold;
padding: 15px 15px;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;

.task-add{
position: relative;
/* left: 30%; */
background-color: black;
font-size: 50px;
}
.heading1{
font-size: 25px;
border-bottom: 5px solid white;
margin-bottom: 20px;
width: 100%;
}
/* .container{
font-family: Arial, Helvetica, sans-serif;
text-align: center;
border-radius: 10px;
width: 30%;
height: 70vh;
margin: auto;
padding: 11px;
background-color: rgb(255, 255, 255);
color: rgb(5, 5, 5);
text-align: center;
margin-top: 44px;
} */

You might also like