CodePen Embed - Naver 6 (game

<body id="game_body">

  <main role="main" id="game_main">
    <div class="game_container game_flex_between">
      
      <div class="right">
      
        <div id="visitor_section" class="right_section">
          
          <div class="title_wrap game_flex_between">
            <h2>최근 방문</h2>
            <a href="#">MY라운지 이동</a>
          </div>

          <div class="right_section_body">
            <div class="text_wrap">
              <p>관심있는 게임을 검색해보세요.</p>
              <div class="input_wrap game_flex_start">
                <input type="" placeholder="라운지 검색">
                <button type="button"></button>
              </div>
            </div>

          </div>
        </div>

        <div id="popular_section_1" class="right_section rank_section">
          
          <div class="title_wrap game_flex_between">
            <h2>인기 게임 라운지 TOP5</h2>
            <a href="#">더보기</a>
          </div>

          <div class="right_section_body">
            <ol>
              <li>
                <a href="#" class="game_flex_start">
                  <div class="count_wrap">
                    <span class="count red">1</span>
                    <div class="up_and_down_wrap">
                      <div class="equal"></div>
                    </div>
                  </div>

                  <div class="image_wrap">
                    <img src="https://via.placeholder.com/55">
                    <i class="chk"></i>
                  </div>

                  <div class="txt_wrap">
                    <h3>리그 오브 레전드</h3>
                    <span class="genre">MOBA</span>
                  </div>
                </a>
              </li>

              <li>
                <a href="#" class="game_flex_start">
                  <div class="count_wrap">
                    <span class="count red">2</span>
                    <div class="up_and_down_wrap">
                      <div class="equal"></div>
                    </div>
                  </div>

                  <div class="image_wrap">
                    <img src="https://via.placeholder.com/55">
                    <i class="chk"></i>
                  </div>

                  <div class="txt_wrap">
                    <h3>슈퍼스트링</h3>
                    <span class="genre">RPG</span>
                  </div>
                </a>
              </li>

              <li>
                <a href="#" class="game_flex_start">
                  <div class="count_wrap">
                    <span class="count">3</span>
                    <div class="up_and_down_wrap">
                      <div class="equal"></div>
                    </div>
                  </div>

                  <div class="image_wrap">
                    <img src="https://via.placeholder.com/55">
                    <i class="chk"></i>
                  </div>

                  <div class="txt_wrap">
                    <h3>피파 온라인 4</h3>
                    <span class="genre">스포츠</span>
                  </div>
                </a>  
              </li>

              <li>
                <a href="#" class="game_flex_start">
                  <div class="count_wrap">
                    <span class="count">4</span>
                    <div class="up_and_down_wrap">
                      <span class="up">1</span>
                    </div>
                  </div>

                  <div class="image_wrap">
                    <img src="https://via.placeholder.com/55">
                    <i class="chk"></i>
                  </div>

                  <div class="txt_wrap">
                    <h3>배틀 그라운드</h3>
                    <span class="genre">서바이벌 슈팅</span>
                  </div>
                </a>
              </li>

              <li>
                <a href="#" class="game_flex_start">
                  <div class="count_wrap">
                    <span class="count">4</span>
                    <div class="up_and_down_wrap">
                      <span class="down">1</span>
                    </div>
                  </div>

                  <div class="image_wrap">
                    <img src="https://via.placeholder.com/55">
                    <i class="chk"></i>
                  </div>

                  <div class="txt_wrap">
                    <h3>로스트아크</h3>
                    <span class="genre">MMORPG</span>
                  </div>
                </a>
              </li>
            </ol>

            <p class="time">2021.06.02 업데이트</p>

          </div>
        </div>

        <div id="popular_section_2" class="right_section rank_section">
          
          <div class="title_wrap game_flex_between">
            <h2>급상승 게임 라운지 TOP5</h2>
            <a href="#">더보기</a>
          </div>

          <div class="right_section_body">
            <ol>
              <li>
                <a href="#" class="game_flex_start">
                  <div class="count_wrap">
                    <span class="count red">1</span>
                    <div class="up_and_down_wrap">
                      <div class="equal"></div>
                    </div>
                  </div>

                  <div class="image_wrap">
                    <img src="https://via.placeholder.com/55">
                    <i class="chk"></i>
                  </div>

                  <div class="txt_wrap">
                    <h3>리그 오브 레전드</h3>
                    <span class="genre">MOBA</span>
                  </div>
                </a>
              </li>

              <li>
                <a href="#" class="game_flex_start">
                  <div class="count_wrap">
                    <span class="count red">2</span>
                    <div class="up_and_down_wrap">
                      <div class="equal"></div>
                    </div>
                  </div>

                  <div class="image_wrap">
                    <img src="https://via.placeholder.com/55">
                    <i class="chk"></i>
                  </div>

                  <div class="txt_wrap">
                    <h3>슈퍼스트링</h3>
                    <span class="genre">RPG</span>
                  </div>
                </a>
              </li>

              <li>
                <a href="#" class="game_flex_start">
                  <div class="count_wrap">
                    <span class="count">3</span>
                    <div class="up_and_down_wrap">
                      <div class="equal"></div>
                    </div>
                  </div>

                  <div class="image_wrap">
                    <img src="https://via.placeholder.com/55">
                    <i class="chk"></i>
                  </div>

                  <div class="txt_wrap">
                    <h3>피파 온라인 4</h3>
                    <span class="genre">스포츠</span>
                  </div>
                </a>  
              </li>

              <li>
                <a href="#" class="game_flex_start">
                  <div class="count_wrap">
                    <span class="count">4</span>
                    <div class="up_and_down_wrap">
                      <span class="up">1</span>
                    </div>
                  </div>

                  <div class="image_wrap">
                    <img src="https://via.placeholder.com/55">
                    <i class="chk"></i>
                  </div>

                  <div class="txt_wrap">
                    <h3>배틀 그라운드</h3>
                    <span class="genre">서바이벌 슈팅</span>
                  </div>
                </a>
              </li>

              <li>
                <a href="#" class="game_flex_start">
                  <div class="count_wrap">
                    <span class="count">4</span>
                    <div class="up_and_down_wrap">
                      <span class="down">1</span>
                    </div>
                  </div>

                  <div class="image_wrap">
                    <img src="https://via.placeholder.com/55">
                    <i class="chk"></i>
                  </div>

                  <div class="txt_wrap">
                    <h3>로스트아크</h3>
                    <span class="genre">MMORPG</span>
                  </div>
                </a>
              </li>
            </ol>

            <p class="time">2021.06.02 업데이트</p>

          </div>
        </div>

        <div id="news_section" class="right_section">

          <div class="title_wrap game_flex_between">
            <h2>e스포츠 주요 뉴스</h2>
            <a href="#">더보기</a>
          </div>

          <div class="right_section_body">
            <ul>
              <li><a href="#">동해물과 백두산이</a></li>
              <li><a href="#">동해물과 백두산이</a></li>
              <li><a href="#">동해물과 백두산이</a></li>
              <li><a href="#">동해물과 백두산이</a></li>
              <li><a href="#">동해물과 백두산이</a></li>
              <li><a href="#">동해물과 백두산이</a></li>
            </ul>
          </div>
        </div>

        <div id="week_section" class="right_section">

          <div class="title_wrap game_flex_between">
            <h2>이번 주 신생 라운지</h2>
          </div>

          <div class="right_section_body">
            <ul>
              <li>
                <a href="#" class="game_flex_start">
                  <img src="https://via.placeholder.com/128x74">
                  <div class="txt_wrap">
                    <h3>무신의 칼</h3>
                    <span>MMORPG</span>
                  </div>
                </a>
              </li>
              <li>
                <a href="#" class="game_flex_start">
                  <img src="https://via.placeholder.com/128x74">
                  <div class="txt_wrap">
                    <h3>AFK삼국지</h3>
                    <span>카드, 모바일</span>
                  </div>
                </a>
              </li>
            </ul>
          </div>
        </div>  
        
        <div id="game_footer_section">
          <a href="#">네이버 이용약관</a>
          <a href="#">네이버 게임 운영정책</a>
          <a href="#">개인정보처리 방침</a>
          <a href="#">네이버 게임 고객센터</a>
        </div>

      </div>
    </div>

  </main>

* {
  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; */
}



/* main right */
.right_section {
  background-color: #fff;
  box-shadow: 0 2px 30px 0 rgb(0, 0, 0 / 6%);
  border-radius: 12px;

  padding: 30px;
  margin-bottom: 24px;
}

.right_section .title_wrap h2 {
  font-size: 17px;
  font-weight: 400;
} 

.right_section .title_wrap a {
  font-size: 13px;
  font-weight: 400;
  color: #444;
}

.right_section .right_section_body {
  margin-top: 20px;
}


#visitor_section .text_wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#visitor_section .text_wrap p {
  font-size: 13px;
  color: #9da5b6;
  text-align: center;

  margin-top: 20px;
}

#visitor_section .text_wrap .input_wrap {
  position: relative;
  overflow: hidden; 

  width: 250px;
  height: 44px;
  background-color: #f5f6fa;
  border-radius: 12px;

  margin-top: 18px;
}

#visitor_section .text_wrap .input_wrap input {
  width: calc(100% - 44px);
  height: 100%;
  padding: 10px 16px;
  border: none;

  font-size: 15px;
  background-color: transparent;
}

#visitor_section .text_wrap .input_wrap input:focus {
  outline: none;
}

#visitor_section .text_wrap .input_wrap button {
  width: 44px;
  height: 100%;
  background-color: grey;
}


.rank_section .right_section_body li  {
  margin-bottom: 16px;
}

.rank_section .right_section_body li:last-child {
  margin-bottom: 0;
}

.rank_section .right_section_body li a:after {
  content: '';
  width: 14px;
  height: 14px;
  background-color: grey;
}

.rank_section .right_section_body li .count_wrap {
  position: relative;
  width: 25px;
  text-align: center;
  margin-right: 5px;
}

.rank_section .right_section_body li .count_wrap .count {
  font-size: 17px;
  font-weight: 700;
}

.rank_section .right_section_body li .count_wrap .count.red {
  color: #ff4c51;
} 

.rank_section .right_section_body li .count_wrap .up_and_down_wrap {
  position: absolute;

  left: 6px;
  bottom: -13px;
}

.rank_section .right_section_body li .count_wrap .up_and_down_wrap .equal {
  display: inline-block;
  width: 5px;
  height: 3px;
  background-color: grey;
  text-align: center;
  margin-left: 3px;
}

.rank_section .right_section_body li .count_wrap .up_and_down_wrap span {
  font-size: 10px;
}

.rank_section .right_section_body li .count_wrap .up_and_down_wrap span:before {
  content: '';
  display: inline-block;
  position: relative;
  width: 7px;
  height: 3px;
  top: -2px;
  margin-right: 1px;
}

.rank_section .right_section_body li .count_wrap .up_and_down_wrap .up {
  color: red;
}

.rank_section .right_section_body li .count_wrap .up_and_down_wrap .up:before {
  background-color: red;
}

.rank_section .right_section_body li .count_wrap .up_and_down_wrap .down {
  color: blue;
}

.rank_section .right_section_body li .count_wrap .up_and_down_wrap .down:before {
  background-color: blue;
}

.rank_section .right_section_body .image_wrap {
  position: relative;
  width: 55px;
  height: 55px;
  margin-right: 10px;
}

.rank_section .right_section_body .image_wrap img {
  position: absolute; 
  width: 100%;
  height: 100%;
  border-radius: 12px;
}

.rank_section .right_section_body .image_wrap .chk {
  position: absolute;
  width: 21px;
  height: 21px;
  background-color: grey;
  border-radius: 50%;

  top: -2px;
  right: -2px;
}

.rank_section .right_section_body .txt_wrap h3 {
  width: 179px;
  font-size: 15px;

  overflow: hidden; 
  white-space: nowrap;
  text-overflow: ellipsis;

  margin-right: 10px;
}

.rank_section .right_section_body .txt_wrap .genre {
  font-size: 13px;
  color: #999;
}

.rank_section .right_section_body .time {
  margin-top: 12px;
  font-size: 13px;
  color: #999;
}


#news_section .right_section_body ul li {
  margin-bottom: 5px;
}

#news_section .right_section_body ul li:last-child {
  margin-bottom: 0;
}

#news_section .right_section_body ul li a {
  display: block; 
}

#news_section .right_section_body ul li a:before {
  display: inline-block;
  position: relative;
  content: '';
  width: 3px;
  height: 3px;
  background-color: #9da5b6;

  top: -5px;
  margin-right: 5px;
}


#week_section li {
  margin-bottom: 16px;
}

#week_section li:last-child {
  margin-bottom: 0;
}

#week_section img {
  width: 128px;
  height: 72px;
  border-radius: 8px;

  margin-right: 10px;
}

#week_section .txt_wrap h3 {
  font-size: 15px;
}

#week_section .txt_wrap span {
  font-size: 13px;
  color: #999999;
}


#game_footer_section a {
  display: inline-block;
  font-size: 11px;
  color: #666;
}

#game_footer_section a:after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 11px;
  margin: 1px 10px 0;
  background-color: #ddd;
  vertical-align: text-top;
}

#game_footer_section a:last-child:after {
  display: none;
}

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.