Skip to content

Commit f860e36

Browse files
manishguptajimanishguptaji
committed
wip youtube
1 parent b484bdf commit f860e36

File tree

2 files changed

+167
-159
lines changed

2 files changed

+167
-159
lines changed

‎2-copy-of-code/lesson-14/position.html

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<title>Position Practice</title>
5-
</head>
6-
<body style="
3+
4+
<head>
5+
<title>Position Practice</title>
6+
</head>
7+
8+
<body style="
79
height: 3000px;
810
padding-top: 60px;
911
padding-left: 80px;
1012
">
11-
<div style="
13+
<div style="
1214
background-color: black;
1315
color: white;
1416
position: fixed;
@@ -18,7 +20,7 @@
1820
height: 50px;
1921
">header</div>
2022

21-
<div style="
23+
<div style="
2224
background-color: green;
2325
color: white;
2426
position: fixed;
@@ -27,20 +29,21 @@
2729
top: 50px;
2830
width: 72px;
2931
">
30-
sidebar
31-
</div>
32+
sidebar
33+
</div>
3234

33-
<div style="
35+
<div style="
3436
background-color: lightblue;
3537
height: 200px;
3638
width: 200px;
3739
position: static;
38-
">div 1</div>
39-
<div style="
40+
">division 1</div>
41+
<div style="
4042
background-color: lightpink;
4143
height: 200px;
4244
width: 200px;
43-
">div 2</div>
45+
">divsion 2</div>
46+
47+
</body>
4448

45-
</body>
46-
</html>
49+
</html>

‎2-copy-of-code/lesson-14/youtube.html

Lines changed: 150 additions & 145 deletions
Original file line numberDiff line numberDiff line change
@@ -1,176 +1,181 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<title>YouTube.com Clone</title>
53

6-
<link rel="preconnect" href="https://fonts.googleapis.com">
7-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
8-
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
4+
<head>
5+
<title>YouTube.com Clone</title>
96

10-
<link rel="stylesheet" href="styles/general.css">
11-
<link rel="stylesheet" href="styles/header.css">
12-
<link rel="stylesheet" href="styles/video.css">
13-
<link rel="stylesheet" href="styles/sidebar.css">
14-
</head>
15-
<body>
16-
<div class="header">
17-
<div class="left-section">
18-
<img class="hamburger-menu" src="icons/hamburger-menu.svg">
19-
<img class="youtube-logo" src="icons/youtube-logo.svg">
20-
</div>
21-
<div class="middle-section">
22-
<input class="search-bar" type="text" placeholder="Search">
23-
<button class="search-button">
24-
<img class="search-icon" src="icons/search.svg">
25-
</button>
26-
<button class="voice-search-button">
27-
<img class="voice-search-icon" src="icons/voice-search-icon.svg">
28-
</button>
29-
</div>
30-
<div class="right-section">
31-
<img class="upload-icon" src="icons/upload.svg">
32-
<img class="youtube-apps-icon" src="icons/youtube-apps.svg">
33-
<img class="notifications-icon" src="icons/notifications.svg">
34-
<img class="current-user-picture" src="channel-pictures/my-channel.jpeg">
35-
</div>
36-
</div>
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
10+
11+
<link rel="stylesheet" href="styles/general.css">
12+
<link rel="stylesheet" href="styles/header.css">
13+
<link rel="stylesheet" href="styles/video.css">
14+
<link rel="stylesheet" href="styles/sidebar.css">
15+
</head>
3716

38-
<div class="sidebar">
39-
sidebar
17+
<body style="
18+
height: 3000px;
19+
">
20+
<div class="header">
21+
<div class="left-section">
22+
<img class="hamburger-menu" src="icons/hamburger-menu.svg">
23+
<img class="youtube-logo" src="icons/youtube-logo.svg">
4024
</div>
25+
<div class="middle-section">
26+
<input class="search-bar" value="Manish" type="text" placeholder="Search">
27+
<button class="search-button">
28+
<img class="search-icon" src="icons/search.svg">
29+
</button>
30+
<button class="voice-search-button">
31+
<img class="voice-search-icon" src="icons/voice-search-icon.svg">
32+
</button>
33+
</div>
34+
<div class="right-section">
35+
<img class="upload-icon" src="icons/upload.svg">
36+
<img class="youtube-apps-icon" src="icons/youtube-apps.svg">
37+
<img class="notifications-icon" src="icons/notifications.svg">
38+
<img class="current-user-picture" src="channel-pictures/my-channel.jpeg">
39+
</div>
40+
</div>
41+
42+
<div class="sidebar">
43+
sidebar
44+
</div>
4145

42-
<div class="video-grid">
43-
<div class="video-preview">
44-
<div class="thumbnail-row">
45-
<img class="thumbnail" src="thumbnails/thumbnail-1.webp">
46+
<div class="video-grid">
47+
<div class="video-preview">
48+
<div class="thumbnail-row">
49+
<img class="thumbnail" src="thumbnails/thumbnail-1.webp">
50+
</div>
51+
<div class="video-info-grid">
52+
<div class="channel-picture">
53+
<img class="profile-picture" src="channel-pictures/channel-1.jpeg">
4654
</div>
47-
<div class="video-info-grid">
48-
<div class="channel-picture">
49-
<img class="profile-picture" src="channel-pictures/channel-1.jpeg">
50-
</div>
51-
<div class="video-info">
52-
<p class="video-title">
53-
Talking Tech and AI with Google CEO Sundar Pichai!
54-
</p>
55-
<p class="video-author">
56-
Marques Brownlee
57-
</p>
58-
<p class="video-stats">
59-
3.4M views &#183; 6 months ago
60-
</p>
61-
</div>
55+
<div class="video-info">
56+
<p class="video-title">
57+
Talking Tech and AI with Google CEO Sundar Pichai!
58+
</p>
59+
<p class="video-author">
60+
Marques Brownlee
61+
</p>
62+
<p class="video-stats">
63+
3.4M views &#183; 6 months ago
64+
</p>
6265
</div>
6366
</div>
67+
</div>
6468

65-
<div class="video-preview">
66-
<div class="thumbnail-row">
67-
<img class="thumbnail" src="thumbnails/thumbnail-2.webp">
69+
<div class="video-preview">
70+
<div class="thumbnail-row">
71+
<img class="thumbnail" src="thumbnails/thumbnail-2.webp">
72+
</div>
73+
<div class="video-info-grid">
74+
<div class="channel-picture">
75+
<img class="profile-picture" src="channel-pictures/channel-2.jpeg">
6876
</div>
69-
<div class="video-info-grid">
70-
<div class="channel-picture">
71-
<img class="profile-picture" src="channel-pictures/channel-2.jpeg">
72-
</div>
73-
<div class="video-info">
74-
<p class="video-title">
75-
Try Not To Laugh Challenge #9
76-
</p>
77-
<p class="video-author">
78-
Markiplier
79-
</p>
80-
<p class="video-stats">
81-
19M views &#183; 4 years ago
82-
</p>
83-
</div>
77+
<div class="video-info">
78+
<p class="video-title">
79+
Try Not To Laugh Challenge #9
80+
</p>
81+
<p class="video-author">
82+
Markiplier
83+
</p>
84+
<p class="video-stats">
85+
19M views &#183; 4 years ago
86+
</p>
8487
</div>
8588
</div>
89+
</div>
8690

87-
<div class="video-preview">
88-
<div class="thumbnail-row">
89-
<img class="thumbnail" src="thumbnails/thumbnail-3.webp">
91+
<div class="video-preview">
92+
<div class="thumbnail-row">
93+
<img class="thumbnail" src="thumbnails/thumbnail-3.webp">
94+
</div>
95+
<div class="video-info-grid">
96+
<div class="channel-picture">
97+
<img class="profile-picture" src="channel-pictures/channel-3.jpeg">
9098
</div>
91-
<div class="video-info-grid">
92-
<div class="channel-picture">
93-
<img class="profile-picture" src="channel-pictures/channel-3.jpeg">
94-
</div>
95-
<div class="video-info">
96-
<p class="video-title">
97-
Crazy Tik Toks Taken Moments Before DISASTER
98-
</p>
99-
<p class="video-author">
100-
SSSniperWolf
101-
</p>
102-
<p class="video-stats">
103-
12M views &#183; 1 year ago
104-
</p>
105-
</div>
99+
<div class="video-info">
100+
<p class="video-title">
101+
Crazy Tik Toks Taken Moments Before DISASTER
102+
</p>
103+
<p class="video-author">
104+
SSSniperWolf
105+
</p>
106+
<p class="video-stats">
107+
12M views &#183; 1 year ago
108+
</p>
106109
</div>
107110
</div>
111+
</div>
108112

109-
<div class="video-preview">
110-
<div class="thumbnail-row">
111-
<img class="thumbnail" src="thumbnails/thumbnail-4.webp">
113+
<div class="video-preview">
114+
<div class="thumbnail-row">
115+
<img class="thumbnail" src="thumbnails/thumbnail-4.webp">
116+
</div>
117+
<div class="video-info-grid">
118+
<div class="channel-picture">
119+
<img class="profile-picture" src="channel-pictures/channel-4.jpeg">
112120
</div>
113-
<div class="video-info-grid">
114-
<div class="channel-picture">
115-
<img class="profile-picture" src="channel-pictures/channel-4.jpeg">
116-
</div>
117-
<div class="video-info">
118-
<p class="video-title">
119-
The Simplest Math Problem No One Can Solve - Collatz Conjecture
120-
</p>
121-
<p class="video-author">
122-
Veritasium
123-
</p>
124-
<p class="video-stats">
125-
18M views &#183; 4 months ago
126-
</p>
127-
</div>
121+
<div class="video-info">
122+
<p class="video-title">
123+
The Simplest Math Problem No One Can Solve - Collatz Conjecture
124+
</p>
125+
<p class="video-author">
126+
Veritasium
127+
</p>
128+
<p class="video-stats">
129+
18M views &#183; 4 months ago
130+
</p>
128131
</div>
129132
</div>
133+
</div>
130134

131-
<div class="video-preview">
132-
<div class="thumbnail-row">
133-
<img class="thumbnail" src="thumbnails/thumbnail-5.webp">
135+
<div class="video-preview">
136+
<div class="thumbnail-row">
137+
<img class="thumbnail" src="thumbnails/thumbnail-5.webp">
138+
</div>
139+
<div class="video-info-grid">
140+
<div class="channel-picture">
141+
<img class="profile-picture" src="channel-pictures/channel-5.jpeg">
134142
</div>
135-
<div class="video-info-grid">
136-
<div class="channel-picture">
137-
<img class="profile-picture" src="channel-pictures/channel-5.jpeg">
138-
</div>
139-
<div class="video-info">
140-
<p class="video-title">
141-
Kadane's Algorithm to Maximum Sum Subarray Problem
142-
</p>
143-
<p class="video-author">
144-
CS Dojo
145-
</p>
146-
<p class="video-stats">
147-
519K views &#183; 5 years ago
148-
</p>
149-
</div>
143+
<div class="video-info">
144+
<p class="video-title">
145+
Kadane's Algorithm to Maximum Sum Subarray Problem
146+
</p>
147+
<p class="video-author">
148+
CS Dojo
149+
</p>
150+
<p class="video-stats">
151+
519K views &#183; 5 years ago
152+
</p>
150153
</div>
151154
</div>
155+
</div>
152156

153-
<div class="video-preview">
154-
<div class="thumbnail-row">
155-
<img class="thumbnail" src="thumbnails/thumbnail-6.webp">
157+
<div class="video-preview">
158+
<div class="thumbnail-row">
159+
<img class="thumbnail" src="thumbnails/thumbnail-6.webp">
160+
</div>
161+
<div class="video-info-grid">
162+
<div class="channel-picture">
163+
<img class="profile-picture" src="channel-pictures/channel-6.jpeg">
156164
</div>
157-
<div class="video-info-grid">
158-
<div class="channel-picture">
159-
<img class="profile-picture" src="channel-pictures/channel-6.jpeg">
160-
</div>
161-
<div class="video-info">
162-
<p class="video-title">
163-
Anything You Can Fit In The Circle I’ll Pay For
164-
</p>
165-
<p class="video-author">
166-
MrBeast
167-
</p>
168-
<p class="video-stats">
169-
141M views &#183; 1 year ago
170-
</p>
171-
</div>
165+
<div class="video-info">
166+
<p class="video-title">
167+
Anything You Can Fit In The Circle I’ll Pay For
168+
</p>
169+
<p class="video-author">
170+
MrBeast
171+
</p>
172+
<p class="video-stats">
173+
141M views &#183; 1 year ago
174+
</p>
172175
</div>
173176
</div>
174177
</div>
175-
</body>
176-
</html>
178+
</div>
179+
</body>
180+
181+
</html>

0 commit comments

Comments
 (0)