Skip to content

Commit 68eaa59

Browse files
Parv-gugnaniParv-gugnani
committed
nice
1 parent 50aac40 commit 68eaa59

File tree

2 files changed

+106
-12
lines changed

2 files changed

+106
-12
lines changed

‎Youtube Clone/index.html‎

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,26 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
6+
<link rel="stylesheet" href="style.css" />
77
<title>Youtube</title>
88
</head>
99
<body>
10-
<nav>
11-
<h1 class="">Youtube</h1>
12-
</nav>
13-
<aside>
14-
<h2>Home</h2>
15-
<h2>Shorts</h2>
16-
<h2>Suscription</h2>
17-
<h1>You ></h1>
18-
<h2>Your Channel</h2>
19-
<h2>History</h2>
20-
</aside>
10+
<div class="main">
11+
<h1>Youtube</h1>
12+
</div>
13+
14+
<div class="navbar">
15+
<div class="logo">Youtube</div>
16+
<div class="search-bar">
17+
<input type="text" placeholder="Search" />
18+
<button type="button">Search</button>
19+
</div>
20+
<div class="links">
21+
<a href="#">Home</a>
22+
<a href="#">Trending</a>
23+
<a href="#">Subscriptions</a>
24+
<!-- Add more links as needed -->
25+
</div>
26+
</div>
2127
</body>
2228
</html>

‎Youtube Clone/style.css‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
html,
2+
body {
3+
height: 100%;
4+
margin: 0;
5+
font: Roboto, Arial, sans-serif;
6+
background-color: #0f0f0f;
7+
}
8+
9+
10+
.main {
11+
width: 100%;
12+
height: 100%;
13+
color: white;
14+
display: flex;
15+
justify-content: center;
16+
align-items: center;
17+
}
18+
19+
.main:h1 {
20+
font: white;
21+
}
22+
23+
24+
25+
26+
.navbar {
27+
background-color: #0f0f0f;
28+
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
29+
position: fixed;
30+
top: 0;
31+
left: 0;
32+
width: 100%;
33+
padding: 10px 20px;
34+
display: flex;
35+
justify-content: space-between;
36+
align-items: center;
37+
z-index: 1000;
38+
color: white;
39+
}
40+
41+
.logo {
42+
font-size: 1.5rem;
43+
font-weight: bold;
44+
color: white;
45+
}
46+
47+
.links {
48+
display: flex;
49+
color: white;
50+
}
51+
52+
.links a {
53+
margin-right: 20px;
54+
text-decoration: none;
55+
color: white;
56+
}
57+
58+
59+
.search-bar {
60+
61+
position: relative;
62+
align-items: center;
63+
border-right: none;
64+
border-radius: 40px 0 0 40px;
65+
padding: 0 4px 0 16px;
66+
margin-left: 32px;
67+
flex: 1;
68+
flex-basis: 1e-9px;
69+
display: flexbox;
70+
display: flex;
71+
flex-direction: row;
72+
}
73+
74+
.search-bar input {
75+
padding: 8px;
76+
margin-right: 10px;
77+
border: 1px solid #ccc;
78+
border-radius: 4px;
79+
}
80+
81+
.search-bar button {
82+
padding: 8px;
83+
background-color: #0073e6;
84+
color: #fff;
85+
border: none;
86+
border-radius: 4px;
87+
cursor: pointer;
88+
}

0 commit comments

Comments
 (0)