이벤트 영역

메가박스 사이트 만들기

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

web's 동영상 바로가기

열한번째 강의 : 이벤트 영역

평소 화면

max-width 768일때

max-width 600일때

 

<section id="event">
        <div class="container">
            <div class="row">
                <div class="event">
                    <h2>새로운 이벤트</h2>
                    <div class="event_left">
                        <div class="event_slider">
                            <img src="assets/img/event01.jpg" srcset="assets/img/event01@2.jpg 2x" alt="시티 패키지">
                        </div>
                        <div class="event_box1">
                            <img src="assets/img/event02.jpg" srcset="assets/img/event02@2.jpg 2x" alt="남포항점 2019 시즌할인권"> 
                        </div>
                        <div class="event_box2">
                            <img src="assets/img/event03.jpg" srcset="assets/img/event03@2.jpg 2x" alt="설 선물 이수점 전용 관람권 런칭">
                        </div>
                    </div>
                    <div class="event_right">
                        <img src="assets/img/event04.jpg" srcset="assets/img/event04@2.jpg 2x" alt="사표 대신 영화표">
                    </div>
                </div>
            </div>
        </div>
    </section>
    

 

/* 이벤트 */
.event {overflow: hidden; padding: 100px 0;}
.event img {display: block;}
.event h2 {font-size: 30px; font-weight: 500; margin-bottom: 20px;}
.event .event_left {float: left; width: 66%; margin-right: 2%;}
.event .event_left .event_box1 {float: left; width: 50%;}
.event .event_left .event_box2 {float: left; width: 50%;}
.event .event_right {float: left; width: 32%;}


@media (max-width: 768px){
    body {background: #d9d7e0;}
    .row {padding: 0 16px;}
    .mNav { right: 6px;}
    .header h1 {text-align: left;}
    .header h1 strong {display: none;}
    
    #movie {background: none;}
    #movie .row {background: #fff; margin: 24px 24px 0 24px; padding: 24px;}
    #movie .ir_so {
        position: static; 
        width: auto; height: auto; line-height: normal; 
        text-indent: 0; font-size: 24px; font-weight: bold; padding-bottom: 20px;}
    .movie {padding: 0;}
    .movie_title {margin-bottom: 30px;}
    .movie_title ul {position: relative; padding-bottom: 10px;}
    .movie_title ul:before {content: ''; position: absolute; z-index: 1; left: 0; bottom: 0; width: 100%; height: 2px; background: #e1e1e1; }
    .movie_title li {width: auto; border: 0;}
    .movie_title li a {position: relative; font-size: 18px; color: #666; font-weight: 400; padding: 0; margin-right: 35px;} 
    .movie_title li.active a:before {content: ''; position: absolute; z-index: 2; left: 0; bottom: -10px; width: 100%; height: 2px; background: #666;}
    .movie_title li.active a {background: none; color: #666;}
    
    #event .row {padding: 24px;}
    .event {padding: 24px; background: #fff;}
    .event h2 {font-size: 24px; font-weight: 700;}
    .event .event_left {width: 100%; margin-right: 0;}
    .event .event_right {display: none;}
    
}
@media (max-width: 600px){
    .slider {height: 400px;}
    .slider .swiper-slide h2 {margin-top: 140px; font-size: 24px; line-height: 30px;}
    .slider .swiper-slide h2:after {bottom: -5px;}
    .slider .swiper-slide h2 em {font-size: 20px;}
    .slider .swiper-slide p {font-size: 14px; padding-top: 25px;}
    
    .banner_menu {top: 16px;}
    .banner_menu .bm_right li.white a {font-size: 14px padding: 3px 5px 5px 5px; color: #fff; background: rgba(0,0,0,0.6); border-color: #fff;}
    .banner_menu .bm_right li.purple a {font-size: 14px padding: 3px 5px 5px 5px; color: #fff; background: rgba(0,0,0,0.6); border-color: #fff;}
    .swiper-pagination-bullet {width: 13px !important; height: 13px !important;} 
    
    #movie .container {position: relative;}
    #movie .container:after {content: ''; position: absolute; z-index: 20; top: 0; right: 0; width: 8px; height: 100%; background: #d9d7e0;}
    #movie .row {position: relative; margin: 8px; padding: 16px; margin-right: 0; padding-right: 0;}
    #movie .row:after {content: ''; position: absolute; top: 0; right: 0; z-index: 10; width: 24px; height: 100%; background: #fff;}
    #movie .ir_so {font-size: 18px; padding-bottom: 10px;}
    .movie_title {margin-bottom: 20px;}
    .movie_title ul {padding-bottom: 8px; white-space: nowrap; overflow-x: auto;}
    .movie_title li a {font-size: 14px; margin-right: 15px;}
    .movie_title li.active a:before {bottom: -8px;}
    .movie_chart{position: relative; z-index: 30;}
    .movie_chart > div > div > div .infor {padding: 5px;}
    .movie_chart > div > div > div .infor h3 {text-align: center; margin: 5px 0 10px;}
    .movie_chart > div > div > div .infor h3 strong {display: block; font-size: 19px; color: #222; font-weight: 300;}
    .movie_chart > div > div > div .infor h3 span {display: none;}
    .movie_chart > div > div > div .infor .infor_btn a {width: 52%; margin-left: 24%; display: block; margin-right: 0; padding: 5px; color: #777; margin-bottom: 5px; box-sizing: border-box; font-size: 14px; background: none; border: 1px solid #ddd;}
    .movie_chart > div > div > div .infor .infor_btn a:last-child {display: none;}
    
    #event .row {padding: 0 8px;}
    .event {padding: 16px;}
    .event h2 {font-size: 18px;  margin-bottom: 10px;}
}