Loading course content...
Table of Contents
Recreate YouTube Homepage using HTML and CSS
Code Playground is only enabled on larger screen sizes.
Finally, we are going to finish this chapter with two real-life projects.
In the first project, we will recreate the YouTube homepage.
Creating the page layout
Let's start by discussing the basic page layout. We will follow the mobile-first rule and start from the small screen.
On a small screen, there should be a top navigation bar and a content section. The navigation bar has the logo on the left side and some buttons on the right side. The content section should include several card components showing individual videos.
On a medium screen (>= 640px), more icons should be displayed in the navigation bar. We will skip this step for now and revisit this topic when we start building the navigation menu.
On a large screen (>= 768px), the page should have a small sidebar. The navigation bar should display a search box at the center instead of just an icon. The content section should also be multi-column.
And lastly, on an extra large screen (>= 1024px), the webpage should have a full-sized sidebar, a fully expanded navigation bar with all the icons and search boxes, and the content section should have more columns.
The HTML document
Now, let's see if you can construct this layout. We'll start with the HTML document for the navigation bar.
html
<header>
<nav>
<div class="start">
<div>Button</div>
<div>Logo</div>
</div>
<div class="center">
<div>Search</div>
<div>Microphone</div>
</div>
<div class="end">
<div>Button</div>
<div>Button</div>
<div>Button</div>
</div>
</nav>
</header>And then the sidebars:
html
<main>
<aside class="sidebar-sm">Small sidebar</aside>
<aside class="sidebar-full">Full sidebar</aside>
. . .
</main>There should also be a content section inside the <main> element:
html
<section class="content">
<section class="video">
<div class="video-thumbnail">
<img src="video_thumbnail1.jpg" alt="Video Thumbnail" />
</div>
<div class="video-info">
<img src="channel1.jpg" alt="Channel Logo" />
<div>
<h2>Video Title 1</h2>
<p>Channel Name</p>
<p>1M views • 1 day ago</p>
</div>
</div>
</section>
. . .
</section>Remember your HTML should have all the components required for all screen sizes. If an element is not required for a certain screen, you can remove it by setting display to none.
This example contains a navigation bar defined by the <nav> element. The navigation bar has three sections, start, center, and end. The class names correspond to their respective positions in the navigation bar.
This layout can be created with a flexbox, and the justify-content property should be set to space-between. The center section should be removed until the screen is big enough.
The <main> section has two sidebars, a small sidebar (sidebar-sm) and a full-sized sidebar (sidebar-full). The small sidebar should be displayed on large screens, and the full-sized sidebar should be displayed only on extra large screens.
Lastly, for the content section, you can use a CSS grid with the responsive-layout-without-breakpoint technique we discussed previously. For now, we are not going to worry about how the card components are created.
Now, we can move on to the CSS file. Let's remove the default margins and paddings and set the box-sizing property to border-box. You can also add a border to each section to make their respective positions more clear.
css
* {
box-sizing: border-box;
padding: 0px;
margin: 0px;
}
nav,
.sidebar-sm,
.sidebar-full,
.content {
border: black solid 2px;
}Navbar layout
Next, the navigation bar should be a flexbox with its direction set to row, and justify-content set to space-between, so that each subsection has equal spaces between each other.
The subsections should also be row flexbox so that the logo and icons are also placed horizontally. However, since we are starting from the small screen, the center section should be removed (display: none;) for now.
css
nav {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.start {
display: flex;
flex-direction: row;
}
.center {
display: none; /* Not displayed on small screens */
}
.end {
display: flex;
flex-direction: row;
}For large screens, the center section should be designed just like its siblings.
css
/* Large screen */
@media screen and (min-width: 768px) {
.center {
display: flex;
flex-direction: row;
}
}Sidebars
Next, the <main> section should be a row flexbox, or a grid with two columns, so that the sidebar and the content are in the same row.
css
main {
display: flex;
flex-direction: row;
}The sidebars are removed on small screens.
css
.sidebar-sm {
display: none;
}
.sidebar-full {
display: none;
}The small sidebar is displayed on large screens. By setting flex to 0, you make sure the sidebar has a fixed size, and as the viewport changes, only the content section changes with it.
css
/* Large screen */
@media screen and (min-width: 768px) {
.center {
display: flex;
flex-direction: row;
}
.sidebar-sm {
display: flex;
flex-direction: column;
flex: 0;
}
}The full-sized sidebar is displayed on extra large screens, and the small sidebar will be removed.
css
/* X-Large screen */
@media screen and (min-width: 1024px) {
.sidebar-sm {
display: none;
}
.sidebar-full {
display: flex;
flex-direction: column;
flex: 0;
}
}The content section
Lastly, for the content section:
css
.content {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
grid-gap: 1em;
flex: 1;
}
.video {
border: red solid 2px;
width: 100%;
}For now, we'll set the maximum width of a video card to be 20em. This is how this layout looks like as the viewport changes:
Building the navigation bar
Next, let's focus on the navigation bar. The start section has a menu icon and a logo. The center section includes a search form and a search icon. Lastly, the end section contains several icons and a profile photo.
In order to make this example shorter, we left out the actual icon elements, defined by <svg>, but you can copy these resources from YouTube directly using your browser's Developer Tools.
html
<nav>
<div class="start">
<div class="menu-icon">. . .</div>
<img src="/media/course/htmlcss/logo.png" alt="YouTube Logo" />
</div>
<div class="center">
<form action="/">
<input type="text" placeholder="Search" />
<button>
<div class="search-form-icon">. . .</div>
</button>
</form>
<div class="mic-icon-center">. . .</div>
</div>
<div class="end">
<div class="search-icon">. . .</div>
<div class="mic-icon">. . .</div>
<div class="camera-icon">. . .</div>
<div class="notification-icon">. . .</div>
<img src="/media/course/htmlcss/profile.jpg" alt="Profile Image" />
</div>
</nav>First of all, all the icons should have a unified style. They should be rounded and have equal paddings. The icons should also have a background when the cursor is hovered on top.
css
.menu-icon,
.search-icon,
.mic-icon,
.mic-icon-center,
.camera-icon,
.notification-icon {
border-radius: 100%;
padding: 10px;
}
svg {
display: block;
width: 100%;
height: 100%;
}
.menu-icon:hover,
.search-icon:hover,
.mic-icon:hover,
.mic-icon-center:hover,
.camera-icon:hover,
.notification-icon:hover {
background-color: #e5e5e5;
}
On a small screen, most of these icons should be removed, as the horizontal space on a mobile device is very valuable. In this case, we'll only keep the logo, the search icon, and the profile picture. All the other elements will be removed.
css
.menu-icon,
.mic-icon,
.mic-icon-center,
.camera-icon,
.notification-icon {
display: none;
}And then, style the start, center and end sections of the navbar.
css
/* Navbar start section */
.start {
display: flex;
flex-direction: row;
flex: 1;
gap: 10px;
padding: 8px;
align-items: center;
}
.start > img {
width: 90px;
}
/* Navbar center section */
.center {
display: none;
flex: 2;
}
/* Navbar end section */
.end {
display: flex;
flex-direction: row;
padding: 8px;
align-items: center;
justify-content: end;
flex: 1;
}
.end > img {
width: 40px;
border-radius: 100%;
object-fit: cover;
margin-left: 10px;
}start and end will have equal size, and center will grow faster than its siblings as the viewport grows.
center will be removed on a small screen, so for now, there are only start and end.
On a medium screen, more icons will appear, but the center section is still removed.
css
@media screen and (min-width: 640px) {
/* Display the menu, mic, camera, and notification icons for medium screen */
.menu-icon,
.mic-icon,
.camera-icon,
.notification-icon {
display: block;
}
}On a large screen, the center section will be displayed, the mic icon will be moved to the center, and the right search icon will be removed. We left out the styles for the search form for simplicity.
css
@media screen and (min-width: 768px) {
.sidebar-sm {
display: flex;
flex-direction: column;
flex: 0;
}
/* Display the center section for large screens */
.center {
display: flex;
flex-direction: row;
gap: 10px;
padding: 8px;
align-items: center;
justify-content: center;
}
. . .
/* Hide the search and right mic icons */
.search-icon,
.mic-icon {
display: none;
}
/* Display the center mic icon */
.mic-icon-center {
display: block;
}
}Building the sidebar
Now, let's move on to the sidebar. The small sidebar will be displayed on large screens, and the full-sized sidebar will be displayed on extra large screens.
html
<aside class="sidebar-sm">
<div class="side-icon">
<div class="icon">. . .</div>
<div class="text">Home</div>
</div>
. . .
</aside>html
<aside class="sidebar-full">
<section class="guide">
<div class="item">
<div class="icon">. . .</div>
<div class="text">Home</div>
</div>
. . .
<div class="divider"></div>
<div class="item">
<div class="icon">. . .</div>
<div class="text">Library</div>
</div>
. . .
</section>
<div class="divider"></div>
<section class="subscriptions">
<p>Subscriptions</p>
<div class="item">
<img src="/media/course/htmlcss/1.jpg" alt="Channel1" />
<div class="text">First channel</div>
</div>
. . .
</section>
<div class="divider"></div>
<section class="explore">
<p>Explore</p>
<div class="item">
<div class="icon">. . .</div>
<div class="text">Trending</div>
</div>
. . .
</section>
<div class="divider"></div>
<section class="mf-ytb">
<p>More from YouTube</p>
<div class="item">
<div class="icon">. . .</div>
<div class="text">YouTube Premium</div>
</div>
. . .
</section>
</aside>The small sidebar contains four buttons arranged vertically. Each individual button should also be a flexbox, aligned vertically.
css
@media screen and (min-width: 768px) {
.sidebar-sm {
display: flex;
flex-direction: column;
flex: 0;
}
.side-icon {
width: 80px;
height: 100px;
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.side-icon:hover {
background-color: #f2f2f2;
}
.side-icon svg {
width: 25px;
}
.side-icon > .text {
font-size: 10px;
margin-top: 5px;
}
. . .
}As for the full-sized sidebar, it should only be displayed on extra large screens.
The sidebar should have a fixed width (flex: 0 250px;) so that it does not change as the viewport size changes. The height is defined as 100 percent of the viewport height (100vh), and the overflow is set to auto.
This configuration ensures that the sidebar is treated as an independent section in the webpage. When you scroll the sidebar up and down, it will not affect the main content section.
css
@media screen and (min-width: 1024px) {
.sidebar-sm {
display: none;
}
.sidebar-full {
display: flex;
flex-direction: column;
flex: 0 250px;
height: 100vh;
overflow-y: auto;
padding: 8px;
}
. . .
}For individual items in the sidebar, the setup should be easy to understand.
css
@media screen and (min-width: 1024px) {
.sidebar-sm {
display: none;
}
.sidebar-full {
display: flex;
flex-direction: column;
flex: 0 250px;
height: 100vh;
overflow-y: auto;
padding: 8px;
}
/* Section titles */
.subscriptions > p,
.explore > p,
.mf-ytb > p {
font-size: 16px;
padding: 10px;
}
/* Individual items */
.item {
display: grid;
grid-template-columns: 25px auto;
gap: 20px;
align-items: center;
justify-items: stretch;
padding: 10px;
border-radius: 10px;
}
.item:hover {
background-color: #f2f2f2;
}
.item > .text {
font-size: 14px;
}
/* Channel images */
.item > img {
width: 30px;
aspect-ratio: 1/1;
border-radius: 100%;
object-fit: cover;
}
/* Divider */
.divider {
border: #e5e5e5 solid 1px;
margin: 10px 0px;
}
}Building the video card component
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"> <title>Document</title> <link rel="stylesheet" href="/styles.css"> </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> <img src="https://cdn3.iconfinder.com/data/icons/social-network-30/512/social-06-1024.png" height="60" alt="YouTube Logo" /> </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://picsum.photos/id/227/200/200" 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"></path> </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="https://picsum.photos/id/237/1200/800" alt="Channel1" /> <div class="text">First channel</div> </div> <div class="item"> <img src="https://picsum.photos/id/123/1200/800" alt="Channel2" /> <div class="text">Second channel</div> </div> <div class="item"> <img src="https://picsum.photos/id/200/1200/800" alt="Channel3" /> <div class="text">Third channel</div> </div> <div class="item"> <img src="https://picsum.photos/id/211/1200/800" alt="Channel4" /> <div class="text">Fourth channel</div> </div> <div class="item"> <img src="https://picsum.photos/id/137/1200/800" 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/237/1200/800" alt="Video Thumbnail" /> </div> <div class="video-info"> <img src="https://picsum.photos/id/123/1200/800" 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 class="video"> <div class="video-thumbnail"> <img src="https://picsum.photos/id/123/1200/800" alt="Video Thumbnail" /> </div> <div class="video-info"> <img src="https://picsum.photos/id/211/1200/800" alt="Channel Logo" /> <div> <h2>Lorem ipsum dolor sit amet</h2> <p>Channel Name</p> <p>215K views • 15 days ago</p> </div> </div> </section> <section class="video"> <div class="video-thumbnail"> <img src="https://picsum.photos/id/200/1200/800" alt="Video Thumbnail" /> </div> <div class="video-info"> <img src="https://picsum.photos/id/237/1200/800" alt="Channel Logo" /> <div> <h2>consectetur adipisicing elit</h2> <p>Channel Name</p> <p>2K views • 2 days ago</p> </div> </div> </section> <section class="video"> <div class="video-thumbnail"> <img src="https://picsum.photos/id/237/1200/800" alt="Video Thumbnail" /> </div> <div class="video-info"> <img src="https://picsum.photos/id/123/1200/800" alt="Channel Logo" /> <div> <h2>Lorem ipsum dolor sit amet</h2> <p>Channel Name</p> <p>215K views • 15 days ago</p> </div> </div> </section> <section class="video"> <div class="video-thumbnail"> <img src="https://picsum.photos/id/237/1200/800" alt="Video Thumbnail" /> </div> <div class="video-info"> <img src="https://picsum.photos/id/211/1200/800" alt="Channel Logo" /> <div> <h2>Lorem ipsum dolor sit amet</h2> <p>Channel Name</p> <p>215K views • 15 days ago</p> </div> </div> </section> <section class="video"> <div class="video-thumbnail"> <img src="https://picsum.photos/id/211/1200/800" alt="Video Thumbnail" /> </div> <div class="video-info"> <img src="https://picsum.photos/id/211/1200/800" alt="Channel Logo" /> <div> <h2>Lorem ipsum dolor sit amet</h2> <p>Channel Name</p> <p>215K views • 15 days ago</p> </div> </div> </section> <section class="video"> <div class="video-thumbnail"> <img src="https://picsum.photos/id/200/1200/800" alt="Video Thumbnail" /> </div> <div class="video-info"> <img src="https://picsum.photos/id/211/1200/800" alt="Channel Logo" /> <div> <h2>Lorem ipsum dolor sit amet</h2> <p>Channel Name</p> <p>215K views • 15 days ago</p> </div> </div> </section> <section class="video"> <div class="video-thumbnail"> <img src="https://picsum.photos/id/123/1200/800" alt="Video Thumbnail" /> </div> <div class="video-info"> <img src="https://picsum.photos/id/211/1200/800" alt="Channel Logo" /> <div> <h2>Lorem ipsum dolor sit amet</h2> <p>Channel Name</p> <p>215K views • 15 days ago</p> </div> </div> </section> <section class="video"> <div class="video-thumbnail"> <img src="https://picsum.photos/id/237/1200/800" alt="Video Thumbnail" /> </div> <div class="video-info"> <img src="https://picsum.photos/id/211/1200/800" alt="Channel Logo" /> <div> <h2>Lorem ipsum dolor sit amet</h2> <p>Channel Name</p> <p>215K views • 15 days ago</p> </div> </div> </section> </section> </main> </body> </html>