diff --git a/css/search.css b/css/search.css
new file mode 100644
index 0000000..4c23018
--- /dev/null
+++ b/css/search.css
@@ -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;
+}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..2448f25
--- /dev/null
+++ b/css/style.css
@@ -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;
+ }
+
+}
\ No newline at end of file
diff --git a/css/utility.css b/css/utility.css
new file mode 100644
index 0000000..98e478c
--- /dev/null
+++ b/css/utility.css
@@ -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;
+}
diff --git a/img/account.svg b/img/account.svg
new file mode 100644
index 0000000..6172b91
--- /dev/null
+++ b/img/account.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/img/bell.svg b/img/bell.svg
new file mode 100644
index 0000000..f4ab56b
--- /dev/null
+++ b/img/bell.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/img/create.svg b/img/create.svg
new file mode 100644
index 0000000..8e9bde7
--- /dev/null
+++ b/img/create.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/img/hamburger.svg b/img/hamburger.svg
new file mode 100644
index 0000000..d899680
--- /dev/null
+++ b/img/hamburger.svg
@@ -0,0 +1,5 @@
+
\ No newline at end of file
diff --git a/img/logo.svg b/img/logo.svg
new file mode 100644
index 0000000..110ab56
--- /dev/null
+++ b/img/logo.svg
@@ -0,0 +1,19 @@
+
\ No newline at end of file
diff --git a/img/mic.svg b/img/mic.svg
new file mode 100644
index 0000000..4748f52
--- /dev/null
+++ b/img/mic.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/img/search.svg b/img/search.svg
new file mode 100644
index 0000000..62199d0
--- /dev/null
+++ b/img/search.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..43bf7c0
--- /dev/null
+++ b/index.html
@@ -0,0 +1,42 @@
+
+
+
+
+
+ YouTube
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/script.js b/js/script.js
new file mode 100644
index 0000000..d5aab96
--- /dev/null
+++ b/js/script.js
@@ -0,0 +1,6 @@
+let searchsvg1 = document.querySelector(".searchsvg1");
+
+searchsvg1.addEventListener("click", (event) => {
+ event.preventDefault();
+ window.location.href = "search.html";
+});
diff --git a/js/search.js b/js/search.js
new file mode 100644
index 0000000..c039616
--- /dev/null
+++ b/js/search.js
@@ -0,0 +1 @@
+console.log('Search window is opened ');
diff --git a/search.html b/search.html
new file mode 100644
index 0000000..a952776
--- /dev/null
+++ b/search.html
@@ -0,0 +1,35 @@
+
+
+
+
+
+ YouTube
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file