-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
202 lines (177 loc) · 14.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simran | Youtube Clone</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar">
<div class="toggle-btn">
<span></span>
<span></span>
<span></span>
</div>
<img src="img/logo.PNG" class="logo" alt="">
<div class="search-box">
<input type="text" class="search-bar" placeholder="search">
<button class="search-btn"><img src="https://img.icons8.com/ios/50/000000/search--v1.png" /></button>
</div>
<div class="search-mic">
<img src="https://img.icons8.com/material-sharp/24/000000/microphone--v1.png" />
</div>
<div class="user-options">
<img class="icon"
src="https://img.icons8.com/external-kiranshastry-lineal-kiranshastry/64/000000/external-video-camera-interface-kiranshastry-lineal-kiranshastry.png" />
<img class="icon"
src="https://img.icons8.com/external-kiranshastry-lineal-kiranshastry/64/000000/external-grid-alignment-and-tools-kiranshastry-lineal-kiranshastry.png" />
<img class="icon"
src="https://img.icons8.com/external-flatart-icons-outline-flatarticons/64/000000/external-bell-basic-ui-elements-flatart-icons-outline-flatarticons.png" />
<div class="user-dp">
<img src="img/profile-pic.jpeg" alt="">
</div>
</div>
</nav>
<!-- sidebar -->
<div class="side-bar">
<a href="#" class="links active"><img src="img/home.PNG" alt="">home</a>
<a href="#" class="links"><img src="https://img.icons8.com/ios/50/000000/compass--v1.png" />explore</a>
<a href="#" class="links"><img src="img/subscription.PNG" alt="">subscription</a>
<hr class="seperator">
<a href="#" class="links"><img src="img/library.PNG" alt="">library</a>
<a href="#" class="links"><img
src="https://img.icons8.com/external-flatart-icons-outline-flatarticons/64/000000/external-history-instagram-flatart-icons-outline-flatarticons.png" />history</a>
<a href="#" class="links"><img src="img/your-video.PNG" alt="">your video</a>
<a href="#" class="links"><img src="https://img.icons8.com/ios-glyphs/30/000000/--pocket-watch.png" />watch
later</a>
<a href="#" class="links"><img src="https://img.icons8.com/ios/50/000000/facebook-like--v1.png" />like video</a>
<a href="#" class="links"><img src="https://img.icons8.com/ios-glyphs/30/000000/chevron-down.png" />show
more</a>
<hr class="seperator">
<div class="side-heading">SUBSCRIPTIONS</div>
<a href="#" class="links"><img style="border-radius: 50%; width: 25px; height: 25px;" src="img/sub1.jpeg"
alt="">Technical Guruji <div class="subs-icon" style="margin-right: 0px;"><svg
xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="17" height="17" viewBox="0 0 172 172"
style=" fill:#000000;">
<g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt"
stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0"
font-family="none" font-weight="none" font-size="none" text-anchor="none"
style="mix-blend-mode: normal">
<path d="M0,172v-172h172v172z" fill="none"></path>
<g fill="#fa1d06">
<path
d="M38.79553,24.04053c-18.662,14.25181 -30.73303,36.71847 -30.73303,61.95947c0,25.241 12.07103,47.70766 30.73303,61.95947l3.82129,-8.55066c0,0 -23.80432,-21.8925 -23.80432,-53.40881c0,-31.51631 23.80432,-53.40881 23.80432,-53.40881zM133.20447,24.04053l-3.82129,8.55066c0,0 23.80432,21.8925 23.80432,53.40881c0,31.51631 -23.80432,53.40881 -23.80432,53.40881l3.82129,8.55066c18.662,-14.25181 30.73303,-36.71847 30.73303,-61.95947c0,-25.241 -12.07103,-47.70766 -30.73303,-61.95947zM51.84985,41.17334c-13.51544,10.32 -22.28735,26.54897 -22.28735,44.82666c0,18.27769 8.7746,34.50666 22.28735,44.82666l3.81604,-8.54016c0.00269,0 -15.35339,-11.54 -15.35339,-36.2865c0,-24.7465 15.35339,-36.2865 15.35339,-36.2865zM120.15015,41.17334l-3.81604,8.54016c-0.00269,0 15.35339,11.54 15.35339,36.2865c0,24.7465 -15.35339,36.2865 -15.35339,36.2865l3.81604,8.54016c13.51544,-10.32 22.28735,-26.54897 22.28735,-44.82666c0,-18.27769 -8.7746,-34.50666 -22.28735,-44.82666zM64.86218,58.25366c-8.36619,6.38819 -13.79968,16.43196 -13.79968,27.74634c0,11.31437 5.43093,21.35815 13.79443,27.74634l3.81604,-8.53491c0.00269,0 -6.86047,-7.19293 -6.86047,-19.21143c0,-12.0185 6.86572,-19.21142 6.86572,-19.21143zM107.14307,58.25366l-3.81604,8.53491c-0.00269,0 6.86047,7.19293 6.86047,19.21143c0,12.0185 -6.86572,19.21143 -6.86572,19.21143l3.81604,8.53491c8.36619,-6.38819 13.79968,-16.43196 13.79968,-27.74634c0,-11.31437 -5.43093,-21.35815 -13.79443,-27.74634zM86,72.5625c-7.42019,0 -13.4375,6.01731 -13.4375,13.4375c0,7.42019 6.01731,13.4375 13.4375,13.4375c7.42019,0 13.4375,-6.01731 13.4375,-13.4375c0,-7.42019 -6.01731,-13.4375 -13.4375,-13.4375z">
</path>
</g>
</g>
</svg></div>
<a href="#" class="links"><img style="border-radius: 50%; width: 25px; height: 25px;" src="img/sub2.jpeg"
alt="">T-Series Mix <div class="subs-icon" style="margin-right: 0px;"><svg
xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="17" height="17" viewBox="0 0 172 172"
style=" fill:#000000;">
<g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt"
stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0"
font-family="none" font-weight="none" font-size="none" text-anchor="none"
style="mix-blend-mode: normal">
<path d="M0,172v-172h172v172z" fill="none"></path>
<g fill="#fa1d06">
<path
d="M38.79553,24.04053c-18.662,14.25181 -30.73303,36.71847 -30.73303,61.95947c0,25.241 12.07103,47.70766 30.73303,61.95947l3.82129,-8.55066c0,0 -23.80432,-21.8925 -23.80432,-53.40881c0,-31.51631 23.80432,-53.40881 23.80432,-53.40881zM133.20447,24.04053l-3.82129,8.55066c0,0 23.80432,21.8925 23.80432,53.40881c0,31.51631 -23.80432,53.40881 -23.80432,53.40881l3.82129,8.55066c18.662,-14.25181 30.73303,-36.71847 30.73303,-61.95947c0,-25.241 -12.07103,-47.70766 -30.73303,-61.95947zM51.84985,41.17334c-13.51544,10.32 -22.28735,26.54897 -22.28735,44.82666c0,18.27769 8.7746,34.50666 22.28735,44.82666l3.81604,-8.54016c0.00269,0 -15.35339,-11.54 -15.35339,-36.2865c0,-24.7465 15.35339,-36.2865 15.35339,-36.2865zM120.15015,41.17334l-3.81604,8.54016c-0.00269,0 15.35339,11.54 15.35339,36.2865c0,24.7465 -15.35339,36.2865 -15.35339,36.2865l3.81604,8.54016c13.51544,-10.32 22.28735,-26.54897 22.28735,-44.82666c0,-18.27769 -8.7746,-34.50666 -22.28735,-44.82666zM64.86218,58.25366c-8.36619,6.38819 -13.79968,16.43196 -13.79968,27.74634c0,11.31437 5.43093,21.35815 13.79443,27.74634l3.81604,-8.53491c0.00269,0 -6.86047,-7.19293 -6.86047,-19.21143c0,-12.0185 6.86572,-19.21142 6.86572,-19.21143zM107.14307,58.25366l-3.81604,8.53491c-0.00269,0 6.86047,7.19293 6.86047,19.21143c0,12.0185 -6.86572,19.21143 -6.86572,19.21143l3.81604,8.53491c8.36619,-6.38819 13.79968,-16.43196 13.79968,-27.74634c0,-11.31437 -5.43093,-21.35815 -13.79443,-27.74634zM86,72.5625c-7.42019,0 -13.4375,6.01731 -13.4375,13.4375c0,7.42019 6.01731,13.4375 13.4375,13.4375c7.42019,0 13.4375,-6.01731 13.4375,-13.4375c0,-7.42019 -6.01731,-13.4375 -13.4375,-13.4375z">
</path>
</g>
</g>
</svg></div></a>
<a href="#" class="links"><img style="border-radius: 50%; width: 25px; height: 25px;" src="img/sub3.jpeg"
alt="">Tanay Pratap<div style="margin-right: 0px;" class="subs-icon"><svg
xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="7" height="7" viewBox="0 0 172 172"
style=" fill:#000000;">
<g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt"
stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0"
font-family="none" font-weight="none" font-size="none" text-anchor="none"
style="mix-blend-mode: normal">
<path d="M0,172v-172h172v172z" fill="none"></path>
<g fill="#3498db">
<path
d="M86,14.33333c-39.58041,0 -71.66667,32.08626 -71.66667,71.66667c0,39.58041 32.08626,71.66667 71.66667,71.66667c39.58041,0 71.66667,-32.08626 71.66667,-71.66667c0,-39.58041 -32.08626,-71.66667 -71.66667,-71.66667z">
</path>
</g>
</g>
</svg></div></a>
<a href="#" class="links"><img style="border-radius: 50%; width: 25px; height: 25px;" src="img/sub5.jpeg"
alt="">Salena Gomez</a>
<a href="#" class="links"><img style="border-radius: 50%; width: 25px; height: 25px;" src="img/sub6.jpeg"
alt="">Education Hub</a>
<a href="#" class="links"><img style="border-radius: 50%; width: 25px; height: 25px;" src="img/sub7.jpeg"
alt="">Adobe Creative Cloud <div style="margin-right: 0px;" class="subs-icon"><svg
xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="7" height="7" viewBox="0 0 172 172"
style=" fill:#000000;">
<g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt"
stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0"
font-family="none" font-weight="none" font-size="none" text-anchor="none"
style="mix-blend-mode: normal">
<path d="M0,172v-172h172v172z" fill="none"></path>
<g fill="#3498db">
<path
d="M86,14.33333c-39.58041,0 -71.66667,32.08626 -71.66667,71.66667c0,39.58041 32.08626,71.66667 71.66667,71.66667c39.58041,0 71.66667,-32.08626 71.66667,-71.66667c0,-39.58041 -32.08626,-71.66667 -71.66667,-71.66667z">
</path>
</g>
</g>
</svg></div></a>
<a href="#" class="links"><img style="border-radius: 50%; width: 25px; height: 25px;" src="img/sub5.jpeg"
alt="">Sasha Sloan</a>
<a href="#" class="links"><img style="border-radius: 50%; width: 25px; height: 25px;" src="img/sub6.jpeg"
alt="">SET India <div style="margin-right: 0px;" class="subs-icon"><svg
xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="7" height="7" viewBox="0 0 172 172"
style=" fill:#000000;">
<g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt"
stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0"
font-family="none" font-weight="none" font-size="none" text-anchor="none"
style="mix-blend-mode: normal">
<path d="M0,172v-172h172v172z" fill="none"></path>
<g fill="#3498db">
<path
d="M86,14.33333c-39.58041,0 -71.66667,32.08626 -71.66667,71.66667c0,39.58041 32.08626,71.66667 71.66667,71.66667c39.58041,0 71.66667,-32.08626 71.66667,-71.66667c0,-39.58041 -32.08626,-71.66667 -71.66667,-71.66667z">
</path>
</g>
</g>
</svg></div></a>
<a href="#" class="links"><img style="border-radius: 50%; width: 25px; height: 25px;" src="img/sub4.jpg"
alt="">Fashion Stopper</a>
<a href="#" class="links"><img src="https://img.icons8.com/ios-glyphs/30/000000/chevron-down.png" />show 12
more</a>
</div>
<!-- filters -->
<div class="filters">
<button class="filter-options active">all</button>
<button class="filter-options">trending</button>
<button class="filter-options">javascript</button>
<button class="filter-options">MERN Stack</button>
<button class="filter-options">Photoshop</button>
<button class="filter-options">node js</button>
<button class="filter-options">entertainment</button>
<button class="filter-options">salena gomez</button>
<button class="filter-options">artificial intelligence</button>
<button class="filter-options">music</button>
<button class="filter-options">programming</button>
<button class="filter-options">illustrator</button>
<button class="filter-options">T-Series</button>
</div>
<!-- videos -->
<div class="video-container">
<!-- <div class="video">
<img src="img/profile-pic.jpeg" class="thumbnail" alt="">
<div class="content">
<img src="img/profile-pic.jpeg" class="channel-icon" alt="">
<div class="info">
<h4 class="title">This is a dummy title | Dummy title</h4>
<p class="channel-name">Dummy Channel</p>
</div>
</div>
</div> -->
</div>
<script src="https://apis.google.com/js/api.js"></script>
<script src="app.js"></script>
</body>
</html>