CodePen Embed - Twitch (main

  <div class="main_container">
    
    <div class="left_area">
      <div class="channel_wrap">
        <div class="channel_header">
          <h3>추천채널</h3>
          <i class="icon_arrow"></i>
        </div>
        <div class="channel_body">
          <ul>
            <li>
              <a href="#">
                <img src="https://via.placeholder.com/30">
                <div class="txt_wrap">
                  <h4>기발자(gi_balja)(gi_balja)(gi_balja)</h4>
                  <span class="source">Just Chatting</span>
                </div>
                <span class="count">10,000</span>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="https://via.placeholder.com/30">
                <div class="txt_wrap">
                  <h4>기발자(gi_balja)(gi_balja)(gi_balja)</h4>
                  <span class="source">Just Chatting</span>
                </div>
                <span class="count">10,000</span>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="https://via.placeholder.com/30">
                <div class="txt_wrap">
                  <h4>기발자(gi_balja)(gi_balja)(gi_balja)</h4>
                  <span class="source">Just Chatting</span>
                </div>
                <span class="count">10,000</span>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="https://via.placeholder.com/30">
                <div class="txt_wrap">
                  <h4>기발자(gi_balja)(gi_balja)(gi_balja)</h4>
                  <span class="source">Just Chatting</span>
                </div>
                <span class="count">10,000</span>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="https://via.placeholder.com/30">
                <div class="txt_wrap">
                  <h4>기발자(gi_balja)(gi_balja)(gi_balja)</h4>
                  <span class="source">Just Chatting</span>
                </div>
                <span class="count">10,000</span>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="https://via.placeholder.com/30">
                <div class="txt_wrap">
                  <h4>기발자(gi_balja)(gi_balja)(gi_balja)</h4>
                  <span class="source">Just Chatting</span>
                </div>
                <span class="count">10,000</span>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="https://via.placeholder.com/30">
                <div class="txt_wrap">
                  <h4>기발자(gi_balja)(gi_balja)(gi_balja)</h4>
                  <span class="source">Just Chatting</span>
                </div>
                <span class="count">10,000</span>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="https://via.placeholder.com/30">
                <div class="txt_wrap">
                  <h4>기발자(gi_balja)(gi_balja)(gi_balja)</h4>
                  <span class="source">Just Chatting</span>
                </div>
                <span class="count">10,000</span>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="https://via.placeholder.com/30">
                <div class="txt_wrap">
                  <h4>기발자(gi_balja)(gi_balja)(gi_balja)</h4>
                  <span class="source">Just Chatting</span>
                </div>
                <span class="count">10,000</span>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="https://via.placeholder.com/30">
                <div class="txt_wrap">
                  <h4>기발자(gi_balja)(gi_balja)(gi_balja)</h4>
                  <span class="source">Just Chatting</span>
                </div>
                <span class="count">10,000</span>
              </a>
            </li>
          </ul>
        </div>
      </div>

      <div class="join_wrap">
        <div class="txt_wrap">
          <h2><span class="font_purple">Twitch</span>커뮤니티와 함께하세요!</h2>
          <p>어디서나 최고의 생방송을 즐겨보세요.</p>
          <button type="button" class="btn_purple">회원가입</button>
        </div>        
      </div>

      <div class="info_wrap">
        <p>상호명: Twitch</p>
        <p>대표자명: CEO</p>
        <p>주소:San Francisco, California, USA</p>

        <ul>
          <li><a href="#">지원팀에 문의</a></li>
          <li><a href="#">판매약관</a></li>
          <li><a href="#">사업자 정보</a></li>
        </ul>
      </div>
    </div>

    <div class="content"></div>

  </div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  background-color: #0e0e10;
}

ol, ul {
  list-style: none;
}

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

img {
  vertical-align: top;
}

input {
  outline: none;
  border: none;
}

button {
  outline: none;
  border: none;
  background: transparent;
}

h1, h2, h3, h4, h5, h6, p, span, input, button, a {
  color: #fff;
}

.btn_purple {
  background-color: #9147ff;
  color: #fff;
}

.font_purple {
  color: #9147ff;
}





/* main - left */

.main_container {
  position: relative; /* 3차원 자식들의 크기값을 인식하기 위해서 */
  width: 100%;
  height: 100%;
  min-width: 1340px;
  /*padding-top: 50px;*/ /* 아래에 top: 50px로 적용해줌 */;
}

.left_area {
  position: fixed;
  width: 240px;
  background-color: #202024;

  top: 50px;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  
  z-index: 9999;
}

.left_area .channel_wrap .channel_header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;

  padding: 10px;
}

.left_area .channel_wrap .channel_header h3 {
  font-size: 15px;
}

.left_area .channel_wrap .channel_header .icon_arrow {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: #fff;
}

.left_area .channel_wrap .channel_body a {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 5px 10px;
}

.left_area .channel_wrap .channel_body img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.left_area .channel_wrap .channel_body .txt_wrap {
  width: 110px;
  margin-left: 10px;
  margin-right: 5px;
}

.left_area .channel_wrap .channel_body .txt_wrap h4 {
  font-size: 13px;

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

.left_area .channel_wrap .channel_body .txt_wrap .source {
  font-size: 12px;
  color: grey;
}

.left_area .channel_wrap .channel_body .count {
  display: block;
  width: 53px;
  font-size: 12px;
}

.left_area .channel_wrap .channel_body .count:before {
  display: inline-block;
  content: "";
  width: 9px;
  height: 9px;
  background-color: red;
  border-radius: 50%;

  margin-right: 5px;
}

.left_area .join_wrap {
  background-color: #18181a;
  margin: 10px;
}

.left_area .join_wrap .txt_wrap {
  padding: 20px;
}

.left_area .join_wrap .txt_wrap h2 {
  font-size: 24px;
}

.left_area .join_wrap .txt_wrap p {
  margin-top: 10px;
  font-size: 13px;
}

.left_area .join_wrap .txt_wrap .btn_purple {
    width: 60px;
    height: 30px;
    border-radius: 5px;
    text-align: center;
    line-height: 30px;
    font-size: 12px;

    margin-top: 10px;
}

.left_area .info_wrap {
  font-size: 12px;
  margin: 0 10px 10px;
}

.left_area .info_wrap p {
  color: grey;
}

.left_area .info_wrap ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  margin-top: 10px;
}

.left_area .info_wrap li a {
  color: grey;
}

.left_area .info_wrap li a:after {
  content: "";
  position: relative;
  display: inline-block;
  width: 2px;
  height: 10px;
  background-color: grey;

  margin: 0 5px;
}

.left_area .info_wrap li:last-child a:after {
  content: 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.