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

메가박스 사이트 만들기

강의번호 12 - 오프닝 영역

완성!

 

 

style.css

/*오프닝*/
#opening{margin: 17px 0; background: url(../img/bg01.jpg) no-repeat center top; background-size: cover;}
.opening{padding: 100px 0; text-align: center; color: #bb9b51;}
.opening h2{}
.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% 0px 3%; box-sizing: border-box; border: 1px solid #3e4b44;}
.opening .open_box > div h3 {color: #fff; border: 1px solid #6e3abb; font-size: 19px;}

 

index.html

<!-- opening-->
    <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-->