It’s HTML & CSS course day 10! https://www.youtube.com/watch?v=G3e-cpL7ofc
Today I look at nexted flexboxes
Basically this was just more exercise about how to use flex boxes, notably to make the YouTube header of this classe’s project
My Code
Probably this code is not worth reading through, but what I find interesting is how flexbox allows us to arrange objects exactly how we want, for example with justify-content: space-between;
.header {
height: 55px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.left-section {
display: flex;
align-items: center;
}
.hamburger-menu {
height: 24px;
margin-left: 24px;
margin-right: 20px;
}
.youtube-logo {
height: 20px;
}
.middle-section {
flex: 1;
margin-left: 70px;
max-width: 500px;
display: flex;
align-items: center;
}
.search-bar {
flex: 1;
height: 36px;
padding-left: 10px;
font-size: 16px;
border-width: 1px;
border-style: solid;
border-color: rgb(192, 192, 192);
border-radius: 2px;
box-shadow: inset 1px 2px 3px rgba(0, 0, 0, 0.05);
width: 0;
}
.search-bar::placeholder {
font-family: Roboto, Arial;
font-size: 16px
}
.search-button {
height: 40px;
width: 66px;
background-color: rgb(240, 240, 240);
border-width: 1px;
border-style: solid;
border-color: rgb(192, 192, 192);
margin-left: -1px;
margin-right: 10px;
}
.search-icon {
height: 25px;
margin-top: 4px;
}
.voice-search-button {
margin-right: 10px;
height: 40px;
width: 40px;
border-radius: 20px;
border: none;
background-color: rgb(240, 240, 240);
}
.voice-search-icon {
height: 24px;
margin-top: 4px;
}
.right-section {
width: 180px;
margin-right: 20px;
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
}
.upload-icon {
height: 24px;
}
.youtube-apps-icon {
height: 24px;
}
.notifications-icon {
height: 24px;
}
.current-user-picture {
height: 32px;
border-radius: 16px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nested Flexbox</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Long+Cang&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="styles/general.css">
<link rel="stylesheet" href="styles/header.css">
<link rel="stylesheet" href="styles/video.css">
</head>
<body>
<div class="header">
<div class="left-section">
<img class="hamburger-menu" src="icons/hamburger-menu.svg" alt="menu">
<img class="youtube-logo" src="icons/youtube-logo.svg" alt="YouTube logo">
</div>
<div class="middle-section">
<input class="search-bar" type="text" placeholder="Search">
<button class="search-button">
<img class="search-icon" src="icons/search.svg" alt="search">
</button>
<button class="voice-search-button">
<img class="voice-search-icon" src="icons/voice-search-icon.svg" alt="voice-search">
</button>
</div>
<div class="right-section">
<img class="upload-icon" src="icons/upload.svg" alt="">
<img class="youtube-apps-icon" src="icons/youtube-apps.svg" alt="">
<img class="notifications-icon" src="icons/notifications.svg" alt="">
<img class="current-user-picture" src="channel-pictures/my-channel.jpeg" alt="">
</div>
</div>
<div class="video-grid">
<div class="video-preview">
<div class="thumbnail-row">
<img class="thumbnail" src="thumbnails/thumbnail-1.webp" alt="">
</div>
<div class="video-info-grid">
<div class="channel-picture">
<img class="profile-picture" src="channel-pictures/channel-1.jpeg">
</div>
<div class="video-info">
<p class="video-title">Talking Tech and AI with Google CEO Sundar Pichai!</p>
<p class="video-author">Marques Brownlee</p>
<p class="video-stats">3.4M views · 6 months ago</p>
</div>
</div>
</div>
<div class="video-preview">
<div class="thumbnail-row">
<img class="thumbnail" src="thumbnails/thumbnail-2.webp" alt="">
</div>
<div class="video-info-grid">
<div class="channel-picture">
<img class="profile-picture" src="channel-pictures/channel-2.jpeg">
</div>
<div class="video-info">
<p class="video-title">Talking Tech and AI with Google CEO Sundar Pichai!</p>
<p class="video-author">Marques Brownlee</p>
<p class="video-stats">3.4M views · 6 months ago</p>
</div>
</div>
</div>
<div class="video-preview">
<div class="thumbnail-row">
<img class="thumbnail" src="thumbnails/thumbnail-3.webp" alt="">
</div>
<div class="video-info-grid">
<div class="channel-picture">
<img class="profile-picture" src="channel-pictures/channel-3.jpeg">
</div>
<div class="video-info">
<p class="video-title">Talking Tech and AI with Google CEO Sundar Pichai!</p>
<p class="video-author">Marques Brownlee</p>
<p class="video-stats">3.4M views · 6 months ago</p>
</div>
</div>
</div>
<div class="video-preview">
<div class="thumbnail-row">
<img class="thumbnail" src="thumbnails/thumbnail-4.webp" alt="">
</div>
<div class="video-info-grid">
<div class="channel-picture">
<img class="profile-picture" src="channel-pictures/channel-4.jpeg">
</div>
<div class="video-info">
<p class="video-title">Talking Tech and AI with Google CEO Sundar Pichai!</p>
<p class="video-author">Marques Brownlee</p>
<p class="video-stats">3.4M views · 6 months ago</p>
</div>
</div>
</div>
<div class="video-preview">
<div class="thumbnail-row">
<img class="thumbnail" src="thumbnails/thumbnail-5.webp" alt="">
</div>
<div class="video-info-grid">
<div class="channel-picture">
<img class="profile-picture" src="channel-pictures/channel-5.jpeg">
</div>
<div class="video-info">
<p class="video-title">Talking Tech and AI with Google CEO Sundar Pichai!</p>
<p class="video-author">Marques Brownlee</p>
<p class="video-stats">3.4M views · 6 months ago</p>
</div>
</div>
</div>
<div class="video-preview">
<div class="thumbnail-row">
<img class="thumbnail" src="thumbnails/thumbnail-6.webp" alt="">
</div>
<div class="video-info-grid">
<div class="channel-picture">
<img class="profile-picture" src="channel-pictures/channel-6.jpeg">
</div>
<div class="video-info">
<p class="video-title">Talking Tech and AI with Google CEO Sundar Pichai!</p>
<p class="video-author">Marques Brownlee</p>
<p class="video-stats">3.4M views · 6 months ago</p>
</div>
</div>
</div>
</div>
</body>
</html>
Top comments (0)