할인카드 영역

메가박스 사이트 만들기

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

web's 동영상 바로가기

열여섯번째 강의 : 할인카드 영역

<article class="help_box2">
                        <h3>메가박스 할인카드</h3>
                        <div class="card">
                            <ul>
                                <li>
                                    <a href="#">
                                        <span><img src="assets/img/card01.jpg" srcset="assets/img/card01@2.jpg 2x" alt="card01"></span>
                                        <strong>T멤버쉽 일반</strong>
                                        <em>영화 2,000원 현장 즉시 할인 (1일 5매)</em>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span><img src="assets/img/card02.jpg" srcset="assets/img/card02@2.jpg 2x" alt="card01"></span>
                                        <strong>T멤버쉽 일반</strong>
                                        <em>영화 2,000원 현장 즉시 할인 (1일 5매)</em>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span><img src="assets/img/card03.jpg" srcset="assets/img/card03@2.jpg 2x" alt="card01"></span>
                                    <strong>T멤버쉽 일반</strong>
                                    <em>영화 2,000원 현장 즉시 할인 (1일 5매)</em>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </article>

 

/*할인카드*/
.card {padding: 17px;}
.card ul {}
.card ul li {position: relative; border: 1px solid #d7d7d7; padding: 17px; margin-bottom: 15px; min-height: 102px; box-sizing: border-box;}
.card ul li span {position: absolute; left: 17px; top: 17px;}
.card ul li span img {width: 105px;}
.card ul li strong {display: block; font-size: 18px; color: #777; padding-left: 120px;}
.card ul li em {display: block; font-size: 14px; font-weight: 300; color: #777; padding-left: 120px;}