메가박스 사이트 만들기 16 - 메가박스 할인카드

메가박스 사이트 만들기

강의번호 16 - 메가박스 할인카드

 

 

완성!

 

style.css

/*할인카드*/
.card{padding: 17px;}
.card ul{}
.card ul li{position: relative;border: 1px solid #d7d7d7; padding: 17px; margin-bottom: 17px; 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; padding-left: 120px; color: #777}
.card ul li em{display: block;padding-left: 120px;font-size: 14px; color: #777; font-weight: 300;}

 

index.html

						<div class="card">
                            <ul>
                                <li>
                                    <a href="#">
                                        <span><img src="assets/img/card01.jpg" srcset="assets/img/card01.jpg" 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.jpg" 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.jpg" alt="card01"></span>
                                        <strong>T멤서십 일반</strong>
                                        <em>영화 2,000원 현자 즉시 할인(1일 5매)</em>
                                    </a>
                                </li>
                            </ul>
                        </div>