Video Sharing Platform UI

index.html

<div class="video-app">
 <div class="dark-light">
    <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" /></svg>
   </div>
 <div class="header">
  <div class="header-left">
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
    <path d="M3 12h18M3 6h18M3 18h18" /></svg>
   <div class="logo">
   </div>
   <div class="search-bar">
    <input type="text" placeholder="Search..." />
   </div>
  </div>
  <div class="header-menu">
   <div class="menu-item active">Home</div>
   <div class="menu-item">Categories</div>
   <div class="menu-item notify">Subscriptions</div>
  </div>
  <div class="user-settings">
   <button class="button">
    <svg xmlns="http://www.w3.org/2000/svg" stroke="currentColor" viewBox="0 0 512.06 512.06">
     <path d="M426.63 188.22C402.97 93.95 307.37 36.7 213.08 60.37A176 176 0 0080.39 218.3a96 96 0 0016 190.72h80v-32h-80a64 64 0 010-128 16 16 0 0016-16c-.08-79.53 64.33-144.06 143.86-144.14a144 144 0 01141.42 116.14 16 16 0 0013.6 12.8 80 80 0 01-10.88 159.2h-64v32h64c61.86-.18 111.85-50.48 111.66-112.34a112 112 0 00-85.41-108.46z" />
     <path d="M245.03 253.66l-64 64 22.56 22.56 36.8-36.64v153.44h32V303.58l36.64 36.64 22.56-22.56-64-64a16 16 0 00-22.55 0z" /></svg>
    Upload
   </button>
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
    <path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 01-3.46 0" /></svg>
   <img class="user-profile " src="https://images.unsplash.com/photo-1586297098710-0382a496c814?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80" alt="">
   <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 492 492">
    <path d="M484.13 124.99l-16.11-16.23a26.72 26.72 0 00-19.04-7.86c-7.2 0-13.96 2.79-19.03 7.86L246.1 292.6 62.06 108.55c-5.07-5.06-11.82-7.85-19.03-7.85s-13.97 2.79-19.04 7.85L7.87 124.68a26.94 26.94 0 000 38.06l219.14 219.93c5.06 5.06 11.81 8.63 19.08 8.63h.09c7.2 0 13.96-3.57 19.02-8.63l218.93-219.33A27.18 27.18 0 00492 144.1c0-7.2-2.8-14.06-7.87-19.12z" /></svg>
  </div>
 </div>
 <div class="wrapper">
  <div class="left-side">
   <div class="side-wrapper">
    <div class="side-menu">
     <a href="#">
      <svg width="20" height="17" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
       <defs>
        <path id="a" d="M13 22v-6h4v6h5v-8h3L15 5 5 14h3v8z" />
       </defs>
       <g transform="translate(-5 -5)" fill="none" fill-rule="evenodd">
        <mask id="b" fill="currentColor">
         <use xlink:href="#a" />
        </mask>
        <g mask="url(#b)" fill="currentColor">
         <path d="M2 2h26v26H2z" />
        </g>
       </g>
      </svg>
      Home
     </a>
     <a href="#">
      <svg viewBox="0 0 512 512" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
       <path d="M210.35 246.63c33.88 0 63.22-12.15 87.2-36.13 23.97-23.97 36.12-53.3 36.12-87.19 0-33.87-12.15-63.2-36.13-87.19C273.57 12.15 244.23 0 210.35 0c-33.89 0-63.22 12.15-87.19 36.13s-36.13 53.3-36.13 87.18c0 33.89 12.16 63.23 36.13 87.2 23.98 23.97 53.32 36.12 87.2 36.12zm0 0M426.13 393.7a304.6 304.6 0 00-4.15-32.35 254.9 254.9 0 00-7.96-32.53 160.66 160.66 0 00-13.37-30.33 114.48 114.48 0 00-20.16-26.28c-7.96-7.61-17.7-13.73-28.97-18.2-11.22-4.44-23.66-6.69-36.97-6.69-5.23 0-10.28 2.14-20.05 8.5-6 3.92-13.03 8.45-20.87 13.46-6.71 4.27-15.8 8.28-27.02 11.9a107.28 107.28 0 01-33.04 5.34c-10.97 0-22.09-1.8-33.05-5.34-11.2-3.62-20.3-7.62-27-11.9-7.76-4.96-14.8-9.5-20.9-13.46-9.74-6.36-14.8-8.5-20.03-8.5-13.3 0-25.75 2.25-36.97 6.7-11.26 4.45-21 10.57-28.97 18.2a114.49 114.49 0 00-20.15 26.27c-5.56 9.78-10.06 19.99-13.38 30.34a255.5 255.5 0 00-7.95 32.52 303.52 303.52 0 00-4.15 32.36C.34 403.51 0 413.68 0 423.95c0 26.73 8.5 48.36 25.25 64.32C41.8 504.02 63.69 512 90.32 512h246.53c26.62 0 48.5-7.98 65.06-23.73 16.76-15.95 25.25-37.59 25.25-64.32 0-10.32-.35-20.5-1.03-30.25zm0 0" /></svg>
      My channel
     </a>
     <a href="#">
      <svg viewBox="0 0 512.07 512.07" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
       <path d="M509.76 194.64c-6.15-18.86-22.95-31.04-42.78-31.04H339.06L298.78 41.27c-6.2-18.8-22.95-30.93-42.73-30.93h-.2c-19.85.08-36.6 12.35-42.67 31.26l-39.1 122H45.09c-19.88 0-36.69 12.22-42.81 31.14-6.12 18.92.33 38.68 16.45 50.33L123.1 320.5l-40.17 122c-6.21 18.87.14 38.65 16.18 50.39a44.86 44.86 0 0026.56 8.84c9.17 0 18.35-2.9 26.37-8.7l104.54-75.56 103.3 75.44c16.03 11.7 36.78 11.76 52.87.15s22.58-31.33 16.52-50.23L390.04 320.5l103.48-75.56c16.02-11.7 22.4-31.44 16.24-50.3z" /></svg>
      Popular video
     </a>
     <a href="#">
      <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 512 512">
       <path d="M490.24 113.92c-13.89-24.7-28.96-29.25-59.65-30.98C399.94 80.86 322.85 80 256.06 80c-66.9 0-144.03.86-174.65 2.91-30.63 1.76-45.73 6.27-59.75 31.01C7.36 138.59 0 181.09 0 255.9v.26c0 74.5 7.36 117.31 21.66 141.73 14.02 24.7 29.1 29.18 59.72 31.26 30.65 1.8 107.77 2.85 174.68 2.85 66.79 0 143.88-1.06 174.56-2.82 30.7-2.08 45.76-6.56 59.65-31.26C504.7 373.5 512 330.69 512 256.19v-.16-.1c0-74.84-7.3-117.34-21.76-142.01zM192 352V160l160 96-160 96z" /></svg>
      Subscriptions
     </a>
     <a href="#">
      <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 448 448">
       <path d="M234.67 138.67v106.66l91.3 54.19 15.36-25.92-74.66-44.27v-90.66z" />
       <path d="M255.9 32C149.75 32 64 117.97 64 224H0l83.1 83.1 1.49 3.09L170.67 224h-64c0-82.45 66.88-149.33 149.33-149.33S405.33 141.55 405.33 224 338.45 373.33 256 373.33c-41.28 0-78.5-16.85-105.5-43.84l-30.18 30.19A190.78 190.78 0 00255.89 416C362.03 416 448 330.03 448 224S362.03 32 255.9 32z" />
      </svg>
      History views
     </a>
     <a href="#">
      <svg viewBox="0 0 443.29 443.29" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
       <path d="M221.65 0C99.43 0 0 99.43 0 221.65s99.43 221.64 221.65 221.64 221.64-99.43 221.64-221.64S343.86 0 221.65 0zm0 415.59c-106.94 0-193.94-87-193.94-193.94S114.7 27.7 221.65 27.7s193.94 87 193.94 193.94-87 193.94-193.94 193.94z" />
       <path d="M235.5 83.12h-27.7v144.26l87.17 87.18 19.59-19.59-79.06-79.06z" /></svg>
      Watch Later
     </a>
     <a href="#">
      <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 512 512">
       <path d="M53.33 224A53.4 53.4 0 000 277.33V448a53.4 53.4 0 0053.33 53.33h64a52.95 52.95 0 0032-10.8V224h-96zM512 304a47.3 47.3 0 00-13.89-33.58 52.97 52.97 0 0013.66-40.72c-2.5-27.12-26.93-48.37-55.64-48.37H324.35c6.53-19.82 16.98-56.15 16.98-85.33 0-46.27-39.31-85.33-64-85.33-22.16 0-38 12.48-38.67 12.99a10.72 10.72 0 00-4 8.34v72.34l-61.43 133.1-2.56 1.3V467.4C188.03 475.6 210 480 224 480h195.82c23.23 0 43.56-15.66 48.34-37.27a47.99 47.99 0 00-3.86-32.04 47.78 47.78 0 0021.35-64.02A47.76 47.76 0 00512 304z" /></svg>
      Liked Videos
     </a>
     <a href="#">
      <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 320 320">
       <path d="M0 96h256v42.67H0zM0 10.67h256v42.67H0zM0 181.33h170.67V224H0zM213.33 181.33v128l106.67-64z" /></svg>
      Playlists
     </a>
    </div>
   </div>
   <div class="side-wrapper">
    <div class="side-menu">
     <div class="side-title">Subscriptions</div>
     <div class="user">
      <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80" alt="" class="user-img">
      <div class="username">Inez Gibson</div>
     </div>
     <div class="user">
      <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=046c29138c1335ef8edee7daf521ba50" alt="" class="user-img">
      <div class="username">Francis Wolfe</div>
     </div>
     <div class="user">
      <img src="https://randomuser.me/api/portraits/women/63.jpg" alt="" class="user-img">
      <div class="username">Inez Gibson</div>
     </div>
     <div class="user">
      <img src="https://pbs.twimg.com/profile_images/737221709267374081/sdwta9Oh.jpg" alt="" class="user-img">
      <div class="username">Anne Norton</div>
     </div>
     <div class="user">
      <img src="https://pbs.twimg.com/profile_images/2452384114/noplz47r59v1uxvyg8ku.png" alt="" class="user-img">
      <div class="username">Bessie Casey</div>
     </div>
     <div class="user">
      <img src="https://images.unsplash.com/photo-1575084713138-342cae5f8d00?ixlib=rb-1.2.1&auto=format&fit=crop&w=958&q=80" alt="" class="user-img">
      <div class="username">Hanry Davidson</div>
     </div>
     <button class="button show-more">Show More
     </button>
    </div>

   </div>
   <div class="side-wrapper">
    <div class="side-menu">
     <div class="side-title">Popular Channels</div>
     <a href="#">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 415.96 415.96">
       <path d="M328.71 264.54c12.93-21.63 21.5-49 23.17-76.07 1.06-17.37-2.82-35.61-11.2-52.76-13.15-26.95-35.74-42.08-57.57-56.7-16.29-10.92-31.68-21.22-42.56-35.94l-1.95-2.63c-6.43-8.64-13.7-18.43-14.85-26.65C222.6 5.47 215.05-.45 206.8.03a15.96 15.96 0 00-14.88 15.93v285.12c-13.4-8.13-29.92-13.12-48-13.12-44.1 0-80 28.7-80 64s35.9 64 80 64 80-28.7 80-64v-186.5c24.03 9.2 63.36 32.58 74.18 87.2-2.02 2.98-3.94 6.18-6.18 8.74a15.94 15.94 0 001.44 22.56 15.94 15.94 0 0022.56-1.44c4.29-4.86 8.1-10.56 11.75-16.5.38-.46.73-.94 1.05-1.48z" /></svg>
      Music Channels
     </a>
     <a href="#">
      <svg viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
       <g fill="currentColor" fill-rule="nonzero">
        <path d="M15.68 23.94a1 1 0 001.27-.62A3.44 3.44 0 0120 21a1 1 0 000-2c-3.68 0-4.9 3.53-4.95 3.68a1 1 0 00.63 1.26zM40 21c1.4.08 2.6 1 3.05 2.32a1 1 0 001.9-.64C44.9 22.53 43.68 19 40 19a1 1 0 000 2z" />
        <path d="M1.27 51.44A6.27 6.27 0 006.17 54a5.15 5.15 0 003.79-1.65 30.07 30.07 0 0040.02.06 5.15 5.15 0 004.69 1.66 6.39 6.39 0 005.27-7.09 5.25 5.25 0 00-3.1-4.09A26.12 26.12 0 0059 32.5c0-11.66-7.7-21.97-19.23-25.87-.1-.43-.23-.86-.4-1.27a8.65 8.65 0 00-3.48-3.85A11.42 11.42 0 0022.7 2.79a8.42 8.42 0 00-2.37 3.8C8.74 10.48 1 20.81 1 32.5c0 3.53.72 7.03 2.1 10.28-.35.15-.68.35-1 .58a5.77 5.77 0 00-.83 8.08zM56.7 45.1c.7.53 1.15 1.31 1.26 2.18a4.4 4.4 0 01-3.6 4.82 3.24 3.24 0 01-2.95-1.07 27.6 27.6 0 004.57-6.32c.26.1.5.23.72.4zM19.98 8.83a11.42 11.42 0 003.2 7.8 17.3 17.3 0 003.96 3.18A9.24 9.24 0 0030.75 21a1 1 0 00.13-2 7.32 7.32 0 01-2.72-.91 15.33 15.33 0 01-3.96-3.34c-2.37-2.9-3.42-7.42-.14-10.5a9.47 9.47 0 0110.79-1.03c1.17.68 2.1 1.7 2.68 2.94a4.15 4.15 0 01-1.07 5.1c-2.2 1.72-6.27 1.67-8.72-.1-1.25-.9-2.36-2.36-1.74-3.75.78-1.76 3.89-2.26 6.04-1.52.5.12.91.46 1.12.93a1 1 0 001.95-.45 3.5 3.5 0 00-2.42-2.38c-3.08-1.05-7.24-.26-8.52 2.6-.9 2.05.03 4.48 2.4 6.19 3.21 2.32 8.2 2.35 11.12.06a5.82 5.82 0 002.22-4.03C50.18 12.62 57 21.97 57 32.5 57 46.56 44.89 58 30 58S3 46.56 3 32.5C3 22 9.77 12.68 19.98 8.84zM3.3 44.97c.2-.15.43-.27.66-.37a27.62 27.62 0 004.57 6.37 3.25 3.25 0 01-2.9 1c-1.1-.18-2.1-.8-2.75-1.7a3.77 3.77 0 01.42-5.3z" />
        <path d="M26.97 32.98a1 1 0 001.03-.95c.01-.17.16-1.03 2-1.03s1.99.86 2 1a1 1 0 002 0c0-1.04-.84-3-4-3s-4 1.96-4 3c0 .54.43.97.97.98zM17.2 27.4a.98.98 0 00.18 1.36c.43.33 1.04.28 1.4-.13A3 3 0 0121 28c.78-.09 1.57.13 2.2.6a1 1 0 101.6-1.2c-.1-.14-1.13-1.4-3.8-1.4s-3.7 1.26-3.8 1.4zM36.77 28.63A3 3 0 0139 28c.78-.09 1.57.13 2.2.6a1 1 0 001.6-1.2c-.1-.14-1.13-1.4-3.8-1.4s-3.7 1.26-3.8 1.4a.98.98 0 00.18 1.36c.43.33 1.04.28 1.4-.13zM29.93 56a23.42 23.42 0 0015.75-6c3.39-3.26 4.82-9.4 1.22-13.62a6.52 6.52 0 00-6.44-2.1c-1.02.27-2.02.63-2.98 1.08-.73.34-1.48.63-2.24.87-1.72.5-3.5.75-5.3.77-1.8-.02-3.59-.28-5.32-.77a18.4 18.4 0 01-2.24-.87c-.95-.45-1.95-.81-2.98-1.08a6.53 6.53 0 00-6.43 2.1c-3.6 4.23-2.18 10.36 1.21 13.62a23.42 23.42 0 0015.75 6zm0-2a21.96 21.96 0 01-5.4-.71 6.7 6.7 0 015.4-2.29 6.7 6.7 0 015.4 2.29c-1.77.46-3.58.7-5.4.71zm2-15.12V40a1 1 0 01-1 1h-2a1 1 0 01-1-1v-1.12c.67.07 1.34.12 2 .12s1.34-.05 2-.12zm-17.45-1.2a4.48 4.48 0 014.47-1.45c.9.24 1.79.56 2.63.97.8.37 1.64.69 2.49.95.61.18 1.23.32 1.86.44V40a3 3 0 003 3h2a3 3 0 003-3v-1.41c.62-.13 1.25-.26 1.86-.44.85-.26 1.68-.58 2.49-.95.84-.4 1.72-.73 2.63-.97a4.53 4.53 0 014.47 1.45c2.84 3.34 1.65 8.25-1.09 10.88a19.46 19.46 0 01-6.97 4.12C36.1 50.48 33.24 49 29.93 49s-6.18 1.47-7.39 3.68a19.46 19.46 0 01-6.97-4.12c-2.74-2.63-3.93-7.54-1.09-10.88z" />
       </g>
      </svg>
      Baby Channel
     </a>
     <a href="#">
      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
       <path d="M17.23 18.63H6.69a.75.75 0 01-.75-.76 14.3 14.3 0 012.88-8.44l-2.95.25a1.72 1.72 0 01-1.85-1.7V7.1c0-1.19.8-2.24 1.94-2.57l5.02-1.6V.76a.75.75 0 011.2-.6l2.23 1.67a7.8 7.8 0 012.94 9.73 5.76 5.76 0 00.12 5.13l.43.86a.75.75 0 01-.67 1.1z" fill="#eceff1" />
       <path d="M19.25 21.5H4.75a.75.75 0 01-.75-.75V19.5c0-.94.75-2 1.75-2h12.5c1 0 1.75 1.06 1.75 2v1.25c0 .41-.34.75-.75.75z" fill="#cfd8dc" />
       <path d="M21.25 24H2.75a.75.75 0 01-.75-.75v-1.5c0-.96.79-1.75 1.75-1.75h16.5c.96 0 1.75.79 1.75 1.75v1.5c0 .41-.34.75-.75.75z" fill="#eceff1" />
       <path d="M17.23 18.63a.75.75 0 01-.67-.41l-.43-.86a7.3 7.3 0 01-.15-6.41 6.32 6.32 0 00-2.42-7.9l-1.08-.8V3.5c0 .32-.21.61-.52.71L6.39 5.98c-.52.15-.87.61-.87 1.13v.87c0 .07.04.12.07.15a.2.2 0 00.16.05l4.7-.4c.32-.01.6.15.74.42s.1.6-.1.83l-.3.33a13.02 13.02 0 00-3.35 8.53c-.01.42-.34.78-.77.74a.75.75 0 01-.73-.76 14.3 14.3 0 012.88-8.44l-2.95.25a1.71 1.71 0 01-1.85-1.7V7.1c0-1.19.8-2.24 1.94-2.57l5.02-1.6V.76a.75.75 0 011.2-.6l2.23 1.67a7.8 7.8 0 012.94 9.73 5.76 5.76 0 00.12 5.13l.43.86a.75.75 0 01-.67 1.1z" />
       <path d="M13.51 19a.77.77 0 01-.35-.08c-.14-.07-1.41-.78-1.41-3.42 0-1.48.5-2.45 1-3.39.51-1 1-1.94 1-3.61a.75.75 0 011.5 0c0 2.04-.62 3.24-1.18 4.3-.44.85-.82 1.6-.82 2.7 0 1.67.61 2.1.62 2.1.37.18.5.62.32 1-.13.25-.4.4-.68.4zM21.25 24H2.75a.75.75 0 01-.75-.75v-1.5c0-.96.79-1.75 1.75-1.75h16.5c.96 0 1.75.79 1.75 1.75v1.5c0 .41-.34.75-.75.75zM3.5 22.5h17v-.75a.25.25 0 00-.25-.25H3.75a.25.25 0 00-.25.25z" />
       <path d="M19.25 21.5H4.75a.75.75 0 01-.75-.75V19.5c0-.94.75-2 1.75-2h12.5c1 0 1.75 1.06 1.75 2v1.25c0 .41-.34.75-.75.75zM5.5 20h13v-.5c0-.2-.17-.47-.27-.5H5.75c-.08.03-.25.3-.25.5z" /></svg>
      Games Channel
     </a>
     <a href="#">
      <svg viewBox="0 0 509.52 509.52" xmlns="http://www.w3.org/2000/svg">
       <path d="M155.95 301.92l145.69-145.7 51.6 51.6-145.7 145.7zM28.85 297.86l40.3-40.3 182.73 182.72-40.3 40.3zM-.04 387.75l38.18-38.18 121.71 121.72-38.18 38.18zM257.3 69.46l40.3-40.3 182.73 182.73-40.3 40.3zM349.33 38.46L387.73.05l121.72 121.72-38.4 38.4z" /></svg>
      Fitness Channel
     </a>
     <a href="#">
      <svg viewBox="0 0 509.52 509.52" xmlns="http://www.w3.org/2000/svg">
       <path d="M493.8 309.4A62.23 62.23 0 00439 292.2l-13.21 2.33-3.8-12.87C400.5 208.61 332.23 157.6 256 157.6S111.52 208.61 90 281.65l-3.79 12.87-13.2-2.33a62.22 62.22 0 00-54.82 17.22C6.46 321.14 0 336.74 0 353.33s6.46 32.19 18.2 43.92 27.32 18.2 43.92 18.2c16.59 0 32.19-6.46 43.92-18.2a62.64 62.64 0 008.12-10l12.55-19.2 12.56 19.2a62.69 62.69 0 008.12 10 61.71 61.71 0 0043.92 18.2c16.6 0 32.19-6.46 43.92-18.2a62.64 62.64 0 008.12-10l12.56-19.2 12.55 19.2a62.71 62.71 0 008.12 10c11.73 11.73 27.33 18.2 43.92 18.2s32.2-6.47 43.93-18.2a62.62 62.62 0 008.19-10.11l12.57-19.34 12.58 19.34a62.6 62.6 0 008.19 10.11c11.73 11.73 27.33 18.2 43.92 18.2s32.2-6.47 43.93-18.2S512 369.92 512 353.33s-6.46-32.2-18.2-43.93zm-276.1.6h-30v-28.67h30zm53.3-48.45h-30V232.9h30zM324.3 310h-30v-28.67h30zM385.2 418.9c-35.78 35.3-93.48 35.33-129.3.1-35.77 35.2-93.4 35.2-129.19 0-25.22 24.82-61.3 32.11-92.94 21.94l10.31 35.14A50.27 50.27 0 0092.06 512h327.88a50.27 50.27 0 0047.98-35.92L478.2 441a92.3 92.3 0 01-28.33 4.45 91.5 91.5 0 01-64.69-26.54zM143.52 131.66h30c0-7.86 2.68-11.1 7.56-16.96 6.1-7.36 14.47-17.44 14.47-36.12 0-18.69-8.37-28.77-14.47-36.12-4.88-5.88-7.56-9.1-7.56-16.97h-30c0 18.69 8.36 28.77 14.47 36.12 4.87 5.87 7.56 9.1 7.56 16.97 0 7.85-2.69 11.09-7.56 16.96-6.1 7.36-14.47 17.43-14.47 36.12zM229.99 106.17h30c0-7.86 2.68-11.1 7.55-16.97 6.11-7.35 14.47-17.43 14.47-36.12 0-18.68-8.36-28.76-14.47-36.12C262.67 11.1 260 7.86 260 0h-30c0 18.68 8.36 28.76 14.47 36.12 4.87 5.87 7.55 9.1 7.55 16.96 0 7.86-2.68 11.1-7.55 16.96-6.1 7.36-14.47 17.44-14.47 36.13zM316.45 131.66h30c0-7.86 2.69-11.1 7.56-16.96 6.1-7.36 14.47-17.44 14.47-36.12 0-18.69-8.36-28.77-14.47-36.12-4.87-5.88-7.56-9.1-7.56-16.97h-30c0 18.69 8.37 28.77 14.47 36.12 4.88 5.87 7.56 9.1 7.56 16.97 0 7.85-2.68 11.09-7.56 16.96-6.1 7.36-14.47 17.43-14.47 36.12z" /></svg>
      Food Channels
     </a>
     <a href="#">
      <svg viewBox="0 0 496 496" xmlns="http://www.w3.org/2000/svg">
       <path d="M132 193C59.22 193 0 252.23 0 325s59.22 132 132 132 132-59.2 132-132-59.22-132-132-132zm-4.55 113.51l19.54 6.74c37.85 13.06 39.07 66.83 1.01 81.07 0 10.22-7.64 16.69-16 16.69-8.28 0-16-6.37-16-16.69a43.14 43.14 0 01-28.02-40.35 16 16 0 1132 0c0 6.1 4.97 11.07 11.07 11.07h1.9c12.49 0 15.33-17.5 3.6-21.54l-19.54-6.73C79.16 323.7 77.94 269.94 116 255.7c0-10.23 7.64-16.7 16-16.7 8.28 0 16 6.38 16 16.7a43.14 43.14 0 0128.02 40.35 16 16 0 11-32 0c0-6.1-4.97-11.07-11.07-11.07h-1.9c-12.49 0-15.33 17.5-3.6 21.53zM496 441.01a16 16 0 01-16 16H256a16 16 0 110-32h68V225a16 16 0 1132 0v200h81V161a16 16 0 1132 0v264h11a16 16 0 0116 16zM223.69 188.7l68.5-68.5a16 16 0 0122.62 0L340 145.38l74.37-74.37H407a16 16 0 110-32c49.58 0 46.92-.13 49.12.3A16.04 16.04 0 01469 55.02v46a16 16 0 11-32 0v-7.37l-85.69 85.68a16 16 0 01-22.62 0l-25.19-25.18-57.19 57.18a15.95 15.95 0 01-11.31 4.69c-14.12 0-21.42-17.2-11.31-27.31z" /></svg>
      Economy Channels
     </a>
     <a href="#">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 444.27 444.27">
       <path d="M380.15 230.22a64.08 64.08 0 00-52.7 27.67l-16.7-7.15v-10.46l52.28-21.7 13.42-30.93h6.17l30.93 36.72a6.02 6.02 0 109.23-7.77l-24.38-28.95h3.88a6.03 6.03 0 100-12.07h-9.07l7.9-3.74a7.54 7.54 0 003.6-10l-4.54-9.8a7.54 7.54 0 00-6.77-4.37l-83.7-.75h-.08c-2.09 0-4.09.87-5.52 2.4-.15.16-17.25 17.87-48.8 21.98a70.95 70.95 0 00-10.45-14.59c-12.13-13-28.07-19.89-46.1-19.89-3.65 0-7.44.28-11.27.84l-.06.01c-.89.14-21.94 3.41-51.1 11.59-.31.01-.77.03-1.33.03-3.35 0-11.47-.6-14.63-6.12-.23-.4-.45-.86-.65-1.38l13.94-2.53a7.17 7.17 0 00-2.56-14.1l-11.23 2.04c1.72-7.1 5.62-16.8 13.38-30.02a7.54 7.54 0 00-9.17-10.88c-.84.32-20.69 7.95-38.7 26.77a102.14 102.14 0 00-27.6 56.06c1.03-1.99 2.3-3.92 3.9-5.73 0 0 20.58 13.44 8.96 32.9H57c.32 3.95.83 8.03 1.56 12.24a7.55 7.55 0 002.33 4.27l16.84 15.48c-55.38-7.43-75.3 28.52-75.3 28.52-4.16 5.53-2.07 11.49 4.64 8.32A63.7 63.7 0 000 294.33a64.19 64.19 0 0064.11 64.12 64.19 64.19 0 0063.63-71.86h78.34l-30.92-23.06s-36.7 3.55-62.88-24.94c2.74-.14 5.73-.23 8.9-.23 21.23 0 50.79 3.82 71.01 22.02.27.24.54.46.83.65l69.4 46.77a7.52 7.52 0 009.55-.92l27.95-27.96 16.67 7.14a64.18 64.18 0 00-.55 8.27 64.19 64.19 0 0064.11 64.12c35.36 0 64.12-28.76 64.12-64.12s-28.76-64.11-64.12-64.11zm-69.39-15.55l47.24-22.4-6.38 14.72-40.86 16.96v-9.28zM64.11 328.27c-18.71 0-33.94-15.22-33.94-33.94a33.98 33.98 0 0136.29-33.85l-14.04 28.95 27.14 13.17 12.99-26.77a33.73 33.73 0 015.5 18.5 33.98 33.98 0 01-33.94 33.95zm316.04 0a33.99 33.99 0 01-33.63-29.4l25.68 11 11.88-27.73-27.8-11.9a33.83 33.83 0 0123.87-9.85c18.72 0 33.94 15.23 33.94 33.94s-15.22 33.95-33.94 33.95z" /></svg>
      Motorcycle Channels
     </a>
     <a href="#">
      <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
       <path d="M256 0C114.84 0 0 114.84 0 256s114.84 256 256 256 256-114.84 256-256S397.16 0 256 0zm0 482C131.38 482 30 380.62 30 256S131.38 30 256 30s226 101.38 226 226-101.38 226-226 226zm0 0" />
       <path d="M330.88 186.27a52.8 52.8 0 0137.59-15.57c14.2 0 27.54 5.53 37.6 15.57a15 15 0 1021.2-21.22 82.63 82.63 0 00-58.8-24.35 82.63 82.63 0 00-58.8 24.35h-.01a15 15 0 1021.22 21.22zm0 0M105.95 186.27a52.82 52.82 0 0137.58-15.57c14.2 0 27.55 5.53 37.6 15.57a15 15 0 1021.2-21.22 82.63 82.63 0 00-58.8-24.35 82.63 82.63 0 00-58.8 24.35 15 15 0 1021.22 21.22zm0 0M416.67 243H95.33a15 15 0 00-15 15c0 97.02 78.65 175.67 175.67 175.67S431.67 355.02 431.67 258a15 15 0 00-15-15zM256 403.67c-75.95 0-137.5-57.77-144.91-130.67h289.82C393.5 345.9 331.96 403.67 256 403.67zm0 0" /></svg>
      Humor Channels
     </a>
     <button class="button show-more">Show More
     </button>
    </div>
   </div>
  </div>
  <div class="main-container">
   <div class="profile">
    <img src="https://images.unsplash.com/photo-1559543434-3e99643d333d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" alt="" class="profile-cover">
    <div class="profile-contact-info">
     <div class="profile-contact">
      <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 512 512">
       <path d="M10.69 95.16C80.96 154.66 204.26 259.36 240.5 292c4.87 4.4 10.08 6.65 15.5 6.65 5.4 0 10.62-2.22 15.47-6.6 36.27-32.68 159.57-137.4 229.84-196.9a10.66 10.66 0 001.5-14.72A42.36 42.36 0 00469.33 64H42.67A42.36 42.36 0 009.19 80.44a10.66 10.66 0 001.5 14.72z" />
       <path d="M505.81 127.4a10.62 10.62 0 00-11.37 1.55C416.5 195 317.05 279.69 285.76 307.89c-17.56 15.85-41.94 15.85-59.54-.03-33.36-30.05-145.04-125-208.66-178.91A10.67 10.67 0 000 137.08v268.25A42.7 42.7 0 0042.67 448h426.66A42.7 42.7 0 00512 405.33V137.08c0-4.15-2.42-7.93-6.19-9.67z" /></svg>

     </div>
     <div class="profile-contact">
      <svg viewBox="0 0 512 512" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
       <path d="M453.3 85.3a69.3 69.3 0 11-138.6 0 69.3 69.3 0 01138.6 0zm0 0" />
       <path d="M384 170.7a85.4 85.4 0 11.2-170.9 85.4 85.4 0 01-.2 170.9zM384 32a53.4 53.4 0 10.1 106.8A53.4 53.4 0 00384 32zm0 0M453.3 426.7a69.3 69.3 0 11-138.6 0 69.3 69.3 0 01138.6 0zm0 0" />
       <path d="M384 512a85.4 85.4 0 11.2-170.8A85.4 85.4 0 01384 512zm0-138.7a53.4 53.4 0 10.1 106.8 53.4 53.4 0 00-.1-106.8zm0 0M154.7 256A69.3 69.3 0 1116 256a69.3 69.3 0 01138.7 0zm0 0" />
       <path d="M85.3 341.3a85.4 85.4 0 11.2-170.8 85.4 85.4 0 01-.2 170.8zm0-138.6a53.4 53.4 0 10.2 106.8 53.4 53.4 0 00-.2-106.8zm0 0" />
       <path d="M135.7 245.8a21.3 21.3 0 01-10.6-40L323.1 93a21.3 21.3 0 1121 37.1L146.3 243c-3.3 1.9-7 2.8-10.5 2.8zm0 0M333.6 421.8c-3.6 0-7.2-1-10.5-2.8L125 306a21.4 21.4 0 0121.2-37l198 112.8a21.4 21.4 0 01-10.7 39.9zm0 0" /></svg>
     </div>
     <div class="profile-contact">
      <svg viewBox="0 0 515.6 515.6" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
       <path d="M496.7 212.2a64.4 64.4 0 11-91.2 91.1 64.4 64.4 0 0191.2-91M303.3 212.2a64.4 64.4 0 11-91 91.1 64.4 64.4 0 0191-91M110 212.2A64.4 64.4 0 1119 303.3a64.4 64.4 0 0191.1-91" /></svg>
     </div>
    </div>
    <div class="profile-info">
     <div class="profile-item">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 469.33 469.33" fill="currentColor">
       <path d="M320 213.33c35.3 0 63.79-28.69 63.79-64 0-35.3-28.48-64-63.79-64-35.3 0-64 28.7-64 64 0 35.31 28.7 64 64 64zM149.33 213.33c35.31 0 63.79-28.69 63.79-64 0-35.3-28.48-64-63.79-64-35.3 0-64 28.7-64 64 0 35.31 28.7 64 64 64zM149.33 256C99.52 256 0 280.96 0 330.67V384h298.67v-53.33c0-49.71-99.52-74.67-149.34-74.67zM320 256c-6.19 0-13.12.43-20.59 1.17 24.75 17.82 41.92 41.82 41.92 73.5V384h128v-53.33c0-49.71-99.52-74.67-149.33-74.67z" /></svg>
      1,702
     </div>
     <div class="profile-item">
      <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 469.33 469.33">
       <path d="M234.67 170.67c-35.31 0-64 28.69-64 64s28.69 64 64 64 64-28.7 64-64-28.7-64-64-64z" />
       <path d="M234.67 74.67C128 74.67 36.9 141 0 234.67c36.9 93.65 128 160 234.67 160 106.77 0 197.76-66.35 234.66-160-36.9-93.66-127.89-160-234.66-160zm0 266.66c-58.88 0-106.67-47.78-106.67-106.66S175.79 128 234.67 128s106.66 47.79 106.66 106.67-47.78 106.66-106.66 106.66z" /></svg>
      1,503
     </div>
     <div class="profile-item">
      <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 475.43 475.43">
       <path d="M306.9 164.57l78.9-86.2a7.83 7.83 0 001.56-8.36 8.36 8.36 0 00-7.3-4.7h-253.4s-3.13 0-3.13.52v-9.4a26.12 26.12 0 0021.94-27.7A28.73 28.73 0 00117.26 0a29.78 29.78 0 00-29.78 28.73 30.82 30.82 0 0020.37 27.7v411.16a7.84 7.84 0 0015.68 0V263.84h256.52c3.2.2 6.17-1.7 7.31-4.7a8.36 8.36 0 00-1.56-8.36l-78.9-86.2z" /></svg>
      Sep 21
     </div>
     <div class="profile-item">
      <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 411.14 411.14">
       <path d="M350.2 54.53H61.45C27.64 54.53 0 82.18 0 115.97v179.2c0 33.8 27.65 61.44 61.44 61.44H349.7c33.79 0 61.44-27.65 61.44-61.44v-179.2c.5-33.8-27.14-61.44-60.93-61.44zM287.75 210.7a11.96 11.96 0 01-3.58 3.59l-119.3 70.65a9.93 9.93 0 01-13.82-3.58 8.65 8.65 0 01-1.54-5.12V134.92c0-5.64 4.61-10.24 10.24-10.24 1.54 0 3.59.5 5.12 1.53l119.3 70.66c4.6 3.07 6.66 9.21 3.58 13.82z" /></svg>
      234
     </div>
    </div>
    <div class="profile-menu">
     <div class="profile-avatar">
      <img class="profile-img" src="https://images.unsplash.com/photo-1503275951620-83f8a32f7884?ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80" alt="">
      <div class="profile-name">Phoebe Allison</div>
     </div>
     <div class="menu-items">
      <a class="profile-menu-link ">Main</a>
      <a class="profile-menu-link active">Videos</a>
      <a class="profile-menu-link">Playlists</a>
      <a class="profile-menu-link">About</a>
     </div>
     <div class="follow-buttons">
      <button class="follow">645,321</button>
      <button class="follow follow-option">Follow</button>
     </div>
    </div>
   </div>
   <div class="trends">
    <a href="#">
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 50" fill="currentColor">
      <path d="M5.03 12h-5v38h56V12h-5zm31.999 20.262l-12.951 7.521a2.02 2.02 0 01-2.04.004 1.984 1.984 0 01-1.008-1.735V23.01c0-.724.377-1.372 1.008-1.735a2.047 2.047 0 012.04.003L37.029 28.8a1.983 1.983 0 011.001 1.731c0 .719-.374 1.366-1.001 1.731z" data-original="#000000" class="active-path" />
      <path d="M23.03 38.051v.004l12.994-7.524-12.951-7.525zM12.03 0h32v4h-32zM50.03 6h-44v4h44z" data-original="#000000" class="active-path" /></svg>
     See what's trending
    </a>
    <div class="follow-buttons">
     <button class="follow">Date Added</button>
     <button class="follow follow-option active">Most Popular</button>
    </div>
    <div class="play-all">
     <svg viewBox="0 0 494.942 494.942" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path d="M35.353 0l424.236 247.471L35.353 494.942z" /></svg>
     Play All
    </div>
   </div>
   <div class="videos">
    <div class="video">
     <div class="video-time">15.13</div>
     <video muted>
      <source src="https://player.vimeo.com/external/368244254.sd.mp4?s=2dc98d46cc5c55913b309928d1d14769f76bc6f9&profile_id=139&oauth2_token_id=57447761" type="video/mp4">
     </video>
     <div class="video-content">Planning Helps Make</div>
     <div class="view">15.4k views</div>
    </div>
    <div class="video">
     <div class="video-time">13.10</div>
     <video muted>
      <source src="https://player.vimeo.com/external/356200184.sd.mp4?s=f528556cafba1d369984dc341104e7eef8bb71bb&profile_id=139&oauth2_token_id=57447761" type="video/mp4">
     </video>
     <div class="video-content">This Is Cloaud Break</div>
     <div class="view">13.2k views</div>
    </div>
    <div class="video">
     <div class="video-time">15.30</div>
     <video muted>
      <source src="https://player.vimeo.com/external/364324653.sd.mp4?s=7ded2b451ac7f5dfaf1375277aa0308cdf5d011c&profile_id=139&oauth2_token_id=57447761" type="video/mp4">
     </video>
     <div class="video-content">Lost Your Mind</div>
     <div class="view">11.7k views</div>
    </div>
    <div class="video">
     <div class="video-time">11.30</div>
     <video muted>
      <source src="https://player.vimeo.com/external/399004885.sd.mp4?s=1d39443bef9856dacc4d3ba2c6be0881e38b7e66&profile_id=139&oauth2_token_id=57447761" type="video/mp4">
     </video>
     <div class="video-content">Planning Helps Make</div>
     <div class="view">9.2k views</div>
    </div>
    <div class="video">
     <div class="video-time">6.35</div>
     <video muted>
      <source src="https://player.vimeo.com/external/353556576.sd.mp4?s=8e942d8680fe908418143e63e04b8798982d5bea&profile_id=139&oauth2_token_id=57447761" type="video/mp4">
     </video>
     <div class="video-content">Research In Advertising</div>
     <div class="view">18.4k views</div>
    </div>
    <div class="video">
     <div class="video-time">2.21</div>
     <video muted>
      <source src="https://player.vimeo.com/external/368556609.sd.mp4?s=3fa896a1d6d8c04382a9b8f33053d2eaabe4342b&profile_id=139&oauth2_token_id=57447761" type="video/mp4">
     </video>
     <div class="video-content">See The Unmatched</div>
     <div class="view">3.4k views</div>
    </div>
    <div class="video">
     <div class="video-time">12.10</div>
     <video muted>
      <source src="https://player.vimeo.com/external/285489976.sd.mp4?s=4fa6461f93f18e0d6cfc30461fffb05311d60a28&profile_id=164&oauth2_token_id=57447761" type="video/mp4">
     </video>
     <div class="video-content">Dance In The Air</div>
     <div class="view">17.4k views</div>
    </div>
    <div class="video">
     <div class="video-time">7.50</div>
     <video muted>
      <source src="https://player.vimeo.com/external/325725646.sd.mp4?s=763c0f293299052689f8344b3a155ea2b4a1c92b&profile_id=164&oauth2_token_id=57447761" type="video/mp4">
     </video>
     <div class="video-content">Sadness Will Last Forever</div>
     <div class="view">12.6k views</div>
    </div>
   </div>
   <div class="load-more">
    <svg id="me" xmlns="http://w3.org/2000/svg" viewBox="0 0 341.333 341.333" fill="currentColor">
     <path d="M341.227 149.333V0l-50.133 50.133C260.267 19.2 217.707 0 170.56 0 76.267 0 .107 76.373.107 170.667s76.16 170.667 170.453 170.667c79.467 0 146.027-54.4 164.907-128h-44.373c-17.6 49.707-64.747 85.333-120.533 85.333-70.72 0-128-57.28-128-128s57.28-128 128-128c35.307 0 66.987 14.72 90.133 37.867l-68.8 68.8h149.333z" />
    </svg>
    Load More
   </div>
   <div class="footer">
    <div class="footer-row">
     <button class="button language">Language: English(UK)
     </button>
     <div class="footer-links">
      <a href="#">About</a>
      <a href="#">Press</a>
      <a href="#">Copyright</a>
      <a href="#">Creators</a>
      <a href="#">Advertise</a>
      <a href="#">Developers</a>
     </div>
     <button class="button language">History
     </button>
    </div>
    <div class="footer-row">
     <button class="button language">Location: England
     </button>
     <div class="footer-links link-footer">
      <a href="#">Terms</a>
      <a href="#">Privacy</a>
      <a href="#">Policy&Safety</a>
      <a href="#">Send Feedback</a>
     </div>
     <button class="button language">Help
     </button>
    </div>
   </div>
   <div class="footer-last">
    <div class="footer-year">2020. Video App</div>
    <div class="social-media">
     <a href="#">
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><path d="M512 97.248c-19.04 8.352-39.328 13.888-60.48 16.576 21.76-12.992 38.368-33.408 46.176-58.016-20.288 12.096-42.688 20.64-66.56 25.408C411.872 60.704 384.416 48 354.464 48c-58.112 0-104.896 47.168-104.896 104.992 0 8.32.704 16.32 2.432 23.936-87.264-4.256-164.48-46.08-216.352-109.792-9.056 15.712-14.368 33.696-14.368 53.056 0 36.352 18.72 68.576 46.624 87.232-16.864-.32-33.408-5.216-47.424-12.928v1.152c0 51.008 36.384 93.376 84.096 103.136-8.544 2.336-17.856 3.456-27.52 3.456-6.72 0-13.504-.384-19.872-1.792 13.6 41.568 52.192 72.128 98.08 73.12-35.712 27.936-81.056 44.768-130.144 44.768-8.608 0-16.864-.384-25.12-1.44C46.496 446.88 101.6 464 161.024 464c193.152 0 298.752-160 298.752-298.688 0-4.64-.16-9.12-.384-13.568 20.832-14.784 38.336-33.248 52.608-54.496z"/></svg>
     </a>
    <a href="#">
     <svg viewBox="0 0 511 511.9" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M510.95 150.5c-1.2-27.2-5.6-45.9-11.9-62.1-6.5-17.2-16.5-32.6-29.6-45.4-12.8-13-28.3-23.1-45.3-29.5-16.3-6.3-34.9-10.7-62.1-11.9C334.65.3 325.95 0 256.45 0s-78.2.3-105.5 1.5c-27.2 1.2-45.9 5.6-62.1 11.9A124.9 124.9 0 0043.45 43c-13 12.8-23.1 28.3-29.5 45.3-6.3 16.3-10.7 34.9-11.9 62.1C.75 177.8.45 186.5.45 256s.3 78.2 1.5 105.5c1.2 27.2 5.6 45.9 11.9 62.1 6.5 17.2 16.6 32.6 29.6 45.4 12.8 13 28.3 23.1 45.3 29.5 16.3 6.3 34.9 10.7 62.1 11.9 27.3 1.2 36 1.5 105.5 1.5s78.2-.3 105.5-1.5c27.2-1.2 45.9-5.6 62.1-11.9 34.4-13.3 61.6-40.5 74.9-74.9 6.3-16.3 10.7-34.9 11.9-62.1 1.2-27.3 1.5-36 1.5-105.5s-.1-78.2-1.3-105.5zm-46.1 209c-1.1 25-5.3 38.5-8.8 47.5-8.6 22.3-26.3 40-48.6 48.6-9 3.5-22.6 7.7-47.5 8.8-27 1.2-35.1 1.5-103.4 1.5s-76.5-.3-103.4-1.5c-25-1.1-38.5-5.3-47.5-8.8a78.77 78.77 0 01-29.4-19.1c-8.5-8.3-15-18.3-19.1-29.4-3.5-9-7.7-22.6-8.8-47.5-1.2-27-1.5-35.1-1.5-103.4s.3-76.5 1.5-103.4c1.1-25 5.3-38.5 8.8-47.5a77.8 77.8 0 0119.2-29.4c8.3-8.5 18.3-15 29.4-19.1 9-3.5 22.6-7.7 47.5-8.8 27-1.2 35.1-1.5 103.4-1.5 68.4 0 76.5.3 103.4 1.5 25 1.1 38.5 5.3 47.5 8.8a78.71 78.71 0 0129.4 19.1c8.5 8.3 15 18.3 19.1 29.4 3.5 9 7.7 22.6 8.8 47.5 1.2 27 1.5 35.1 1.5 103.4s-.3 76.3-1.5 103.3zm0 0"/><path d="M256.45 124.5c-72.6 0-131.5 58.9-131.5 131.5s58.9 131.5 131.5 131.5 131.5-58.9 131.5-131.5-58.9-131.5-131.5-131.5zm0 216.8c-47.1 0-85.3-38.2-85.3-85.3s38.2-85.3 85.3-85.3a85.31 85.31 0 010 170.6zm0 0M423.85 119.3a30.7 30.7 0 11-61.4 0 30.7 30.7 0 0161.4 0zm0 0"/></svg>
     </a>
     <a href="#">
     <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M16 3.98h2.19V.17a28.3 28.3 0 00-3.2-.17c-3.15 0-5.32 1.99-5.32 5.64V9H6.2v4.27h3.48V24h4.28V13.27h3.34L17.82 9h-3.87V6.06c0-1.23.33-2.08 2.05-2.08z"/></svg>
      </a>
    </div>
    <div class="policy">
     <a href="#" >Terms of Use</a>
    </div>
   </div>
  </div>
 </div>
</div>
</div>

script.babel

const toggleButton = document.querySelector('.dark-light');

toggleButton.addEventListener('click', () => {
  document.body.classList.toggle('dark-mode');
});

const allVideos = document.querySelectorAll('.video');

allVideos.forEach((v) => {
 v.addEventListener('mouseover', () => {
  const video = v.querySelector('video');
  video.play();
 });
 v.addEventListener('mouseleave', () => {
  const video = v.querySelector('video');
  video.pause();
 });
});

style.scss

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600&display=swap");

:root {
 --body-font: "Manrope", sans-serif;
 --body-color: #b3b3b3;
 --body-bg-color: #f2f2f2;
 --theme-bg-color: #fafafa;
 --border-color: #efefef;
 --logo-color: #f13a2f;
 --main-color: #808080;
 --header-bg-color: #fff;
}

.dark-mode {
 --body-bg-color: #1e222b;
 --theme-bg-color: #212835;
 --border-color: #393f50;
 --header-bg-color: #323a4b;
 --main-color: #fefffd;
 --body-color: #dddee0;
}
* {
 outline: none;
 box-sizing: border-box;
}

img {
 max-width: 100%;
}

html {
 box-sizing: border-box;
 -webkit-font-smoothing: antialiased;
}

body {
 font-family: var(--body-font);
 font-size: 15px;
 color: var(--body-color);
 background-color: var(--body-bg-color);
 margin: 0;
 font-weight: 600;
 min-height: -webkit-fill-available;
}

.video-app {
 display: flex;
 flex-direction: column;
 max-width: 1400px;
 height: 100vh;
 margin: 0 auto;
 overflow: hidden;
}

.header {
 height: 90px;
 width: 100%;
 border-bottom: 1px solid var(--border-color);
 display: flex;
 background-color: var(--header-bg-color);
 align-items: center;
 padding: 0 25px;
 color: var(--body-color);
 font-size: 15px;
}

.header-left {
 display: flex;
 align-items: center;
 svg {
  width: 22px;
  margin-right: 25px;
  flex-shrink: 0;
 }
}

.logo {
 width: 34px;
 height: 34px;
 border: 5px solid var(--logo-color);
 border-radius: 50%;
 flex-shrink: 0;
}

.header-menu {
 display: flex;
 align-items: center;
 cursor: pointer;
 margin-left: auto;
 height: 100;
 padding: 0 15px;
}

.menu-item {
 &:hover {
  color: var(--logo-color);
 }
 &:not(:last-child) {
  margin-right: 20px;
 }
}

.user-settings {
 display: flex;
 align-items: center;
 margin-left: auto;
 flex-shrink: 0;
 & > * + * {
  margin-left: 18px;
 }
}

.user-settings svg {
 width: 22px;
 flex-shrink: 0;
}

.button {
 display: flex;
 background-color: transparent;
 align-items: center;
 border: 2px solid var(--border-color);
 border-radius: 25px;
 color: var(--body-color);
 padding: 8px 16px;
 font-family: var(--body-font);
 cursor: pointer;
 font-weight: 600;
 font-size: 14px;
 svg {
  margin-right: 8px;
  width: 20px;
  fill: var(--body-color);
 }
}
.search-bar {
 height: 90px;
 position: relative;
 input {
  height: 100%;
  width: 100%;
  display: block;
  background-color: transparent;
  border: none;
  padding: 0 10px 0 54px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='18' height='18' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cdefs%3e%3cpath d='M18.5 17h-.79l-.28-.27a6.5 6.5 0 10-.7.7l.27.28v.79l5 4.99L23.49 22l-4.99-5zm-6 0a4.5 4.5 0 11-.01-8.99A4.5 4.5 0 0112.5 17z' id='a'/%3e%3c/defs%3e%3cg transform='translate(-6 -6)' fill='none' fill-rule='evenodd'%3e%3cmask id='b' fill='%23fff'%3e%3cuse xlink:href='%23a'/%3e%3c/mask%3e%3cg mask='url(%23b)' fill='%23D8D8D8'%3e%3cpath d='M3 3h24v24H3z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: 25px 50%;
  color: #7c7c7c;
  &::placeholder {
   color: var(--body-color);
  }
 }
}

.user-profile {
 width: 40px;
 height: 40px;
 border-radius: 50%;
 object-fit: cover;
 + svg {
  width: 14px;
 }
}

.notify {
 position: relative;
 &:before {
  content: "";
  position: absolute;
  background-color: var(--logo-color);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  right: -6px;
  bottom: 15px;
 }
}

.menu-item.active {
 color: var(--logo-color);
}

.wrapper {
 width: 100%;
 display: flex;
 flex-grow: 1;
 overflow: auto;
 background-color: var(--theme-bg-color);
}

.side-wrapper:not(:last-child) {
 border-bottom: 1px solid var(--border-color);
}

.side-wrapper svg {
 width: 20px;
 fill: var(--body-color);
 margin-right: 25px;
 flex-shrink: 0;
}

.username {
 color: var(--main-color);
 font-size: 15px;
}

.side-menu a {
 text-decoration: none;
 font-weight: 500;
 color: var(--main-color);
 display: flex;
 align-items: center;
 font-size: 15px;
 white-space: nowrap;
 &:not(:last-child) {
  margin-bottom: 20px;
 }
}

.side-menu {
 padding: 20px;
}

.side-title {
 padding: 0 0 20px;
 font-size: 15px;
}

.user {
 display: flex;
 align-items: center;
}

.user + .user {
 margin-top: 15px;
}

.user-img {
 border-radius: 50%;
 width: 30px;
 height: 30px;
 margin-right: 16px;
 object-fit: cover;
 object-position: center;
}

.show-more {
 margin-top: 20px;
 padding: 12px 16px;
}

.left-side {
 width: 270px;
 display: flex;
 flex-direction: column;
 border-right: 1px solid var(--border-color);
 overflow: auto;
 flex-shrink: 0;
}

.main-container {
 padding: 25px;
 flex-grow: 1;
 overflow: auto;
}

.profile {
 height: 45vh;
 max-height: 350px;
 min-height: 270px;
 position: relative;
 display: flex;
 justify-content: flex-end;
 flex-direction: column;
}

.profile-cover {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center;
 border-radius: 4px 4px 6px 6px;
}

.profile-menu {
 display: flex;
 justify-content: space-between;
 align-items: center;
 background-color: var(--header-bg-color);
 width: 100%;
 box-shadow: -1px 3px 8px -1px rgba(0, 0, 0, 0.1);
 border-radius: 0 0 4px 4px;
 padding: 0 25px;
 z-index: 2;
}

.profile-img {
 border-radius: 50%;
 width: 42px;
 height: 42px;
 object-fit: cover;
 margin-right: 15px;
}

.profile-avatar {
 display: flex;
 align-items: center;
 flex-shrink: 0;
}

.profile-name {
 white-space: nowrap;
}

.menu-items {
 display: flex;
 cursor: pointer;
}

.profile-menu-link {
 padding: 20px;
 transition: 0.2s;
 &.active,
 &:hover {
  border-bottom: 3px solid var(--logo-color);
  color: var(--logo-color);
 }
}

.profile-info {
 justify-content: center;
 display: flex;
 background-color: rgba(0, 0, 0, 0.3);
 width: 100%;
 z-index: 2;
}

.profile-name {
 color: var(--main-color);
}

.profile-item {
 display: flex;
 align-items: center;
 color: #fff;
 padding: 26px 16px;
 white-space: nowrap;
 svg {
  width: 22px;
  margin-right: 10px;
 }
}

.profile-contact-info {
 position: absolute;
 display: flex;
 right: 10px;
 top: 20px;
 color: #fff;
 svg {
  width: 18px;
 }
}

.profile-contact {
 border: 1px solid rgba(239, 239, 239, 0.3);
 padding: 16px;
 margin-left: 10px;
 border-radius: 50%;
 cursor: pointer;
}

.follow-buttons {
 display: flex;
}

.follow {
 border: 2px solid var(--border-color);
 border-radius: 25px 0 0 25px;
 color: var(--body-color);
 padding: 8px 16px;
 font-weight: 600;
 font-size: 14px;
 cursor: pointer;
 background-color: transparent;
 &:hover {
  background-color: var(--header-bg-color);
 }
}

.follow-option {
 border-radius: 0 25px 25px 0;
 margin-left: -2px;
}

.trends {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 40px 45px;
 a {
  text-decoration: none;
  color: var(--body-color);
  display: flex;
  align-items: center;
  font-size: 15px;
  white-space: nowrap;
 }
}

.trends svg {
 width: 20px;
 margin-right: 16px;
}

.follow-option.active {
 background-color: var(--header-bg-color);
 margin-left: -3px;
}

.play-all {
 background-color: var(--logo-color);
 color: #fff;
 padding: 10px 20px;
 border-radius: 30px;
 display: flex;
 align-items: center;
 svg {
  width: 12px;
  flex-shrink: 0;
  margin-right: 8px;
 }
}

.videos {
 display: grid;
 grid-template-columns: repeat(4,1fr);
 grid-column-gap: 20px;
 grid-row-gap: 20px;
}


.video video {
 transition: .4s;
 max-width: 100%;
 display: block;
 border-radius: 4px 4px 0 0;
}

.video {
 overflow: hidden;
 box-shadow: -1px 3px 8px -1px rgba(0, 0, 0, 0.1);
 border-radius: 4px;
 position: relative;
  background-color: var(--header-bg-color);
 cursor: pointer;
 &:hover .video-time {
  opacity: 0;
 }
 &:hover video {
  transform: scale(2.2);
  transform-origin: center;
 }
 &:hover .view {
  padding: 10px;
 }
}

.video-time {
 position: absolute;
 background-color: rgba(0, 0, 0, 0.5);
 padding: 8px;
 border-radius: 15px;
 font-size: 12px;
 color: #fff;
 bottom: 80px;
 right: 6px;
 transition: .3s ease-in;
}


.video-content {
 width: 100%;
 color: var(--main-color);
 padding: 15px 10px 0;
 border-radius: 0 0 4px 4px;
 font-size: 14px;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
} 

.view {
 padding: 10px;
 position: relative;
 background-color: var(--header-bg-color);
 z-index: 1;
 font-size: 13px;
}

.load-more {
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 30px;
 border-bottom: 1px solid var(--border-color);
 cursor: pointer;
 svg {
  width: 16px;
  margin-right: 15px;
 }
  &:hover svg{
   animation: load 0.9s linear infinite;
  } 
}

@keyframes load 
{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
} 

.language {
 margin-bottom: 8px;
}

.footer-row {
 display: flex;
 align-items: center;
 justify-content: space-between;
}

.footer-links a {
 text-decoration: none;
 color: var(--main-color);
 & + a {
  margin-left: 8px;
 }
}

.footer-links {
 display: flex;
}

.link-footer a {
 color: var(--body-color);
 font-size: 14px;
}

.footer {
 padding: 30px 0;
 &-last {
  border-top: 1px solid var(--border-color);
  padding: 30px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
 }
}

.social-media {
 display: flex;
 align-items: center;
 svg {
  width: 100%;
 }
 a {
  border: 1px solid var(--border-color);
  border-radius: 50%;
  color: var(--body-color);
  padding: 8px;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin-right: 12px;
 }
}

.policy a {
 text-decoration: none;
 color: var(--body-color);
}

@media (max-width:1030px) {
 .profile-name {
  display: none;
 }
 .profile-menu-link {
  padding: 20px 10px;
  font-size: 14px;
 }
 
 .trends {
  padding: 40px 10px;
 }
}

@media (max-width: 1120px) {
 .footer-row {
  flex-direction: column;
  & + & {
   margin-top: 10px;
  }
  .button {
   display: none;
  } 
 }
}

@media (max-width:900px) {
 .play-all {
  color: transparent;
  white-space: nowrap;
  width: 30px;
  padding: 0;
  fill: #fff;
  height: 30px;
  position: relative;
 }
 .profile-item {
  padding: 20px 10px;
 }
 .play-all svg {
  position: absolute;
  left: 58%;
  top: 50%;
  transform: translate(-50%, -50%);
  fill: #fff;
 }
}

@media (max-width: 840px) {
 .profile-contact {
  padding: 6px;
 }
 .profile-item, .profile-avatar {
  flex-direction: column;
 }
 .profile-item svg {
  margin-right: 0;
 }
 .profile-item {
  text-align: center;
 }
 .profile-img {
  margin-right: 0;
  margin-top: 10px;
 }
 .profile-name {
  display: block;
  margin-bottom: 10px;
  margin-top: 6px;
 } 
 .profile-menu {
  flex-direction: column;
 }
 .menu-items {
  order: 1;
 }
}


@media (max-width: 980px) {
 .videos {
  grid-template-columns: 1fr 1fr;
 }
  .profile {
  min-height: 380px;
  max-height: 380px;
 }
}

@media (max-width: 800px) {
 .trends .follow-buttons {
  display: none;
 }
}

@media (max-width: 750px) {
 .left-side {
  display: none;
 }
 .header-menu {
  display: none;
 }
 .search-bar input {
  max-width: 140px;
 }
 .user-settings button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  padding: 0;
  position: relative;
  color: transparent;
 }
 .user-settings button svg {
  margin-right: 0;
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
 }
}

@media (max-width: 440px){
 .user-settings svg {
  display: none;
 }
 
 .videos{
  grid-template-columns:1fr;
 }
}


.dark-light {
 position: fixed;
 bottom: 30px;
 right: 30px;
 background-color: var(--header-bg-color);
 box-shadow: -1px 3px 8px -1px rgba(0, 0, 0, 0.2);
 padding: 8px;
 border-radius: 50%;
 z-index: 3;
 svg {
  width: 28px;
 }
}

.dark-mode .dark-light svg {
    fill: #ffce45;
    stroke: #ffce45;
}

.dark-light svg {
    fill: transparent;
    transition: 0.5s;
}

@media (max-width: 475px) {
 .footer-links {
  flex-direction: column;
 }
 .footer-links a + a {
   margin-left: 0;
}
 .footer-row:last-child {
  align-items: flex-end;
 }
 .footer-row {
  align-items: flex-start;
 }
 .footer {
  display: flex;
  justify-content: space-between;
 }
 .footer-links a {
  margin-bottom: 5px;
 }
 .policy {
  display: none;
 }
 .dark-light {
  bottom: 60px;
 }
}

video-sharing-platform-ui.markdown

Video Sharing Platform UI

Inspired by Live Spline.one https://dribbble.com/shots/3860602-Video-Application-4

A Pen by Aysenur Turk on CodePen.

License.