새로운 영화 영역

메가박스 사이트 만들기

동영상 보며 코딩하기 -메가박스 사이트 만들기 

web's 동영상 바로가기

열세번째 강의 : 새로운 영화 영역

<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 {padding: 100px 0; position: relative;}
.new h2 {font-size: 30px; font-weight: 500; margin-bottom: 20px;}
.new .new_left {position: relative; margin-right: 423px; 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: #f0f0f0;}