HTML/CSS - download. Online Editor and JavaScript Compiler

html

<!doctype html>
<html lang="en"> 
 <head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>Movie Downloads</title> <!-- Add your stylesheets and scripts here --> 
 </head> 
 <body> <!-- Header section --> 
  <header> 
   <h1>WillBoX moives</h1> <!-- Navigation links can be added here --> 
  </header> <!-- Search bar --> 
  <section> 
   <form action="#" method="get"> <label for="search">Search Movies:</label> 
    <input type="text" id="search" name="search" placeholder="Search..."> <button type="submit">Search</button> 
   </form> 
  </section> <!-- Featured Movies section --> 
  <section> 
   <h2>Featured Movies</h2> <!-- Add movie thumbnails with details and download options --> <!-- Example: --> 
   <div class="movie"> 
    <img src="movie1.jpg" alt="Movie 1"> 
    <h3>Movie 1</h3> 
    <p>Summary of Movie 1. Lorem ipsum dolor sit amet...</p> 
    <p>Rating: 4.5/5 | Released: 2023</p> <a href="#" class="download-btn">Download</a> 
   </div> <!-- Repeat the above structure for additional featured movies --> 
  </section> <!-- Categories section --> 
  <section> 
   <h2>Tell us your favourite movie</h2> <!-- Add category links --> <!-- Example: --> 
   <form> <label for="tab1">Movie Options</label> <select name="Movies" id="tab1"> <option value="Action">Action</option> <option value="Drama">Drama</option> <option value="Comedy">Comedy</option> <!-- Add more categories --> </select> 

css

{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    height: 100%;
}
body {
    display: flex;
    flex-direction: column;
    color: rgb(255,2555,255);
    background-color: #1b1b32;
    font-family:"Monospace";
}
header{
    color: rgb(0,0,0);
    padding: 5px 5px;
    font-family:"Monaco";
    font-size: 15px;
    font-style:Italic;
    text-transform: lowercase;
    text-align:center;
    border-box:10px;
}

BROWSER

Console