Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it now
Intall Later
Run
HTML
CSS
Javascript
Output
Home
Trending
Subscriptions
Library
History
Your videos
Watch later
Indie wibes
Show more
Subscriptions
Marques Brownlee
Netflix UI Engineering
Bill Gates
Chess.com
KEXP
Google Developers
NBA
Show more
More from youtube
YouTube Premium
Gaming
Live
Settings
Report history
Send feedback
Home
Trending
Subscriptions
Library
*, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; } // screen breakpoints $screen-alpha: 512px; $screen-bravo: 600px; $screen-charlie: 656px; $screen-delta: 808px; $screen-echo: 888px; $screen-foxtrot: 1145px; $screen-golf: 1330px; // theme $color-base: hsl(0,0,1%); // #030303 $color-base-10: hsl(0,0,20%); // #333333 $color-base-20: hsl(0,0,38%); // #606060 $color-base-30: hsl(0,0,83%); // #d3d3d3 $color-base-40: hsl(0,0,90%); // #e5e5e5 $color-base-50: hsl(0,0,97%); // #f8f8f8 $color-base-60: hsl(0,0,98%); // #f9f9f9 $color-brand: hsl(0, 100%, 50%); // #FF0000 $color-input-focus: #1c62b9; $color-natural-min: #fff; $color-natural-max: #000; // fonts $font-size-small: 10px; $font-size-medium: 12px; $font-size-medium-2: 12px; $font-size-large: 14px; @mixin screen-alpha { @media only screen and (min-width: #{$screen-alpha}) { @content } } @mixin screen-bravo { @media only screen and (min-width: #{$screen-bravo}) { @content } } @mixin screen-charlie { @media only screen and (min-width: #{$screen-charlie}) { @content } } @mixin screen-delta { @media only screen and (min-width: #{$screen-delta}) { @content } } @mixin screen-delta { @media only screen and (min-width: #{$screen-delta}) { @content } } @mixin screen-echo { @media only screen and (min-width: #{$screen-echo}) { @content } } @mixin screen-foxtrot { @media only screen and (min-width: #{$screen-foxtrot}) { @content } } @mixin screen-golf { @media only screen and (min-width: #{$screen-golf}) { @content } } /* width */ ::-webkit-scrollbar { width: 10px; } /* Track */ ::-webkit-scrollbar-track { background: $color-natural-min; } /* Handle */ ::-webkit-scrollbar-thumb { background: $color-base-30; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: $color-base-40; } body { font-family: 'Roboto', sans-serif; } img { max-width: 100%; } span { vertical-align: top; } h3 { font-size: $font-size-large; } .selected { color: $color-brand; svg { fill: $color-brand; } } .header { display: flex; position: fixed; top: 0; right: 0; left: 0; justify-content: space-between; padding: 0 8px; height: 56px; background: $color-natural-min; @include screen-charlie { padding: 0 16px; } } .header-start { display: flex; align-items: center; .icon { margin-right: 4px; @include screen-charlie { margin-right: 16px; } } } .header-center { display: none; flex-grow: 1; @include screen-charlie { display: flex; justify-content: center; align-items: center; } } .header-end { display: flex; align-items: center; >:first-child { @include screen-charlie { display: none; } } .avatar { padding: 0 6px; } } .nav { display: none; position: fixed; height: calc(100vh - 56px); top: 56px; left: 0; } .narrow-nav { width: 72px; @extend .nav; @include screen-delta { display: block; } @include screen-golf { display: none; } } .nav-section { padding: 12px 0; border-bottom: 1px solid $color-base-40; } .nav-section-header { padding: 8px 24px; text-transform: uppercase; color: $color-base-20; } .wide-nav { width: 240px; @extend .nav; @include screen-golf { display: block; } .icon { padding: 0; } &:hover { overflow: overlay; } } .wide-nav-item { @extend .cursor-pointer; display: flex; align-items: center; height: 40px; padding: 0 24px; &:hover { background: rgba($color-natural-max, 0.05); } .icon { margin-right: 24px; } .avatar { width: 24px; height: 24px; } .notification-icon { width: 16px; height: 16px; margin-left: auto; fill: $color-brand; } } .text-overflow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .text-overflow-double-line { @extend .text-overflow; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; } .wide-nav-label { @extend .text-overflow; max-width: 128px; font-size: $font-size-large; color: $color-base; } .icon { @extend .cursor-pointer; box-sizing: content-box; width: 24px; height: 24px; padding: 8px; fill: $color-base-20; overflow: hidden; } .logo { @extend .icon; width: 80px; } .avatar { @extend .icon; box-sizing: content-box; width: 32px; height: 32px; img { border-radius: 50%; height: 100%; object-fit: cover; } } .cursor-pointer { cursor: pointer; } .input-search-box { display: flex; height: 32px; width: 80%; max-width: 648px; } .input-wrap { width: calc(100% - 65px); padding: 2px 6px; border: 1px solid $color-base-30; border-radius: 2px 0 0 2px; &:focus-within { border: 1px solid $color-input-focus; } } .input-search { height: 100%; border: none; &:focus { outline: none; } } .input-search-button { @extend .cursor-pointer; display: flex; justify-content: center; align-items: center; margin: 0; width: 65px; background: $color-base-40; border: 1px solid $color-base-30; border-left: none; border-radius: 0 2px 2px 0; .icon { margin: 0; width: 20px; height: 20px; padding: 1px 6px; svg { fill: $color-base-20; } } } .narrow-nav-list { list-style-type: none; .icon { padding: 0; margin-bottom: 6px; } } .narrow-nav-item { @extend .cursor-pointer; display: flex; flex-direction: column; align-items: center; height: 74px; padding: 16px 0 14px; &:hover { background: rgba($color-natural-max, 0.05); } } .narrow-nav-label { font-size: $font-size-small; } .news-dot { width: 4px; height: 4px; border-radius: 50%; background-color: #065fd4; margin: 0 6px; margin-left: auto; } .separator-dot { margin: 0 4px; } .footer-section { padding: 16px 24px 0; .footer-item { font-size: $font-size-medium-2; text-decoration: none; white-space: nowrap; color: $color-base-20; margin-right: 8px; } } .copyright { font-size: $font-size-medium-2; padding: 16px 24px; color: $color-base-20; } .main-content { display: grid; padding: 24px; margin-top: 56px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-auto-rows: minmax(240px, auto); background: $color-base-60; min-height: calc(100vh - 56px); gap: 16px; justify-content: center; @include screen-delta { margin-left: 72px; } @include screen-golf { margin-left: 240px; grid-template-columns: repeat(4, minmax(240px, 360px)); } } .video-item { @extend .cursor-pointer; } .video-footer-head { display: flex; } .video-description { font-size: $font-size-large; color: $color-base-20; } .author { display: flex; align-items: center; .icon { width: 12px; height: 12px; padding: 0 4px; color: $color-base-20; } } .video-title { @extend .text-overflow-double-line; max-width: 60ch; color: $color-base; margin-bottom: 4px; } .video-footer { display: flex; margin-top: 12px; .avatar { padding: 0; margin-right: 12px; flex: 0 0 36px; height: 36px; margin-right: 12px; } }