箱を分割!

実現する画面

コード#コード#

  <!-- Header -->
  <header>
    <div class="log">
      <i class="fab fa-youtube"></i>
      <span class="title">Youtube</span>
    </div>
    <div class="icons">
      <i class="fas fa-search"></i>
      <i class="fas fa-ellipsis-v"></i>
    </div>
  </header>

  <!-- Video Player -->
  <section class="player">
    <video controls autoplay src="/video/video.mov"></video>
  </section>

  <!-- video info -->
  <section class="info">
    <!-- Metadata -->
    <div class="metadata">
      <ul class="hashtags">
        <li>#Apeach</li>
        <li>#Icetea</li>
        <li>#Apeachicetea</li>
      </ul>
      <div class="titleAndButton">
        <span>Apeachicetea: Youtube Mobile Website 유튜브 모바일 웹사이트 
          따라만들기 | 프론트 엔드 개발자 입문편: HTML, CSS, Javascript</span>
        <button class="moreBtn">
          <i class="fas fa-caret-down"></i>
        </button>
      </div>
      <div class="views">
        <span class="viewx">1M views 1 months ago</span>
      </div>
    </div>
    <!-- Actions -->
    <ul class="actions">
      <li>
        <button><i class="fas fa-thumbs-up"></i><span>1K</span></button>
      </li>
      <li>
        <button><i class="fas fa-thumbs-down"></i><span>0</span></button>
      </li>
      <li>
        <button><i class="fas fa-share"></i><span>Share</span></button>
      </li>
      <li>
        <button><i class="fas fa-plus"></i><span>Save</span></button>
      </li>
      <li>
        <button><i class="fas fa-flag"></i><span>Report</span></button>
      </li>
    </ul>
    <!-- Channel Description-->
    <div class="channel">
      <div class="metadata">
        <img src="/image/icetea.png" alt="">
        <div class="info">
          <span class="name">Apeachicetea</span>
          <span class="subscribers">1M subscribers</span>
        </div>
      </div>
      <button class="subscribe">subscribe</button>
    </div>
  </section>
  <!-- UpNext -->
  <section class="upNext">
    <span class="title">Up next</span>
    <ul>
      <li class="item">
        <img src="/image/1.png" alt="">
        <div class="info">
          <span class="title">
            복숭아 아이스티 맛있게 만드는 황금비율!!
          </span>
          <span class="name">Apeachicetea</span>
          <span class="views">82K views</span>
        </div>
        <button class="moreBtn"><i class="fas fa-ellipsis-v"></i></button>
      </li>
      <li class="item">
        <img src="/image/2.png" alt="">
        <div class="info">
          <span class="title">
            새로운 뉴트리아형 자동차 BMW 420i 출고기!
          </span>
          <span class="name">Apeachicetea</span>
          <span class="views">89K views</span>
        </div>
        <button class="moreBtn"><i class="fas fa-ellipsis-v"></i></button>
      </li>
      <li class="item">
        <img src="/image/3.png" alt="">
        <div class="info">
          <span class="title">
            스페인 어느 쇼핑몰 앞 강가 앞에서...
          </span>
          <span class="name">Apeachicetea</span>
          <span class="views">99K views</span>
        </div>
        <button class="moreBtn"><i class="fas fa-ellipsis-v"></i></button>
      </li>
    </ul>
  </section>

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
}