CodePen Embed - Naver 6 (game

<body id="game_body">

  <main role="main" id="game_main">
    <div class="game_container game_flex_between">
      <div class="left">
        
        <div id="game_section_2" class="game_section">
          
          <div class="section_title_wrap">
            <h2 class="font_19">생생 주요 게임 뉴스</h2>

            <a href="#" class="more">더보기</a>
          </div>

          <div class="section_body_wrap">
            <div class="image_txt_wrap">
              <div class="image_txt game_flex_start">
                <img src="https://via.placeholder.com/180x100">
                <div class="txt">
                  <h3 class="title">그래픽카드 대란 LHR 칼 빼든 엔비디아</h3>
                  <span class="source">인벤</span>
                </div>
              </div>
              <div class="image_txt game_flex_start">
                <img src="https://via.placeholder.com/180x100">
                <div class="txt">
                  <h3 class="title">그래픽카드 대란 LHR 칼 빼든 엔비디아</h3>
                  <span class="source">인벤</span>
                </div>
              </div>
            </div>

            <ul>
              <li>
                <a href="#" class="game_flex_between">
                  <h3 class="title">라이엇 게임즈</h3>
                  <span class="source">동아일보</span>
                </a>
              </li>
              <li>
                <a href="#" class="game_flex_between">
                  <h3 class="title">라이엇 게임즈</h3>
                  <span class="source">동아일보</span>
                </a>
              </li>
              <li>
                <a href="#" class="game_flex_between">
                  <h3 class="title">라이엇 게임즈</h3>
                  <span class="source">동아일보</span>
                </a>
              </li>
              <li>
                <a href="#" class="game_flex_between">
                  <h3 class="title">라이엇 게임즈</h3>
                  <span class="source">동아일보</span>
                </a>
              </li>
            </ul>
          </div>

        </div>

        <div id="game_section_3" class="game_section">
          
          <div class="section_title_wrap">
            <h2 class="font_19">오리지널 시리즈</h2>
          </div>

          <div class="section_body_wrap">
            <div class="image_txt_wrap">
              <div class="image_txt game_flex_start">
                <img src="https://via.placeholder.com/180x100">
                <div class="txt">
                  <span class="category">에픽뷰</span>
                  <h3 class="title">에픽게임즈 미스터리 게임 2탄</h3>
                  <span class="source">G조커</span>
                </div>
              </div>
              <div class="image_txt game_flex_start">
                <img src="https://via.placeholder.com/180x100">
                <div class="txt">
                  <span class="category">에픽뷰</span>
                  <h3 class="title">에픽게임즈 미스터리 게임 2탄</h3>
                  <span class="source">G조커</span>
                </div>
              </div>
              <div class="image_txt game_flex_start game_m_t_20">
                <img src="https://via.placeholder.com/180x100">
                <div class="txt">
                  <span class="category">에픽뷰</span>
                  <h3 class="title">에픽게임즈 미스터리 게임 2탄</h3>
                  <span class="source">G조커</span>
                </div>
              </div>
              <div class="image_txt game_flex_start game_m_t_20">
                <img src="https://via.placeholder.com/180x100">
                <div class="txt">
                  <span class="category">에픽뷰</span>
                  <h3 class="title">에픽게임즈 미스터리 게임 2탄</h3>
                  <span class="source">G조커</span>
                </div>
              </div>
              <div class="image_txt game_flex_start game_m_t_20">
                <img src="https://via.placeholder.com/180x100">
                <div class="txt">
                  <span class="category">에픽뷰</span>
                  <h3 class="title">에픽게임즈 미스터리 게임 2탄</h3>
                  <span class="source">G조커</span>
                </div>
              </div>
              <div class="image_txt game_flex_start game_m_t_20">
                <img src="https://via.placeholder.com/180x100">
                <div class="txt">
                  <span class="category">에픽뷰</span>
                  <h3 class="title">에픽게임즈 미스터리 게임 2탄</h3>
                  <span class="source">G조커</span>
                </div>
              </div>
              <div class="image_txt game_flex_start game_m_t_20">
                <img src="https://via.placeholder.com/180x100">
                <div class="txt">
                  <span class="category">에픽뷰</span>
                  <h3 class="title">에픽게임즈 미스터리 게임 2탄</h3>
                  <span class="source">G조커</span>
                </div>
              </div>
              <div class="image_txt game_flex_start game_m_t_20">
                <img src="https://via.placeholder.com/180x100">
                <div class="txt">
                  <span class="category">에픽뷰</span>
                  <h3 class="title">에픽게임즈 미스터리 게임 2탄</h3>
                  <span class="source">G조커</span>
                </div>
              </div>
              
            </div>
          </div>

          <a href="#" class="btn_circle icon_plus"></a>

        </div>

        <div id="game_section_4" class="game_section">
          
          <div class="section_title_wrap">
            <h2 class="font_19">인기게임 영상</h2>
          </div>

          <div class="section_body_wrap">
            <ol>
              <li>
                <a href="#">
                  <div class="image_wrap">
                    <img src="https://via.placeholder.com/263x148">
                    <i class="icon_play"></i>
                    <span class="time">01:06:25</span>
                  </div>

                  <div class="image_txt">
                    <h3> 담원기아 vs RNG 1세트</h3>
                    <div class="game_flex_between">
                      <span class="source">리그 오브 레전드 네이버 스포츠</span>
                      <span class="count">17,161</span>
                    </div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="image_wrap">
                    <img src="https://via.placeholder.com/263x148">
                    <i class="icon_play"></i>
                    <span class="time">01:06:25</span>
                  </div>

                  <div class="image_txt">
                    <h3> 담원기아 vs RNG 1세트</h3>
                    <div class="game_flex_between">
                      <span class="source">리그 오브 레전드 네이버 스포츠</span>
                      <span class="count">17,161</span>
                    </div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="image_wrap">
                    <img src="https://via.placeholder.com/263x148">
                    <i class="icon_play"></i>
                    <span class="time">01:06:25</span>
                  </div>

                  <div class="image_txt">
                    <h3> 담원기아 vs RNG 1세트</h3>
                    <div class="game_flex_between">
                      <span class="source">리그 오브 레전드 네이버 스포츠</span>
                      <span class="count">17,161</span>
                    </div>
                  </div>
                </a>
              </li>
              <li class="game_m_t_20">
                <a href="#">
                  <div class="image_wrap">
                    <img src="https://via.placeholder.com/263x148">
                    <i class="icon_play"></i>
                    <span class="time">01:06:25</span>
                  </div>

                  <div class="image_txt">
                    <h3> 담원기아 vs RNG 1세트</h3>
                    <div class="game_flex_between">
                      <span class="source">리그 오브 레전드 네이버 스포츠</span>
                      <span class="count">17,161</span>
                    </div>
                  </div>
                </a>
              </li>
              <li class="game_m_t_20">
                <a href="#">
                  <div class="image_wrap">
                    <img src="https://via.placeholder.com/263x148">
                    <i class="icon_play"></i>
                    <span class="time">01:06:25</span>
                  </div>

                  <div class="image_txt">
                    <h3> 담원기아 vs RNG 1세트</h3>
                    <div class="game_flex_between">
                      <span class="source">리그 오브 레전드 네이버 스포츠</span>
                      <span class="count">17,161</span>
                    </div>
                  </div>
                </a>
              </li>
              <li class="game_m_t_20">
                <a href="#">
                  <div class="image_wrap">
                    <img src="https://via.placeholder.com/263x148">
                    <i class="icon_play"></i>
                    <span class="time">01:06:25</span>
                  </div>

                  <div class="image_txt">
                    <h3> 담원기아 vs RNG 1세트</h3>
                    <div class="game_flex_between">
                      <span class="source">리그 오브 레전드 네이버 스포츠</span>
                      <span class="count">17,161</span>
                    </div>
                  </div>
                </a>
              </li>
            </ol>

          </div>

        </div>

        <div id="game_section_5" class="game_section">
          
          <div class="section_title_wrap">
            <h2 class="font_19">이번 달 출시 게임</h2>

            <a href="#" class="info">일정은 게임사 사정으로 변경될 수 있습니다.</a>
          </div>

          <nav class="section_middle_nav">
            <ul>
              <li><a href="#" class="active">금 05.28</a></li>
              <li><a href="#">토 05.29</a></li>
              <li><a href="#">일 05.30</a></li>
              <li><a href="#">월 05.31</a></li>
            </ul>
          </nav>

          <div class="section_body_wrap">
            <ol class="game_flex_between">
              <li>
                <a href="#">
                  <div class="image_wrap">
                    <img src="http://via.placeholder.com/190x120">
                    <span class="badge open">오픈</span>
                  </div>

                  <div class="txt_wrap">
                    <h3>타이틀</h3>
                    <p>2021. 05. 28</p>
                    <span>닌텐도 스위치</span>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="image_wrap">
                    <img src="http://via.placeholder.com/190x120">
                    <span class="badge open">오픈</span>
                  </div>

                  <div class="txt_wrap">
                    <h3>타이틀</h3>
                    <p>2021. 05. 28</p>
                    <span>닌텐도 스위치</span>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="image_wrap">
                    <img src="http://via.placeholder.com/190x120">
                    <span class="badge open">오픈</span>
                  </div>

                  <div class="txt_wrap">
                    <h3>타이틀</h3>
                    <p>2021. 05. 28</p>
                    <span>닌텐도 스위치</span>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="image_wrap">
                    <img src="http://via.placeholder.com/190x120">
                    <span class="badge">사전예약</span>
                  </div>

                  <div class="txt_wrap">
                    <h3>타이틀</h3>
                    <p>2021. 05. 28</p>
                    <span>닌텐도 스위치</span>
                  </div>
                </a>
              </li>
            </ol>
          </div>

          <a href="#" class="btn_circle icon_plus"></a>

        </div>

        <div id="game_section_6" class="game_section">
          
          <div class="section_title_wrap">
            <h2 class="font_19">급상승 공식 게임 카페</h2>
          </div>

          <div class="section_body_wrap">
            <div class="image_txt_wrap">
              <div class="image_txt game_flex_start">
                <img src="https://via.placeholder.com/180x100">
                <div class="txt">
                  <span class="category">쿠키런 킹덤 공식카페</span>
                  <h3 class="title">처음 맛나는 소셜RPG!</h3>
                  <span class="source">멤버 412,800</span>
                </div>
              </div>
              <div class="image_txt game_flex_start">
                <img src="https://via.placeholder.com/180x100">
                <div class="txt">
                  <span class="category">쿠키런 킹덤 공식카페</span>
                  <h3 class="title">처음 맛나는 소셜RPG!</h3>
                  <span class="source">멤버 412,800</span>
                </div>
              </div>
              <div class="image_txt game_flex_start game_m_t_20">
                <img src="https://via.placeholder.com/180x100">
                <div class="txt">
                  <span class="category">쿠키런 킹덤 공식카페</span>
                  <h3 class="title">처음 맛나는 소셜RPG!</h3>
                  <span class="source">멤버 412,800</span>
                </div>
              </div>
              <div class="image_txt game_flex_start game_m_t_20">
                <img src="https://via.placeholder.com/180x100">
                <div class="txt">
                  <span class="category">쿠키런 킹덤 공식카페</span>
                  <h3 class="title">처음 맛나는 소셜RPG!</h3>
                  <span class="source">멤버 412,800</span>
                </div>
              </div>
              <div class="image_txt game_flex_start game_m_t_20">
                <img src="https://via.placeholder.com/180x100">
                <div class="txt">
                  <span class="category">쿠키런 킹덤 공식카페</span>
                  <h3 class="title">처음 맛나는 소셜RPG!</h3>
                  <span class="source">멤버 412,800</span>
                </div>
              </div>
              <div class="image_txt game_flex_start game_m_t_20">
                <img src="https://via.placeholder.com/180x100">
                <div class="txt">
                  <span class="category">쿠키런 킹덤 공식카페</span>
                  <h3 class="title">처음 맛나는 소셜RPG!</h3>
                  <span class="source">멤버 412,800</span>
                </div>
              </div>
              
            </div>
          </div>

          <a href="#" class="btn_circle icon_plus"></a>

        </div>

      </div>

* {
  margin: 0;
  padding: 0;

  box-sizing: border-box;
}

ol, ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: #000000;
}

img {
  vertical-align: middle;
}

button {
  border: none;
}

input, textarea {
  outline: none;
}

.clearfix {
  clear: both;
}

body {
  min-width: 1302px;
}

main {
  overflow: hidden; 
  padding-top: 20px;
}




/* game */

#game_body {
  background-color: #f8f9fd;
}

.game_container {
  width: 1280px;
  margin: 0 auto;
}

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

.game_flex_start {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.game_flex_end {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex_end;
  align-items: center;
}

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

.game_shadow {
  box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 6%);
}

.game_p_30 {
  padding: 30px;
}

.game_m_t_20 {
  margin-top: 20px;
}

.font_17 {
  font-size: 17px;
}

.font_19 {
  font-size: 19px;
}

.font_400 {
  font-weight: 400px;
}






/* main */

#game_main .game_container {
  align-items: stretch;
}

#game_main .left {
  width: 900px;
/*  height: 2000px;
  background-color: lightyellow; */
  padding-bottom: 200px;
}

#game_main .right {
  width: 358px;
  height: 2000px;
  background-color: lightpink;
}


/* section */
.game_section {
  position: relative;

  background-color: #fff;
  box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 6%);
  border-radius: 12px;

  padding: 27px 30px 40px;
  margin-bottom: 40px;
}

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

.game_section .section_title_wrap h2 {
  font-size: 19px;
  font-weight: 400; 
}

.game_section .section_middle_nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  border-bottom: 1px solid rgba(0, 0, 0, .07);
}

.game_section .section_middle_nav a {
  display: block;
  padding: 14px;
  border-bottom: solid 3px transparent;
  color: #9da5b6;
}

.game_section .section_middle_nav a.active {
  border-color: #7776ff;
  color: #7776ff;
  font-weight: 700;
}

.game_section .section_body_wrap {
  margin-top: 18px;
}

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

.game_section .section_body_wrap .image_txt {
  width: 407.5px;
  height: ;
}

.game_section .section_body_wrap img {
  width: 180px;
  height: 100px;
  border-radius: 8px;
  border: :solid 1px rgba(0,0,0,.06);
  margin-right: 15px;
}

.game_section .section_body_wrap .txt {
  width: 212px;
}

.game_section .section_body_wrap .title {
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;

  margin-bottom: 3px;
}

.game_section .section_body_wrap .source {
  font-size: 13px;
  color: #999;
}

.game_section .btn_circle {
  position: absolute;
  width: 55px;
  height: 55px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 6%);

  bottom: -27.5px;
  left: 50%;
  transform: translateX(-50%);
}

.game_section .btn_circle.icon_arrow {
  background-color: pink;
}

.game_section .btn_circle.icon_plus {
  background-color: orange;
}


/* section2 ~ */
#game_section_2 .section_title_wrap .more {
  font-size: 13px;
  font-weight: 400;
}

#game_section_2 .section_body_wrap ul {
  margin-top: 25px;
}

#game_section_2 .section_body_wrap li {
  margin-bottom: 11px;
}

#game_section_2 .section_body_wrap li:last-child {
  margin-bottom: 0;
}

#game_section_2 .section_body_wrap a {
  
}

#game_section_2 .section_body_wrap ul .title {
  width: 776px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#game_section_3 .section_body_wrap .image_txt .category {
  display: block;

  font-size: 13px;
  color: #7776ff;
  margin-bottom: 3px;
}


#game_section_4 ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

#game_section_4 li {
  
}

#game_section_4 a {
  display: block;
}

#game_section_4 .image_wrap {
  position: relative;
  overflow: hidden;
  width: 263px;
  height: 148px;
  border-radius: 8px;
}

#game_section_4 .image_wrap img {
  position: absolute; 
  width: 100%;
  height: 100%;
}

#game_section_4 .image_wrap .icon_play {
  position: absolute;
  width: 25px;
  height: 25px;
  background-color: grey;

  left: 10px;
  bottom: 12px;
}

#game_section_4 .image_wrap .time {
  position: absolute;
  background-color: rgba(0, 0, 0, .5);
  border-radius: 6px;
  padding: 2px 6px;

  color: #fff;
  font-size: 14px;

  right: 10px;
  bottom: 10px;
}

#game_section_4 .section_body_wrap .image_txt {
  width: 100%;
  margin-top: 10px;
}

#game_section_4 .image_txt h3 {
  font-size: 15px;
}

#game_section_4 .image_txt .source,
#game_section_4 .image_txt .count {
  font-size: 13px;
  color: #999;
}

#game_section_5 .section_title_wrap .info {
  font-size: 13px;
  color: #999999;
}

#game_section_5 .section_body_wrap .image_wrap {
  position: relative;
  width: 190px;
  height: 120px;
}

#game_section_5 .section_body_wrap .image_wrap img {
  position: absolute;
  width: 100%;
  height: 100%;
  border: none;
  margin-right: 0;
}

#game_section_5 .section_body_wrap .image_wrap .badge {
  position: absolute;
  display: inline-block;

  color: #ffffff;
  background-color: #4e41db;
  font-size: 15px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 8px;

  top: -5px;
  left: -5px;
}

#game_section_5 .section_body_wrap .image_wrap .badge.open {
  background-color: red;
}

#game_section_5 .section_body_wrap .txt_wrap {
  margin-top: 12px;
}

#game_section_5 .section_body_wrap .txt_wrap h3 {
  font-size: 15px;
  font-weight: 600;
}

#game_section_5 .section_body_wrap .txt_wrap p {
  font-size: 13px;
  font-weight: 500;
}

#game_section_5 .section_body_wrap .txt_wrap span {
  font-size: 13px;
  color: grey;
}


#game_section_6 .section_body_wrap img {
  width: 80px;
  height: 80px;
  border-radius: 30px;
}

#game_section_6 .section_body_wrap .category {
  font-size: 15px;
}

#game_section_6 .section_body_wrap .txt {
  width: 300px;
}

#game_section_6 .section_body_wrap .title {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  font-size: 13px;
  color: #666;
}

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.