Loading course content...
Recreate YouTube Homepage using HTML and CSS
As for the content section, we already have the general layout ready. All you need to do here is build the video card component.
html
<section class="content">
<section class="video">
<div class="video-thumbnail">
<img src="/media/course/htmlcss/1.jpg" alt="Video Thumbnail" />
</div>
<div class="video-info">
<img src="/media/course/htmlcss/2.jpg" alt="Channel Logo" />
<div>
<h2>Lorem ipsum dolor sit amet consectetur adipisicing elit</h2>
<p>Channel Name</p>
<p>1M views • 1 day ago</p>
</div>
</div>
</section>
. . .
</section>css
/* Video card */
.video {
width: 100%;
height: min-content;
}
.video-thumbnail > img {
width: 100%;
height: 15em;
object-fit: cover;
border-radius: 10px;
}
.video-info {
display: grid;
grid-template-columns: 50px auto;
gap: 10px;
padding: 10px 0px;
}
.video-info > img {
width: 50px;
height: 50px;
border-radius: 100%;
object-fit: cover;
}
.video-info > div {
display: flex;
flex-direction: column;
gap: 5px;
}
.video-info h2 {
font-weight: 700;
font-size: 20px;
}
.video-info p {
color: #606060;
font-size: 14px;
}The content element itself should also be independent, like the sidebar.
css
.content {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(22em, 1fr));
grid-gap: 1em;
align-content: start;
flex: 1;
padding: 10px;
height: 100vh;
overflow-y: auto;
}<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./style.css"> <title>YouTube</title> </head> <body> <header> <nav> <div class="start"> <div class="menu-icon"> <svg height="24" viewBox="0 0 24 24" width="24" focusable="false"> <path d="M21 6H3V5h18v1zm0 5H3v1h18v-1zm0 6H3v1h18v-1z"></path> </svg> </div> <div class="logo"> <svg width="50px" height="50px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none"> <path fill="red" d="M14.712 4.633a1.754 1.754 0 00-1.234-1.234C12.382 3.11 8 3.11 8 3.11s-4.382 0-5.478.289c-.6.161-1.072.634-1.234 1.234C1 5.728 1 8 1 8s0 2.283.288 3.367c.162.6.635 1.073 1.234 1.234C3.618 12.89 8 12.89 8 12.89s4.382 0 5.478-.289a1.754 1.754 0 001.234-1.234C15 10.272 15 8 15 8s0-2.272-.288-3.367z" /> <path fill="#ffffff" d="M6.593 10.11l3.644-2.098-3.644-2.11v4.208z" /> </svg> <span>YouTube</span> </div> </div> <div class="center"> <form action="/"> <input type="text" placeholder="Search"> <button> <div class="search-form-icon"> <svg height="24" viewBox="0 0 24 24" width="24" focusable="false"> <path d="m20.87 20.17-5.59-5.59C16.35 13.35 17 11.75 17 10c0-3.87-3.13-7-7-7s-7 3.13-7 7 3.13 7 7 7c1.75 0 3.35-.65 4.58-1.71l5.59 5.59.7-.71zM10 16c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z"> </path> </svg> </div> </button> </form> <div class="mic-icon-center"> <svg height="24" viewBox="0 0 24 24" width="24" focusable="false"> <path d="M12 3c-1.66 0-3 1.37-3 3.07v5.86c0 1.7 1.34 3.07 3 3.07s3-1.37 3-3.07V6.07C15 4.37 13.66 3 12 3zm6.5 9h-1c0 3.03-2.47 5.5-5.5 5.5S6.5 15.03 6.5 12h-1c0 3.24 2.39 5.93 5.5 6.41V21h2v-2.59c3.11-.48 5.5-3.17 5.5-6.41z"> </path> </svg> </div> </div> <div class="end"> <div class="search-icon"> <svg height="24" viewBox="0 0 24 24" width="24" focusable="false"> <path d="m20.87 20.17-5.59-5.59C16.35 13.35 17 11.75 17 10c0-3.87-3.13-7-7-7s-7 3.13-7 7 3.13 7 7 7c1.75 0 3.35-.65 4.58-1.71l5.59 5.59.7-.71zM10 16c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z"> </path> </svg> </div> <div class="mic-icon"> <svg height="24" viewBox="0 0 24 24" width="24" focusable="false"> <path d="M12 3c-1.66 0-3 1.37-3 3.07v5.86c0 1.7 1.34 3.07 3 3.07s3-1.37 3-3.07V6.07C15 4.37 13.66 3 12 3zm6.5 9h-1c0 3.03-2.47 5.5-5.5 5.5S6.5 15.03 6.5 12h-1c0 3.24 2.39 5.93 5.5 6.41V21h2v-2.59c3.11-.48 5.5-3.17 5.5-6.41z"> </path> </svg> </div> <div class="camera-icon"> <svg height="24" viewBox="0 0 24 24" width="24" focusable="false"> <path d="M14 13h-3v3H9v-3H6v-2h3V8h2v3h3v2zm3-7H3v12h14v-6.39l4 1.83V8.56l-4 1.83V6m1-1v3.83L22 7v8l-4-1.83V19H2V5h16z"> </path> </svg> </div> <div class="notification-icon"> <svg enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24" focusable="false"> <path d="M10 20h4c0 1.1-.9 2-2 2s-2-.9-2-2zm10-2.65V19H4v-1.65l2-1.88v-5.15C6 7.4 7.56 5.1 10 4.34v-.38c0-1.42 1.49-2.5 2.99-1.76.65.32 1.01 1.03 1.01 1.76v.39c2.44.75 4 3.06 4 5.98v5.15l2 1.87zm-1 .42-2-1.88v-5.47c0-2.47-1.19-4.36-3.13-5.1-1.26-.53-2.64-.5-3.84.03C8.15 6.11 7 7.99 7 10.42v5.47l-2 1.88V18h14v-.23z"> </path> </svg> </div> <img src="https://api.dicebear.com/9.x/micah/svg" alt="Profile Image"> </div> </nav> </header> <main> <aside class="sidebar-sm"> <div class="side-icon"> <div class="icon"> <svg enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24" focusable="false"> <g> <path d="M4 21V10.08l8-6.96 8 6.96V21h-6v-6h-4v6H4z"></path> </g> </svg> </div> <div class="text">Home</div> </div> <div class="side-icon"> <div class="icon"> <svg height="24" viewBox="0 0 24 24" width="24" focusable="false"> <path d="M10 14.65v-5.3L15 12l-5 2.65zm7.77-4.33-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.86-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"> </path> </svg> </div> <div class="text">Shorts</div> </div> <div class="side-icon"> <div class="icon"> <svg enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24" focusable="false"> <path d="M10 18v-6l5 3-5 3zm7-15H7v1h10V3zm3 3H4v1h16V6zm2 3H2v12h20V9zM3 10h18v10H3V10z"> </path> </svg> </div> <div class="text">Subscriptions</div> </div> <div class="side-icon"> <div class="icon"> <svg enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24" focusable="false"> <path d="m11 7 6 3.5-6 3.5V7zm7 13H4V6H3v15h15v-1zm3-2H6V3h15v15zM7 17h13V4H7v13z"></path> </svg> </div> <div class="text">Library</div> </div> </aside> <aside class="sidebar-full"> <section class="guide"> <div class="item"> <div class="icon"> <svg enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24" focusable="false"> <g> <path d="M4 21V10.08l8-6.96 8 6.96V21h-6v-6h-4v6H4z"></path> </g> </svg> </div> <div class="text">Home</div> </div> <div class="item"> <div class="icon"> <svg height="24" viewBox="0 0 24 24" width="24" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;"> <path d="M10 14.65v-5.3L15 12l-5 2.65zm7.77-4.33-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.86-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"> </svg> </div> <div class="text">Shorts</div> </div> <div class="item"> <div class="icon"> <svg enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;"> <path d="M10 18v-6l5 3-5 3zm7-15H7v1h10V3zm3 3H4v1h16V6zm2 3H2v12h20V9zM3 10h18v10H3V10z"> </path> </svg> </div> <div class="text">Subscriptions</div> </div> <div class="divider"></div> <div class="item"> <div class="icon"> <svg enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;"> <path d="m11 7 6 3.5-6 3.5V7zm7 13H4V6H3v15h15v-1zm3-2H6V3h15v15zM7 17h13V4H7v13z"></path> </svg> </div> <div class="text">Library</div> </div> <div class="item"> <div class="icon"> <svg height="24" style="pointer-events: none; display: block; width: 100%; height: 100%;" viewBox="0 0 24 24" width="24" focusable="false"> <g> <path d="M14.97 16.95 10 13.87V7h2v5.76l4.03 2.49-1.06 1.7zM22 12c0 5.51-4.49 10-10 10S2 17.51 2 12h1c0 4.96 4.04 9 9 9s9-4.04 9-9-4.04-9-9-9C8.81 3 5.92 4.64 4.28 7.38c-.11.18-.22.37-.31.56L3.94 8H8v1H1.96V3h1v4.74c.04-.09.07-.17.11-.25.11-.22.23-.42.35-.63C5.22 3.86 8.51 2 12 2c5.51 0 10 4.49 10 10z"> </path> </g> </svg> </div> <div class="text">History</div> </div> <div class="item"> <div class="icon"> <svg enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;"> <path d="m10 8 6 4-6 4V8zm11-5v18H3V3h18zm-1 1H4v16h16V4z"></path> </svg> </div> <div class="text">Your videos</div> </div> <div class="item"> <div class="icon"> <svg height="24" viewBox="0 0 24 24" width="24" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;"> <path d="M14.97 16.95 10 13.87V7h2v5.76l4.03 2.49-1.06 1.7zM12 3c-4.96 0-9 4.04-9 9s4.04 9 9 9 9-4.04 9-9-4.04-9-9-9m0-1c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2z"> </path> </svg> </div> <div class="text">Watch later</div> </div> <div class="item"> <div class="icon"> <svg height="24" viewBox="0 0 24 24" width="24" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;"> <path d="M22 7H2v1h20V7zm-9 5H2v-1h11v1zm0 4H2v-1h11v1zm2 3v-8l7 4-7 4z"> </path> </svg> </div> <div class="text">My playlist</div> </div> </section> <div class="divider"></div> <section class="subscriptions"> <p>Subscriptions</p> <div class="item"> <img src="images/1.jpg" alt="Channel1"> <div class="text">First channel</div> </div> <div class="item"> <img src="images/2.jpg" alt="Channel2"> <div class="text">Second channel</div> </div> <div class="item"> <img src="images/3.jpg" alt="Channel3"> <div class="text">Third channel</div> </div> <div class="item"> <img src="images/4.jpg" alt="Channel4"> <div class="text">Fourth channel</div> </div> <div class="item"> <img src="images/5.jpg" alt="Channel5"> <div class="text">Fifth channel</div> </div> </section> <div class="divider"></div> <section class="explore"> <p>Explore</p> <div class="item"> <div class="icon"> <svg enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;"> <path d="M19 3.87v9.77C19 17.7 15.86 21 12 21s-7-3.3-7-7.37v-.13c0-1.06.22-2.13.62-3.09.5-1.19 1.29-2.21 2.27-2.97.85-.66 1.83-1.14 2.87-1.65.39-.19.77-.38 1.15-.58.36-.19.72-.38 1.08-.56v3.22l1.55-1.04L19 3.87M20 2l-6 4V3c-.85.44-1.7.88-2.55 1.33-1.41.74-2.9 1.34-4.17 2.32-1.13.87-2.02 2.05-2.58 3.37-.46 1.09-.7 2.29-.7 3.48v.14C4 18.26 7.58 22 12 22s8-3.74 8-8.36V2zM9.45 12.89 14 10v5.7c0 1.82-1.34 3.3-3 3.3s-3-1.47-3-3.3c0-1.19.58-2.23 1.45-2.81z"> </path> </svg> </div> <div class="text">Trending</div> </div> <div class="item"> <div class="icon"> <svg enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;"> <path d="M12 4v9.38c-.73-.84-1.8-1.38-3-1.38-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V8h6V4h-7zM9 19c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm9-12h-5V5h5v2z"> </path> </svg> </div> <div class="text">Music</div> </div> <div class="item"> <div class="icon"> <svg enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;"> <path d="m22.01 4.91-.5-2.96L1.64 5.19 2 8v13h20V8H3.06l18.95-3.09zM5 9l1 3h3L8 9h2l1 3h3l-1-3h2l1 3h3l-1-3h3v11H3V9h2z"> </path> </svg> </div> <div class="text">Movies & TV</div> </div> <div class="item"> <div class="icon"> <svg enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;"> <g> <path d="M14 12c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zM8.48 8.45l-.71-.7C6.68 8.83 6 10.34 6 12s.68 3.17 1.77 4.25l.71-.71C7.57 14.64 7 13.39 7 12s.57-2.64 1.48-3.55zm7.75-.7-.71.71c.91.9 1.48 2.15 1.48 3.54s-.57 2.64-1.48 3.55l.71.71C17.32 15.17 18 13.66 18 12s-.68-3.17-1.77-4.25zM5.65 5.63l-.7-.71C3.13 6.73 2 9.24 2 12s1.13 5.27 2.95 7.08l.71-.71C4.02 16.74 3 14.49 3 12s1.02-4.74 2.65-6.37zm13.4-.71-.71.71C19.98 7.26 21 9.51 21 12s-1.02 4.74-2.65 6.37l.71.71C20.87 17.27 22 14.76 22 12s-1.13-5.27-2.95-7.08z"> </path> </g> </svg> </div> <div class="text">Live</div> </div> <div class="item"> <div class="icon"> <svg enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;"> <path d="M10 12H8v2H6v-2H4v-2h2V8h2v2h2v2zm7 .5c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5.67 1.5 1.5 1.5 1.5-.67 1.5-1.5zm3-3c0-.83-.67-1.5-1.5-1.5S17 8.67 17 9.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5zm-3.03-4.35-4.5 2.53-.49.27-.49-.27-4.5-2.53L3 7.39v6.43l8.98 5.04 8.98-5.04V7.39l-3.99-2.24m0-1.15 4.99 2.8v7.6L11.98 20 2 14.4V6.8L6.99 4l4.99 2.8L16.97 4z"> </path> </svg> </div> <div class="text">Gaming</div> </div> <div class="item"> <div class="icon"> <svg enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;"> <path d="M11 11v6H7v-6h4m1-1H6v8h6v-8zM3 3.03V21h14l4-4V3.03M20 4v11.99l-.01.01H16v3.99l-.01.01H4V4h16zm-2 4H6V6h12v2zm0 7h-5v-2h5v2zm0-3h-5v-2h5v2z"> </path> </svg> </div> <div class="text">News</div> </div> <div class="item"> <div class="icon"> <svg height="24" viewBox="0 0 24 24" width="24" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;"> <path d="M18 5V2H6v3H3v6l3.23 1.61c.7 2.5 2.97 4.34 5.69 4.38L8 19v3h8v-3l-3.92-2.01c2.72-.04 4.99-1.88 5.69-4.38L21 11V5h-3zM6 11.38l-2-1V6h2v5.38zM15 21H9v-1.39l3-1.54 3 1.54V21zm2-10c0 2.76-2.24 5-5 5s-5-2.24-5-5V3h10v8zm3-.62-2 1V6h2v4.38z"> </path> </svg> </div> <div class="text">Sports</div> </div> <div class="item"> <div class="icon"> <svg enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;"> <path d="M16 21h-2.28c-.35.6-.98 1-1.72 1s-1.38-.4-1.72-1H8v-1h8v1zm4-11c0 2.96-1.61 5.54-4 6.92V19H8v-2.08C5.61 15.54 4 12.96 4 10c0-4.42 3.58-8 8-8s8 3.58 8 8zm-5 8v-1.66l.5-.29C17.66 14.8 19 12.48 19 10c0-3.86-3.14-7-7-7s-7 3.14-7 7c0 2.48 1.34 4.8 3.5 6.06l.5.28V18h6z"> </path> </svg> </div> <div class="text">Learning</div> </div> <div class="item"> <div class="icon"> <svg height="24" style="pointer-events: none; display: block; width: 100%; height: 100%;" viewBox="0 0 24 24" width="24" focusable="false"> <path d="M12.5 6.44v-.5C13.36 5.71 14 4.93 14 4c0-1.1-.9-2-2-2s-2 .9-2 2h1c0-.55.45-1 1-1s1 .45 1 1-.45 1-1 1h-.5v1.44L4 13h2v6h1v2h1v-2h2v3h1v-3h2v2h1v-2h1v-3h3v-3h2l-7.5-6.56zM6.66 12 12 7.33 17.34 12H6.66zM14 18H7v-5h7v5zm1-3v-2h2v2h-2z"> </path> </svg> </div> <div class="text">Fashion & Beauty</div> </div> </section> <div class="divider"></div> <section class="mf-ytb"> <p>More from YouTube</p> <div class="item"> <div class="icon"> <svg class="external-icon" viewBox="0 0 97 20" style="width: 100%; pointer-events: none; display: block; height: 100%;" focusable="false"> <svg viewBox="0 0 97 20" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg"> <g> <path d="M27.9704 3.12324C27.6411 1.89323 26.6745 0.926623 25.4445 0.597366C23.2173 2.24288e-07 14.2827 0 14.2827 0C14.2827 0 5.34807 2.24288e-07 3.12088 0.597366C1.89323 0.926623 0.924271 1.89323 0.595014 3.12324C-2.8036e-07 5.35042 0 10 0 10C0 10 -1.57002e-06 14.6496 0.597364 16.8768C0.926621 18.1068 1.89323 19.0734 3.12324 19.4026C5.35042 20 14.285 20 14.285 20C14.285 20 23.2197 20 25.4468 19.4026C26.6769 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.9704 3.12324Z" fill="#FF0000"></path> <path d="M11.4275 14.2854L18.8475 10.0004L11.4275 5.71533V14.2854Z" fill="white"> </path> </g> <g> <path d="M40.0566 6.34524V7.03668C40.0566 10.4915 38.5255 12.5118 35.1742 12.5118H34.6638V18.5583H31.9263V1.42285H35.414C38.6078 1.42285 40.0566 2.7728 40.0566 6.34524ZM37.1779 6.59218C37.1779 4.09924 36.7287 3.50658 35.1765 3.50658H34.6662V10.4727H35.1365C36.6064 10.4727 37.1803 9.40968 37.1803 7.10253L37.1779 6.59218Z"> </path> <path d="M46.5336 5.8345L46.3901 9.08238C45.2259 8.83779 44.264 9.02123 43.836 9.77382V18.5579H41.1196V6.0391H43.2857L43.5303 8.75312H43.6337C43.9183 6.77288 44.8379 5.771 46.0232 5.771C46.1949 5.7757 46.3666 5.79687 46.5336 5.8345Z"> </path> <path d="M49.6567 13.2456V13.8782C49.6567 16.0842 49.779 16.8415 50.7198 16.8415C51.6182 16.8415 51.8228 16.1501 51.8439 14.7178L54.2734 14.8613C54.4568 17.5565 53.0481 18.763 50.6586 18.763C47.7588 18.763 46.9004 16.8627 46.9004 13.4126V11.223C46.9004 7.58707 47.8599 5.80908 50.7409 5.80908C53.6407 5.80908 54.3769 7.32131 54.3769 11.0984V13.2456H49.6567ZM49.6567 10.6703V11.5687H51.7193V10.675C51.7193 8.37258 51.5547 7.71172 50.6821 7.71172C49.8096 7.71172 49.6567 8.38669 49.6567 10.675V10.6703Z"> </path> <path d="M68.4103 9.09902V18.5557H65.5928V9.30834C65.5928 8.28764 65.327 7.77729 64.7132 7.77729C64.2216 7.77729 63.7724 8.06186 63.4667 8.59338C63.4832 8.76271 63.4902 8.93439 63.4879 9.10373V18.5605H60.668V9.30834C60.668 8.28764 60.4022 7.77729 59.7884 7.77729C59.2969 7.77729 58.8665 8.06186 58.5631 8.57456V18.5628H55.7456V6.03929H57.9728L58.2221 7.63383H58.2621C58.8947 6.42969 59.9178 5.77588 61.1219 5.77588C62.3072 5.77588 62.9799 6.36854 63.288 7.43157C63.9418 6.34973 64.9225 5.77588 66.0443 5.77588C67.7564 5.77588 68.4103 7.00119 68.4103 9.09902Z"> </path> <path d="M69.8191 2.8338C69.8191 1.4862 70.3106 1.09814 71.3501 1.09814C72.4132 1.09814 72.8812 1.54734 72.8812 2.8338C72.8812 4.22373 72.4108 4.57181 71.3501 4.57181C70.3106 4.56945 69.8191 4.22138 69.8191 2.8338ZM69.9837 6.03935H72.6789V18.5629H69.9837V6.03935Z"> </path> <path d="M81.891 6.03955V18.5631H79.6849L79.4403 17.032H79.3792C78.7466 18.2573 77.827 18.7677 76.684 18.7677C75.0095 18.7677 74.2522 17.7046 74.2522 15.3975V6.0419H77.0697V15.2352C77.0697 16.3382 77.3002 16.7874 77.867 16.7874C78.3844 16.7663 78.8477 16.4582 79.0688 15.9902V6.0419H81.891V6.03955Z"> </path> <path d="M96.1901 9.09893V18.5557H93.3726V9.30825C93.3726 8.28755 93.1068 7.7772 92.493 7.7772C92.0015 7.7772 91.5523 8.06177 91.2465 8.59329C91.263 8.76027 91.2701 8.9296 91.2677 9.09893V18.5557H88.4502V9.30825C88.4502 8.28755 88.1845 7.7772 87.5706 7.7772C87.0791 7.7772 86.6487 8.06177 86.3453 8.57447V18.5627H83.5278V6.0392H85.7527L85.9973 7.63139H86.0372C86.6699 6.42725 87.6929 5.77344 88.8971 5.77344C90.0824 5.77344 90.755 6.3661 91.0631 7.42913C91.7169 6.34729 92.6976 5.77344 93.8194 5.77344C95.541 5.77579 96.1901 7.0011 96.1901 9.09893Z"> </path> <path d="M40.0566 6.34524V7.03668C40.0566 10.4915 38.5255 12.5118 35.1742 12.5118H34.6638V18.5583H31.9263V1.42285H35.414C38.6078 1.42285 40.0566 2.7728 40.0566 6.34524ZM37.1779 6.59218C37.1779 4.09924 36.7287 3.50658 35.1765 3.50658H34.6662V10.4727H35.1365C36.6064 10.4727 37.1803 9.40968 37.1803 7.10253L37.1779 6.59218Z"> </path> </g> </svg> </svg> </div> <div class="text">YouTube Premium</div> </div> <div class="item"> <div class="icon"> <svg viewBox="0 0 24 24" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;"> <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"> </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"> </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"> </path> <path fill="#fff" d="M9.88 15.25 15.5 12 9.88 8.75z"></path> </svg> </div> <div class="text">YouTube Studio</div> </div> <div class="item"> <div class="icon"> <svg viewBox="0 0 24 24" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;"> <circle fill="#FF0000" cx="12" cy="12" r="10"></circle> <polygon fill="#FFFFFF" points="10,14.65 10,9.35 15,12 "></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"> </path> </svg> </div> <div class="text">YouTube Music</div> </div> <div class="item"> <div class="icon"> <svg viewBox="0 0 24 24" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;"> <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"> </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"> </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"> </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"> </path> </svg> </div> <div class="text">YouTube Kids</div> </div> </section> </aside> <section class="content"> <section class="video"> <div class="video-thumbnail"> <img src="https://picsum.photos/id/100/800/1200" alt="Video Thumbnail"> </div> <div class="video-info"> <img src="https://picsum.photos/id/101/100/100" alt="Channel Logo"> <div> <h2>How CSS Grid Changed Responsive Layouts</h2> <p>Layout Lab</p> <p>2.3M views • 3 weeks ago</p> </div> </div> </section> <section class="video"> <div class="video-thumbnail"> <img src="https://picsum.photos/id/102/800/1200" alt="Video Thumbnail"> </div> <div class="video-info"> <img src="https://picsum.photos/id/103/100/100" alt="Channel Logo"> <div> <h2>Building a Responsive Navbar with CSS Grid</h2> <p>Code Academy</p> <p>467K views • 2 months ago</p> </div> </div> </section> <section class="video"> <div class="video-thumbnail"> <img src="https://picsum.photos/id/104/800/1200" alt="Video Thumbnail"> </div> <div class="video-info"> <img src="https://picsum.photos/id/123/100/100" alt="Channel Logo"> <div> <h2>10 JavaScript Tricks You Didn't Know</h2> <p>DevTips</p> <p>1.1M views • 1 week ago</p> </div> </div> </section> <section class="video"> <div class="video-thumbnail"> <img src="https://picsum.photos/id/106/800/1200" alt="Video Thumbnail"> </div> <div class="video-info"> <img src="https://picsum.photos/id/107/100/100" alt="Channel Logo"> <div> <h2>Understanding Async/Await in 8 Minutes</h2> <p>Async Academy</p> <p>98K views • 5 days ago</p> </div> </div> </section> <section class="video"> <div class="video-thumbnail"> <img src="https://picsum.photos/id/108/800/1200" alt="Video Thumbnail"> </div> <div class="video-info"> <img src="https://picsum.photos/id/109/100/100" alt="Channel Logo"> <div> <h2>Designing Accessible Forms — Best Practices</h2> <p>Inclusive UI</p> <p>54K views • 3 months ago</p> </div> </div> </section> <section class="video"> <div class="video-thumbnail"> <img src="https://picsum.photos/id/110/800/1200" alt="Video Thumbnail"> </div> <div class="video-info"> <img src="https://picsum.photos/id/111/100/100" alt="Channel Logo"> <div> <h2>State Management Patterns for Beginners</h2> <p>Frontend Focus</p> <p>742K views • 6 months ago</p> </div> </div> </section> <section class="video"> <div class="video-thumbnail"> <img src="https://picsum.photos/id/112/800/1200" alt="Video Thumbnail"> </div> <div class="video-info"> <img src="https://picsum.photos/id/113/100/100" alt="Channel Logo"> <div> <h2>Animating with CSS: Keyframe Masterclass</h2> <p>Motion Studio</p> <p>3.4M views • 1 year ago</p> </div> </div> </section> <section class="video"> <div class="video-thumbnail"> <img src="https://picsum.photos/id/114/800/1200" alt="Video Thumbnail"> </div> <div class="video-info"> <img src="https://picsum.photos/id/115/100/100" alt="Channel Logo"> <div> <h2>From Zero to Deploy: Fullstack in One Hour</h2> <p>Ship It</p> <p>7.1M views • 2 years ago</p> </div> </div> </section> <section class="video"> <div class="video-thumbnail"> <img src="https://picsum.photos/id/116/800/1200" alt="Video Thumbnail"> </div> <div class="video-info"> <img src="https://picsum.photos/id/117/100/100" alt="Channel Logo"> <div> <h2>10 Tips to Speed Up Your React App</h2> <p>React Works</p> <p>890K views • 1 month ago</p> </div> </div> </section> <section class="video"> <div class="video-thumbnail"> <img src="https://picsum.photos/id/118/800/1200" alt="Video Thumbnail"> </div> <div class="video-info"> <img src="https://picsum.photos/id/119/100/100" alt="Channel Logo"> <div> <h2>Modern CSS Variables: Practical Examples</h2> <p>Styling Weekly</p> <p>32K views • 12 hours ago</p> </div> </div> </section> <section class="video"> <div class="video-thumbnail"> <img src="https://picsum.photos/id/120/800/1200" alt="Video Thumbnail"> </div> <div class="video-info"> <img src="https://picsum.photos/id/121/100/100" alt="Channel Logo"> <div> <h2>Intro to TypeScript — Tips for JS Developers</h2> <p>Typed World</p> <p>210K views • 4 weeks ago</p> </div> </div> </section> <section class="video"> <div class="video-thumbnail"> <img src="https://picsum.photos/id/122/800/1200" alt="Video Thumbnail"> </div> <div class="video-info"> <img src="https://picsum.photos/id/123/100/100" alt="Channel Logo"> <div> <h2>Optimizing Images for the Web (Practical Workflow)</h2> <p>Media Hacks</p> <p>76K views • 6 days ago</p> </div> </div> </section> <section class="video"> <div class="video-thumbnail"> <img src="https://picsum.photos/id/124/800/1200" alt="Video Thumbnail"> </div> <div class="video-info"> <img src="https://picsum.photos/id/125/100/100" alt="Channel Logo"> <div> <h2>Design Systems: Component Naming Conventions</h2> <p>Product Pixels</p> <p>15K views • 8 months ago</p> </div> </div> </section> <section class="video"> <div class="video-thumbnail"> <img src="https://picsum.photos/id/126/800/1200" alt="Video Thumbnail"> </div> <div class="video-info"> <img src="https://picsum.photos/id/127/100/100" alt="Channel Logo"> <div> <h2>Debugging JavaScript: Fast Techniques</h2> <p>Console Masters</p> <p>120K views • 3 weeks ago</p> </div> </div> </section> <section class="video"> <div class="video-thumbnail"> <img src="https://picsum.photos/id/128/800/1200" alt="Video Thumbnail"> </div> <div class="video-info"> <img src="https://picsum.photos/id/129/100/100" alt="Channel Logo"> <div> <h2>Accessibility Audit: Checklist for 2026</h2> <p>Access First</p> <p>9.8K views • 2 days ago</p> </div> </div> </section> <section class="video"> <div class="video-thumbnail"> <img src="https://picsum.photos/id/130/800/1200" alt="Video Thumbnail"> </div> <div class="video-info"> <img src="https://picsum.photos/id/131/100/100" alt="Channel Logo"> <div> <h2>Deploying with Docker in 2026 — Quickstart</h2> <p>Ops Corner</p> <p>1.9M views • 9 months ago</p> </div> </div> </section> <section class="video"> <div class="video-thumbnail"> <img src="https://picsum.photos/id/132/800/1200" alt="Video Thumbnail"> </div> <div class="video-info"> <img src="https://picsum.photos/id/133/100/100" alt="Channel Logo"> <div> <h2>Writing Clean Code: Naming & Structure</h2> <p>Clean Coder</p> <p>540K views • 11 months ago</p> </div> </div> </section> <section class="video"> <div class="video-thumbnail"> <img src="https://picsum.photos/id/134/800/1200" alt="Video Thumbnail"> </div> <div class="video-info"> <img src="https://picsum.photos/id/135/100/100" alt="Channel Logo"> <div> <h2>Performance Budgeting for Web Projects</h2> <p>SpeedShop</p> <p>43K views • 5 months ago</p> </div> </div> </section> <section class="video"> <div class="video-thumbnail"> <img src="https://picsum.photos/id/136/800/1200" alt="Video Thumbnail"> </div> <div class="video-info"> <img src="https://picsum.photos/id/137/100/100" alt="Channel Logo"> <div> <h2>Microinteractions That Delight Users</h2> <p>UX Minute</p> <p>6.2K views • 18 hours ago</p> </div> </div> </section> <section class="video"> <div class="video-thumbnail"> <img src="https://picsum.photos/id/145/800/1200" alt="Video Thumbnail"> </div> <div class="video-info"> <img src="https://picsum.photos/id/139/100/100" alt="Channel Logo"> <div> <h2>Career Advice for New Developers — How to Stand Out</h2> <p>Hiring Hacks</p> <p>2.8M views • 4 months ago</p> </div> </div> </section> </section> </main> </body> </html>