CodePen Embed - Youtube (Main

    <main id="main" role="main">

      <div id="main_content">
        <ul class="flex_align_between">
          <li>
            <div class="video_thumbnail">
              <a href="#">
                <img src="https://via.placeholder.com/1024x640">
                <span class="time">00:20</span>
              </a>
            </div>

            <div class="video_txt_wrap flex_align_start">
              <a href="#" class="image_link">
                <img class="profile" src="https://via.placeholder.com/36">
              </a>

              <div class="txt">
                <h3>
                  <a href="#" class="title_link">
                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                  </a>
                </h3>

                <p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>

                <div class="txt_bottom">
                  <span class="count">조회수 71만회</span>
                  <span class="date">6개월 </span>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="video_thumbnail">
              <a href="#">
                <img src="https://via.placeholder.com/1024x640">
                <span class="time">00:20</span>
              </a>
            </div>

            <div class="video_txt_wrap flex_align_start">
              <a href="#" class="image_link">
                <img class="profile" src="https://via.placeholder.com/36">
              </a>

              <div class="txt">
                <h3>
                  <a href="#" class="title_link">
                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                  </a>
                </h3>

                <p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>

                <div class="txt_bottom">
                  <span class="count">조회수 71만회</span>
                  <span class="date">6개월 </span>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="video_thumbnail">
              <a href="#">
                <img src="https://via.placeholder.com/1024x640">
                <span class="time">00:20</span>
              </a>
            </div>

            <div class="video_txt_wrap flex_align_start">
              <a href="#" class="image_link">
                <img class="profile" src="https://via.placeholder.com/36">
              </a>

              <div class="txt">
                <h3>
                  <a href="#" class="title_link">
                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                  </a>
                </h3>

                <p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>

                <div class="txt_bottom">
                  <span class="count">조회수 71만회</span>
                  <span class="date">6개월 </span>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="video_thumbnail">
              <a href="#">
                <img src="https://via.placeholder.com/1024x640">
                <span class="time">00:20</span>
              </a>
            </div>

            <div class="video_txt_wrap flex_align_start">
              <a href="#" class="image_link">
                <img class="profile" src="https://via.placeholder.com/36">
              </a>

              <div class="txt">
                <h3>
                  <a href="#" class="title_link">
                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                  </a>
                </h3>

                <p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>

                <div class="txt_bottom">
                  <span class="count">조회수 71만회</span>
                  <span class="date">6개월 </span>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="video_thumbnail">
              <a href="#">
                <img src="https://via.placeholder.com/1024x640">
                <span class="time">00:20</span>
              </a>
            </div>

            <div class="video_txt_wrap flex_align_start">
              <a href="#" class="image_link">
                <img class="profile" src="https://via.placeholder.com/36">
              </a>

              <div class="txt">
                <h3>
                  <a href="#" class="title_link">
                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                  </a>
                </h3>

                <p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>

                <div class="txt_bottom">
                  <span class="count">조회수 71만회</span>
                  <span class="date">6개월 </span>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="video_thumbnail">
              <a href="#">
                <img src="https://via.placeholder.com/1024x640">
                <span class="time">00:20</span>
              </a>
            </div>

            <div class="video_txt_wrap flex_align_start">
              <a href="#" class="image_link">
                <img class="profile" src="https://via.placeholder.com/36">
              </a>

              <div class="txt">
                <h3>
                  <a href="#" class="title_link">
                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                  </a>
                </h3>

                <p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>

                <div class="txt_bottom">
                  <span class="count">조회수 71만회</span>
                  <span class="date">6개월 </span>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="video_thumbnail">
              <a href="#">
                <img src="https://via.placeholder.com/1024x640">
                <span class="time">00:20</span>
              </a>
            </div>

            <div class="video_txt_wrap flex_align_start">
              <a href="#" class="image_link">
                <img class="profile" src="https://via.placeholder.com/36">
              </a>

              <div class="txt">
                <h3>
                  <a href="#" class="title_link">
                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                  </a>
                </h3>

                <p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>

                <div class="txt_bottom">
                  <span class="count">조회수 71만회</span>
                  <span class="date">6개월 </span>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="video_thumbnail">
              <a href="#">
                <img src="https://via.placeholder.com/1024x640">
                <span class="time">00:20</span>
              </a>
            </div>

            <div class="video_txt_wrap flex_align_start">
              <a href="#" class="image_link">
                <img class="profile" src="https://via.placeholder.com/36">
              </a>

              <div class="txt">
                <h3>
                  <a href="#" class="title_link">
                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                  </a>
                </h3>

                <p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>

                <div class="txt_bottom">
                  <span class="count">조회수 71만회</span>
                  <span class="date">6개월 </span>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="video_thumbnail">
              <a href="#">
                <img src="https://via.placeholder.com/1024x640">
                <span class="time">00:20</span>
              </a>
            </div>

            <div class="video_txt_wrap flex_align_start">
              <a href="#" class="image_link">
                <img class="profile" src="https://via.placeholder.com/36">
              </a>

              <div class="txt">
                <h3>
                  <a href="#" class="title_link">
                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                  </a>
                </h3>

                <p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>

                <div class="txt_bottom">
                  <span class="count">조회수 71만회</span>
                  <span class="date">6개월 </span>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="video_thumbnail">
              <a href="#">
                <img src="https://via.placeholder.com/1024x640">
                <span class="time">00:20</span>
              </a>
            </div>

            <div class="video_txt_wrap flex_align_start">
              <a href="#" class="image_link">
                <img class="profile" src="https://via.placeholder.com/36">
              </a>

              <div class="txt">
                <h3>
                  <a href="#" class="title_link">
                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                  </a>
                </h3>

                <p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>

                <div class="txt_bottom">
                  <span class="count">조회수 71만회</span>
                  <span class="date">6개월 </span>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="video_thumbnail">
              <a href="#">
                <img src="https://via.placeholder.com/1024x640">
                <span class="time">00:20</span>
              </a>
            </div>

            <div class="video_txt_wrap flex_align_start">
              <a href="#" class="image_link">
                <img class="profile" src="https://via.placeholder.com/36">
              </a>

              <div class="txt">
                <h3>
                  <a href="#" class="title_link">
                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                  </a>
                </h3>

                <p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>

                <div class="txt_bottom">
                  <span class="count">조회수 71만회</span>
                  <span class="date">6개월 </span>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="video_thumbnail">
              <a href="#">
                <img src="https://via.placeholder.com/1024x640">
                <span class="time">00:20</span>
              </a>
            </div>

            <div class="video_txt_wrap flex_align_start">
              <a href="#" class="image_link">
                <img class="profile" src="https://via.placeholder.com/36">
              </a>

              <div class="txt">
                <h3>
                  <a href="#" class="title_link">
                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                  </a>
                </h3>

                <p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>

                <div class="txt_bottom">
                  <span class="count">조회수 71만회</span>
                  <span class="date">6개월 </span>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="video_thumbnail">
              <a href="#">
                <img src="https://via.placeholder.com/1024x640">
                <span class="time">00:20</span>
              </a>
            </div>

            <div class="video_txt_wrap flex_align_start">
              <a href="#" class="image_link">
                <img class="profile" src="https://via.placeholder.com/36">
              </a>

              <div class="txt">
                <h3>
                  <a href="#" class="title_link">
                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                  </a>
                </h3>

                <p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>

                <div class="txt_bottom">
                  <span class="count">조회수 71만회</span>
                  <span class="date">6개월 </span>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="video_thumbnail">
              <a href="#">
                <img src="https://via.placeholder.com/1024x640">
                <span class="time">00:20</span>
              </a>
            </div>

            <div class="video_txt_wrap flex_align_start">
              <a href="#" class="image_link">
                <img class="profile" src="https://via.placeholder.com/36">
              </a>

              <div class="txt">
                <h3>
                  <a href="#" class="title_link">
                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                  </a>
                </h3>

                <p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>

                <div class="txt_bottom">
                  <span class="count">조회수 71만회</span>
                  <span class="date">6개월 </span>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="video_thumbnail">
              <a href="#">
                <img src="https://via.placeholder.com/1024x640">
                <span class="time">00:20</span>
              </a>
            </div>

            <div class="video_txt_wrap flex_align_start">
              <a href="#" class="image_link">
                <img class="profile" src="https://via.placeholder.com/36">
              </a>

              <div class="txt">
                <h3>
                  <a href="#" class="title_link">
                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                  </a>
                </h3>

                <p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>

                <div class="txt_bottom">
                  <span class="count">조회수 71만회</span>
                  <span class="date">6개월 </span>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="video_thumbnail">
              <a href="#">
                <img src="https://via.placeholder.com/1024x640">
                <span class="time">00:20</span>
              </a>
            </div>

            <div class="video_txt_wrap flex_align_start">
              <a href="#" class="image_link">
                <img class="profile" src="https://via.placeholder.com/36">
              </a>

              <div class="txt">
                <h3>
                  <a href="#" class="title_link">
                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                  </a>
                </h3>

                <p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>

                <div class="txt_bottom">
                  <span class="count">조회수 71만회</span>
                  <span class="date">6개월 </span>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="video_thumbnail">
              <a href="#">
                <img src="https://via.placeholder.com/1024x640">
                <span class="time">00:20</span>
              </a>
            </div>

            <div class="video_txt_wrap flex_align_start">
              <a href="#" class="image_link">
                <img class="profile" src="https://via.placeholder.com/36">
              </a>

              <div class="txt">
                <h3>
                  <a href="#" class="title_link">
                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                  </a>
                </h3>

                <p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>

                <div class="txt_bottom">
                  <span class="count">조회수 71만회</span>
                  <span class="date">6개월 </span>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="video_thumbnail">
              <a href="#">
                <img src="https://via.placeholder.com/1024x640">
                <span class="time">00:20</span>
              </a>
            </div>

            <div class="video_txt_wrap flex_align_start">
              <a href="#" class="image_link">
                <img class="profile" src="https://via.placeholder.com/36">
              </a>

              <div class="txt">
                <h3>
                  <a href="#" class="title_link">
                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                  </a>
                </h3>

                <p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>

                <div class="txt_bottom">
                  <span class="count">조회수 71만회</span>
                  <span class="date">6개월 </span>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="video_thumbnail">
              <a href="#">
                <img src="https://via.placeholder.com/1024x640">
                <span class="time">00:20</span>
              </a>
            </div>

            <div class="video_txt_wrap flex_align_start">
              <a href="#" class="image_link">
                <img class="profile" src="https://via.placeholder.com/36">
              </a>

              <div class="txt">
                <h3>
                  <a href="#" class="title_link">
                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                  </a>
                </h3>

                <p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>

                <div class="txt_bottom">
                  <span class="count">조회수 71만회</span>
                  <span class="date">6개월 </span>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="video_thumbnail">
              <a href="#">
                <img src="https://via.placeholder.com/1024x640">
                <span class="time">00:20</span>
              </a>
            </div>

            <div class="video_txt_wrap flex_align_start">
              <a href="#" class="image_link">
                <img class="profile" src="https://via.placeholder.com/36">
              </a>

              <div class="txt">
                <h3>
                  <a href="#" class="title_link">
                    [무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
                  </a>
                </h3>

                <p><a href="#" class="channel_link">MBC 엔터테인먼트</a></p>

                <div class="txt_bottom">
                  <span class="count">조회수 71만회</span>
                  <span class="date">6개월 </span>
                </div>
              </div>
            </div>
          </li>
        </ul>

      </div>
      


    </main>

* {
  margin: 0;
  padding: 0;

  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  background-color: #212121;
}

ol, ul {
  list-style: none;
}

a {
  text-decoration: none;
}

img {
  vertical-align: middle;
}

button {
  background-color: transparent;
  border: none;
}

input {
  outline: none;
  border: none;
}

input:focus {
  outline: none;
}



#wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 1320px;
}

.flex_align_between {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.flex_align_start {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}

.flex_align_end {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}





/* main - content */

#main { 
  position: absolute;
  left: 240px;
  top: 56px;
  right: 0;
  bottom: 0;
}

#main_content {
  width: 100%;
  height: 100%;
  padding: 24px;
}

#main_content ul {
  align-items: flex-start;
  align-content: flex-start;

  width: 100%;
  height: 100%;
}

#main_content ul li {
  width: 24%;
  background-color: #212121;
  margin-bottom: 40px;
}

#main_content ul li .video_thumbnail {
  width: 100%;
}

#main_content ul li .video_thumbnail a {
  position: relative;
  display: block;
  width: 100%;
}

#main_content ul li .video_thumbnail img {
  width: 100%;  
}

#main_content ul li .video_thumbnail .time {
  position: absolute;

  background-color: rgba(0, 0, 0, .8);
  font-size: 12px;
  color: #fff;

  padding: 3px 4px;
  margin: 4px;

  right: 0px;
  bottom: 0px;
}

#main_content ul li .video_txt_wrap {
  align-items: flex-start;
  margin-top: 12px;
}

#main_content ul li .video_txt_wrap .image_link {
  display: block;
  width: 36px;
  height: 36px;

  margin-right: 12px;
}

#main_content ul li .video_txt_wrap .image_link img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

#main_content ul li .video_txt_wrap .txt {
  width: calc(100% - 48px);
}

#main_content ul li .video_txt_wrap .txt h3 {
  font-size: 15px;
  margin-bottom: 6px;
}

#main_content ul li .video_txt_wrap .txt h3 .title_link {
  color: #fff;
}

#main_content ul li .video_txt_wrap .txt p {
  font-size: 12px;
}

#main_content ul li .video_txt_wrap .txt p .channel_link {
  color: #aaa;
}

#main_content ul li .video_txt_wrap .txt .txt_bottom .count,
#main_content ul li .video_txt_wrap .txt .txt_bottom .date {
  font-size: 12px;
  color: #aaa;
}

This Pen is owned by naheeyu on CodePen.

See more by @naheeyu on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.