Daily Code 65 | Nested Layouts Technique (🟥 HTML & 🟦 CSS Course 7)
Tags: beginners, daily, html, css
Published: 2024-02-10 09:54:05

Another day that I’m continuing with my HTML & CSS course today https://www.youtube.com/watch?v=G3e-cpL7ofc

Today I learned about how to nest different divs inside of each other. How interesting that this is used for basically all websites! 

# My Code

Here is the demo code. I put a screenshot below since you won’t have the pictures if you don’t follow the course :)

```html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nested Layouts Technique</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">
  <style>
    p {
      font-family: Roboto, Arial;
      margin-top: 0;
      margin-bottom: 0;
    }

    .thumbnail {
      width: 300px;
      display: block;
    }

    .search-bar {
      font-size: 20px;
      margin: 12px 0px;
      display: block;
    }

    .video-title {
      margin-top: 0;
      font-size: 14px;
      font-weight: 500;
      line-height: 20px;
      margin-bottom: 12px;
    }

    .video-preview {
      width: 300px;
      display: inline-block;
      vertical-align: top;
      margin-right: 15px;
    }

    .channel-picture {
      display: inline-block;
      width: 50px;
      vertical-align: top;
    }

    .video-info {
      display: inline-block;
      width: 200px;
    }

    .profile-picture {
      width: 40px;
      border-radius: 50px;

    }

    .thumbnail-row {
      margin-bottom: 12px;
    }

    .video-author,
    .video-stats {
      font-size: 12px;
      color: rgb(96, 96, 96);
    }

    .video-author {
      margin-bottom: 4px;
    }
  </style>
</head>

<body>
  <input class="search-bar" type="text" placeholder="Search">
  <div class="video-preview">
    <div class="thumbnail-row">
      <img class="thumbnail" src="thumbnails/thumbnail-1.webp" alt="">
    </div>
    <div>
      <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 &#183; 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>
      <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 &#183; 6 months ago</p>
      </div>
    </div>
  </div>

</body>

</html>
```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fj05c6bqbkbtox4ylhvb.png)