-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
aac646e
commit 34fac01
Showing
14 changed files
with
252 additions
and
0 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 |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| nav .searchHolder{ | ||
| display: block; | ||
| } | ||
| #search { | ||
| padding: 10px 30px; | ||
| border-radius: 20px 0px 0px 20px; | ||
| border: 1px solid #9f9f9f; | ||
| font-size: 16px; | ||
| width: 250px; | ||
| outline: none; | ||
| } |
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 |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
|
|
||
| body { | ||
| background-color: white; | ||
| color: black; | ||
| /* margin: 5px; */ | ||
| } | ||
|
|
||
| nav { | ||
| height: 60px; | ||
| border: 2px solid black; | ||
| background-color: white; | ||
| justify-content: space-between; | ||
| padding: 0px 20px; | ||
| position: sticky; | ||
| top: 0; | ||
| } | ||
|
|
||
| .left { | ||
| height: 100vh; | ||
| width: 20vw; | ||
| border: 2px solid black; | ||
| } | ||
|
|
||
| .right { | ||
| height: 100vh; | ||
| width: 80vw; | ||
| border: 2px solid black; | ||
| } | ||
|
|
||
| #hero { | ||
| border: 2px solid red; | ||
| } | ||
|
|
||
| .logo { | ||
| width: 90px; | ||
| } | ||
|
|
||
| .hamburger { | ||
| width: 30px; | ||
| } | ||
|
|
||
| #search { | ||
| padding: 10px 30px; | ||
| border-radius: 20px 0px 0px 20px; | ||
| border: 1px solid #9f9f9f; | ||
| font-size: 16px; | ||
| width: 500px; | ||
| outline: none; | ||
| } | ||
| #search:focus{ | ||
| border-color: blue; | ||
| } | ||
| .micsvg { | ||
| border-radius: 50%; | ||
| background-color: #f2f2f2; | ||
| border: 1px solid #9f9f9f; | ||
| padding: 7px; | ||
| } | ||
|
|
||
| .searchsvg{ | ||
| border: 0.5px solid #9f9f9f; | ||
| background-color: #f2f2f2; | ||
| border-radius: 0px 20px 20px 0px; | ||
| padding: 7.2px 25px; | ||
| } | ||
| /* | ||
| .searchContainer::after { | ||
| content: url('search.svg'); | ||
| content-visibility: visible; | ||
| border: 0.5px solid #9f9f9f; | ||
| background-color: #f2f2f2; | ||
| border-radius: 0px 20px 20px 0px; | ||
| padding: 7px 30px; | ||
| position: absolute; | ||
| right: 0px; | ||
| } */ | ||
| .searchsvg1{ | ||
| display: none; | ||
| } | ||
| @media screen and (max-width:767px) { | ||
| nav .searchHolder,.createsvg,.micsvg{ | ||
| display: none; | ||
| } | ||
| .left{ | ||
| display: none;; | ||
| } | ||
| .right{ | ||
| width: 100%; | ||
| } | ||
| .searchsvg1{ | ||
| display: block; | ||
| } | ||
|
|
||
| } |
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 |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| .flex{ | ||
| display: flex; | ||
| } | ||
| .gap1{ | ||
| gap: 7px; | ||
| } | ||
| .justifyContent{ | ||
| justify-content: center; | ||
| } | ||
| .alignItems{ | ||
| align-items: center; | ||
| } | ||
| .p1{ | ||
| padding: 7px; | ||
| } | ||
| .gap2{ | ||
| gap: 15px; | ||
| } | ||
| .gap3{ | ||
| gap: 25px; | ||
| } | ||
| .div1,.div3{ | ||
| display: none; | ||
| } |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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 |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>YouTube</title> | ||
| <link rel="stylesheet" href="css/style.css"> | ||
| <link rel="stylesheet" href="css/utility.css"> | ||
| <link rel="shortcut icon" href="https://www.youtube.com/s/desktop/5bb413e3/img/favicon_48x48.png" type="image/x-icon"> | ||
| </head> | ||
| <body> | ||
| <nav class="flex gap3 alignItems"> | ||
| <div class="flex gap2 alignItems"> | ||
| <img src="img/hamburger.svg" alt="" class="hamburger"> | ||
| <img src="img/logo.svg" alt="" class="logo"> | ||
| </div> | ||
| <div class="flex alignItems gap3 searchHolder"> | ||
| <span class="flex alignItems searchContainer"> | ||
| <input type="search" name="search" id="search" placeholder="Search"> | ||
| <img src="img/search.svg" alt="" title="Search" class="searchsvg"> | ||
| </span> | ||
| <img src="img/mic.svg" alt="" class="micsvg"> | ||
| </div> | ||
| <div class="icons flex alignItems gap3"> | ||
| <img src="img/create.svg" alt="" class="createsvg"> | ||
| <img src="img/bell.svg" alt=""> | ||
| <img src="img/account.svg" alt=""> | ||
| <img src="img/search.svg" alt="" class="searchsvg1"> | ||
| </div> | ||
| </nav> | ||
| <main id="hero" class="flex p1 gap1"> | ||
| <section class="left"> | ||
|
|
||
| </section> | ||
| <section class="right"> | ||
|
|
||
| </section> | ||
| </main> | ||
|
|
||
| <script src="js/script.js"></script> | ||
| </body> | ||
| </html> |
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 |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| let searchsvg1 = document.querySelector(".searchsvg1"); | ||
|
|
||
| searchsvg1.addEventListener("click", (event) => { | ||
| event.preventDefault(); | ||
| window.location.href = "search.html"; | ||
| }); |
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 |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| console.log('Search window is opened '); |
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 |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>YouTube</title> | ||
| <link rel="stylesheet" href="css/style.css"> | ||
| <link rel="stylesheet" href="css/utility.css"> | ||
| <link rel="stylesheet" href="css/search.css"> | ||
| <link rel="shortcut icon" href="https://www.youtube.com/s/desktop/5bb413e3/img/favicon_48x48.png" type="image/x-icon"> | ||
| </head> | ||
| <body> | ||
| <nav class="flex gap3 alignItems"> | ||
| <div class="flex gap2 alignItems div1"> | ||
| <img src="img/hamburger.svg" alt="" class="hamburger"> | ||
| <img src="img/logo.svg" alt="" class="logo"> | ||
| </div> | ||
| <div class="flex alignItems gap3 searchHolder"> | ||
| <span class="flex alignItems searchContainer"> | ||
| <input type="search" name="search" id="search" placeholder="Search"> | ||
| <img src="img/search.svg" alt="" title="Search" class="searchsvg"> | ||
| </span> | ||
| <img src="img/mic.svg" alt="" class="micsvg"> | ||
| </div> | ||
| <div class="icons flex alignItems gap3 div3"> | ||
| <img src="img/create.svg" alt="" class="createsvg"> | ||
| <img src="img/bell.svg" alt=""> | ||
| <img src="img/account.svg" alt=""> | ||
| <img src="img/search.svg" alt="" class="searchsvg1"> | ||
| </div> | ||
| </nav> | ||
|
|
||
| <script src="js/search.js"></script> | ||
| </body> | ||
| </html> |