-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Refactor HTML structure and fix indentation
- Loading branch information
1 parent
d9834fd
commit cd33abb
Showing
1 changed file
with
88 additions
and
57 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,73 +1,104 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
|
|
||
| <!-- Primary Meta Tags --> | ||
| <title>Tvflix</title> | ||
| <meta name="title" content="Tvflix" /> | ||
| <meta name="description" content="Tvflix is a popular movie app made by codewithsadee." /> | ||
| <meta name="keywords" content="Tvflix, movie, app, popular" /> | ||
| <meta name="author" content="codewithsadee" /> | ||
| <!-- Primary Meta Tags --> | ||
| <title>Tvflix</title> | ||
| <meta name="title" content="Tvflix" /> | ||
| <meta | ||
| name="description" | ||
| content="Tvflix is a popular movie app made by codewithsadee." /> | ||
| <meta name="keywords" content="Tvflix, movie, app, popular" /> | ||
| <meta name="author" content="codewithsadee" /> | ||
|
|
||
| <!-- Favicon --> | ||
| <link rel="shortcut icon" href="/favicon.svg" type="image/svg+xml" /> | ||
| <!-- Favicon --> | ||
| <link rel="icon" href="/favicon.svg" type="image/svg+xml" /> | ||
|
|
||
| <!-- Google Fonts --> | ||
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | ||
| <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=swap" rel="stylesheet" /> | ||
| <!-- Google Fonts --> | ||
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | ||
| <link | ||
| href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=swap" | ||
| rel="stylesheet" /> | ||
|
|
||
| <!-- Custom CSS Link --> | ||
| <link rel="stylesheet" href="./assets/css/style.css" /> | ||
| <!-- Custom CSS Link --> | ||
| <link rel="stylesheet" href="./assets/css/style.css" /> | ||
|
|
||
| <!-- Custom JS Link --> | ||
| <script src="./assets/js/global.js" defer></script> | ||
| <script src="./assets/js/index.js" type="module"></script> | ||
| </head> | ||
| <!-- Custom JS Link --> | ||
| <script src="./assets/js/global.js" defer></script> | ||
| <script src="./assets/js/index.js" type="module"></script> | ||
| </head> | ||
|
|
||
| <body> | ||
| <!-- HEADER --> | ||
| <header class="header"> | ||
| <a href="./index.html" class="logo"> | ||
| <img src="./assets/images/logo.svg" width="140" height="32" alt="Tvflix home" /> | ||
| </a> | ||
| <body> | ||
| <!-- HEADER --> | ||
| <header class="header"> | ||
| <a href="./index.html" class="logo"> | ||
| <img | ||
| src="./assets/images/logo.svg" | ||
| width="140" | ||
| height="32" | ||
| alt="Tvflix home" /> | ||
| </a> | ||
|
|
||
| <div class="search-box" search-box> | ||
| <div class="search-wrapper" search-wrapper> | ||
| <input | ||
| type="text" | ||
| name="search" | ||
| aria-label="search movies" | ||
| placeholder="Search any movies ..." | ||
| class="search-field" | ||
| autocomplete="off" | ||
| search-field /> | ||
| <div class="search-box" search-box> | ||
| <div class="search-wrapper" search-wrapper> | ||
| <input | ||
| type="text" | ||
| name="search" | ||
| aria-label="search movies" | ||
| placeholder="Search any movies ..." | ||
| class="search-field" | ||
| autocomplete="off" | ||
| search-field /> | ||
|
|
||
| <img src="./assets/images/search.png" width="24" height="24" alt="search" class="leading-icon" /> | ||
| </div> | ||
| <img | ||
| src="./assets/images/search.png" | ||
| width="24" | ||
| height="24" | ||
| alt="search" | ||
| class="leading-icon" /> | ||
| </div> | ||
|
|
||
| <button class="search-btn" search-toggler> | ||
| <img src="./assets/images/close.png" width="24" height="24" alt="close search box" /> | ||
| </button> | ||
| </div> | ||
| <button class="search-btn" search-toggler> | ||
| <img | ||
| src="./assets/images/close.png" | ||
| width="24" | ||
| height="24" | ||
| alt="close search box" /> | ||
| </button> | ||
| </div> | ||
|
|
||
| <button class="search-btn" search-toggler menu-close> | ||
| <img src="./assets/images/search.png" width="24" height="24" alt="open search box" /> | ||
| </button> | ||
| <button class="search-btn" search-toggler menu-close> | ||
| <img | ||
| src="./assets/images/search.png" | ||
| width="24" | ||
| height="24" | ||
| alt="open search box" /> | ||
| </button> | ||
|
|
||
| <button class="menu-btn" menu-btn menu-toggler> | ||
| <img src="./assets/images/menu.png" width="24" height="24" alt="open menu" class="menu" /> | ||
| <button class="menu-btn" menu-btn menu-toggler> | ||
| <img | ||
| src="./assets/images/menu.png" | ||
| width="24" | ||
| height="24" | ||
| alt="open menu" | ||
| class="menu" /> | ||
|
|
||
| <img src="./assets/images/menu-close.png" width="24" height="24" alt="close menu" class="close" /> | ||
| </button> | ||
| </header> | ||
| <img | ||
| src="./assets/images/menu-close.png" | ||
| width="24" | ||
| height="24" | ||
| alt="close menu" | ||
| class="close" /> | ||
| </button> | ||
| </header> | ||
|
|
||
| <main> | ||
| <nav class="sidebar" sidebar></nav> | ||
| <div class="overlay" overlay menu-toggeler></div> | ||
| <article class="container" page-content></article> | ||
| </main> | ||
| </body> | ||
| <main> | ||
| <nav class="sidebar" sidebar></nav> | ||
| <div class="overlay" overlay menu-toggeler></div> | ||
| <article class="container" page-content></article> | ||
| </main> | ||
| </body> | ||
| </html> |