HTML/CSS - Anime site Online Editor and JavaScript Compiler

html

<!DOCTYPE html>
<!--This is to replicate a website to watch anime-->
<!--Will include image slider to show different shows in each category-->
<!--A search bar in nav, place to sign up which is button with pic-->
<html>
 <head>
  <title>Anime Site to watch anime</title>
  <head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
</head>
 </head>
 <body>
 
 <input type = "checkbox" id = "check">
 <label for = "check">
  <i class = "fas fa-bars" id = "btn"></i>
  <i class = "fas fa-times" id = "cancel"></i>
 </label>
</div>
  <div class = "sidebar">
   <header>AniManga</header>
  <ul>
   <li><a href = "#"><i class = "fas fa-home">Home</i></a></li>
   <li><a href = "#"><i class = "fas fa-book">Genre</i></a></li>
   <li><a href = "#"><i class = "fas fa-compass">Country</i></a></li>
   <li><a href = "#"><i class = "fas fa-laptop">Tv shows</i></a></li>
   <li><a href = "#"><i class = "fas fa-film">Movies</i></a></li>
   <li><a href = "#"><i class = "fas fa-shopping-bag">App store</i></a></li>

css

*{
 padding: 0px;
 margin: 0px;
 list-style: none;
 text-decoration: none;
 }
.sidebar {
 position: fixed; 
 width: 250px;
 height: 100%;
 left: -250px;
 background-color: gray;
 transition: all .5s ease;
 }
.sidebar header{
 font-size: 22px;
 color: white;
 text-align: center;
 line-height: 70px;
 background-color: black;
 user-select: none;
 }
.sidebar ul a {
 display: block;
 height: 100%;
 width: 100%;
 line-height: 65px;
 font-size: 20px;

BROWSER

Console