메가박스 사이트 만들기 13 - 새로운 영화 영역

메가박스 사이트 만들기

강의번호 13 - 새로운 영화 영역

 

완성!

 

style.css

/*오프닝*/
.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; margin-bottom: 15px;}
.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; background: rgba(0,0,0,0.5);}
.opening .open_box > div h3 {color: #fff; border: 1px solid #6e3abb; margin-top: -24px; font-size: 19px; display: inline-block; padding: 10px 20px; background: #551e9b; font-weight: 300;}
.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; font-weight: bold;}

/*새로운영화*/
.new{padding: 100px 0; position: relative;}
.new h2{font-size: 30px; font-weight: 500; margin-bottom: 20px;}
.new .new_left{position: relative;margin-right: 432px;height: 500px; background: #ccc url(../img/new01.jpg) center center; background-size: cover}
.new .new_left .play{position: absolute; left: 50%; top: 50%;transform: translate(-50%, -50%);width: 120px; height: 120px;}
.new .new_left .play .st0{fill: #fff; opacity: 0.3}
.new .new_left .play .st1{fill: #fff}
.new .new_right{position: absolute; right: 0; top: 165px; width: 400px; height: 500px; background-color: #f0f0f0;}

 

index.html

 

<!--new-->
    <section id="new">
        <div class="container">
            <div class="row">
                <div class="new">
                    <h2>새로운 영화</h2>
                    <div class="new_left">
                        <div class="play">
                           <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                            viewBox="0 0 120 120" style="enable-background:new 0 0 120 120;" xml:space="preserve">
                                <circle class="st0" cx="60" cy="60.4" r="56"/>
                                <path class="st1" d="M81,65.4c4.8-2.8,4.8-7.2,0-10L53.5,39.6c-4.8-2.8-8.7-0.5-8.7,5v31.7c0,5.5,3.9,7.8,8.7,5L81,65.4z"/>
                            </svg>
                        </div>
                    </div>
                    <div class="new_right"></div>
                </div>
            </div>
        </div>
    </section>
    <!--//new-->