CodePen Embed - Twitch (main - content

  <div class="main_container">
    
    <div class="content">

      <div class="content_container">
        
        <div class="category_section">
        
          <div class="title_wrap">
            <h2>취향 저격 <span class="font_purple">카테고리</h2>
          </div>  

          <div class="category_wrap">
            <ul>
              <li>
                <a href="#">
                  <div class="image_wrap">
                    <img src="https://via.placeholder.com/152x203">
                  </div>
                </a>
              
                <div class="txt_wrap">
                  <h3>Apex Legends</h3>
                  <p class="count">시청자 4.1만명</p>
                
                  <div class="tag_wrap">
                    <span class="tag">e스포츠</span>
                    <span class="tag">한국어</span>
                  </div>
                </div>

              </li>
              <li>
                <a href="#">
                  <div class="image_wrap">
                    <img src="https://via.placeholder.com/152x203">
                  </div>
                </a>
              
                <div class="txt_wrap">
                  <h3>Apex Legends</h3>
                  <p class="count">시청자 4.1만명</p>
                
                  <div class="tag_wrap">
                    <span class="tag">e스포츠</span>
                    <span class="tag">한국어</span>
                  </div>
                </div>

              </li>
              <li>
                <a href="#">
                  <div class="image_wrap">
                    <img src="https://via.placeholder.com/152x203">
                  </div>
                </a>
              
                <div class="txt_wrap">
                  <h3>Apex Legends</h3>
                  <p class="count">시청자 4.1만명</p>
                
                  <div class="tag_wrap">
                    <span class="tag">e스포츠</span>
                    <span class="tag">한국어</span>
                  </div>
                </div>

              </li>
              <li>
                <a href="#">
                  <div class="image_wrap">
                    <img src="https://via.placeholder.com/152x203">
                  </div>
                </a>
              
                <div class="txt_wrap">
                  <h3>Apex Legends</h3>
                  <p class="count">시청자 4.1만명</p>
                
                  <div class="tag_wrap">
                    <span class="tag">e스포츠</span>
                    <span class="tag">한국어</span>
                  </div>
                </div>

              </li>
              <li>
                <a href="#">
                  <div class="image_wrap">
                    <img src="https://via.placeholder.com/152x203">
                  </div>
                </a>
              
                <div class="txt_wrap">
                  <h3>Apex Legends</h3>
                  <p class="count">시청자 4.1만명</p>
                
                  <div class="tag_wrap">
                    <span class="tag">e스포츠</span>
                    <span class="tag">한국어</span>
                  </div>
                </div>

              </li>
              <li>
                <a href="#">
                  <div class="image_wrap">
                    <img src="https://via.placeholder.com/152x203">
                  </div>
                </a>
              
                <div class="txt_wrap">
                  <h3>Apex Legends</h3>
                  <p class="count">시청자 4.1만명</p>
                
                  <div class="tag_wrap">
                    <span class="tag">e스포츠</span>
                    <span class="tag">한국어</span>
                  </div>
                </div>

              </li>
              <li>
                <a href="#">
                  <div class="image_wrap">
                    <img src="https://via.placeholder.com/152x203">
                  </div>
                </a>
              
                <div class="txt_wrap">
                  <h3>Apex Legends</h3>
                  <p class="count">시청자 4.1만명</p>
                
                  <div class="tag_wrap">
                    <span class="tag">e스포츠</span>
                    <span class="tag">한국어</span>
                  </div>
                </div>

              </li>
              <li>
                <a href="#">
                  <div class="image_wrap">
                    <img src="https://via.placeholder.com/152x203">
                  </div>
                </a>
              
                <div class="txt_wrap">
                  <h3>Apex Legends</h3>
                  <p class="count">시청자 4.1만명</p>
                
                  <div class="tag_wrap">
                    <span class="tag">e스포츠</span>
                    <span class="tag">한국어</span>
                  </div>
                </div>

              </li>
            </ul>
        </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;
}




/* main - content */

.content {
  position: absolute;

  /* top과 왼쪽 제외한 전체에 content 영역의 공간을 잡아줌 */
  top: 50px;
  bottom: 0;
  left: 240px;
  right: 0;

  overflow-y: auto;
}

.content #content_banner {
  position: relative;
  width: 100%;
  height: 350px;
  
  /* 실제 파일에는 배경 이미지 삽입 */
  background: grey no-repeat center; 
  background-size: cover;
}

.content #content_banner .layer {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);

  top: 0;
  left: 0;
}

.content #content_banner .layer .txt_wrap {
  position: absolute;
  top: 170px;
  right: 200px;
}

.content .content_container {
  width: 1240px;
  margin: 0 auto;
}

/* 디폴트 */
.content_container .tag_wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  margin-top: 5px;
}

.content_container .tag_wrap .tag {
  border-radius: 8px;
  font-size: 11px;
  color: #fff;
  background-color: grey;

  padding: 2px 4px;

  margin-right: 5px;
}

.content_container .tag_wrap .tag:last-child {
  margin-right: 0;
}

.content_container .txt_wrap h3 {
  font-size: 16px;
}




.category_section {
  padding-top: 60px;
  padding-bottom: 40px;
}

.category_section .title_wrap {
  padding-bottom: 10px;
}

.category_section .title_wrap h2 {
  font-size: 20px;
}

.category_section .category_wrap ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

.category_section .category_wrap img {
  width: 152px;
  height: 203px;
  margin-bottom: 10px;
}

.category_section .category_wrap .txt_wrap .count {
  font-size: 14px;
  color: grey;
}

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.