I've tried my best to fuse my input button and the icon I got from the net together.... And also put it together with my input text tag as well...
If you look closely at the images below,the button on my page is the orange box between the icon and the input text.
Plus it's refusing to hover
Please, can someone check to see what I'm doing wrong and offer some help
<!DOCTYPE html>
<html>
<head>
<title> TO DO LIST</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="Project.css">
</head>
<body>
<header>
<h1>Ak's To Do List</h1>
</header>
<form>
<input type="text" class="todo-input">
<button class="todo-button" type="submit"></button>
<i class="fas fa-plus-square"></i>
</form>
<div class="todo-container">
<ul class="todo-list">
<div class="todo"></ul>
</div>
<script type="text/javascript" src="Project.js"></script>
</body>
</html>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-image: linear-gradient(120deg, #f6d365, #fda085);
color: white;
font-family: "Indie Flower", sans-serif;
min-height:100vh;
}
header{
font-size: 1.5rem;
}
header,
form{
min-height:20vh;
display: flex;
justify-content: center;
align-items: center;
}
form input,
form button{
padding: 0.5rem;
font-size:1.5rem;
border:none;
background: white;
}
form button{
color: #fda085;
background: white;
cursor: pointer;
transition: all 0.3s ease;
}
form button{
background: #fda085;
color: white;
}
What I am getting
How it is supposed to be
