HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<body>
<div class="container">
<!-- Header -->
<div id="header">
<!-- logo -->
<div class="logo">
<div class="burger">
<span></span>
<span></span>
<span></span>
</div>
<div class="ytb-logo">
<svg
viewBox="0 0 90 20"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g
viewBox="0 0 90 20"
preserveAspectRatio="xMidYMid meet"
class="style-scope yt-icon"
>
<g class="style-scope yt-icon">
<path
d="M27.9727 3.12324C27.6435 1.89323 26.6768 0.926623 25.4468 0.597366C23.2197 2.24288e-07 14.285 0 14.285 0C14.285 0 5.35042 2.24288e-07 3.12323 0.597366C1.89323 0.926623 0.926623 1.89323 0.597366 3.12324C2.24288e-07 5.35042 0 10 0 10C0 10 2.24288e-07 14.6496 0.597366 16.8768C0.926623 18.1068 1.89323 19.0734 3.12323 19.4026C5.35042 20 14.285 20 14.285 20C14.285 20 23.2197 20 25.4468 19.4026C26.6768 19.0734 27.6435 18.1068 27.9727 16.8768C28.5701 14.6496 28.5701 10 28.5701 10C28.5701 10 28.5677 5.35042 27.9727 3.12324Z"
fill="#FF0000"
class="style-scope yt-icon"
></path>
<path
d="M11.4253 14.2854L18.8477 10.0004L11.4253 5.71533V14.2854Z"
fill="white"
class="style-scope yt-icon"
></path>
</g>
<g class="style-scope yt-icon">
<g id="youtube-paths" class="style-scope yt-icon">
<path
d="M34.6024 13.0036L31.3945 1.41846H34.1932L35.3174 6.6701C35.6043 7.96361 35.8136 9.06662 35.95 9.97913H36.0323C36.1264 9.32532 36.3381 8.22937 36.665 6.68892L37.8291 1.41846H40.6278L37.3799 13.0036V18.561H34.6001V13.0036H34.6024Z"
class="style-scope yt-icon"
></path>
<path
d="M41.4697 18.1937C40.9053 17.8127 40.5031 17.22 40.2632 16.4157C40.0257 15.6114 39.9058 14.5437 39.9058 13.2078V11.3898C39.9058 10.0422 40.0422 8.95805 40.315 8.14196C40.5878 7.32588 41.0135 6.72851 41.592 6.35457C42.1706 5.98063 42.9302 5.79248 43.871 5.79248C44.7976 5.79248 45.5384 5.98298 46.0981 6.36398C46.6555 6.74497 47.0647 7.34234 47.3234 8.15137C47.5821 8.96275 47.7115 10.0422 47.7115 11.3898V13.2078C47.7115 14.5437 47.5845 15.6161 47.3329 16.4251C47.0812 17.2365 46.672 17.8292 46.1075 18.2031C45.5431 18.5771 44.7764 18.7652 43.8098 18.7652C42.8126 18.7675 42.0342 18.5747 41.4697 18.1937ZM44.6353 16.2323C44.7905 15.8231 44.8705 15.1575 44.8705 14.2309V10.3292C44.8705 9.43077 44.7929 8.77225 44.6353 8.35833C44.4777 7.94206 44.2026 7.7351 43.8074 7.7351C43.4265 7.7351 43.156 7.94206 43.0008 8.35833C42.8432 8.77461 42.7656 9.43077 42.7656 10.3292V14.2309C42.7656 15.1575 42.8408 15.8254 42.9914 16.2323C43.1419 16.6415 43.4123 16.8461 43.8074 16.8461C44.2026 16.8461 44.4777 16.6415 44.6353 16.2323Z"
class="style-scope yt-icon"
></path>
<path
d="M56.8154 18.5634H54.6094L54.3648 17.03H54.3037C53.7039 18.1871 52.8055 18.7656 51.6061 18.7656C50.7759 18.7656 50.1621 18.4928 49.767 17.9496C49.3719 17.4039 49.1743 16.5526 49.1743 15.3955V6.03751H51.9942V15.2308C51.9942 15.7906 52.0553 16.188 52.1776 16.4256C52.2999 16.6631 52.5045 16.783 52.7914 16.783C53.036 16.783 53.2712 16.7078 53.497 16.5573C53.7228 16.4067 53.8874 16.2162 53.9979 15.9858V6.03516H56.8154V18.5634Z"
class="style-scope yt-icon"
></path>
<path
d="M64.4755 3.68758H61.6768V18.5629H58.9181V3.68758H56.1194V1.42041H64.4755V3.68758Z"
class="style-scope yt-icon"
></path>
<path
d="M71.2768 18.5634H69.0708L68.8262 17.03H68.7651C68.1654 18.1871 67.267 18.7656 66.0675 18.7656C65.2373 18.7656 64.6235 18.4928 64.2284 17.9496C63.8333 17.4039 63.6357 16.5526 63.6357 15.3955V6.03751H66.4556V15.2308C66.4556 15.7906 66.5167 16.188 66.639 16.4256C66.7613 16.6631 66.9659 16.783 67.2529 16.783C67.4974 16.783 67.7326 16.7078 67.9584 16.5573C68.1842 16.4067 68.3488 16.2162 68.4593 15.9858V6.03516H71.2768V18.5634Z"
class="style-scope yt-icon"
></path>
<path
d="M80.609 8.0387C80.4373 7.24849 80.1621 6.67699 79.7812 6.32186C79.4002 5.96674 78.8757 5.79035 78.2078 5.79035C77.6904 5.79035 77.2059 5.93616 76.7567 6.23014C76.3075 6.52412 75.9594 6.90747 75.7148 7.38489H75.6937V0.785645H72.9773V18.5608H75.3056L75.5925 17.3755H75.6537C75.8724 17.7988 76.1993 18.1304 76.6344 18.3774C77.0695 18.622 77.554 18.7443 78.0855 18.7443C79.038 18.7443 79.7412 18.3045 80.1904 17.4272C80.6396 16.5476 80.8653 15.1765 80.8653 13.3092V11.3266C80.8653 9.92722 80.7783 8.82892 80.609 8.0387ZM78.0243 13.1492C78.0243 14.0617 77.9867 14.7767 77.9114 15.2941C77.8362 15.8115 77.7115 16.1808 77.5328 16.3971C77.3564 16.6158 77.1165 16.724 76.8178 16.724C76.585 16.724 76.371 16.6699 76.1734 16.5594C75.9759 16.4512 75.816 16.2866 75.6937 16.0702V8.96062C75.7877 8.6196 75.9524 8.34209 76.1852 8.12337C76.4157 7.90465 76.6697 7.79646 76.9401 7.79646C77.2271 7.79646 77.4481 7.90935 77.6034 8.13278C77.7609 8.35855 77.8691 8.73485 77.9303 9.26636C77.9914 9.79787 78.022 10.5528 78.022 11.5335V13.1492H78.0243Z"
class="style-scope yt-icon"
></path>
<path
d="M84.8657 13.8712C84.8657 14.6755 84.8892 15.2776 84.9363 15.6798C84.9833 16.0819 85.0821 16.3736 85.2326 16.5594C85.3831 16.7428 85.6136 16.8345 85.9264 16.8345C86.3474 16.8345 86.639 16.6699 86.7942 16.343C86.9518 16.0161 87.0365 15.4705 87.0506 14.7085L89.4824 14.8519C89.4965 14.9601 89.5035 15.1106 89.5035 15.3011C89.5035 16.4582 89.186 17.3237 88.5534 17.8952C87.9208 18.4667 87.0247 18.7536 85.8676 18.7536C84.4777 18.7536 83.504 18.3185 82.9466 17.446C82.3869 16.5735 82.1094 15.2259 82.1094 13.4008V11.2136C82.1094 9.33452 82.3987 7.96105 82.9772 7.09558C83.5558 6.2301 84.5459 5.79736 85.9499 5.79736C86.9165 5.79736 87.6597 5.97375 88.1771 6.32888C88.6945 6.684 89.059 7.23433 89.2707 7.98457C89.4824 8.7348 89.5882 9.76961 89.5882 11.0913V13.2362H84.8657V13.8712ZM85.2232 7.96811C85.0797 8.14449 84.9857 8.43377 84.9363 8.83593C84.8892 9.2381 84.8657 9.84722 84.8657 10.6657V11.5641H86.9283V10.6657C86.9283 9.86133 86.9001 9.25221 86.846 8.83593C86.7919 8.41966 86.6931 8.12803 86.5496 7.95635C86.4062 7.78702 86.1851 7.7 85.8864 7.7C85.5854 7.70235 85.3643 7.79172 85.2232 7.96811Z"
class="style-scope yt-icon"
></path>
</g>
</g>
</g>
</svg>
<div class="country">ZA</div>
</div>
</div>
<!-- search -->
<div class="search">
<form>
<input type="text" placeholder="Search" />
<button>
<svg
xmlns="http://www.w3.org/2000/svg"
style="pointer-events: none; display: block; width: 100%; height: 100%"
fill="currentColor"
class="bi bi-search"
viewBox="0 0 16 16"
>
<path
d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"
/>
</svg>
</button>
</form>
<div class="voice">
<div class="icon">
<svg
xmlns="http://www.w3.org/2000/svg"
style="pointer-events: none; display: block; width: 100%; height: 100%"
fill="currentColor"
class="bi bi-mic-fill"
viewBox="0 0 16 16"
>
<path d="M5 3a3 3 0 0 1 6 0v5a3 3 0 0 1-6 0V3z" />
<path
d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5z"
/>
</svg>
</div>
<p>Search with voice</p>
</div>
</div>
<!-- account -->
<div class="account">
<div class="upload">
<div class="icon">
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g class="style-scope yt-icon">
<path
d="M14,13h-3v3H9v-3H6v-2h3V8h2v3h3V13z M17,6H3v12h14v-6.39l4,1.83V8.56l-4,1.83V6 M18,5v3.83L22,7v8l-4-1.83V19H2V5H18L18,5 z"
class="style-scope yt-icon"
></path>
</g>
</svg>
</div>
<p>Create</p>
</div>
<div class="notification">
<div class="icon">
<svg
xmlns="http://www.w3.org/2000/svg"
style="pointer-events: none; display: block; width: 100%; height: 100%"
fill="currentColor"
class="bi bi-bell"
viewBox="0 0 16 16"
>
<path
d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z"
/>
</svg>
</div>
<p>Notifications</p>
</div>
<div class="profile">
<img
src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80"
alt=""
/>
</div>
</div>
</div>
<div class="wrapper">
<!-- Sidebar -->
<div id="sidebar">
<div class="bar">
<div class="top section">
<div class="item active">
<a>
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g class="style-scope yt-icon">
<path d="M4,10V21h6V15h4v6h6V10L12,3Z" class="style-scope yt-icon"></path>
</g>
</svg>
Home
</a>
</div>
<div class="item">
<a>
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g height="24" viewBox="0 0 24 24" width="24" class="style-scope yt-icon">
<path
d="M10 14.65v-5.3L15 12l-5 2.65zm7.77-4.33c-.77-.32-1.2-.5-1.2-.5L18 9.06c1.84-.96 2.53-3.23 1.56-5.06s-3.24-2.53-5.07-1.56L6 6.94c-1.29.68-2.07 2.04-2 3.49.07 1.42.93 2.67 2.22 3.25.03.01 1.2.5 1.2.5L6 14.93c-1.83.97-2.53 3.24-1.56 5.07.97 1.83 3.24 2.53 5.07 1.56l8.5-4.5c1.29-.68 2.06-2.04 1.99-3.49-.07-1.42-.94-2.68-2.23-3.25zm-.23 5.86l-8.5 4.5c-1.34.71-3.01.2-3.72-1.14-.71-1.34-.2-3.01 1.14-3.72l2.04-1.08v-1.21l-.69-.28-1.11-.46c-.99-.41-1.65-1.35-1.7-2.41-.05-1.06.52-2.06 1.46-2.56l8.5-4.5c1.34-.71 3.01-.2 3.72 1.14.71 1.34.2 3.01-1.14 3.72L15.5 9.26v1.21l1.8.74c.99.41 1.65 1.35 1.7 2.41.05 1.06-.52 2.06-1.46 2.56z"
class="style-scope yt-icon"
></path>
</g>
</svg>
Shorts
</a>
</div>
<div class="item">
<a>
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g class="style-scope yt-icon">
<path
d="M10,18v-6l5,3L10,18z M17,3H7v1h10V3z M20,6H4v1h16V6z M22,9H2v12h20V9z M3,10h18v10H3V10z"
class="style-scope yt-icon"
></path>
</g>
</svg>
Subscriptions
</a>
</div>
</div>
<div class="mid section">
<div class="item">
<a>
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g class="style-scope yt-icon">
<path
d="M11,7l6,3.5L11,14V7L11,7z M18,20H4V6H3v15h15V20z M21,18H6V3h15V18z M7,17h13V4H7V17z"
class="style-scope yt-icon"
></path>
</g>
</svg>
Library
</a>
</div>
<div class="item">
<a>
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g class="style-scope yt-icon">
<path
d="M14.97,16.95L10,13.87V7h2v5.76l4.03,2.49L14.97,16.95z M22,12c0,5.51-4.49,10-10,10S2,17.51,2,12h1c0,4.96,4.04,9,9,9 s9-4.04,9-9s-4.04-9-9-9C8.81,3,5.92,4.64,4.28,7.38C4.17,7.56,4.06,7.75,3.97,7.94C3.96,7.96,3.95,7.98,3.94,8H8v1H1.96V3h1v4.74 C3,7.65,3.03,7.57,3.07,7.49C3.18,7.27,3.3,7.07,3.42,6.86C5.22,3.86,8.51,2,12,2C17.51,2,22,6.49,22,12z"
class="style-scope yt-icon"
></path>
</g>
</svg>
History
</a>
</div>
<div class="item">
<a>
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g class="style-scope yt-icon">
<path
d="M10,8l6,4l-6,4V8L10,8z M21,3v18H3V3H21z M20,4H4v16h16V4z"
class="style-scope yt-icon"
></path>
</g>
</svg>
Your Videos
</a>
</div>
<div class="item">
<a>
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g class="style-scope yt-icon">
<path
d="M14.97,16.95L10,13.87V7h2v5.76l4.03,2.49L14.97,16.95z M12,3c-4.96,0-9,4.04-9,9s4.04,9,9,9s9-4.04,9-9S16.96,3,12,3 M12,2c5.52,0,10,4.48,10,10s-4.48,10-10,10S2,17.52,2,12S6.48,2,12,2L12,2z"
class="style-scope yt-icon"
></path>
</g>
</svg>
Watch later
</a>
</div>
<div class="item">
<a>
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g class="style-scope yt-icon">
<path
d="M18.77,11h-4.23l1.52-4.94C16.38,5.03,15.54,4,14.38,4c-0.58,0-1.14,0.24-1.52,0.65L7,11H3v10h4h1h9.43 c1.06,0,1.98-0.67,2.19-1.61l1.34-6C21.23,12.15,20.18,11,18.77,11z M7,20H4v-8h3V20z M19.98,13.17l-1.34,6 C18.54,19.65,18.03,20,17.43,20H8v-8.61l5.6-6.06C13.79,5.12,14.08,5,14.38,5c0.26,0,0.5,0.11,0.63,0.3 c0.07,0.1,0.15,0.26,0.09,0.47l-1.52,4.94L13.18,12h1.35h4.23c0.41,0,0.8,0.17,1.03,0.46C19.92,12.61,20.05,12.86,19.98,13.17z"
class="style-scope yt-icon"
></path>
</g>
</svg>
Liked videos
</a>
</div>
<div class="item">
<a>
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g class="style-scope yt-icon">
<path
d="M22,7H2v1h20V7z M13,12H2v-1h11V12z M13,16H2v-1h11V16z M15,19v-8l7,4L15,19z"
class="style-scope yt-icon"
></path>
</g>
</svg>
Playlist 1
</a>
</div>
<div class="toShow">
<div class="item">
<a>
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g class="style-scope yt-icon">
<path
d="M22,7H2v1h20V7z M13,12H2v-1h11V12z M13,16H2v-1h11V16z M15,19v-8l7,4L15,19z"
class="style-scope yt-icon"
></path>
</g>
</svg>
Playlist 2
</a>
</div>
<div class="item">
<a>
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g class="style-scope yt-icon">
<path
d="M22,7H2v1h20V7z M13,12H2v-1h11V12z M13,16H2v-1h11V16z M15,19v-8l7,4L15,19z"
class="style-scope yt-icon"
></path>
</g>
</svg>
Playlist 3
</a>
</div>
<div class="item">
<a>
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g class="style-scope yt-icon">
<path
d="M22,7H2v1h20V7z M13,12H2v-1h11V12z M13,16H2v-1h11V16z M15,19v-8l7,4L15,19z"
class="style-scope yt-icon"
></path>
</g>
</svg>
Playlist 4
</a>
</div>
</div>
<div class="item showmore">
<a>
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon down"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g class="style-scope yt-icon">
<path
d="M12,15.7L5.6,9.4l0.7-0.7l5.6,5.6l5.6-5.6l0.7,0.7L12,15.7z"
class="style-scope yt-icon"
></path>
</g>
</svg>
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon up"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g class="style-scope yt-icon">
<polygon
points="18.4,14.6 12,8.3 5.6,14.6 6.4,15.4 12,9.7 17.6,15.4 "
class="style-scope yt-icon"
></polygon>
</g>
</svg>
<span>Show more</span>
</a>
</div>
</div>
<div class="subs section">
<p class="title-side">Subscriptions</p>
<div class="item">
<a>
<img
src="https://yt3.ggpht.com/ytc/AL5GRJVIEJQ8DOfv2TbCy6_shgN8_LlFL1fVzY3QC3_TZw=s88-c-k-c0x00ffffff-no-rj"
/>
Spinnin' Records
</a>
<div class="live">
<svg
viewBox="0 0 16 16"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g class="style-scope yt-icon">
<path
d="M9 8.00004C9 8.55004 8.55 9.00004 8 9.00004C7.45 9.00004 7 8.55004 7 8.00004C7 7.45004 7.45 7.00004 8 7.00004C8.55 7.00004 9 7.45004 9 8.00004ZM10.11 10.13L10.82 10.84C11.55 10.11 12 9.11004 12 8.00004C12 6.89004 11.55 5.89004 10.82 5.16004L10.11 5.87004C10.66 6.42004 11 7.17004 11 8.00004C11 8.83004 10.66 9.58004 10.11 10.13ZM5.18 10.84L5.89 10.13C5.34 9.58004 5 8.83004 5 8.00004C5 7.17004 5.34 6.42004 5.89 5.87004L5.18 5.16004C4.45 5.89004 4 6.89004 4 8.00004C4 9.11004 4.45 10.11 5.18 10.84ZM12.23 12.25L12.94 12.96C14.21 11.69 15 9.94004 15 8.00004C15 6.06004 14.21 4.31004 12.94 3.04004L12.23 3.75004C13.32 4.84004 14 6.34004 14 8.00004C14 9.66004 13.32 11.16 12.23 12.25ZM3.06 12.96L3.77 12.25C2.68 11.16 2 9.66004 2 8.00004C2 6.34004 2.68 4.84004 3.77 3.75004L3.06 3.04004C1.79 4.31004 1 6.06004 1 8.00004C1 9.94004 1.79 11.69 3.06 12.96Z"
class="style-scope yt-icon"
></path>
</g>
</svg>
</div>
</div>
<div class="item">
<a>
<img
src="https://yt3.ggpht.com/kbAJWuFVOVv5A2OOKunHVMQ9MWc5DyFNCKpvA70JInwafaKRDuIguHIDJArxa5GFnV42CogT=s88-c-k-c0x00ffffff-no-rj"
/>
Armin Van Buuren
</a>
</div>
<div class="item">
<a>
<img
src="https://yt3.ggpht.com/ytc/AL5GRJWeLh6HEBchFm6oSVA9XN1XU2Z1dW-gMuCBWvHIwQ=s88-c-k-c0x00ffffff-no-rj"
/>
Andrew Rayel
</a>
</div>
<div class="item">
<a>
<img
src="https://yt3.ggpht.com/Aa6ZNNVCpXBnI2fypbKILnx4JUXLMnv2Hl5X9UEtXyp6nyOeLWcBTrfpAoIVtVSFMbgVvN7tFIQ=s88-c-k-c0x00ffffff-no-rj"
/>
Oliver Heldens
</a>
<div class="newness"></div>
</div>
<div class="item">
<a>
<img
src="https://yt3.ggpht.com/y1qKzclE51AYA7fzD3ntsZiMYeAjXmssExYYxFzdxPOzUUIWMQAl85tkBk3zzA1m33LDThmLUw=s88-c-k-c0x00ffffff-no-rj"
/>
Tiësto
</a>
</div>
<div class="item">
<a>
<img
src="https://yt3.ggpht.com/ytc/AL5GRJXwgp3VzJbwKb-2teATLAd6vXitf7XRBx91SrODVQ=s88-c-k-c0x00ffffff-no-rj"
/>
TheGodlyNoob
</a>
</div>
<div class="item">
<a>
<img
src="https://yt3.ggpht.com/ytc/AL5GRJWump8TRVsIQKvKa5jMOWNS7RUJKvot8EJQ7zLT=s88-c-k-c0x00ffffff-no-rj"
/>
yo_boy_Roy
</a>
<div class="newness"></div>
</div>
<div class="toShow">
<div class="item">
<a>
<img
src="https://yt3.ggpht.com/ytc/AL5GRJWU88fbnZs2EjT98JJ8Fhvqm9qpV9ucKrtljLrlsQ=s88-c-k-c0x00ffffff-no-rj"
/>
Nora En Pure
</a>
<div class="newness"></div>
</div>
<div class="item">
<a>
<img
src="https://yt3.ggpht.com/ytc/AL5GRJXjv-F4TQYdASguz9zt0GAEl-UBtlsNYk-QizcaRQ=s88-c-k-c0x00ffffff-no-rj"
/>
Macie Jay
</a>
</div>
<div class="item">
<a>
<img
src="https://yt3.ggpht.com/sKnSDOlMiUodnrAS1mBy61M7WqvgplLAzlmAox29S_fw9r6f04VAH-GF7jO8x_PDAx0WkDKD=s88-c-k-c0x00ffffff-no-rj"
/>
Clash of Clans
</a>
<div class="newness"></div>
</div>
</div>
<div class="item showmore">
<a>
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon down"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g class="style-scope yt-icon">
<path
d="M12,15.7L5.6,9.4l0.7-0.7l5.6,5.6l5.6-5.6l0.7,0.7L12,15.7z"
class="style-scope yt-icon"
></path>
</g>
</svg>
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon up"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g class="style-scope yt-icon">
<polygon
points="18.4,14.6 12,8.3 5.6,14.6 6.4,15.4 12,9.7 17.6,15.4 "
class="style-scope yt-icon"
></polygon>
</g>
</svg>
<span>Show 3 more</span>
</a>
</div>
</div>
<div class="explore section">
<p class="title-side">Explore</p>
<div class="item">
<a>
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g class="style-scope yt-icon">
<path
d="M14.72,17.84c-0.32,0.27-0.83,0.53-1.23,0.66c-1.34,0.33-2.41-0.34-2.62-0.46c-0.21-0.11-0.78-0.38-0.78-0.38 s0.35-0.11,0.41-0.13c1.34-0.54,1.89-1.24,2.09-2.11c0.2-0.84-0.16-1.56-0.31-2.39c-0.12-0.69-0.11-1.28,0.12-1.9 c0.02-0.05,0.12-0.43,0.12-0.43s0.11,0.35,0.13,0.41c0.71,1.51,2.72,2.18,3.07,3.84c0.03,0.15,0.05,0.3,0.05,0.46 C15.8,16.3,15.4,17.26,14.72,17.84z M12.4,4.34c-0.12,0.08-0.22,0.15-0.31,0.22c-2.99,2.31-2.91,5.93-2.31,8.55l0.01,0.03l0.01,0.03 c0.06,0.35-0.05,0.7-0.28,0.96c-0.24,0.26-0.58,0.41-0.95,0.41c-0.44,0-0.85-0.2-1.22-0.6c-0.67-0.73-1.17-1.57-1.5-2.46 c-0.36,0.77-0.75,1.98-0.67,3.19c0.04,0.51,0.12,1,0.25,1.43c0.18,0.6,0.43,1.16,0.75,1.65c1.05,1.66,2.88,2.82,4.78,3.05 c0.42,0.05,0.85,0.08,1.26,0.08c1.34,0,3.25-0.27,4.74-1.57c1.77-1.56,2.35-3.99,1.44-6.06c-0.04-0.1-0.06-0.14-0.09-0.19 l-0.04-0.08c-0.21-0.42-0.47-0.81-0.75-1.14c-0.24-0.3-0.48-0.56-0.79-0.83c-0.3-0.27-0.64-0.51-1-0.77 c-0.46-0.33-0.93-0.67-1.38-1.09C12.98,7.83,12.3,6.11,12.4,4.34 M14.41,2c0,0-0.2,0.2-0.56,0.99c-0.66,1.92-0.15,3.95,1.34,5.39 c0.73,0.69,1.61,1.17,2.36,1.84c0.32,0.29,0.62,0.59,0.89,0.93c0.36,0.42,0.66,0.89,0.91,1.38c0.05,0.1,0.1,0.2,0.14,0.3 c1.12,2.55,0.36,5.47-1.73,7.31C16.23,21.47,14.22,22,12.22,22c-0.47,0-0.95-0.03-1.41-0.09c-2.29-0.28-4.42-1.66-5.63-3.57 c-0.39-0.6-0.68-1.26-0.88-1.93c-0.16-0.54-0.25-1.1-0.29-1.67c-0.12-1.88,0.67-3.63,1.08-4.31c0.41-0.69,1.55-2.18,1.55-2.18 s0,0.03-0.01,0.09C6.41,10.11,7,11.88,8.22,13.22c0.15,0.17,0.27,0.22,0.34,0.22c0.06,0,0.09-0.04,0.08-0.09 C7.79,9.59,8.37,6,11.35,3.7c0.59-0.46,1.51-0.94,1.98-1.18C13.8,2.28,14.41,2,14.41,2L14.41,2z"
class="style-scope yt-icon"
></path>
</g>
</svg>
Trending
</a>
</div>
<div class="item">
<a>
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g class="style-scope yt-icon">
<path
d="M12,4v9.38C11.27,12.54,10.2,12,9,12c-2.21,0-4,1.79-4,4c0,2.21,1.79,4,4,4s4-1.79,4-4V8h6V4H12z M9,19c-1.66,0-3-1.34-3-3 s1.34-3,3-3s3,1.34,3,3S10.66,19,9,19z M18,7h-5V5h5V7z"
class="style-scope yt-icon"
></path>
</g>
</svg>
Music
</a>
</div>
<div class="item">
<a>
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g class="style-scope yt-icon">
<path
d="M10,12H8v2H6v-2H4v-2h2V8h2v2h2V12z M17,12.5c0-0.83-0.67-1.5-1.5-1.5S14,11.67,14,12.5c0,0.83,0.67,1.5,1.5,1.5 S17,13.33,17,12.5z M20,9.5C20,8.67,19.33,8,18.5,8S17,8.67,17,9.5c0,0.83,0.67,1.5,1.5,1.5S20,10.33,20,9.5z M16.97,5.15l-4.5,2.53 l-0.49,0.27l-0.49-0.27l-4.5-2.53L3,7.39v6.43l8.98,5.04l8.98-5.04V7.39L16.97,5.15 M16.97,4l4.99,2.8v7.6L11.98,20L2,14.4V6.8 L6.99,4l4.99,2.8L16.97,4L16.97,4z"
class="style-scope yt-icon"
></path>
</g>
</svg>
Gaming
</a>
</div>
<div class="item">
<a>
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g class="style-scope yt-icon">
<path
d="M11,11v6H7v-6H11 M12,10H6v8h6V10L12,10z M3,3.03V21h14l4-4V3.03 M20,4v11.99L19.99,16H16v3.99L15.99,20H4V4H20z M18,8H6V6 h12V8z M18,15h-5v-2h5V15z M18,12h-5v-2h5V12z"
class="style-scope yt-icon"
></path>
</g>
</svg>
News
</a>
</div>
<div class="item">
<a>
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g class="style-scope yt-icon">
<path
d="M17 3V5V6V10V10.51L16.99 10.97C16.94 13.1 15.66 14.94 13.74 15.67H13.72L13.66 15.69L13 15.95V16.65V19V20H14V21H15H10V20H11V19V16.65V15.95L10.34 15.71L10.26 15.68H10.25C8.33 14.95 7.05 13.11 7 10.98V10.51V10V6V5V3H17ZM18 2H6V5H4V6V10V11H6.01C6.07 13.53 7.63 15.78 9.97 16.64C9.98 16.64 9.99 16.64 10 16.65V19H9V20H8V22H16V20H15V19H14V16.65C14.01 16.65 14.02 16.65 14.03 16.64C16.36 15.78 17.93 13.54 17.99 11H20V10V6V5H18V2ZM18 10V6H19V10H18ZM5 10V6H6V10H5Z"
class="style-scope yt-icon"
></path>
</g>
</svg>
Sports
</a>
</div>
</div>
<div class="more section">
<p class="title-side">More from YouTube</p>
<div class="item">
<a>
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g class="style-scope yt-icon">
<defs class="style-scope yt-icon">
<radialGradient
cx="5.4%"
cy="7.11%"
r="107.93%"
fx="5.4%"
fy="7.11%"
gradientTransform="matrix(.70653 0 0 1 .016 0)"
class="style-scope yt-icon"
>
<stop offset="0%" stop-color="#FFF" class="style-scope yt-icon"></stop>
<stop
offset="100%"
stop-color="#FFF"
stop-opacity="0"
class="style-scope yt-icon"
></stop>
</radialGradient>
</defs>
<g fill="none" fill-rule="evenodd" class="style-scope yt-icon">
<path d="M1 1h21.77v22H1z" class="style-scope yt-icon"></path>
<g fill-rule="nonzero" class="style-scope yt-icon">
<path
fill="#F00"
d="M22.54 7.6s-.2-1.5-.86-2.17c-.83-.87-1.75-.88-2.18-.93-3.04-.22-7.6-.2-7.6-.2s-4.56-.02-7.6.2c-.43.05-1.35.06-2.18.93-.65.67-.86 2.18-.86 2.18S1.04 9.4 1 11.18v1.66c.04 1.78.26 3.55.26 3.55s.2 1.5.86 2.18c.83.87 1.9.84 2.4.94 1.7.15 7.2.2 7.38.2 0 0 4.57 0 7.6-.22.43-.05 1.35-.06 2.18-.93.65-.67.86-2.18.86-2.18s.22-1.77.24-3.55v-1.66c-.02-1.78-.24-3.55-.24-3.55z"
class="style-scope yt-icon"
></path>
<path
fill="#FAFAFA"
d="M9.68 8.9v6.18l5.84-3.1"
class="style-scope yt-icon"
></path>
<path
fill="#000"
fill-opacity=".12"
d="M9.68 8.88l5.13 3.48.73-.38"
class="style-scope yt-icon"
></path>
<path
fill="#FFF"
fill-opacity=".2"
d="M22.54 7.6s-.2-1.5-.86-2.17c-.83-.87-1.75-.88-2.18-.93-3.04-.22-7.6-.2-7.6-.2s-4.56-.02-7.6.2c-.43.05-1.35.06-2.18.93-.65.67-.86 2.18-.86 2.18S1.04 9.4 1 11.18v.1c.04-1.76.26-3.54.26-3.54s.2-1.5.86-2.17c.83-.88 1.75-.88 2.18-.93 3.04-.22 7.6-.2 7.6-.2s4.56-.02 7.6.2c.43.05 1.35.05 2.18.93.65.66.86 2.17.86 2.17s.22 1.78.23 3.55v-.1c0-1.8-.23-3.56-.23-3.56z"
class="style-scope yt-icon"
></path>
<path
fill="#3E2723"
fill-opacity=".2"
d="M22.54 16.4s-.2 1.5-.86 2.17c-.83.87-1.75.88-2.18.93-3.04.22-7.6.2-7.6.2s-4.56.02-7.6-.2c-.43-.05-1.35-.06-2.18-.93-.65-.67-.86-2.18-.86-2.18s-.22-1.8-.26-3.57v-.1c.04 1.76.26 3.54.26 3.54s.2 1.5.86 2.17c.83.88 1.75.88 2.18.93 3.04.22 7.6.2 7.6.2s4.56.02 7.6-.2c.43-.05 1.35-.05 2.18-.93.65-.66.86-2.17.86-2.17s.22-1.78.23-3.55v.1c0 1.8-.23 3.56-.23 3.56z"
class="style-scope yt-icon"
></path>
<path
fill="#FFF"
fill-opacity=".2"
d="M9.68 15.08v.1l5.84-3.08v-.12"
class="style-scope yt-icon"
></path>
<path
fill="#3E2723"
fill-opacity=".2"
d="M9.68 8.9v-.13l5.84 3.1v.1"
class="style-scope yt-icon"
></path>
<path
fill="url(#youtube_round__a)"
fill-opacity=".1"
d="M21.54 3.4s-.2-1.5-.86-2.18C19.85.35 18.93.35 18.5.3 15.46.07 10.9.1 10.9.1S6.34.07 3.3.3c-.43.05-1.35.05-2.18.92C.47 1.9.26 3.4.26 3.4S.04 5.17 0 6.95V8.6c.04 1.8.26 3.56.26 3.56s.2 1.52.86 2.18c.83.87 1.9.85 2.4.94 1.7.16 7.2.2 7.38.2 0 0 4.57 0 7.6-.2.43-.06 1.35-.07 2.18-.94.65-.66.86-2.18.86-2.18s.22-1.77.24-3.55V6.97c-.02-1.78-.24-3.55-.24-3.55z"
transform="translate(1 4.208)"
class="style-scope yt-icon"
></path>
</g>
</g>
</g>
</svg>
YouTube Premium
</a>
</div>
<div class="item">
<a>
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g class="style-scope yt-icon">
<path
fill="red"
d="M11.13 1.21c.48-.28 1.26-.28 1.74 0l8.01 4.64c.48.28.87.97.87 1.53v9.24c0 .56-.39 1.25-.87 1.53l-8.01 4.64c-.48.28-1.26.28-1.74 0l-8.01-4.64c-.48-.28-.87-.97-.87-1.53V7.38c0-.56.39-1.25.87-1.53l8.01-4.64z"
class="style-scope yt-icon"
></path>
<path
fill="#fff"
d="m12.71 18.98 4.9-2.83c.41-.24.64-.77.64-1.24V9.24c0-.47-.23-1-.64-1.24l-4.9-2.82c-.41-.23-1.02-.23-1.42 0L6.39 8c-.4.23-.64.77-.64 1.24v5.67c0 .47.24 1 .64 1.24l4.9 2.83c.2.12.46.18.71.18.26-.01.51-.07.71-.18z"
class="style-scope yt-icon"
></path>
<path
fill="red"
d="m12.32 5.73 4.89 2.83c.16.09.41.31.41.67v5.67c0 .37-.25.54-.41.64l-4.89 2.83c-.16.09-.48.09-.64 0l-4.89-2.83c-.16-.09-.41-.34-.41-.64V9.24c.02-.37.25-.58.41-.68l4.89-2.83c.08-.05.2-.07.32-.07s.24.02.32.07z"
class="style-scope yt-icon"
></path>
<path
fill="#fff"
d="M9.88 15.25 15.5 12 9.88 8.75z"
class="style-scope yt-icon"
></path>
</g>
</svg>
YouTube Studio
</a>
</div>
<div class="item">
<a>
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g class="style-scope yt-icon">
<circle
fill="#FF0000"
cx="12"
cy="12"
r="10"
class="style-scope yt-icon"
></circle>
<polygon
fill="#FFFFFF"
points="10,14.65 10,9.35 15,12 "
class="style-scope yt-icon"
></polygon>
<path
fill="#FFFFFF"
d="M12,7c2.76,0,5,2.24,5,5s-2.24,5-5,5s-5-2.24-5-5S9.24,7,12,7 M12,6c-3.31,0-6,2.69-6,6s2.69,6,6,6s6-2.69,6-6 S15.31,6,12,6L12,6z"
class="style-scope yt-icon"
></path>
</g>
</svg>
YouTube Music
</a>
</div>
<div class="item">
<a>
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g class="style-scope yt-icon">
<path
fill="#FF0000"
d="M21.39,13.19c0-0.08,0-0.15,0-0.22c-0.01-0.86-0.5-5-0.78-5.74c-0.32-0.85-0.76-1.5-1.31-1.91 c-0.9-0.67-1.66-0.82-2.6-0.84l-0.02,0c-0.4,0-3.01,0.32-5.2,0.62C9.28,5.4,6.53,5.8,5.88,6.04c-0.9,0.33-1.62,0.77-2.19,1.33 c-1.05,1.04-1.18,2.11-1.04,3.51c0.1,1.09,0.69,5.37,1.02,6.35c0.45,1.32,1.33,2.12,2.47,2.24c0.28,0.03,0.55,0.05,0.82,0.05 c1,0,1.8-0.21,2.72-0.46c1.45-0.39,3.25-0.87,6.97-0.87l0.09,0h0.02c0.91,0,3.14-0.2,4.16-2.07C21.44,15.12,21.41,13.91,21.39,13.19 z"
class="style-scope yt-icon"
></path>
<path
fill="#000"
d="M21.99,13.26c0-0.08,0-0.16-0.01-0.24c-0.01-0.92-0.54-5.32-0.83-6.11c-0.34-0.91-0.81-1.59-1.4-2.03 C18.81,4.17,17.99,4.02,17,4l-0.02,0c-0.43,0-3.21,0.34-5.54,0.66c-2.33,0.32-5.25,0.75-5.95,1C4.53,6.01,3.76,6.48,3.16,7.08 c-1.12,1.1-1.25,2.25-1.11,3.74c0.11,1.16,0.73,5.71,1.08,6.75c0.48,1.41,1.41,2.25,2.63,2.38C6.06,19.98,6.34,20,6.63,20 c1.07,0,1.91-0.23,2.89-0.49c1.54-0.41,3.46-0.93,7.41-0.93l0.1,0h0.02c0.97,0,3.34-0.21,4.42-2.2 C22.04,15.32,22.01,14.03,21.99,13.26z M20.59,15.91c-0.82,1.51-2.75,1.68-3.56,1.68l-0.1,0c-4.09,0-6.07,0.53-7.67,0.96 C8.31,18.8,7.56,19,6.63,19c-0.25,0-0.5-0.01-0.76-0.04c-1.04-0.11-1.54-0.99-1.79-1.71c-0.3-0.88-0.91-5.21-1.04-6.53 C2.9,9.25,3.1,8.54,3.86,7.79c0.5-0.5,1.15-0.89,1.97-1.19c0.17-0.06,1.1-0.32,5.74-0.95C14.2,5.29,16.64,5.01,16.99,5 c0.83,0.02,1.43,0.13,2.17,0.69c0.43,0.32,0.79,0.86,1.06,1.58c0.22,0.58,0.76,4.78,0.77,5.77l0.01,0.25 C21.01,13.96,21.04,15.08,20.59,15.91z"
class="style-scope yt-icon"
></path>
<path
fill="#000"
d="M11.59,14.76c-0.48,0.36-0.8,0.45-1.01,0.45c-0.16,0-0.25-0.05-0.3-0.08c-0.34-0.18-0.42-0.61-0.5-1.2l-0.01-0.1 c-0.04-0.31-0.26-2.1-0.38-3.16L9.3,9.94C9.26,9.66,9.2,9.19,9.54,8.94c0.32-0.23,0.75-0.09,0.96-0.03c0.53,0.17,3.6,1.23,4.59,1.73 c0.21,0.09,0.67,0.28,0.68,0.83c0.01,0.5-0.38,0.74-0.53,0.82L11.59,14.76z"
class="style-scope yt-icon"
></path>
<path
fill="#FFF"
d="M10.3,9.89c0,0,0.5,4.08,0.51,4.19c0.06-0.04,3.79-2.58,3.79-2.58C13.71,11.07,11.07,10.14,10.3,9.89z"
class="style-scope yt-icon"
></path>
</g>
</svg>
YouTube Kids
</a>
</div>
</div>
<div class="settings section">
<div class="item">
<a>
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g class="style-scope yt-icon">
<path
d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,8c-2.21,0-4,1.79-4,4s1.79,4,4,4s4-1.79,4-4 S14.21,8,12,8L12,8z M13.22,3l0.55,2.2l0.13,0.51l0.5,0.18c0.61,0.23,1.19,0.56,1.72,0.98l0.4,0.32l0.5-0.14l2.17-0.62l1.22,2.11 l-1.63,1.59l-0.37,0.36l0.08,0.51c0.05,0.32,0.08,0.64,0.08,0.98s-0.03,0.66-0.08,0.98l-0.08,0.51l0.37,0.36l1.63,1.59l-1.22,2.11 l-2.17-0.62l-0.5-0.14l-0.4,0.32c-0.53,0.43-1.11,0.76-1.72,0.98l-0.5,0.18l-0.13,0.51L13.22,21h-2.44l-0.55-2.2l-0.13-0.51 l-0.5-0.18C9,17.88,8.42,17.55,7.88,17.12l-0.4-0.32l-0.5,0.14l-2.17,0.62L3.6,15.44l1.63-1.59l0.37-0.36l-0.08-0.51 C5.47,12.66,5.44,12.33,5.44,12s0.03-0.66,0.08-0.98l0.08-0.51l-0.37-0.36L3.6,8.56l1.22-2.11l2.17,0.62l0.5,0.14l0.4-0.32 C8.42,6.45,9,6.12,9.61,5.9l0.5-0.18l0.13-0.51L10.78,3H13.22 M14,2h-4L9.26,4.96c-0.73,0.27-1.4,0.66-2,1.14L4.34,5.27l-2,3.46 l2.19,2.13C4.47,11.23,4.44,11.61,4.44,12s0.03,0.77,0.09,1.14l-2.19,2.13l2,3.46l2.92-0.83c0.6,0.48,1.27,0.87,2,1.14L10,22h4 l0.74-2.96c0.73-0.27,1.4-0.66,2-1.14l2.92,0.83l2-3.46l-2.19-2.13c0.06-0.37,0.09-0.75,0.09-1.14s-0.03-0.77-0.09-1.14l2.19-2.13 l-2-3.46L16.74,6.1c-0.6-0.48-1.27-0.87-2-1.14L14,2L14,2z"
class="style-scope yt-icon"
></path>
</g>
</svg>
Settings
</a>
</div>
<div class="item">
<a>
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g class="style-scope yt-icon">
<path
d="M13.18,4l0.24,1.2L13.58,6h0.82H19v7h-5.18l-0.24-1.2L13.42,11H12.6H6V4H13.18 M14,3H5v18h1v-9h6.6l0.4,2h7V5h-5.6L14,3 L14,3z"
class="style-scope yt-icon"
></path>
</g>
</svg>
Report history
</a>
</div>
<div class="item">
<a>
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g class="style-scope yt-icon">
<path
d="M15.36,9.96c0,1.09-0.67,1.67-1.31,2.24c-0.53,0.47-1.03,0.9-1.16,1.6L12.85,14h-1.75l0.03-0.28 c0.14-1.17,0.8-1.76,1.47-2.27c0.52-0.4,1.01-0.77,1.01-1.49c0-0.51-0.23-0.97-0.63-1.29c-0.4-0.31-0.92-0.42-1.42-0.29 c-0.59,0.15-1.05,0.67-1.19,1.34L10.32,10H8.57l0.06-0.42c0.2-1.4,1.15-2.53,2.42-2.87c1.05-0.29,2.14-0.08,2.98,0.57 C14.88,7.92,15.36,8.9,15.36,9.96z M12,18c0.55,0,1-0.45,1-1s-0.45-1-1-1s-1,0.45-1,1S11.45,18,12,18z M12,3c-4.96,0-9,4.04-9,9 s4.04,9,9,9s9-4.04,9-9S16.96,3,12,3 M12,2c5.52,0,10,4.48,10,10s-4.48,10-10,10S2,17.52,2,12S6.48,2,12,2L12,2z"
class="style-scope yt-icon"
></path>
</g>
</svg>
Help
</a>
</div>
<div class="item">
<a>
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g class="style-scope yt-icon">
<path
d="M13,14h-2v-2h2V14z M13,5h-2v6h2V5z M19,3H5v16.59l3.29-3.29L8.59,16H9h10V3 M20,2v15H9l-5,5V2H20L20,2z"
class="style-scope yt-icon"
></path>
</g>
</svg>
Send feedback
</a>
</div>
</div>
<div class="foot section">
<div class="links pages">
<a href="#">About</a>
<a href="#">Press</a>
<a href="#">Copyright</a>
<a href="#">Contact us</a>
<a href="#">Creators</a>
<a href="#">Advertise</a>
<a href="#">Developers</a>
</div>
<div class="links info">
<a href="#">Terms</a>
<a href="#">Privacy</a>
<a href="#">Policy & Safety</a>
<a href="#">How YouTube works</a>
<a href="#">Test new features</a>
</div>
<p class="date">© 2023 Google LLC</p>
</div>
</div>
<div class="small-bar">
<div class="block">
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g class="style-scope yt-icon">
<path d="M4,10V21h6V15h4v6h6V10L12,3Z" class="style-scope yt-icon"></path>
</g>
</svg>
<span>Home</span>
</div>
<div class="block">
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g height="24" viewBox="0 0 24 24" width="24" class="style-scope yt-icon">
<path
d="M10 14.65v-5.3L15 12l-5 2.65zm7.77-4.33c-.77-.32-1.2-.5-1.2-.5L18 9.06c1.84-.96 2.53-3.23 1.56-5.06s-3.24-2.53-5.07-1.56L6 6.94c-1.29.68-2.07 2.04-2 3.49.07 1.42.93 2.67 2.22 3.25.03.01 1.2.5 1.2.5L6 14.93c-1.83.97-2.53 3.24-1.56 5.07.97 1.83 3.24 2.53 5.07 1.56l8.5-4.5c1.29-.68 2.06-2.04 1.99-3.49-.07-1.42-.94-2.68-2.23-3.25zm-.23 5.86l-8.5 4.5c-1.34.71-3.01.2-3.72-1.14-.71-1.34-.2-3.01 1.14-3.72l2.04-1.08v-1.21l-.69-.28-1.11-.46c-.99-.41-1.65-1.35-1.7-2.41-.05-1.06.52-2.06 1.46-2.56l8.5-4.5c1.34-.71 3.01-.2 3.72 1.14.71 1.34.2 3.01-1.14 3.72L15.5 9.26v1.21l1.8.74c.99.41 1.65 1.35 1.7 2.41.05 1.06-.52 2.06-1.46 2.56z"
class="style-scope yt-icon"
></path>
</g>
</svg>
<span>Shorts</span>
</div>
<div class="block">
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g class="style-scope yt-icon">
<path
d="M10,18v-6l5,3L10,18z M17,3H7v1h10V3z M20,6H4v1h16V6z M22,9H2v12h20V9z M3,10h18v10H3V10z"
class="style-scope yt-icon"
></path>
</g>
</svg>
<span>Subscriptions</span>
</div>
<div class="block">
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g class="style-scope yt-icon">
<path
d="M11,7l6,3.5L11,14V7L11,7z M18,20H4V6H3v15h15V20z M21,18H6V3h15V18z M7,17h13V4H7V17z"
class="style-scope yt-icon"
></path>
</g>
</svg>
<span>Library</span>
</div>
</div>
</div>
<!-- Content -->
<div id="content">
<div id="top-tags">
<div class="tag active">All</div>
<div class="tag">Music</div>
<div class="tag">Gaming</div>
<div class="tag">Ultra Music Festival</div>
<div class="tag">House Music</div>
<div class="tag">Tom Clancy's Rainbow Six Siege</div>
<div class="tag">Podcasts</div>
<div class="tag">Live</div>
</div>
<div id="vids">
<div id="videos">
<div class="single">
<div class="feat">
<img
src="https://i.ytimg.com/vi/Wi5QcsGdkSA/hq720.jpg?sqp=-oaymwEcCNAFEJQDSFTyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLANvi8U33N8KLwuNLE9ikUuDdxa5g"
/>
<div class="time">10:25</div>
</div>
<div class="dets">
<div class="author-icon">
<img
src="https://yt3.ggpht.com/ytc/AL5GRJXjv-F4TQYdASguz9zt0GAEl-UBtlsNYk-QizcaRQ=s68-c-k-c0x00ffffff-no-rj"
/>
</div>
<div class="vid-dets">
<div class="title">The Power Of Bandit Tricking - Rainbow Six Siege</div>
<div class="author">
Macie Jay
<span>
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g class="style-scope yt-icon">
<path
d="M12,2C6.5,2,2,6.5,2,12c0,5.5,4.5,10,10,10s10-4.5,10-10C22,6.5,17.5,2,12,2z M9.8,17.3l-4.2-4.1L7,11.8l2.8,2.7L17,7.4 l1.4,1.4L9.8,17.3z"
class="style-scope yt-icon"
></path>
</g>
</svg>
</span>
</div>
<div class="info">
<span class="views">136K Views</span
><span class="uploaded">15 hours ago</span>
</div>
</div>
</div>
</div>
<div class="single">
<div class="feat">
<img
src="https://i.ytimg.com/vi/q1HZj40ZQrM/hq720.jpg?sqp=-oaymwEcCNAFEJQDSFTyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLCxlr_zFwe188M9tt6DoV-r4_RO9w"
/>
<div class="time">4:10</div>
</div>
<div class="dets">
<div class="author-icon">
<img
src="https://yt3.ggpht.com/ytc/AL5GRJUEZDXANi-9AD9yJzNTU1R0_cA1Brd6nLXLZaG31g=s68-c-k-c0x00ffffff-no-rj"
/>
</div>
<div class="vid-dets">
<div class="title">Game over… GitHub Copilot X announced</div>
<div class="author">
Fireship
<span>
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g class="style-scope yt-icon">
<path
d="M12,2C6.5,2,2,6.5,2,12c0,5.5,4.5,10,10,10s10-4.5,10-10C22,6.5,17.5,2,12,2z M9.8,17.3l-4.2-4.1L7,11.8l2.8,2.7L17,7.4 l1.4,1.4L9.8,17.3z"
class="style-scope yt-icon"
></path>
</g>
</svg>
</span>
</div>
<div class="info">
<span class="views">1M Views</span><span class="uploaded">4 days ago</span>
</div>
</div>
</div>
</div>
<div class="single">
<div class="feat">
<img
src="https://i.ytimg.com/vi/wF0b8WxHZ20/hq720.jpg?sqp=-oaymwEcCNAFEJQDSFTyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLCdvxMd7uXdgJQdw_tvi-rhP5lGkw"
/>
<div class="time">1:29:23</div>
</div>
<div class="dets">
<div class="author-icon">
<img
src="https://yt3.ggpht.com/Aa6ZNNVCpXBnI2fypbKILnx4JUXLMnv2Hl5X9UEtXyp6nyOeLWcBTrfpAoIVtVSFMbgVvN7tFIQ=s88-c-k-c0x00ffffff-no-rj"
/>
</div>
<div class="vid-dets">
<div class="title">Oliver Heldens b2b Tchami [Ultra Miami 2023, Mainstage]</div>
<div class="author">
Oliver Heldens
<span>
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g class="style-scope yt-icon">
<path
d="M12,4v9.38C11.27,12.54,10.2,12,9,12c-2.21,0-4,1.79-4,4c0,2.21,1.79,4,4,4s4-1.79,4-4V8h6V4H12z"
class="style-scope yt-icon"
></path>
</g>
</svg>
</span>
</div>
<div class="info">
<span class="views">31K Views</span><span class="uploaded">16 hours ago</span>
</div>
</div>
</div>
</div>
<div class="single">
<div class="feat">
<img
src="https://i.ytimg.com/vi/0aIK1Vo4Wvk/hq720.jpg?sqp=-oaymwEcCNAFEJQDSFTyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLBWypznkZGeWhOdXDLrGilptFYebQ"
/>
<div class="time">23:22</div>
</div>
<div class="dets">
<div class="author-icon">
<img
src="https://yt3.ggpht.com/ytc/AL5GRJVXiMtRcbw9kyJaeCJkmzn1mk5LTFn8jXlGPMjTjw=s68-c-k-c0x00ffffff-no-rj"
/>
</div>
<div class="vid-dets">
<div class="title">The Mandalorian Season 3 Episode 4 FULL Breakdown...</div>
<div class="author">
Emergency Awesome
<span>
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g class="style-scope yt-icon">
<path
d="M12,2C6.5,2,2,6.5,2,12c0,5.5,4.5,10,10,10s10-4.5,10-10C22,6.5,17.5,2,12,2z M9.8,17.3l-4.2-4.1L7,11.8l2.8,2.7L17,7.4 l1.4,1.4L9.8,17.3z"
class="style-scope yt-icon"
></path>
</g>
</svg>
</span>
</div>
<div class="info">
<span class="views">366K Views</span><span class="uploaded">5 days ago</span>
</div>
</div>
</div>
</div>
<div class="single">
<div class="feat">
<img
src="https://i.ytimg.com/vi/XZf1kyyPAqQ/hq720.jpg?sqp=-oaymwEcCNAFEJQDSFTyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLCMe6ov4Xw4XD_vZQksiX0FRLVWFw"
/>
<div class="time">2:00:01</div>
</div>
<div class="dets">
<div class="author-icon">
<img
src="https://yt3.ggpht.com/ytc/AL5GRJWeLh6HEBchFm6oSVA9XN1XU2Z1dW-gMuCBWvHIwQ=s88-c-k-c0x00ffffff-no-rj"
/>
</div>
<div class="vid-dets">
<div class="title">Andrew Rayel - Find Your Harmony Episode #349</div>
<div class="author">
Andrew Rayel
<span>
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g class="style-scope yt-icon">
<path
d="M12,4v9.38C11.27,12.54,10.2,12,9,12c-2.21,0-4,1.79-4,4c0,2.21,1.79,4,4,4s4-1.79,4-4V8h6V4H12z"
class="style-scope yt-icon"
></path>
</g>
</svg>
</span>
</div>
<div class="info">
<span class="views">4.5K Views</span
><span class="uploaded">17 hours ago</span>
</div>
</div>
</div>
</div>
<div class="single">
<div class="feat">
<img
src="https://i.ytimg.com/vi/mdzBRZ4Z1EM/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFTyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLDutsOnPeeMaLUAGBl1ttsXUzwOMA"
/>
<div class="time">12:23</div>
</div>
<div class="dets">
<div class="author-icon">
<img
src="https://yt3.ggpht.com/ytc/AL5GRJXwgp3VzJbwKb-2teATLAd6vXitf7XRBx91SrODVQ=s68-c-k-c0x00ffffff-no-rj"
/>
</div>
<div class="vid-dets">
<div class="title">How 2 Caveira - Rainbow Six Siege</div>
<div class="author">
TheGodlyNoob
<span>
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g class="style-scope yt-icon">
<path
d="M12,2C6.5,2,2,6.5,2,12c0,5.5,4.5,10,10,10s10-4.5,10-10C22,6.5,17.5,2,12,2z M9.8,17.3l-4.2-4.1L7,11.8l2.8,2.7L17,7.4 l1.4,1.4L9.8,17.3z"
class="style-scope yt-icon"
></path>
</g>
</svg>
</span>
</div>
<div class="info">
<span class="views">110K Views</span
><span class="uploaded">2 months ago</span>
</div>
</div>
</div>
</div>
<div class="single">
<div class="feat">
<img
src="https://i.ytimg.com/vi/Uht6xAGabCA/hq720.jpg?sqp=-oaymwEcCNAFEJQDSFTyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLBsHuHoKxwHNdmokQ4ERSFRbU_iSw"
/>
<div class="time">5:52:59</div>
</div>
<div class="dets">
<div class="author-icon">
<img
src="https://yt3.ggpht.com/kbAJWuFVOVv5A2OOKunHVMQ9MWc5DyFNCKpvA70JInwafaKRDuIguHIDJArxa5GFnV42CogT=s88-c-k-c0x00ffffff-no-rj"
/>
</div>
<div class="vid-dets">
<div class="title">
Armin van Buuren live at A State of Trance - Celebration Weekend
</div>
<div class="author">
Armin van Buuren
<span>
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g class="style-scope yt-icon">
<path
d="M12,4v9.38C11.27,12.54,10.2,12,9,12c-2.21,0-4,1.79-4,4c0,2.21,1.79,4,4,4s4-1.79,4-4V8h6V4H12z"
class="style-scope yt-icon"
></path>
</g>
</svg>
</span>
</div>
<div class="info">
<span class="views">463K views</span><span class="uploaded">2 weeks ago</span>
</div>
</div>
</div>
</div>
<div class="single">
<div class="feat">
<img
src="https://i.ytimg.com/vi/nv5kUUK8XXU/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFTyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLAuzQQ8O985z7eKDjgpZBxRxqIcow"
/>
<div class="time">18:14</div>
</div>
<div class="dets">
<div class="author-icon">
<img
src="https://yt3.ggpht.com/ytc/AL5GRJWump8TRVsIQKvKa5jMOWNS7RUJKvot8EJQ7zLT=s68-c-k-c0x00ffffff-no-rj"
/>
</div>
<div class="vid-dets">
<div class="title">PLANTING WITH NO FLOORS in SIEGE</div>
<div class="author">
yo_boy_Roy
<span>
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g class="style-scope yt-icon">
<path
d="M12,2C6.5,2,2,6.5,2,12c0,5.5,4.5,10,10,10s10-4.5,10-10C22,6.5,17.5,2,12,2z M9.8,17.3l-4.2-4.1L7,11.8l2.8,2.7L17,7.4 l1.4,1.4L9.8,17.3z"
class="style-scope yt-icon"
></path>
</g>
</svg>
</span>
</div>
<div class="info">
<span class="views">154K Views</span><span class="uploaded">13 days ago</span>
</div>
</div>
</div>
</div>
<div class="single">
<div class="feat">
<img
src="https://i.ytimg.com/vi/DmdpHJpjYns/hq720.jpg?sqp=-oaymwE2CNAFEJQDSFTyq4qpAygIARUAAIhCGAFwAcABBvABAfgB_gmAAtAFigIMCAAQARhFIF8oZTAP&rs=AOn4CLDX6dY121BJDOkggMFZ8-l40PPrEA"
/>
<div class="time">1:09:33</div>
</div>
<div class="dets">
<div class="author-icon">
<img
src="https://yt3.ggpht.com/VxMVJ7Md-8mrdvcuQmwCVONBeuxl9o3IYELURsoNXVFGY6EP723V6WRf6UZBNiEsl8xuGjivFA=s68-c-k-c0x00ffffff-no-rj"
/>
</div>
<div class="vid-dets">
<div class="title">
First Questions (Sunday, 8 January 2023) | CityHill Church
</div>
<div class="author">CityHill Church</div>
<div class="info">
<span class="views">649 Views</span
><span class="uploaded">Streamed 2 months ago</span>
</div>
</div>
</div>
</div>
</div>
<div id="shorts">
<div class="group">
<div class="head">
<div class="logo">
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g width="24" height="24" viewBox="0 0 24 24" class="style-scope yt-icon">
<g class="style-scope yt-icon">
<path
d="M17.77,10.32l-1.2-.5L18,9.06a3.74,3.74,0,0,0-3.5-6.62L6,6.94a3.74,3.74,0,0,0,.23,6.74l1.2.49L6,14.93a3.75,3.75,0,0,0,3.5,6.63l8.5-4.5a3.74,3.74,0,0,0-.23-6.74Z"
fill="red"
class="style-scope yt-icon"
></path>
<polygon
points="10 14.65 15 12 10 9.35 10 14.65"
fill="#fff"
class="style-scope yt-icon"
></polygon>
</g>
</g>
</svg>
Shorts
</div>
<div class="close">
<p>Not interested</p>
</div>
</div>
<div class="shorts">
<div class="short">
<div class="feat">
<img
src="https://i.ytimg.com/vi/GlLJJAbucRE/hq720_2.jpg?sqp=-oaymwEdCJUDENAFSFTyq4qpAw8IARUAAIhCcAHAAQbQAQE=&rs=AOn4CLDZVO5nmeTBbyCDQX8jwnRpQ1CQFA"
/>
</div>
<div class="cont">
<p class="title">He was almost DESQUALIFIED for...</p>
<p class="views">261K Views</p>
</div>
</div>
<div class="short">
<div class="feat">
<img
src="https://i.ytimg.com/vi/HtprNIBykns/hq720_2.jpg?sqp=-oaymwEdCJUDENAFSFTyq4qpAw8IARUAAIhCcAHAAQbQAQE=&rs=AOn4CLAge1ocM9AYR2dSSN8YMiDQwto2Wg"
/>
</div>
<div class="cont">
<p class="title">infinite KD glitch (never die)</p>
<p class="views">28K Views</p>
</div>
</div>
<div class="short">
<div class="feat">
<img
src="https://i.ytimg.com/vi/5bt_AvhMZ1k/hq720.jpg?sqp=-oaymwEdCJUDENAFSFTyq4qpAw8IARUAAIhCcAHAAQbQAQE=&rs=AOn4CLDbGUJfonUf-FmEFA5aYBkIfHnW9g"
/>
</div>
<div class="cont">
<p class="title">This was Find Your Harmony show in Kuala Lumpur 🔥</p>
<p class="views">2.4K Views</p>
</div>
</div>
<div class="short">
<div class="feat">
<img
src="https://i.ytimg.com/vi/U59LSujuP_E/hq720_2.jpg?sqp=-oaymwEdCJUDENAFSFTyq4qpAw8IARUAAIhCcAHAAQbQAQE=&rs=AOn4CLDa5_8Rb7tJiE0QFrykzmQMedd6Vg"
/>
</div>
<div class="cont">
<p class="title">Miss Monique Playing "Transmission" from Eelke Kleijn</p>
<p class="views">56K Views</p>
</div>
</div>
<div class="short">
<div class="feat">
<img
src="https://i.ytimg.com/vi/Z8omJ59hNfY/hq720_2.jpg?sqp=-oaymwEdCJUDENAFSFTyq4qpAw8IARUAAIhCcAHAAQbQAQE=&rs=AOn4CLBeEIHIPjKC2fUaMzKTWv-o5GNS2A"
/>
</div>
<div class="cont">
<p class="title">real eyes realize AI lies</p>
<p class="views">1.7M Views</p>
</div>
</div>
<div class="short">
<div class="feat">
<img
src="https://i.ytimg.com/vi/oC80JI4mnIo/hq720_2.jpg?sqp=-oaymwEdCJUDENAFSFTyq4qpAw8IARUAAIhCcAHAAQbQAQE=&rs=AOn4CLDzx5YlsTUtiqjw6FUlgi_ikficig"
/>
</div>
<div class="cont">
<p class="title">What happened in Ash's final Pokemon episode</p>
<p class="views">67K Views</p>
</div>
</div>
<div class="short">
<div class="feat">
<img
src="https://i.ytimg.com/vi/ccHKCVJlKnw/hq720_2.jpg?sqp=-oaymwEdCJUDENAFSFTyq4qpAw8IARUAAIhCcAHAAQbQAQE=&rs=AOn4CLASkHmVDGIv1GlTqhjHNPOxbFaXbA"
/>
</div>
<div class="cont">
<p class="title">Heart Hunter Queen 💘 Clash of Clans</p>
<p class="views">174K Views</p>
</div>
</div>
<div class="short">
<div class="feat">
<img
src="https://i.ytimg.com/vi/0XcWxEZK8Ko/hq720_2.jpg?sqp=-oaymwEdCJUDENAFSFTyq4qpAw8IARUAAIhCcAHAAQbQAQE=&rs=AOn4CLDaPGoCSbnabN2OKU5UcMBj9lLIHQ"
/>
</div>
<div class="cont">
<p class="title">Bros Before Marios - HISHE</p>
<p class="views">458K Views</p>
</div>
</div>
<div class="short">
<div class="feat">
<img
src="https://i.ytimg.com/vi/cVsY82tz7Vk/hq720_2.jpg?sqp=-oaymwEdCJUDENAFSFTyq4qpAw8IARUAAIhCcAHAAQbQAQE=&rs=AOn4CLC7uD6Vzh4v2_dBdYjaWiFkiDQ3Eg"
/>
</div>
<div class="cont">
<p class="title">When NOT to use a Hamburger Menu 🍔</p>
<p class="views">13K Views</p>
</div>
</div>
<div class="short">
<div class="feat">
<img
src="https://i.ytimg.com/vi/n-yWVVCOsEg/hq720_2.jpg?sqp=-oaymwEdCJUDENAFSFTyq4qpAw8IARUAAIhCcAHAAQbQAQE=&rs=AOn4CLA2n6dECQNP8efBjq62gw_0z8X9YA"
/>
</div>
<div class="cont">
<p class="title">Secret Magic Wand in Hogwarts Legacy✨</p>
<p class="views">4.2M Views</p>
</div>
</div>
</div>
<div class="more">
<div class="down-box">
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon down"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g class="style-scope yt-icon">
<path
d="M12,15.7L5.6,9.4l0.7-0.7l5.6,5.6l5.6-5.6l0.7,0.7L12,15.7z"
class="style-scope yt-icon"
></path>
</g>
</svg>
</div>
</div>
</div>
<div class="shelf remove">
<p>Shelf will be hidden for 30 days</p>
<div class="undo">Undo</div>
</div>
</div>
<div id="videos">
<div class="single">
<div class="feat">
<img
src="https://i.ytimg.com/vi/eO33Rh3GFGk/hq720.jpg?sqp=-oaymwEcCNAFEJQDSFTyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLABisavYQ30vc8JwhlZR9h8nkAoBg"
/>
<div class="time">18:41</div>
</div>
<div class="dets">
<div class="author-icon">
<img
src="https://yt3.ggpht.com/ytc/AL5GRJUvyoz58-Shq477iC8w1Q0zl8Cp10Zmuo6Gw9YUrA=s68-c-k-c0x00ffffff-no-rj"
/>
</div>
<div class="vid-dets">
<div class="title">I should have paid more attention in Math class</div>
<div class="author">
Kevin Powell
<span>
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g class="style-scope yt-icon">
<path
d="M12,2C6.5,2,2,6.5,2,12c0,5.5,4.5,10,10,10s10-4.5,10-10C22,6.5,17.5,2,12,2z M9.8,17.3l-4.2-4.1L7,11.8l2.8,2.7L17,7.4 l1.4,1.4L9.8,17.3z"
class="style-scope yt-icon"
></path>
</g>
</svg>
</span>
</div>
<div class="info">
<span class="views">35K Views</span><span class="uploaded">10 days ago</span>
</div>
</div>
</div>
</div>
<div class="single">
<div class="feat">
<img
src="https://i.ytimg.com/vi/V2BxQlF2csA/hq720.jpg?sqp=-oaymwEcCNAFEJQDSFTyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLA-D1J6Xu5HZ9MF4JFx9XpDok9GvQ"
/>
<div class="time">1:58:40</div>
</div>
<div class="dets">
<div class="author-icon">
<img
src="https://yt3.ggpht.com/kbAJWuFVOVv5A2OOKunHVMQ9MWc5DyFNCKpvA70JInwafaKRDuIguHIDJArxa5GFnV42CogT=s88-c-k-c0x00ffffff-no-rj"
/>
</div>
<div class="vid-dets">
<div class="title">
A State of Trance Episode 1114 ('Feel Again' Album Special)
</div>
<div class="author">
Armin van Buuren
<span>
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g class="style-scope yt-icon">
<path
d="M12,4v9.38C11.27,12.54,10.2,12,9,12c-2.21,0-4,1.79-4,4c0,2.21,1.79,4,4,4s4-1.79,4-4V8h6V4H12z"
class="style-scope yt-icon"
></path>
</g>
</svg>
</span>
</div>
<div class="info">
<span class="views">119K Views</span
><span class="uploaded">Streamed 3 days ago</span>
</div>
</div>
</div>
</div>
<div class="single">
<div class="feat">
<img
src="https://i.ytimg.com/vi/5NkQUkLfS9I/hq720.jpg?sqp=-oaymwEcCNAFEJQDSFTyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLC_IkqjZfYuMW_abeLBg1dy3cw3tg"
/>
<div class="time">42:30</div>
</div>
<div class="dets">
<div class="author-icon">
<img
src="https://yt3.ggpht.com/ytc/AL5GRJXjrfspJ8wxKzvK-Q9qRfQGRPFGj1OfJGzDDDOp=s68-c-k-c0x00ffffff-no-rj"
/>
</div>
<div class="vid-dets">
<div class="title">I Challenged An Expert Designer To A CSS Battle</div>
<div class="author">
Web Dev Simplified
<span>
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
style="pointer-events: none; display: block; width: 100%; height: 100%"
>
<g class="style-scope yt-icon">
<path
d="M12,2C6.5,2,2,6.5,2,12c0,5.5,4.5,10,10,10s10-4.5,10-10C22,6.5,17.5,2,12,2z M9.8,17.3l-4.2-4.1L7,11.8l2.8,2.7L17,7.4 l1.4,1.4L9.8,17.3z"
class="style-scope yt-icon"
></path>
</g>
</svg>
</span>
</div>
<div class="info">
<span class="views">23K Views</span><span class="uploaded">1 day ago</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap");
:root {
--black: #0f0f0f;
--white: #f1f1f1;
--red: #f00;
--blue: #3ea6ff;
--grey: #aaa;
--btn-color: #272727;
--btn-hover: rgb(255 255 255 / 10%);
--search-btn: #222222;
--voice: #181818;
--scroll-bar: #aaaaaa;
--active-hover: rgb(255 255 255 / 20%);
--tooltip: #4c4c4c;
--container-height: 80vh;
--x-height: 25px;
}
*,
*::before,
*::after {
padding: 0;
margin: 0;
font-family: "Roboto", sans-serif;
}
input,
p,
a {
font-size: 16px;
color: var(--white);
}
button,
input,
a {
cursor: pointer;
}
svg {
fill: var(--white);
}
img {
width: 100%;
height: auto;
display: block;
}
.remove {
display: none !important;
}
.show {
display: block !important;
}
/* Sidebar scrollbar */
#sidebar::-webkit-scrollbar {
width: 0.5em;
}
#sidebar::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px var(--black);
}
#sidebar::-webkit-scrollbar-thumb {
border-radius: 50px;
}
#sidebar:hover::-webkit-scrollbar-thumb {
background-color: var(--scroll-bar);
}
#vids::-webkit-scrollbar {
width: 0.5em;
}
#vids::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px var(--black);
}
#vids::-webkit-scrollbar-thumb {
border-radius: 50px;
background-color: var(--scroll-bar);
}
body {
width: 100%;
min-height: 100vh;
display: grid;
place-items: center;
background-color: #333;
}
.container {
width: 100%;
height: auto;
background-color: var(--black);
max-width: 1400px;
overflow: hidden;
box-shadow: 0 0 20px -13px #8d8d8d, 0px 0px 15px 14px #3c3f44;
}
.wrapper {
display: flex;
width: auto;
justify-content: space-between;
height: 80vh;
}
/* =========================================
=====================
HEADER
=====================
============================================= */
#header {
display: flex;
justify-content: space-between;
align-items: center;
width: auto;
height: auto;
position: relative;
padding: 20px 30px;
z-index: 3;
}
/* ==============================================================
============= Logo
================================================================= */
#header .logo {
display: flex;
justify-content: space-evenly;
align-items: center;
column-gap: 20px;
cursor: pointer;
}
#header .logo .burger {
width: 20px;
height: 15px;
position: relative;
cursor: pointer;
}
#header .logo .burger span {
width: 100%;
height: 2px;
background-color: var(--white);
display: block;
position: absolute;
}
#header .logo .burger span:nth-child(1) {
top: 0;
}
#header .logo .burger span:nth-child(2) {
top: 50%;
}
#header .logo .burger span:nth-child(3) {
top: 100%;
}
#header .logo .ytb-logo {
width: 90px;
height: 20px;
display: flex;
align-items: flex-start;
justify-content: flex-start;
column-gap: 5px;
}
#header .logo .ytb-logo .country {
color: var(--white);
font-size: 12px;
}
/* ==============================================================
============= Search
================================================================= */
#header .search {
position: relative;
display: flex;
align-items: center;
justify-content: flex-start;
column-gap: 10px;
}
#header .search form {
display: flex;
align-items: stretch;
height: 40px;
}
#header .search form input {
padding: 5px 15px;
width: 400px;
color: var(--white);
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
border: 1px solid var(--search-btn);
background-color: var(--black);
font-size: 16px;
}
#header .search form input:focus-visible {
outline: 1px solid #065fd4;
outline-offset: -1px;
}
#header .search form button {
width: 60px;
height: auto;
background-color: var(--search-btn);
border: 1px solid var(--btn-color);
padding: 10px;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
}
#header .search .voice {
position: relative;
cursor: pointer;
}
#header .search .voice .icon {
width: 20px;
height: auto;
border: 50%;
background-color: var(--voice);
padding: 10px;
border-radius: 50%;
transition: all 0.3s ease-in-out;
}
#header .search .voice:hover p {
opacity: 1;
}
#header .search .voice:hover .icon {
background-color: var(--btn-hover);
}
#header .search .voice p {
position: absolute;
width: 130px;
text-align: center;
padding: 10px;
left: -50%;
top: 40%;
transform: translate(-28%, 100%);
background-color: var(--tooltip);
border-radius: 5px;
opacity: 0;
pointer-events: none;
font-size: 13px;
transition: all 0.3s ease-in-out;
}
/* ==============================================================
============= Profile
================================================================= */
#header .account {
position: relative;
display: flex;
justify-content: flex-start;
align-items: center;
column-gap: 20px;
}
#header .account .icon {
width: 25px;
height: auto;
padding: 10px;
border-radius: 50%;
border: 50%;
transition: all 0.3s ease-in-out;
}
#header .account .icon:hover {
width: 25px;
height: auto;
background-color: var(--voice);
}
#header .account img {
object-fit: cover;
border-radius: 50px;
width: 30px;
height: 30px;
}
#header .account .upload,
#header .account .notification,
#header .account .profile {
position: relative;
cursor: pointer;
}
#header .account .upload:hover p {
opacity: 1;
}
#header .account .upload p {
position: absolute;
width: 60px;
text-align: center;
padding: 10px;
left: -40%;
top: 40%;
transform: translate(0%, 100%);
background-color: var(--tooltip);
border-radius: 5px;
font-size: 13px;
opacity: 0;
pointer-events: none;
transition: all 0.3s ease-in-out;
}
#header .account .notification:hover p {
opacity: 1;
}
#header .account .notification p {
position: absolute;
width: 100px;
text-align: center;
padding: 10px;
left: -80%;
top: 40%;
transform: translate(0%, 100%);
background-color: var(--tooltip);
border-radius: 5px;
font-size: 13px;
opacity: 0;
pointer-events: none;
transition: all 0.3s ease-in-out;
}
/* =========================================
=====================
SIDEBAR
=====================
============================================= */
#sidebar {
width: 230px;
background-color: var(--black);
height: var(--container-height);
overflow-y: scroll;
overflow-x: hidden;
padding: 0px 0px 0px 20px;
}
#sidebar.smaller {
width: 100px;
}
#sidebar .section:not(:last-child) {
padding-bottom: 5px;
border-bottom: 1px solid var(--active-hover);
margin-bottom: 15px;
}
#sidebar .section:last-child {
padding-bottom: 5px;
margin-bottom: 15px;
}
#sidebar .item {
width: auto;
padding: 7px 10px 7px 7px;
border-radius: 8px;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: space-between;
margin-right: 15px;
cursor: pointer;
}
#sidebar .item.active {
background-color: var(--btn-color);
}
#sidebar .item.active:hover {
background-color: var(--active-hover);
}
#sidebar .item:hover {
background-color: var(--btn-hover);
}
#sidebar .toShow {
height: 0;
opacity: 0;
pointer-events: none;
}
#sidebar .toShow.active {
height: auto;
opacity: 1;
pointer-events: all;
}
#sidebar .showmore.icon a svg.down {
display: none !important;
}
#sidebar .showmore a svg.up {
display: none !important;
}
#sidebar .showmore.icon a svg.up {
display: flex !important;
}
#sidebar .item a {
display: flex;
align-items: center;
justify-content: flex-start;
column-gap: 15px;
font-size: 15px;
}
#sidebar .item a svg {
width: 30px !important;
}
#sidebar .title-side {
padding: 7px;
width: auto;
margin-bottom: 10px;
font-size: 18px;
}
#sidebar .item a img {
width: 30px;
border-radius: 50%;
}
#sidebar .item .live svg {
width: 15px !important;
fill: var(--red);
}
#sidebar .item .newness {
background-color: var(--blue);
width: 5px;
height: 5px;
border-radius: 50%;
}
#sidebar .foot .links {
padding-bottom: 13px;
display: flex;
flex-wrap: wrap;
column-gap: 10px;
row-gap: 5px;
padding-right: 36px;
}
#sidebar .foot .links a {
font-size: 13px;
text-decoration: none;
color: var(--grey);
}
#sidebar .foot .date {
font-size: 13px;
color: #717171;
padding-top: 5px;
}
#sidebar .small-bar {
display: none;
}
#sidebar .small-bar .block {
display: flex;
flex-direction: column;
row-gap: 5px;
justify-content: flex-start;
align-items: center;
color: #fff;
font-size: 12px;
cursor: pointer;
padding: 16px 10px;
border-radius: 10px;
}
#sidebar .small-bar .block:hover {
background-color: var(--active-hover);
}
#sidebar .small-bar svg {
width: 40% !important;
}
/* =========================================
=====================
CONTENT
=====================
============================================= */
#content {
position: relative;
display: flex;
flex-direction: column;
width: 80%;
}
#content.wider {
width: 90%;
}
#top-tags {
display: flex;
column-gap: 15px;
position: relative;
top: 0;
padding-bottom: 10px;
}
#top-tags .tag {
padding: 7px 15px;
background-color: var(--btn-color);
color: var(--white);
width: max-content;
border-radius: 10px;
cursor: pointer;
}
#top-tags .tag:hover {
background-color: var(--active-hover);
}
#top-tags .tag.active {
background-color: var(--white);
color: var(--black);
}
#top-tags .tag.active:hover {
filter: brightness(1.1);
}
#vids {
position: relative;
height: calc(var(--container-height) - 33px);
overflow-y: scroll;
}
#videos {
position: relative;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
column-gap: 20px;
row-gap: 40px;
padding-top: 40px;
padding-right: 30px;
padding-left: 30px;
padding-bottom: 60px;
}
#videos .single {
position: relative;
cursor: pointer;
}
#videos .single .feat {
position: relative;
overflow: hidden;
}
#videos .single .feat img {
border-radius: 10px;
transform: scale(1);
transition: all 0.3s ease-in-out;
}
#videos .single:hover .feat img {
border-radius: 0px;
transform: scale(1.02);
}
#videos .single .feat .time {
position: absolute;
bottom: 5px;
right: 5px;
padding: 2px 5px;
border-radius: 5px;
background-color: #0f0f0fd1;
color: var(--white);
font-size: 14px;
font-weight: bold;
opacity: 1;
transition: all 0.3s ease-in-out;
}
#videos .single:hover .feat .time {
opacity: 0;
}
#videos .single .dets {
position: relative;
display: flex;
color: var(--white);
column-gap: 10px;
padding-top: 13px;
}
#videos .single:hover .dets::after {
position: absolute;
content: "";
width: 3px;
height: 3px;
background: #fff;
right: 0px;
top: 14px;
border-radius: 50%;
box-shadow: 0px 6px 0 #fff, 0px 12px 0 #fff;
transition: all 0.3s ease-in-out;
}
#videos .single .dets .author-icon img {
width: 40px;
border-radius: 50%;
}
#videos .single .vid-dets .title {
margin-bottom: 6px;
font-weight: bold;
margin-right: 7px;
}
#videos .single .vid-dets .author {
color: var(--grey);
display: flex;
column-gap: 5px;
font-size: 15px;
margin-bottom: 5px;
}
#videos .single .vid-dets .author svg {
width: 13px !important;
}
#videos .single .vid-dets .info {
color: var(--grey);
display: flex;
align-items: center;
font-size: 15px;
}
#videos .single .vid-dets .info .uploaded {
position: relative;
}
#vids .single .vid-dets .info .uploaded::before {
content: "•";
margin: 0 4px;
}
/* Shorts */
#shorts {
border-top: 5px solid var(--active-hover);
border-bottom: 5px solid var(--active-hover);
margin-right: 30px;
margin-left: 30px;
}
#shorts .group {
padding-top: 30px;
}
#shorts svg {
width: 30px !important;
}
#shorts .head {
display: flex;
justify-content: space-between;
align-items: center;
}
#shorts .head .logo {
display: flex;
align-items: center;
column-gap: 5px;
color: var(--white);
font-size: 20px;
line-height: 28px;
font-weight: 400;
}
#shorts .head .close {
position: relative;
color: var(--white);
border-radius: 50%;
background-color: var(--black);
width: 45px;
height: 45px;
font-size: 19px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: 0.3s ease-in-out;
}
#shorts .head .close:hover {
background-color: var(--active-hover);
}
#shorts .head .close::before {
content: "";
position: absolute;
width: 1px;
height: var(--x-height);
background-color: var(--white);
transform: rotate(-45deg);
}
#shorts .head .close::after {
content: "";
position: absolute;
width: 1px;
height: var(--x-height);
background-color: var(--white);
transform: rotate(45deg);
}
#shorts .head .close p {
position: absolute;
left: -130px;
top: 14%;
padding: 10px 0;
right: auto;
width: 120px;
background: var(--tooltip);
text-align: center;
display: grid;
place-content: center;
border-radius: 5px;
height: auto;
font-size: 13px;
opacity: 0;
pointer-events: none;
transition: 0.3s ease-in-out;
}
#shorts .head .close:hover p {
opacity: 1;
}
#shorts .shorts {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
column-gap: 20px;
row-gap: 20px;
padding-top: 20px;
padding-bottom: 20px;
}
#shorts .shorts .short.appear {
display: grid;
}
#shorts .shorts .short {
cursor: pointer;
}
#shorts .shorts .short .feat {
overflow: hidden;
position: relative;
}
#shorts .shorts .short .feat img {
transform: scale(1);
border-radius: 10px;
transition: 0.3s ease-in-out;
}
#shorts .shorts .short .feat:hover img {
transform: scale(1.01);
border-radius: 0px;
}
#shorts .shorts .short .cont .title {
font-weight: bold;
padding: 12px 24px 4px 0;
position: relative;
}
#shorts .shorts .short .cont .title::after {
position: absolute;
content: "";
width: 3px;
height: 3px;
background: #fff;
right: 0px;
top: 14px;
border-radius: 50%;
box-shadow: 0px 6px 0 #fff, 0px 12px 0 #fff;
opacity: 0;
}
#shorts .shorts .short:hover .cont .title::after {
opacity: 1;
}
#shorts .shorts .short .cont .views {
color: var(--grey);
display: flex;
align-items: center;
font-size: 15px;
}
#shorts .more {
position: relative;
background-color: var(--black);
padding: 10px 0;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 3px;
cursor: pointer;
}
#shorts .more:hover {
background-color: var(--active-hover);
}
#shorts .more .down-box {
position: relative;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
}
#shorts .shelf {
display: flex;
align-items: center;
column-gap: 10px;
padding: 10px 0;
}
#shorts .shelf p {
color: var(--grey);
}
#shorts .shelf .undo {
color: var(--blue);
padding: 5px 15px;
border-radius: 20px;
cursor: pointer;
}
#shorts .shelf .undo:hover {
color: var(--blue);
background-color: #065fd44f;
}
// Shorts
document.addEventListener("DOMContentLoaded", () => {
const shortsContainer = document.querySelector("#shorts")
const destroy = document.querySelector("#shorts .group")
const closeBtn = document.querySelector("#shorts .head .close")
const shelf = document.querySelector(".shelf")
const undo = shelf.querySelector(".shelf .undo")
closeBtn.addEventListener("click", e => {
e.preventDefault()
destroy.classList.add("remove")
if (shelf.classList.contains("remove")) {
shelf.classList.remove("remove")
}
shortsContainer.appendChild(shelf)
})
undo.addEventListener("click", e => {
e.preventDefault()
if (shelf.classList.contains("remove")) {
shelf.classList.remove("remove")
}
destroy.classList.remove("remove")
shelf.classList.add("remove")
})
// Drop downs
// Sidebar main
const moreItems = document.querySelector("#sidebar .mid .toShow")
const showMoreBtn = document.querySelector("#sidebar .mid .showmore")
const showMoreText = document.querySelector("#sidebar .mid .showmore span")
showMoreBtn.addEventListener("click", () => {
moreItems.classList.toggle("active")
showMoreBtn.classList.toggle("icon")
showMoreText.classList.toggle("less")
if (showMoreText.classList.contains("less")) {
showMoreText.innerText = "Show less"
} else {
showMoreText.innerText = "Show more"
}
})
// Sidebar subs
const moreItemsSub = document.querySelector("#sidebar .subs .toShow")
const showMoreBtnSub = document.querySelector("#sidebar .subs .showmore")
const showMoreTextSub = document.querySelector("#sidebar .subs .showmore span")
showMoreBtnSub.addEventListener("click", () => {
moreItemsSub.classList.toggle("active")
showMoreBtnSub.classList.toggle("icon")
showMoreTextSub.classList.toggle("less")
if (showMoreTextSub.classList.contains("less")) {
showMoreTextSub.innerText = "Show less"
} else {
showMoreTextSub.innerText = "Show 3 more"
}
})
// hamburger menu
const hamburger = document.querySelector("#header .logo .burger")
const parentSidebar = document.querySelector("#sidebar")
const content = document.querySelector("#content")
const sidebar = document.querySelector("#sidebar .bar")
const newSidebar = document.querySelector("#sidebar .small-bar")
hamburger.addEventListener("click", () => {
if (!sidebar.classList.contains("remove")) {
sidebar.classList.add("remove")
newSidebar.classList.add("show")
parentSidebar.classList.add("smaller")
content.classList.add("wider")
} else {
sidebar.classList.remove("remove")
newSidebar.classList.remove("show")
parentSidebar.classList.remove("smaller")
content.classList.remove("wider")
}
})
// Shorts
const shorts = document.querySelectorAll("#shorts .short")
const more = document.querySelector("#shorts .more")
for (let i = 5; i < shorts.length; i++) {
shorts[i].classList.add("remove")
more.addEventListener("click", () => {
shorts[i].classList.add("appear")
shorts[i].classList.remove("remove")
more.classList.add("remove")
})
}
// deactivate form btn
const submit = document.querySelector("#header .search form button")
submit.addEventListener("click", e => e.preventDefault())
})
Also see: Tab Triggers