본문 바로가기
Publishing/HTML

Event Page 코딩하기

by 오다다 코드 오다다 Code 2020. 8. 4.

https://www.melon.com/event/ticket/index.htm?gubunId=&keyword=&pageIndex=0

 

멜론과 멜론티켓의 꿀케미 혜택! 멜론 GOLD이상 누구나! 멜론티켓 예매수수료 무료!

음악이 필요한 순간, 멜론

www.melon.com

 

<!-- event wrap -->
        <div class="wrap_container">
          <style>
            .nocharge{text-align:center;min-width:1008px;margin:0 auto}
            .nocharge img{vertical-align:top}
            .nocharge .hidden_element{position:absolute;top:0;left:-9999em;font-size:0;line-height:0;opacity:0;visibility:hidden;pointer-events:none}
            .nocharge .container{width:620px;margin:0 auto}
            .nocharge .section{background-repeat:no-repeat;background-position:50% 0}
            .nocharge .ellipsis{overflow:hidden;display:block;text-overflow:ellipsis;white-space:nowrap}
            .nocharge .visual{height:1903px;background-image:url('//cdnimg.melon.co.kr/resource/image/cds/event/web/201908/ticket/visual_bg.jpg');background-color:#fffbeb}
            .ticket_list{padding:80px 0 55px;background-image:url('//cdnimg.melon.co.kr/resource/image/cds/event/web/201908/ticket/ticket_list_bg.jpg');background-color:#fff0ba}
            .wrap_main_concert{width:1008px;margin:0 auto 37px}.wrap_main_concert .list_main_concert{display:block;overflow:hidden;width:100%}
            .wrap_main_concert .list_main_concert li{float:left;margin-left:29px;background:#fffbeb;margin-top:30px}
            .wrap_main_concert .list_main_concert li.first{margin-left:0;padding-right:1px}
            .wrap_main_concert .list_main_concert .inner{display:block;width:180px;height:358px;padding:24px 24px 21px;border:1px solid #eee0ae;text-align:left}
            .wrap_main_concert .list_main_concert .inner:hover{text-decoration:none}
            .wrap_main_concert .list_main_concert .thumb{display:block;position:relative;width:180px;height:250px;overflow:hidden}
            .wrap_main_concert .list_main_concert .thumb img{width:180px}
            .wrap_main_concert .list_main_concert .thumb .frame{display:block;position:absolute;top:0;left:0;width:178px;height:248px;background:0 0;z-index:10;border:1px solid #000;opacity:.03}
            .wrap_main_concert .list_main_concert .inner:hover .thumb .frame{background-position:-820px -230px}
            .wrap_main_concert .list_main_concert .tit{display:block;overflow:hidden;height:20px;padding:13px 0 9px;font-size:16px;line-height:20px;color:#333;text-overflow:ellipsis;white-space:nowrap}
            .wrap_main_concert .list_main_concert .inner:hover .tit{color:#000}
            .wrap_main_concert .list_main_concert .inner:hover .day{color:#000}
            .wrap_main_concert .list_main_concert .inner:hover .location{color:#000}
            .wrap_main_concert .list_main_concert .day{display:block;overflow:hidden;height:18px;font-weight:400;font-size:14px;line-height:18px;color:#666;text-overflow:ellipsis;white-space:nowrap}
            .wrap_main_concert .list_main_concert .location{display:block;overflow:hidden;height:20px;font-weight:400;font-size:13px;line-height:20px;color:#888;text-overflow:ellipsis;white-space:nowrap}
            .wrap_main_concert .list_main_concert .stat{display:block;overflow:hidden;height:20px;padding-top:8px;font-weight:400;font-size:16px;line-height:20px;color:#00cd3c;text-overflow:ellipsis;white-space:nowrap}
            .nocharge .sns{padding:46px 0 47px;background-color:#1ccc4b}
            .nocharge .sns ul{margin-top:35px;font-size:0;line-height:0}
            .nocharge .sns ul li{display:inline-block;margin:0 16px;zoom:1}
            .nocharge .notice{padding:70px 0 50px;background:#fff;}
            .nocharge .notice h3{margin-bottom:40px;font-size:27px;color:#393939;line-height:1.2;letter-spacing:-1.5px;font-weight:600}
            .nocharge .notice .container{margin:67px auto 0;width:1008px;border-top:solid 1px #ccc;padding-top:32px;text-align:left;}
            .nocharge .notice ul li{position:relative;margin-top:15px;padding-left:14px;font-size:16.5px;color:#666;line-height:1.2;letter-spacing:-1px}
            .nocharge .notice ul li:before{content:'';position:absolute;top:7px;left:0;width:3px;height:3px;background:#393939;border-radius:100px;opacity:.4}
            .nocharge .notice .italic{font-style:italic}
          </style>
          <div class="event_view nocharge">

            <div class="section visual">
              <div class="hidden_element">
                <h3>멜론 VIP 혜택관</h3>
                <h2>오직 멜론 VIP만을 위한 특별한 문화 혜택 Melon x Melon 티켓 MVG</h2>
                <h1>멜론과 멜론티켓의 슈퍼꿀케미파워!</h1>
                <p>멜론 GOLD 이상, 누구나! 예매 횟수 제한없이, 무제한! 정말 쉬운 방법으로, 간편하게!</p>
                <p>멜론 티켓 수수료 무료 0원</p>
                <dl>
                  <dt>정말 쉬운 헤택받는 방법!</dt>
                  <dd>보고 싶은 공연을 클릭하면 결제 시 자동으로 수수료 무료 혜택 제공!</dd>
                  <dd>Tip 아래에서 꿀잼공연 추천해드릴게요~</dd>
                </dl>
              </div>
            </div>

            <div class="section ticket_list">
              <h2><img src="//cdnimg.melon.co.kr/resource/image/cds/event/web/201908/ticket/ticket_list_title.png" alt="이 공연 괜찮더라구요! 수수료 무료잖아요!" /></h2>
              <div class="wrap_main_concert">
                <ul class="list_main_concert">
                
	                
		                
		                	<li class="first">
		                
		                
	                
	                    <a href="javascript:goTicketDetail(204899);" class="inner">
	                      <span class="thumb">
	                        <img src="//cdnticket.melon.co.kr/resource/image/upload/product/2020/05/20200528104334ce28c4f9-534e-45c0-8f1a-e75a7e18abe3.jpg" alt="">
	                        <span class="frame"></span>
	                      </span>
	                      <strong class="tit">뮤지컬 〈모차르트!〉 10주년 기념공연</strong>
	                      <span class="day">2020.06.16 ~ 2020.08.23</span>
	                      <span class="location">세종문화회관 대극장</span>
	                      <span class="stat">10주년 기념공연</span>
	                    </a>
	                  </li>
                  
	                
		                
		                
		                	<li>
		                
	                
	                    <a href="javascript:goTicketDetail(205284);" class="inner">
	                      <span class="thumb">
	                        <img src="//cdnticket.melon.co.kr/resource/image/upload/product/2020/06/202006151136104e52a61a-05ff-4184-b5be-ca015a00be70.jpg" alt="">
	                        <span class="frame"></span>
	                      </span>
	                      <strong class="tit">신비아파트 미디어 어드벤처:내가 구하리!</strong>
	                      <span class="day">2020.06.13 ~ 2020.10.04</span>
	                      <span class="location">서울숲 갤러리아포레 더 서울라이티움 2관</span>
	                      <span class="stat">온가족이 함께!</span>
	                    </a>
	                  </li>
                  
	                
		                
		                
		                	<li>
		                
	                
	                    <a href="javascript:goTicketDetail(204797);" class="inner">
	                      <span class="thumb">
	                        <img src="//cdnticket.melon.co.kr/resource/image/upload/product/2020/07/202007131222391a310cac-256a-4595-b249-18bb46b76b04.jpg" alt="">
	                        <span class="frame"></span>
	                      </span>
	                      <strong class="tit">KB RAPBEAT FESTIVAL 2020</strong>
	                      <span class="day">2020.09.19 ~ 2020.09.20</span>
	                      <span class="location">서울랜드 </span>
	                      <span class="stat">최종 라인업 공개!</span>
	                    </a>
	                  </li>
                  
	                
		                
		                
		                	<li>
		                
	                
	                    <a href="javascript:goTicketDetail(205352);" class="inner">
	                      <span class="thumb">
	                        <img src="//cdnticket.melon.co.kr/resource/image/upload/product/2020/07/20200715110627549f89bb-361a-4089-b997-a5a821f529c2.jpg" alt="">
	                        <span class="frame"></span>
	                      </span>
	                      <strong class="tit">뮤지컬 〈캣츠〉 40주년 내한공연-서울(Musical CATS)</strong>
	                      <span class="day">2020.09.09 ~ 2020.11.08</span>
	                      <span class="location">샤롯데씨어터 </span>
	                      <span class="stat">40주년 내한공연</span>
	                    </a>
	                  </li>
                  
	                
		                
		                	<li class="first">
		                
		                
	                
	                    <a href="javascript:goTicketDetail(205184);" class="inner">
	                      <span class="thumb">
	                        <img src="//cdnticket.melon.co.kr/resource/image/upload/product/2020/07/20200729134733312f04cd-e987-4553-b500-05ac6e93055a.jpg" alt="">
	                        <span class="frame"></span>
	                      </span>
	                      <strong class="tit">뮤지컬 〈제이미〉</strong>
	                      <span class="day">2020.07.04 ~ 2020.09.12</span>
	                      <span class="location">LG아트센터 </span>
	                      <span class="stat">기다려온 아시아 초연</span>
	                    </a>
	                  </li>
                  
	                
		                
		                
		                	<li>
		                
	                
	                    <a href="javascript:goTicketDetail(205212);" class="inner">
	                      <span class="thumb">
	                        <img src="//cdnticket.melon.co.kr/resource/image/upload/product/2020/08/20200803151919d3353b22-fdfb-4050-9855-9009d4dd3a93.jpg" alt="">
	                        <span class="frame"></span>
	                      </span>
	                      <strong class="tit">서울숲재즈페스티벌 2020 공식티켓</strong>
	                      <span class="day">2020.10.09 ~ 2020.10.11</span>
	                      <span class="location">서울숲공원 일대 </span>
	                      <span class="stat">얼리버드 티켓 오픈!</span>
	                    </a>
	                  </li>
                  
	                
		                
		                
		                	<li>
		                
	                
	                    <a href="javascript:goTicketDetail(205355);" class="inner">
	                      <span class="thumb">
	                        <img src="//cdnticket.melon.co.kr/resource/image/upload/product/2020/07/20200720155704c9cda81a-6cc1-46ff-a6b0-f0fa6c345e0f.jpg" alt="">
	                        <span class="frame"></span>
	                      </span>
	                      <strong class="tit">Someday Festival 2020 공식티켓</strong>
	                      <span class="day">2020.09.05 ~ 2020.09.06</span>
	                      <span class="location">서울 난지한강공원 </span>
	                      <span class="stat">라인업 확인하기!</span>
	                    </a>
	                  </li>
                  
	                
		                
		                
		                	<li>
		                
	                
	                    <a href="javascript:goTicketDetail(205322);" class="inner">
	                      <span class="thumb">
	                        <img src="//cdnticket.melon.co.kr/resource/image/upload/product/2020/07/20200702094716e90c13b3-6c0a-418d-b8ff-55a810dbddb5.jpg" alt="">
	                        <span class="frame"></span>
	                      </span>
	                      <strong class="tit">2020 아시아프 & 히든아티스트 페스티벌</strong>
	                      <span class="day">2020.07.21 ~ 2020.08.16</span>
	                      <span class="location">홍익대학교 현대미술관 </span>
	                      <span class="stat">히든아티스트 페스티벌</span>
	                    </a>
	                  </li>
                  
                </ul>
              </div>
              <a href="javascript:goTicket();" class="btn_landing"><img src="//cdnimg.melon.co.kr/resource/image/cds/event/web/201908/ticket/pc_btn_ticket_landing_190903.png" alt="멜론티켓으로 이동하기" /></a>
            </div>

            <div class="section sns">
              <h2><img src="//cdnimg.melon.co.kr/resource/image/cds/event/web/201908/ticket/sns_share_title.png" alt="공연 좀 보는 친구에게 이 소식을 공유해보아요!" /></h2>
              <ul>
                <li><a href="javascript:shareSns('facebook');"><img src="//cdnimg.melon.co.kr/resource/image/cds/event/web/201908/ticket/sns_btn_facebook03_82x82.png" alt="페이스북 바로가기" /></a></li>
                <li><a href="javascript:shareSns('twitter');"><img src="//cdnimg.melon.co.kr/resource/image/cds/event/web/201908/ticket/sns_btn_twitter03_82x82.png" alt="트위터 바로가기" /></a></li>
              </ul>
            </div>

            <div class="section notice">
            <a href="/event/vip/index.htm" class=""><img src="//cdnimg.melon.co.kr/resource/image/cds/event/web/201908/ticket/btn_vip_more.png" alt="VIP혜택관 더 보기"></a>
              <div class="container">
                <h3>이벤트 참여시 꼭 확인하세요!</h3>
                <ul>
                  <li>멜론 GOLD 이상 고객은 멜론 티켓에서 결제 시 &quot;자동으로&quot; 예매수수료 무료 혜택이 적용됩니다.</li>
                  <li>해당 프로모션은 당사의 운영 정책에 따라 진행되며 내부 사정에 따라 별도의 고지 없이 종료될 수 있습니다.</li>							
                  <li>일부 공연은 예매수수료 무료 대상에서 제외될 수 있습니다.</li>							
                  <li>이벤트 문의: 1899-0042(유료) 및 멜론티켓 앱 내 고객센터 내 1:1 문의 이용해주세요.</li>							
                  <li>매월 1일 회원등급이 조정될 시, 혜택이 적용되지 않을 수 있습니다. 이 경우 다시 예매를 시도해주세요.</li>							
                  <li>마케팅제휴문의: 고객센터 &gt; 나의문의내역 &gt; 1:1문의하기 &gt; 대분류-기타 &gt; 중분류-제휴/프로모션</li>
                </ul>
              </div>
            </div>

          </div>
          <!--//event_view-->

        </div>
        <!--//event wrap-->

'Publishing > HTML' 카테고리의 다른 글

사이트 기본 와이어프레임  (0) 2020.08.11
Event Page 코딩하기  (0) 2020.08.04
회원가입 폼  (0) 2020.07.24
HTML5 Canvas  (0) 2020.02.13
HTML5 Video (fullpage Video)  (0) 2020.02.13
HTML5 audio  (0) 2020.02.13

댓글0