메가박스 사이트 따라 만들기 - 오프닝 영역

megabox13

오프닝 영역

글씨는 안 보이고 이미지만 보이게 함
→ class에 ir_pm을 넣어줌

결과

HTML

<section id="opening">
  <div class="container">
    <div class="row">
      <div class="opening">
        <h2><span class="grand icon ir_pm">Grand Opening</span></h2>
        <strong class="date icon ir_pm">2019.01 ~ 2019.03</strong>
        <p class="desc">
          LIFE THEATER로 새롭게 시작하는 메가박스를 만나보세요!
        </p>
        <div class="open_box">
          <div>
            <h3>리뉴얼 오픈</h3>
            <p><em>경기도</em><strong>안양</strong>12월 8일</p>
          </div>
          <div>
            <h3>리뉴얼 오픈</h3>
            <p><em>경기도</em><strong>인덕원 사거리</strong>12월 8일</p>
          </div>
          <div>
            <h3>리뉴얼 오픈</h3>
            <p><em>경기도</em><strong>용인테크노밸리</strong>12월 8일</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- //opening -->

 

style.css

/* 오프닝 */
.opening {
  padding: 100px 0;
  text-align: center;
  color: #bb9b51;
}

.opening h2 {
  margin-bottom: 15px;
}

.opening h2 .grand {
  background-position: 0 -175px;
  display: inline-block;
  width: 330px;
  height: 50px;
}

.opening .date {
  background-position: 0 -225px;
  display: inline-block;
  width: 260px;
  height: 45px;
}

.opening .desc {
  font-size: 35px;
  font-weight: 300;
  padding-bottom: 20px;
  background: url(../img/bar.png) no-repeat bottom center;
  background-size: 100%;
}

.opening .open_box {
  overflow: hidden;
  padding: 20px 3% 0 3%;
}

.opening .open_box>div {
  float: left;
  width: 27.333%;
  margin: 4% 3% 0 3%;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid #3e4b44;
}

.opening .open_box>div h3 {
  color: #fff;
  font-weight: 300;
  border: 1px solid #6e3abb;
  margin-top: -24px;
  font-size: 19px;
  display: inline-block;
  padding: 10px 20px;
  background: #551e9b;
}

.opening .open_box>div p {
  font-size: 23px;
  color: #fff;
  font-weight: 700;
  padding: 6% 0 10% 0;
}

.opening .open_box>div em {
  display: block;
  font-weight: bold;
}

.opening .open_box>div strong {
  display: block;
}

@media (max-width: 960px) {
  .opening {
    padding: 50px 0;
  }

  .opening .open_box {
    display: none;
  }

  .opening .desc {
    background: none;
    font-size: 25px;
  }
}

@media (max-width: 600px) {
  #opening {
    margin: 8px 0;
  }

  .opening {
    padding: 20px 0;
  }

  .opening h2 {
    margin-bottom: 10px;
  }

  .opening h2 .grand {
    background-size: 300px;
    background-position: 0 -105px;
    width: 197px;
    height: 24px;
  }

  .opening .date {
    display: none;
  }

  .opening .desc {
    font-size: 16px;
    font-weight: 400;
    padding-bottom: 0;
  }
}

 

reset.css

 

.ir_pm {
  display: block;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
}

 

출력