Todo List Website using HTML and CSS - HTML and CSS
WHAT IS UI?
User Interface (UI) Design focuses on anticipating what users might need to do and ensuring that the interface has elements that are easy to access, understand, and use to facilitate those actions. UI brings together concepts from interaction design, visual design, and information architecture.
HTML CODE:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="fontawesome-free/css/all.min.css">
<title>Todo List - HTML CSS</title>
</head>
<body>
<div class="box">
<div class="top">
<h2>Todo List</h2>
<button>Logout</button>
</div>
<div class="list">
<div class="inner-list">
<li>1</li>
<i class="fa fa-trash"></i>
</div>
<div class="inner-list">
<li>2</li>
<i class="fa fa-trash"></i>
</div>
<div class="inner-list">
<li>3</li>
<i class="fa fa-trash"></i>
</div>
<div class="inner-list">
<li>4</li>
<i class="fa fa-trash"></i>
</div>
<div class="inner-list">
<li>5</li>
<i class="fa fa-trash"></i>
</div>
<div class="inner-list">
<li>6</li>
<i class="fa fa-trash"></i>
</div>
<div class="inner-list">
<li>7</li>
<i class="fa fa-trash"></i>
</div>
<div class="inner-list">
<li>8</li>
<i class="fa fa-trash"></i>
</div>
<div class="inner-list">
<li>9</li>
<i class="fa fa-trash"></i>
</div>
<div class="inner-list">
<li>10</li>
<i class="fa fa-trash"></i>
</div>
</div>
</div>
</body>
</html>
CSS CODE:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: linear-gradient(#1d004b, #100029);
}
html{
scroll-behavior: smooth;
}
::selection{
background: #100029;
color: #fff;
}
.box{
max-width: 100%;
width: 400px;
background: #fff;
padding: 20px;
box-shadow: 0 0 12px 0 rgba(0,0,0,0.3);
margin: 0 10px;
}
.box .top{
display: flex;
justify-content: space-between;
align-items: center;
}
.box .top h2{
font-size: 1.5rem;
font-family: sans-serif;
font-weight: bolder;
color: #000;
}
.box .top button{
padding: 8px 12px;
background: #100029;
color: #fff;
border: none;
outline: none;
font-weight: bold;
cursor: pointer;
}
.box .list{
margin-top: 20px;
max-height: 300px;
overflow-y: scroll;
}
:is(.list)::-webkit-scrollbar{
width: 5px;
background: #fff;
height: auto;
border-radius: 25px;
}
:is(.list)::-webkit-scrollbar-thumb{
background: #000;
width: 5px;
border-radius: 25px;
}
.box .list .inner-list{
width: 100%;
height: 40px;
background: #eee;
display: flex;
align-items: center;
cursor: pointer;
justify-content: space-between;
overflow: hidden;
margin-top: 10px;
}
.box .list .inner-list li{
list-style: none;
font-size: 20px;
font-family: sans-serif;
font-weight: 800;
margin-left: 15px;
}
.box .list .inner-list i{
background: #ff0000;
width: 40px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 17px;
position: relative;
right: -40px;
transition: 0.3s;
}
.box .list .inner-list:hover i{
position: relative;
right: 0px;
}