Skateboard Video Platform

├── README.md ├── script.js ├── index.html └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # awesome-video-platform 2 | 3 | video platform using CSS and JavaScript 4 | 5 | 6 | ## Technologies used 7 | 8 | * HTML 9 | * CSS 10 | * JavaScript 11 | 12 | ## live site 13 | 14 | https://peter-kimanzi.github.io/awesome-video-platform/ 15 | 16 | ## screenshots 17 | 18 | ![skate2](https://user-images.githubusercontent.com/71552773/184319406-268dec14-9781-48cf-b029-b2a80ad5909a.PNG) 19 | 20 | ![skate](https://user-images.githubusercontent.com/71552773/184319491-5b8608d0-46b8-4723-ac2a-58ca29f56802.PNG) 21 | 22 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | $(function () { 2 | $(".sidebar-link").click(function () { 3 | $(".sidebar-link").removeClass("is-active"); 4 | $(this).addClass("is-active"); 5 | }); 6 | }); 7 | 8 | $(window) 9 | .resize(function () { 10 | if ($(window).width() > 1090) { 11 | $(".sidebar").removeClass("collapse"); 12 | } else { 13 | $(".sidebar").addClass("collapse"); 14 | } 15 | }) 16 | .resize(); 17 | 18 | const allVideos = document.querySelectorAll(".video"); 19 | 20 | allVideos.forEach((v) => { 21 | v.addEventListener("mouseover", () => { 22 | const video = v.querySelector("video"); 23 | video.play(); 24 | }); 25 | v.addEventListener("mouseleave", () => { 26 | const video = v.querySelector("video"); 27 | video.pause(); 28 | }); 29 | }); 30 | 31 | $(function () { 32 | $(".logo, .logo-expand, .discover").on("click", function (e) { 33 | $(".main-container").removeClass("show"); 34 | $(".main-container").scrollTop(0); 35 | }); 36 | $(".trending, .video").on("click", function (e) { 37 | $(".main-container").addClass("show"); 38 | $(".main-container").scrollTop(0); 39 | $(".sidebar-link").removeClass("is-active"); 40 | $(".trending").addClass("is-active"); 41 | }); 42 | 43 | $(".video").click(function () { 44 | var source = $(this).find("source").attr("src"); 45 | var title = $(this).find(".video-name").text(); 46 | var person = $(this).find(".video-by").text(); 47 | var img = $(this).find(".author-img").attr("src"); 48 | $(".video-stream video").stop(); 49 | $(".video-stream source").attr("src", source); 50 | $(".video-stream video").load(); 51 | $(".video-p-title").text(title); 52 | $(".video-p-name").text(person); 53 | $(".video-detail .author-img").attr("src", img); 54 | }); 55 | }); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Skateboard Video Platform 6 | 7 | 8 | 9 | 10 | 11 | 12 |

13 | 81 |

82 | 100 |

101 |

Discover

102 |

103 |

104 |

How to do Basic Jumping and how to landing safely

105 |

106 |

107 | 110 |

111 |

112 |

113 |

Thomas Hope

114 |

53K views 2 weeks ago

115 |

116 |

117 |

7 min

118 |

119 |

120 |

Skateboard Tips You need to know

121 |

122 |

7 min

123 |

124 | 127 |

128 |

129 |

130 |

Tony Andrew

131 |

53K views 2 weeks ago

132 |

133 |

134 |

135 |

136 |

Most Watched

137 |

138 |

139 |

8 min

140 |

141 |

144 |

145 | 148 |

149 |

150 |

151 |

Andy William

152 |

Basic how to ride your skateboard comfortly

153 |

54K views1 week ago

154 |

155 |

156 |

5 min

157 |

158 |

161 |

162 | 165 |

166 |

167 |

168 |

Gerard Bind

169 |

Prepare for your first skateboard jump

170 |

42K views1 week ago

171 |

172 |

173 |

7 min

174 |

175 |

178 |

179 | 182 |

183 |

184 |

185 |

John Wise

186 |

Basic equipment to play skateboard safely

187 |

64K views2 week ago

188 |

189 |

190 |

6 min

191 |

192 |

195 |

196 | 199 |

200 |

201 |

202 |

Budi Hakim

203 |

Tips to playing skateboard on the ramp

204 |

50K views1 week ago

205 |

206 |

207 |

208 |

209 |

213 |

214 |

215 |

216 |

217 | 220 |

221 |

222 |

223 |

Andy William

224 |

1,980,893 subscribers

225 |

226 |

227 | 233 | 239 |

240 |

241 |

Basic how to ride your Skateboard

242 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus illum tempora consequuntur. Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis earum velit accusantium maiores qui sit quas, laborum voluptatibus vero quidem tempore facilis voluptate tempora deserunt!

243 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus laborum qui dolorum fugiat eius accusantium repellendus illum tempora consequuntur. Lorem ipsum dolor, sit amet consectetur adipisicing elit.

244 |

245 |

246 |

247 |

248 |

249 |

Live Chat 252 | 15,988 people 253 | 254 |

255 |

256 |

257 |

258 | 261 |

262 |

263 |

264 |

Wijaya Adabi

265 |

Lorem ipsum clor sit, ame conse quae debitis

266 |

267 |

268 |

269 |

270 | 273 |

274 |

275 |

276 |

Johny Wise

277 |

Suscipit eos atque voluptates labore

278 |

279 |

280 |

281 |

282 | 285 |

286 |

287 |

288 |

Budi Hakim

289 |

Dicta quidem sunt adipisci

290 |

291 |

292 |

293 |

294 | 297 |

298 |

299 |

300 |

Thomas Hope

301 |

recusandae doloremque aperiam alias molestias

302 |

303 |

304 |

305 |

306 | 309 |

310 |

311 |

312 |

Gerard Will

313 |

Dicta quidem sunt adipisci

314 |

315 |

316 |

317 |

318 | 321 |

322 |

323 |

324 |

Johny Wise

325 |

recusandae doloremque aperiam alias molestias

326 |

327 |

328 |

329 | 332 |

333 |

334 |

Related Videos

335 |

336 |

337 |

338 |

339 |

Prepare for your first skateboard jump

340 |

Jordan Wise

341 |

125.908 views 2 days ago

342 |

343 |

344 |

345 |

346 |

347 |

348 |

349 |

Prepare for your first skateboard jump

350 |

Jordan Wise

351 |

125.908 views 2 days ago

352 |

353 |

354 |

355 |

See All related videos (32)

356 |

357 |

358 |

359 |

360 |

361 |

362 | 363 | 364 | 365 | 366 | 367 | 368 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap"); 2 | * { 3 | outline: none; 4 | box-sizing: border-box; 5 | } 6 | 7 | html { 8 | box-sizing: border-box; 9 | -webkit-font-smoothing: antialiased; 10 | } 11 | 12 | img { 13 | max-width: 100%; 14 | } 15 | 16 | :root { 17 | --body-font: "Inter", sans-serif; 18 | --theme-bg: #1f1d2b; 19 | --body-color: #808191; 20 | --button-bg: #353340; 21 | --border-color: rgb(128 129 145 / 24%); 22 | --video-bg: #252936; 23 | --delay: 0s; 24 | } 25 | 26 | body { 27 | font-family: var(--body-font); 28 | color: var(--body-color); 29 | background-image: url("https://images.unsplash.com/photo-1445251836269-d158eaa028a6?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1951&q=80"); 30 | background-image: url(https://images.unsplash.com/photo-1520045892732-304bc3ac5d8e?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1950&q=80); 31 | background-position: center; 32 | background-size: cover; 33 | background-repeat: no-repeat; 34 | background-blend-mode: color-dodge; 35 | background-color: rgba(18, 21, 39, 0.86); 36 | display: flex; 37 | justify-content: center; 38 | align-items: center; 39 | flex-direction: column; 40 | padding: 1em 2em; 41 | width: 100%; 42 | height: 100vh; 43 | overflow: hidden; 44 | } 45 | body:before { 46 | position: absolute; 47 | left: 0; 48 | top: 0; 49 | width: 100%; 50 | height: 100%; 51 | background: linear-gradient(163deg, #1f1d2b 21%, rgba(31, 29, 43, 0.3113620448) 64%); 52 | opacity: 0.4; 53 | content: ""; 54 | } 55 | 56 | .container { 57 | background-color: var(--theme-bg); 58 | max-width: 1240px; 59 | max-height: 900px; 60 | height: 95vh; 61 | display: flex; 62 | overflow: hidden; 63 | width: 100%; 64 | border-radius: 20px; 65 | font-size: 15px; 66 | font-weight: 500; 67 | box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); 68 | position: relative; 69 | } 70 | 71 | .sidebar { 72 | width: 220px; 73 | height: 100%; 74 | padding: 30px; 75 | display: flex; 76 | flex-direction: column; 77 | flex-shrink: 0; 78 | transition-duration: 0.2s; 79 | overflow-y: auto; 80 | overflow-x: hidden; 81 | } 82 | .sidebar .logo { 83 | display: none; 84 | width: 30px; 85 | height: 30px; 86 | background-color: #22b07d; 87 | flex-shrink: 0; 88 | color: #fff; 89 | align-items: center; 90 | border-radius: 50%; 91 | justify-content: center; 92 | } 93 | .sidebar .logo-expand { 94 | text-decoration: none; 95 | color: #fff; 96 | font-size: 19px; 97 | font-weight: 600; 98 | line-height: 34px; 99 | position: sticky; 100 | top: 0; 101 | } 102 | .sidebar .logo-expand:before { 103 | content: ""; 104 | position: absolute; 105 | top: -30px; 106 | left: 0; 107 | background: var(--theme-bg); 108 | width: 200px; 109 | height: 70px; 110 | z-index: -1; 111 | } 112 | .sidebar-link:hover, .sidebar-link.is-active { 113 | color: #fff; 114 | font-weight: 600; 115 | } 116 | .sidebar-link:hover:nth-child(2n+1) svg, .sidebar-link.is-active:nth-child(2n+1) svg { 117 | background: #ff7551; 118 | } 119 | .sidebar-link:hover:nth-child(2n) svg, .sidebar-link.is-active:nth-child(2n) svg { 120 | background: #32a7e2; 121 | } 122 | .sidebar-link:hover:nth-child(2n+3) svg, .sidebar-link.is-active:nth-child(2n+3) svg { 123 | background: #6c5ecf; 124 | } 125 | .sidebar.collapse { 126 | width: 90px; 127 | border-right: 1px solid var(--border-color); 128 | } 129 | .sidebar.collapse .logo-expand, 130 | .sidebar.collapse .side-title { 131 | display: none; 132 | } 133 | .sidebar.collapse .logo { 134 | display: flex; 135 | } 136 | .sidebar.collapse .side-wrapper { 137 | width: 30px; 138 | } 139 | .sidebar.collapse .side-menu svg { 140 | margin-right: 30px; 141 | } 142 | 143 | @-webkit-keyframes bottom { 144 | 0% { 145 | transform: translateY(100px); 146 | opacity: 0; 147 | } 148 | 100% { 149 | opacity: 1; 150 | transform: none; 151 | } 152 | } 153 | 154 | @keyframes bottom { 155 | 0% { 156 | transform: translateY(100px); 157 | opacity: 0; 158 | } 159 | 100% { 160 | opacity: 1; 161 | transform: none; 162 | } 163 | } 164 | .side-menu { 165 | display: flex; 166 | flex-direction: column; 167 | } 168 | .side-menu a { 169 | display: flex; 170 | align-items: center; 171 | text-decoration: none; 172 | color: var(--body-color); 173 | } 174 | .side-menu a + a { 175 | margin-top: 26px; 176 | } 177 | .side-menu svg { 178 | width: 30px; 179 | padding: 8px; 180 | border-radius: 10px; 181 | background-color: var(--button-bg); 182 | flex-shrink: 0; 183 | margin-right: 16px; 184 | } 185 | .side-menu svg:hover { 186 | color: #fff; 187 | } 188 | 189 | .side-title { 190 | font-size: 12px; 191 | letter-spacing: 0.07em; 192 | margin-bottom: 24px; 193 | } 194 | 195 | .side-wrapper { 196 | border-bottom: 1px solid var(--border-color); 197 | padding: 36px 0; 198 | width: 145px; 199 | } 200 | .side-wrapper + .side-wrapper { 201 | border-bottom: none; 202 | } 203 | 204 | .wrapper { 205 | display: flex; 206 | flex-direction: column; 207 | flex-grow: 1; 208 | } 209 | 210 | .header { 211 | display: flex; 212 | align-items: center; 213 | flex-shrink: 0; 214 | padding: 30px; 215 | } 216 | 217 | .search-bar { 218 | height: 34px; 219 | display: flex; 220 | width: 100%; 221 | max-width: 450px; 222 | } 223 | .search-bar input { 224 | width: 100%; 225 | height: 100%; 226 | border: none; 227 | background-color: var(--button-bg); 228 | border-radius: 8px; 229 | font-family: var(--body-font); 230 | font-size: 14px; 231 | font-weight: 500; 232 | padding: 0 40px 0 16px; 233 | box-shadow: 0 0 0 2px rgba(134, 140, 160, 0.02); 234 | background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56.966 56.966' fill='%23717790c7'%3e%3cpath d='M55.146 51.887L41.588 37.786A22.926 22.926 0 0046.984 23c0-12.682-10.318-23-23-23s-23 10.318-23 23 10.318 23 23 23c4.761 0 9.298-1.436 13.177-4.162l13.661 14.208c.571.593 1.339.92 2.162.92.779 0 1.518-.297 2.079-.837a3.004 3.004 0 00.083-4.242zM23.984 6c9.374 0 17 7.626 17 17s-7.626 17-17 17-17-7.626-17-17 7.626-17 17-17z'/%3e%3c/svg%3e"); 235 | background-size: 14px; 236 | background-repeat: no-repeat; 237 | background-position: 96%; 238 | color: #fff; 239 | } 240 | 241 | .user-settings { 242 | display: flex; 243 | align-items: center; 244 | padding-left: 20px; 245 | flex-shrink: 0; 246 | margin-left: auto; 247 | } 248 | .user-settings svg { 249 | width: 10px; 250 | flex-shrink: 0; 251 | } 252 | @media screen and (max-width: 575px) { 253 | .user-settings svg { 254 | display: none; 255 | } 256 | } 257 | .user-settings .notify { 258 | position: relative; 259 | } 260 | .user-settings .notify svg { 261 | width: 20px; 262 | margin-left: 24px; 263 | flex-shrink: 0; 264 | } 265 | .user-settings .notify .notification { 266 | width: 8px; 267 | height: 8px; 268 | border-radius: 50%; 269 | background-color: #ec5252; 270 | position: absolute; 271 | right: 1px; 272 | border: 1px solid var(--theme-bg); 273 | top: -2px; 274 | } 275 | @media screen and (max-width: 575px) { 276 | .user-settings .notify .notification { 277 | display: none; 278 | } 279 | } 280 | .user-img { 281 | width: 30px; 282 | height: 30px; 283 | flex-shrink: 0; 284 | -o-object-fit: cover; 285 | object-fit: cover; 286 | border-radius: 50%; 287 | } 288 | .user-name { 289 | color: #fff; 290 | font-size: 14px; 291 | margin: 0 6px 0 12px; 292 | } 293 | @media screen and (max-width: 575px) { 294 | .user-name { 295 | display: none; 296 | } 297 | } 298 | 299 | .main-container { 300 | display: flex; 301 | flex-direction: column; 302 | padding: 0 30px 30px; 303 | flex-grow: 1; 304 | overflow: auto; 305 | } 306 | 307 | .anim { 308 | -webkit-animation: bottom 0.8s var(--delay) both; 309 | animation: bottom 0.8s var(--delay) both; 310 | } 311 | 312 | .main-header { 313 | font-size: 30px; 314 | color: #fff; 315 | font-weight: 700; 316 | padding-bottom: 20px; 317 | position: sticky; 318 | top: 0; 319 | left: 0; 320 | background: linear-gradient(to bottom, #1f1d2b 0%, #1f1d2b 78%, rgba(31, 29, 43, 0) 100%); 321 | z-index: 11; 322 | } 323 | 324 | .small-header { 325 | font-size: 24px; 326 | font-weight: 500; 327 | color: #fff; 328 | margin: 30px 0 20px; 329 | } 330 | 331 | .main-blogs { 332 | display: flex; 333 | align-items: center; 334 | } 335 | .main-blog__author { 336 | display: flex; 337 | align-items: center; 338 | padding-bottom: 10px; 339 | } 340 | .main-blog__author.tips { 341 | flex-direction: column-reverse; 342 | align-items: flex-start; 343 | } 344 | .main-blog__title { 345 | font-size: 25px; 346 | max-width: 12ch; 347 | font-weight: 600; 348 | letter-spacing: 1px; 349 | color: #fff; 350 | margin-bottom: 30px; 351 | } 352 | .main-blog { 353 | background-image: url("https://assets.codepen.io/3364143/skate-removebg-preview.png"); 354 | background-size: 80%; 355 | background-position-x: 150px; 356 | background-color: #31abbd; 357 | display: flex; 358 | flex-direction: column; 359 | width: 65%; 360 | padding: 30px; 361 | border-radius: 20px; 362 | align-self: stretch; 363 | overflow: hidden; 364 | position: relative; 365 | transition: background 0.3s; 366 | background-repeat: no-repeat; 367 | } 368 | .main-blog + .main-blog { 369 | margin-left: 20px; 370 | width: 35%; 371 | background-image: url(https://c0.anyrgb.com/images/1020/945/venice-beach-2018-outdoors-sport-men-jumping-desert-sunset-extreme-sports-one-person-action.jpg); 372 | background-color: unset; 373 | background-position-x: 0; 374 | background-size: 139%; 375 | filter: saturate(1.4); 376 | } 377 | .main-blog + .main-blog .author-img { 378 | border-color: rgba(255, 255, 255, 0.75); 379 | margin-top: 14px; 380 | } 381 | .main-blog + .main-blog .author-img__wrapper svg { 382 | border-color: #ffe6b2; 383 | color: #e7bb7d; 384 | } 385 | .main-blog + .main-blog .author-detail { 386 | margin-left: 0; 387 | } 388 | @media screen and (max-width: 905px) { 389 | .main-blog, .main-blog + .main-blog { 390 | width: 50%; 391 | padding: 30px; 392 | } 393 | .main-blog { 394 | background-size: cover; 395 | background-position-x: center; 396 | background-blend-mode: overlay; 397 | } 398 | } 399 | .main-blog__time { 400 | background: rgba(21, 13, 13, 0.44); 401 | color: #fff; 402 | padding: 3px 8px; 403 | font-size: 12px; 404 | border-radius: 6px; 405 | position: absolute; 406 | right: 20px; 407 | bottom: 20px; 408 | } 409 | 410 | .author-img { 411 | width: 52px; 412 | height: 52px; 413 | border: 1px solid rgba(255, 255, 255, 0.75); 414 | padding: 4px; 415 | border-radius: 50%; 416 | -o-object-fit: cover; 417 | object-fit: cover; 418 | } 419 | .author-img__wrapper { 420 | position: relative; 421 | flex-shrink: 0; 422 | } 423 | .author-img__wrapper svg { 424 | width: 16px; 425 | padding: 2px; 426 | background-color: #fff; 427 | color: #0daabc; 428 | border-radius: 50%; 429 | border: 2px solid #0daabc; 430 | position: absolute; 431 | bottom: 5px; 432 | right: 0; 433 | } 434 | .author-name { 435 | font-size: 15px; 436 | color: #fff; 437 | font-weight: 500; 438 | margin-bottom: 8px; 439 | } 440 | .author-info { 441 | font-size: 13px; 442 | font-weight: 400; 443 | color: #fff; 444 | } 445 | .author-detail { 446 | margin-left: 16px; 447 | } 448 | 449 | .seperate { 450 | width: 3px; 451 | height: 3px; 452 | display: inline-block; 453 | vertical-align: middle; 454 | border-radius: 50%; 455 | background-color: #fff; 456 | margin: 0 6px; 457 | } 458 | .seperate.video-seperate { 459 | background-color: var(--body-color); 460 | } 461 | 462 | .videos { 463 | display: grid; 464 | width: 100%; 465 | grid-template-columns: repeat(4, 1fr); 466 | grid-column-gap: 20px; 467 | grid-row-gap: 20px; 468 | } 469 | @media screen and (max-width: 980px) { 470 | .videos { 471 | grid-template-columns: repeat(2, 1fr); 472 | } 473 | } 474 | 475 | .video { 476 | position: relative; 477 | background-color: var(--video-bg); 478 | border-radius: 20px; 479 | overflow: hidden; 480 | transition: 0.4s; 481 | } 482 | .video-wrapper { 483 | position: relative; 484 | } 485 | .video-name { 486 | color: #fff; 487 | font-size: 16px; 488 | line-height: 1.4em; 489 | padding: 12px 20px 0; 490 | overflow: hidden; 491 | background-color: var(--video-bg); 492 | z-index: 9; 493 | position: relative; 494 | display: -webkit-box; 495 | -webkit-line-clamp: 2; 496 | -webkit-box-orient: vertical; 497 | } 498 | .video-view { 499 | font-size: 12px; 500 | padding: 12px 20px 20px; 501 | background-color: var(--video-bg); 502 | position: relative; 503 | } 504 | .video-by { 505 | transition: 0.3s; 506 | padding: 20px 20px 0px; 507 | display: inline-flex; 508 | position: relative; 509 | } 510 | .video-by:before { 511 | content: ""; 512 | background-color: #22b07d; 513 | width: 6px; 514 | height: 6px; 515 | border-radius: 50%; 516 | position: absolute; 517 | top: 26px; 518 | right: 5px; 519 | } 520 | .video-by.offline:before { 521 | background-color: #ff7551; 522 | } 523 | .video-time { 524 | position: absolute; 525 | background: rgba(21, 13, 13, 0.44); 526 | color: rgba(255, 255, 255, 0.85); 527 | padding: 3px 8px; 528 | font-size: 12px; 529 | border-radius: 6px; 530 | top: 10px; 531 | z-index: 1; 532 | right: 8px; 533 | } 534 | .video:hover video { 535 | transform: scale(1.6); 536 | transform-origin: center; 537 | } 538 | .video:hover .video-time { 539 | display: none; 540 | } 541 | .video:hover .video-author { 542 | bottom: -65px; 543 | transform: scale(0.6); 544 | right: -3px; 545 | z-index: 10; 546 | } 547 | .video:hover .video-by { 548 | opacity: 0; 549 | } 550 | .video-author { 551 | position: absolute; 552 | right: 10px; 553 | transition: 0.4s; 554 | bottom: -25px; 555 | } 556 | .video-author svg { 557 | background-color: #0aa0f7; 558 | color: #fff; 559 | border-color: var(--video-bg); 560 | } 561 | 562 | video { 563 | max-width: 100%; 564 | width: 100%; 565 | border-radius: 20px 20px 0 0; 566 | display: block; 567 | cursor: pointer; 568 | transition: 0.4s; 569 | } 570 | 571 | .stream-area { 572 | display: none; 573 | } 574 | @media screen and (max-width: 940px) { 575 | .stream-area { 576 | flex-direction: column; 577 | } 578 | .stream-area .video-stream { 579 | width: 100%; 580 | } 581 | .stream-area .chat-stream { 582 | margin-left: 0; 583 | margin-top: 30px; 584 | } 585 | .stream-area .video-js.vjs-fluid { 586 | min-height: 250px; 587 | } 588 | .stream-area .msg__content { 589 | max-width: 100%; 590 | } 591 | } 592 | 593 | .show .stream-area { 594 | display: flex; 595 | } 596 | .show .main-header, 597 | .show .main-blogs, 598 | .show .small-header, 599 | .show .videos { 600 | display: none; 601 | } 602 | 603 | .video-stream { 604 | width: 65%; 605 | -o-object-fit: cover; 606 | object-fit: cover; 607 | transition: 0.3s; 608 | } 609 | .video-stream:hover .video-js .vjs-big-play-button { 610 | opacity: 1; 611 | } 612 | 613 | .video-p { 614 | margin-right: 12px; 615 | -o-object-fit: cover; 616 | object-fit: cover; 617 | flex-shrink: 0; 618 | border-radius: 50%; 619 | position: relative; 620 | top: 0; 621 | left: 0; 622 | } 623 | .video-p .author-img { 624 | border: 0; 625 | } 626 | .video-p-wrapper { 627 | display: flex; 628 | align-items: center; 629 | } 630 | .video-p-wrapper .author-img { 631 | border: 0; 632 | } 633 | .video-p-wrapper svg { 634 | width: 20px; 635 | padding: 4px; 636 | } 637 | @media screen and (max-width: 650px) { 638 | .video-p-wrapper { 639 | flex-direction: column; 640 | } 641 | .video-p-wrapper .button-wrapper { 642 | margin: 20px auto 0; 643 | } 644 | .video-p-wrapper .video-p-detail { 645 | display: flex; 646 | flex-direction: column; 647 | align-items: center; 648 | } 649 | .video-p-wrapper .video-p { 650 | margin-right: 0; 651 | } 652 | } 653 | .video-p-sub { 654 | font-size: 12px; 655 | } 656 | .video-p-title { 657 | font-size: 24px; 658 | color: #fff; 659 | line-height: 1.4em; 660 | margin: 16px 0 20px; 661 | } 662 | .video-p-subtitle { 663 | font-size: 14px; 664 | line-height: 1.5em; 665 | max-width: 60ch; 666 | } 667 | .video-p-subtitle + .video-p-subtitle { 668 | margin-top: 16px; 669 | } 670 | .video-p-name { 671 | margin-bottom: 8px; 672 | color: #fff; 673 | display: flex; 674 | align-items: center; 675 | } 676 | .video-p-name:after { 677 | content: ""; 678 | width: 6px; 679 | height: 6px; 680 | background-color: #22b07d; 681 | border-radius: 50%; 682 | margin-left: 8px; 683 | display: inline-block; 684 | } 685 | .video-p-name.offline:after { 686 | background-color: #ff7551; 687 | } 688 | 689 | .video-content { 690 | width: 100%; 691 | } 692 | 693 | .button-wrapper { 694 | display: flex; 695 | align-items: center; 696 | margin-left: auto; 697 | } 698 | 699 | .like { 700 | display: flex; 701 | align-items: center; 702 | background-color: var(--button-bg); 703 | color: #fff; 704 | border: 0; 705 | font-family: var(--body-font); 706 | border-radius: 8px; 707 | padding: 10px 16px; 708 | font-size: 14px; 709 | cursor: pointer; 710 | } 711 | .like.red { 712 | background-color: #ea5f5f; 713 | } 714 | .like svg { 715 | width: 18px; 716 | flex-shrink: 0; 717 | margin-right: 10px; 718 | padding: 0; 719 | } 720 | .like + .like { 721 | margin-left: 16px; 722 | } 723 | 724 | .video-stats { 725 | margin-left: 30px; 726 | } 727 | 728 | .video-detail { 729 | display: flex; 730 | margin-top: 30px; 731 | width: 100%; 732 | } 733 | 734 | .chat-header { 735 | display: flex; 736 | align-items: center; 737 | padding: 20px 0; 738 | font-size: 16px; 739 | font-weight: 600; 740 | color: #fff; 741 | position: sticky; 742 | top: 0; 743 | background-color: #252836; 744 | left: 0; 745 | z-index: 1; 746 | border-bottom: 1px solid var(--border-color); 747 | } 748 | .chat-header svg { 749 | width: 15px; 750 | margin-right: 6px; 751 | flex-shrink: 0; 752 | } 753 | .chat-header span { 754 | margin-left: auto; 755 | color: var(--body-color); 756 | font-size: 12px; 757 | display: flex; 758 | align-items: center; 759 | } 760 | 761 | .chat-stream { 762 | flex-grow: 1; 763 | margin-left: 30px; 764 | } 765 | 766 | .chat { 767 | background-color: #252836; 768 | border-radius: 20px; 769 | padding: 0 20px; 770 | max-height: 414px; 771 | overflow: auto; 772 | } 773 | .chat-footer { 774 | display: flex; 775 | align-items: center; 776 | position: sticky; 777 | bottom: 0; 778 | left: 0; 779 | width: calc(100% + 20px); 780 | padding-bottom: 12px; 781 | background-color: #252836; 782 | } 783 | .chat-footer input { 784 | width: 100%; 785 | border: 0; 786 | background-color: #2d303e; 787 | border-radius: 20px; 788 | font-size: 12px; 789 | color: #fff; 790 | margin-left: -10px; 791 | padding: 12px 40px; 792 | font-weight: 500; 793 | font-family: var(--body-font); 794 | background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 12C2 6.48 6.47 2 12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10C6.47 22 2 17.52 2 12zm5.52 1.2c-.66 0-1.2-.54-1.2-1.2 0-.66.54-1.2 1.2-1.2.66 0 1.19.54 1.19 1.2 0 .66-.53 1.2-1.19 1.2zM10.8 12c0 .66.54 1.2 1.2 1.2.66 0 1.19-.54 1.19-1.2a1.194 1.194 0 10-2.39 0zm4.48 0a1.195 1.195 0 102.39 0 1.194 1.194 0 10-2.39 0z' fill='%236c6e78'/%3e%3c/svg%3e"); 795 | background-repeat: no-repeat; 796 | background-size: 24px; 797 | background-position: 8px; 798 | } 799 | .chat-footer input::-moz-placeholder { 800 | color: #6c6e78; 801 | } 802 | .chat-footer input:-ms-input-placeholder { 803 | color: #6c6e78; 804 | } 805 | .chat-footer input::placeholder { 806 | color: #6c6e78; 807 | } 808 | .chat-footer:before { 809 | content: ""; 810 | position: absolute; 811 | background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 24 24' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M21.435 2.582a1.933 1.933 0 00-1.93-.503L3.408 6.759a1.92 1.92 0 00-1.384 1.522c-.142.75.355 1.704 1.003 2.102l5.033 3.094a1.304 1.304 0 001.61-.194l5.763-5.799a.734.734 0 011.06 0c.29.292.29.765 0 1.067l-5.773 5.8c-.428.43-.508 1.1-.193 1.62l3.075 5.083c.36.604.98.946 1.66.946.08 0 .17 0 .251-.01.78-.1 1.4-.634 1.63-1.39l4.773-16.075c.21-.685.02-1.43-.48-1.943z'/%3e%3c/svg%3e"); 812 | background-repeat: no-repeat; 813 | background-size: 14px; 814 | background-position: center; 815 | width: 18px; 816 | height: 18px; 817 | background-color: #6c5ecf; 818 | padding: 4px; 819 | border-radius: 50%; 820 | right: 16px; 821 | } 822 | .chat-vid__title { 823 | color: #fff; 824 | font-size: 18px; 825 | } 826 | .chat-vid__container { 827 | margin-top: 40px; 828 | } 829 | .chat-vid__wrapper { 830 | display: flex; 831 | align-items: center; 832 | margin-top: 26px; 833 | } 834 | .chat-vid__name { 835 | color: #fff; 836 | font-size: 14px; 837 | line-height: 1.3em; 838 | display: -webkit-box; 839 | -webkit-line-clamp: 2; 840 | overflow: hidden; 841 | -webkit-box-orient: vertical; 842 | } 843 | .chat-vid__img { 844 | width: 100px; 845 | height: 80px; 846 | border-radius: 10px; 847 | -o-object-fit: cover; 848 | object-fit: cover; 849 | -o-object-position: right; 850 | object-position: right; 851 | margin-right: 16px; 852 | transition: 0.3s; 853 | } 854 | .chat-vid__img:hover { 855 | transform: scale(1.02); 856 | } 857 | .chat-vid__content { 858 | max-width: 20ch; 859 | } 860 | .chat-vid__by, .chat-vid__info { 861 | color: var(--body-color); 862 | font-size: 13px; 863 | } 864 | .chat-vid__by { 865 | margin: 6px 0; 866 | } 867 | .chat-vid__button { 868 | background-color: #6c5ecf; 869 | border: 0; 870 | color: #fff; 871 | font-size: 13px; 872 | margin-top: 26px; 873 | display: flex; 874 | padding: 0 10px; 875 | align-items: center; 876 | justify-content: center; 877 | height: 40px; 878 | border-radius: 10px; 879 | cursor: pointer; 880 | transition: 0.3s; 881 | } 882 | .chat-vid__button:hover { 883 | background-color: #5847d0; 884 | } 885 | 886 | .message { 887 | display: flex; 888 | align-items: center; 889 | margin-top: 18px; 890 | } 891 | .message:last-child { 892 | margin-bottom: 18px; 893 | } 894 | .message-container .author-img__wrapper svg { 895 | width: 15px; 896 | } 897 | 898 | .msg__name { 899 | font-size: 13px; 900 | } 901 | .msg__content { 902 | line-height: 1.4em; 903 | max-width: 26ch; 904 | display: -webkit-box; 905 | overflow: hidden; 906 | -webkit-line-clamp: 2; 907 | -webkit-box-orient: vertical; 908 | } 909 | 910 | .video-js .vjs-control-bar { 911 | display: flex; 912 | align-items: center; 913 | } 914 | 915 | .vjs-poster { 916 | background-size: 150%; 917 | } 918 | 919 | .video-js .vjs-control-bar { 920 | width: 100%; 921 | position: absolute; 922 | bottom: 14px; 923 | padding-left: 36px; 924 | left: 14px; 925 | width: calc(100% - 28px); 926 | right: 0; 927 | border-radius: 10px; 928 | height: 4em; 929 | background-color: #2b333f; 930 | background-color: rgba(43, 51, 63, 0.7); 931 | } 932 | @media screen and (max-width: 625px) { 933 | .video-js .vjs-control-bar { 934 | padding-left: 0; 935 | } 936 | } 937 | 938 | .video-js:hover .vjs-big-play-button { 939 | background-color: rgba(43, 51, 63, 0.5); 940 | } 941 | 942 | .video-js .vjs-big-play-button { 943 | transition: 0.3s; 944 | opacity: 0; 945 | border: 0; 946 | top: 50%; 947 | left: 50%; 948 | transform: translate(-50%, -50%); 949 | } 950 | .video-js .vjs-big-play-button:hover { 951 | background-color: rgba(43, 51, 63, 0.7); 952 | border-color: transparent; 953 | } 954 | 955 | .vjs-play-control:after { 956 | content: "LIVE"; 957 | position: absolute; 958 | left: -66px; 959 | top: 7px; 960 | background-color: #8941e3; 961 | height: 24px; 962 | font-family: var(--body-font); 963 | font-size: 10px; 964 | padding: 0 12px 0 26px; 965 | display: flex; 966 | font-weight: 700; 967 | letter-spacing: 0.03em; 968 | align-items: center; 969 | border-radius: 6px; 970 | background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23fff' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-circle'%3e%3ccircle cx='12' cy='12' r='10'/%3e%3c/svg%3e"); 971 | background-repeat: no-repeat; 972 | background-size: 6px; 973 | background-position: 12px; 974 | } 975 | @media screen and (max-width: 625px) { 976 | .vjs-play-control:after { 977 | display: none; 978 | } 979 | } 980 | 981 | .vjs-menu-button-inline .vjs-menu { 982 | top: 4px; 983 | } 984 | 985 | .video-js .vjs-control:before, 986 | .video-js .vjs-time-control { 987 | line-height: 40px; 988 | } 989 | 990 | .video-js .vjs-tech { 991 | -o-object-fit: cover; 992 | object-fit: cover; 993 | } 994 | 995 | button.vjs-play-control.vjs-control.vjs-button { 996 | margin-left: 40px; 997 | } 998 | @media screen and (max-width: 625px) { 999 | button.vjs-play-control.vjs-control.vjs-button { 1000 | margin-left: 0; 1001 | } 1002 | } 1003 | 1004 | .vjs-icon-fullscreen-enter:before, 1005 | .video-js .vjs-fullscreen-control:before { 1006 | content: ""; 1007 | position: absolute; 1008 | display: block; 1009 | background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.54 0h3.38c1.41 0 2.54 1.15 2.54 2.561V5.97c0 1.42-1.13 2.56-2.54 2.56H2.54C1.14 8.53 0 7.39 0 5.97V2.561C0 1.15 1.14 0 2.54 0zm0 11.47h3.38c1.41 0 2.54 1.14 2.54 2.56v3.41c0 1.41-1.13 2.56-2.54 2.56H2.54C1.14 20 0 18.85 0 17.44v-3.41c0-1.42 1.14-2.56 2.54-2.56zM17.46 0h-3.38c-1.41 0-2.54 1.15-2.54 2.561V5.97c0 1.42 1.13 2.56 2.54 2.56h3.38c1.4 0 2.54-1.14 2.54-2.56V2.561C20 1.15 18.86 0 17.46 0zm-3.38 11.47h3.38c1.4 0 2.54 1.14 2.54 2.56v3.41c0 1.41-1.14 2.56-2.54 2.56h-3.38c-1.41 0-2.54-1.15-2.54-2.56v-3.41c0-1.42 1.13-2.56 2.54-2.56z' fill='%23fff'/%3e%3c/svg%3e"); 1010 | background-size: 11px; 1011 | background-position: center; 1012 | background-position-y: 14px; 1013 | background-repeat: no-repeat; 1014 | opacity: 0.6; 1015 | } 1016 | 1017 | .vjs-playback-rate .vjs-playback-rate-value { 1018 | font-size: 1.1em; 1019 | line-height: 3.5em; 1020 | opacity: 0.6; 1021 | font-weight: 700; 1022 | font-family: var(--body-font); 1023 | } 1024 | 1025 | .video-js .vjs-playback-rate { 1026 | width: 2.2em; 1027 | } 1028 | 1029 | .video-js.vjs-fluid { 1030 | border-radius: 20px; 1031 | overflow: hidden; 1032 | min-height: 414px; 1033 | } 1034 | 1035 | @media screen and (max-width: 735px) { 1036 | .main-blogs { 1037 | flex-wrap: wrap; 1038 | } 1039 | 1040 | .main-blog, 1041 | .main-blog + .main-blog { 1042 | width: 100%; 1043 | } 1044 | 1045 | .videos { 1046 | grid-template-columns: 1fr; 1047 | } 1048 | 1049 | .main-blog + .main-blog { 1050 | margin-left: 0; 1051 | margin-top: 20px; 1052 | background-size: cover; 1053 | } 1054 | } 1055 | @media screen and (max-width: 475px) { 1056 | .main-blog__title { 1057 | font-size: 20px; 1058 | } 1059 | 1060 | .author-name { 1061 | font-size: 14px; 1062 | } 1063 | 1064 | .main-blog__author { 1065 | flex-direction: column-reverse; 1066 | align-items: flex-start; 1067 | } 1068 | 1069 | .author-detail { 1070 | margin-left: 0; 1071 | } 1072 | 1073 | .main-blog .author-img { 1074 | margin-top: 14px; 1075 | } 1076 | 1077 | .main-container { 1078 | padding: 0 20px 20px; 1079 | } 1080 | 1081 | .header { 1082 | padding: 20px; 1083 | } 1084 | 1085 | .sidebar.collapse { 1086 | width: 40px; 1087 | } 1088 | 1089 | .sidebar { 1090 | align-items: center; 1091 | } 1092 | 1093 | body { 1094 | padding: 0; 1095 | } 1096 | 1097 | .container { 1098 | height: 100vh; 1099 | border-radius: 0; 1100 | max-height: 100%; 1101 | } 1102 | } 1103 | ::-webkit-scrollbar { 1104 | width: 6px; 1105 | border-radius: 10px; 1106 | } 1107 | 1108 | ::-webkit-scrollbar-thumb { 1109 | background-color: rgba(21, 20, 26, 0.63); 1110 | border-radius: 10px; 1111 | } --------------------------------------------------------------------------------