Skip to content

Commit 86d3d54

Browse files
Parv-gugnaniParv-gugnani
committed
fix
1 parent 404f297 commit 86d3d54

File tree

6 files changed

+84
-83
lines changed

6 files changed

+84
-83
lines changed

‎Youtube Clone/img.jpg‎

213 KB
Loading

‎Youtube Clone/index.html‎

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,26 +11,38 @@
1111
<title>Youtube</title>
1212
</head>
1313
<body>
14+
<div class="bg-zinc-950 dark:bg-white"></div>
1415
<div class="main">
1516
<h1>Youtube</h1>
1617
</div>
1718

18-
<div class="navbar">
19+
<!-- top head -->
20+
<nav class="navbar">
1921
<div class="logo">Youtube</div>
2022
<div class="search-bar">
2123
<input type="text" placeholder="Search" />
2224
<button type="button">
2325
<i id="icon" class="bi bi-search"></i>
2426
</button>
2527
</div>
26-
<div class="sidebar">
27-
<button id="toggleButton">&#9776;</button>
28-
<div class="links">
29-
<h2>Home</h2>
30-
<h2>Trending</h2>
31-
<h2>Subscriptions</h2>
32-
</div>
28+
29+
<!-- right acccount at header -->
30+
<div class="account">
31+
<img src="img.jpg" alt="" />
3332
</div>
33+
</nav>
34+
<!-- end header -->
35+
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>
3446
</div>
3547

3648
<script src="script.js"></script>

‎Youtube Clone/package-lock.json‎

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎Youtube Clone/package.json‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎Youtube Clone/script.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +0,0 @@
1-
s;

‎Youtube Clone/style.css‎

Lines changed: 64 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,25 @@
1-
html,
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
27
body {
38
height: 100%;
49
margin: 0;
510
font: Roboto;
611
background-color: #0f0f0f;
712
}
813

14+
.bg-zinc-950 {
15+
background-color: #2b2b2b;
16+
}
17+
18+
.dark-bg-white {
19+
background-color: #fff;
20+
color: #000;
21+
}
22+
923
.main {
1024
width: 100%;
1125
height: 100%;
@@ -27,6 +41,7 @@ body {
2741
justify-content: space-between;
2842
align-items: center;
2943
z-index: 1000;
44+
/* Ensure the navbar stays on top */
3045
color: white;
3146
}
3247

@@ -36,29 +51,6 @@ body {
3651
color: white;
3752
}
3853

39-
.links-container {
40-
display: flex;
41-
flex-direction: column;
42-
max-height: 0;
43-
overflow: hidden;
44-
transition: max-height 0.3s ease-out;
45-
}
46-
47-
.links {
48-
display: flex;
49-
flex-direction: column;
50-
color: white;
51-
margin-top: 10px;
52-
/* Adjust the margin as needed */
53-
}
54-
55-
.links a {
56-
margin-bottom: 10px;
57-
/* Adjust the margin as needed */
58-
text-decoration: none;
59-
color: white;
60-
}
61-
6254
.search-bar {
6355
display: flex;
6456
align-items: center;
@@ -67,25 +59,22 @@ body {
6759
.search-bar input {
6860
padding: 8px;
6961
border: none;
70-
border-radius: 4px 0 0 4px;
62+
border-radius: 16px 2px 2px 16px;
7163
font-size: 14px;
72-
flex-grow: 1;
64+
background-color: #0f0f0f;
65+
opacity: 0.8;
66+
color: white;
67+
outline: none;
7368
}
7469

7570
.search-bar button {
7671
padding: 8px 14px;
7772
background-color: hsl(0, 0%, 18.82%);
7873
color: #fff;
7974
border: none;
80-
border-radius: 4px 10px 10px 4px;
75+
border-radius: 2px 16px 16px 2px;
8176
cursor: pointer;
8277
font-size: 14px;
83-
outline: blue;
84-
}
85-
86-
input {
87-
background-color: #0f0f0f;
88-
opacity: 0.8;
8978
outline: none;
9079
}
9180

@@ -94,16 +83,49 @@ input {
9483
height: 7px;
9584
}
9685

97-
input[type="text"] {
98-
color: #ffffff;
86+
.account {
87+
width: 50px;
88+
height: 50px;
89+
border-radius: 50%;
90+
overflow: hidden;
9991
}
10092

101-
/* Toggle button styles */
102-
.toggle-button {
103-
cursor: pointer;
104-
background: none;
105-
border: none;
93+
.account img {
94+
width: 100%;
95+
height: 100%;
96+
object-fit: cover;
97+
border-radius: 50%;
98+
}
99+
100+
.sidebar {
101+
height: 100vh;
102+
width: 250px;
103+
background-color: #0f0f0f;
104+
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
106105
color: white;
107-
font-size: 20px;
108-
margin-right: 20px;
106+
position: fixed;
107+
left: 0;
108+
top: 60px;
109+
overflow-y: auto;
110+
padding-top: 20px;
111+
z-index: 999;
112+
}
113+
114+
.sidebar a {
115+
text-decoration: none;
116+
color: white;
117+
display: block;
118+
padding: 15px;
119+
transition: background-color 0.3s;
120+
}
121+
122+
.sidebar a:hover {
123+
background-color: hsl(0, 0%, 18.82%) 0;
124+
}
125+
126+
.content {
127+
margin-left: 250px;
128+
margin-top: 60px;
129+
padding: 20px;
130+
z-index: 1;
109131
}

0 commit comments

Comments
 (0)