Skip to content

Commit 1592cbe

Browse files
Parv-gugnaniParv-gugnani
committed
fix
1 parent 86d3d54 commit 1592cbe

File tree

4 files changed

+100
-36
lines changed

4 files changed

+100
-36
lines changed

‎Youtube Clone/index.html‎

Lines changed: 30 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -15,35 +15,39 @@
1515
<div class="main">
1616
<h1>Youtube</h1>
1717
</div>
18-
19-
<!-- top head -->
20-
<nav class="navbar">
21-
<div class="logo">Youtube</div>
22-
<div class="search-bar">
23-
<input type="text" placeholder="Search" />
24-
<button type="button">
25-
<i id="icon" class="bi bi-search"></i>
26-
</button>
18+
<body>
19+
<!-- top head -->
20+
<nav class="navbar">
21+
<div href="#" class="logo">
22+
<img src="yt.svg" class="ytlogo" alt="YouTube Logo">
23+
Youtube
24+
</div>
25+
<div class="search-bar">
26+
<input type="text" placeholder="Search" />
27+
<button type="button">
28+
<i id="icon" class="bi bi-search"></i>
29+
</button>
30+
</div>
31+
32+
<!-- right acccount at header -->
33+
<div class="account">
34+
<img src="img.jpg"/>
35+
</div>
36+
</nav>
37+
<!-- end header -->
38+
39+
<!-- side -->
40+
<div class="sidebar">
41+
<a href="#">Home</a>
42+
<a href="#">Trending</a>
43+
<a href="#">Subscriptions</a>
2744
</div>
28-
29-
<!-- right acccount at header -->
30-
<div class="account">
31-
<img src="img.jpg" alt="" />
45+
<div class="content">
46+
<!-- Your main content goes here -->
47+
<h1>Main Content</h1>
48+
<p>This is the main content of the page.</p>
3249
</div>
33-
</nav>
34-
<!-- end header -->
3550

36-
<!-- side -->
37-
<div class="sidebar">
38-
<a href="#">Home</a>
39-
<a href="#">Trending</a>
40-
<a href="#">Subscriptions</a>
41-
</div>
42-
<div class="content">
43-
<!-- Your main content goes here -->
44-
<h1>Main Content</h1>
45-
<p>This is the main content of the page.</p>
46-
</div>
4751

4852
<script src="script.js"></script>
4953
</body>

‎Youtube Clone/script.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
document.addEventListener("DOMContentLoaded", function () {
2+
const body = document.body;
3+
const sidebar = document.querySelector(".sidebar");
4+
5+
function toggleSidebar() {
6+
body.classList.toggle("collapsed");
7+
}
8+
document
9+
.querySelector(".toggle-button")
10+
.addEventListener("click", function () {
11+
toggleSidebar();
12+
});
13+
sidebar.querySelectorAll("a").forEach(function (link) {
14+
link.addEventListener("click", function () {
15+
if (body.classList.contains("collapsed")) {
16+
toggleSidebar();
17+
}
18+
});
19+
});
20+
});

‎Youtube Clone/style.css‎

Lines changed: 39 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,12 @@
77
body {
88
height: 100%;
99
margin: 0;
10-
font: Roboto;
10+
font-family: Roboto, Arial, sans-serif;
1111
background-color: #0f0f0f;
12-
}
1312

14-
.bg-zinc-950 {
15-
background-color: #2b2b2b;
1613
}
1714

15+
1816
.dark-bg-white {
1917
background-color: #fff;
2018
color: #000;
@@ -41,7 +39,6 @@ body {
4139
justify-content: space-between;
4240
align-items: center;
4341
z-index: 1000;
44-
/* Ensure the navbar stays on top */
4542
color: white;
4643
}
4744

@@ -52,12 +49,14 @@ body {
5249
}
5350

5451
.search-bar {
52+
margin-right: 60px;
5553
display: flex;
5654
align-items: center;
5755
}
5856

5957
.search-bar input {
6058
padding: 8px;
59+
width: 250px;
6160
border: none;
6261
border-radius: 16px 2px 2px 16px;
6362
font-size: 14px;
@@ -67,6 +66,10 @@ body {
6766
outline: none;
6867
}
6968

69+
.search-bar input:focus {
70+
outline: 0.5px solid rgba(0, 162, 255, 0.247);
71+
}
72+
7073
.search-bar button {
7174
padding: 8px 14px;
7275
background-color: hsl(0, 0%, 18.82%);
@@ -97,11 +100,13 @@ body {
97100
border-radius: 50%;
98101
}
99102

103+
104+
/* sidebar */
100105
.sidebar {
101106
height: 100vh;
102-
width: 250px;
107+
width: 200px;
103108
background-color: #0f0f0f;
104-
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
109+
box-shadow: 3px -2px 10px rgba(0, 0, 0, 0.1);
105110
color: white;
106111
position: fixed;
107112
left: 0;
@@ -120,12 +125,36 @@ body {
120125
}
121126

122127
.sidebar a:hover {
123-
background-color: hsl(0, 0%, 18.82%) 0;
128+
background-color: #161616;
124129
}
125130

126131
.content {
127-
margin-left: 250px;
128-
margin-top: 60px;
132+
margin-left: 200px;
133+
margin-top: 30px;
129134
padding: 20px;
130135
z-index: 1;
136+
color: #fff;
137+
}
138+
139+
140+
141+
body.collapsed .sidebar {
142+
left: -200px;
143+
}
144+
145+
body.opened .content {
146+
margin-left: 200px;
147+
}
148+
149+
150+
.logo {
151+
display: flex;
152+
align-items: bottom;
153+
}
154+
155+
.ytlogo {
156+
width: 30px;
157+
height: 30px;
158+
margin-right: 3px;
159+
margin-top: 2.5px;
131160
}

‎Youtube Clone/yt.svg‎

Lines changed: 11 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)