NEW_GIL_HOME\hyeon
f7275e2ce7
All checks were successful
코드 품질 검사 / 린트 검사 (push) Successful in 4m38s
193 lines
5.6 KiB
HTML
193 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="format-detection" content="telephone=no">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=5"/>
|
|
<title>쿠팡 방문하고 포인트 적립</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">
|
|
<link type="text/css" rel="stylesheet" href="assets/css/style.css" />
|
|
|
|
</head>
|
|
<body>
|
|
<div class="layer-wrap">
|
|
<!-- header -->
|
|
<header class="layer-header">
|
|
<h1 class="header-title">쇼핑 적립</h1>
|
|
<button type="button" class="btn-close"><em>닫기</em></button>
|
|
</header>
|
|
<!-- //header -->
|
|
|
|
<!-- container -->
|
|
<div class="layer-container">
|
|
<div>
|
|
테스트를 위해 작성 주dd
|
|
</div>
|
|
<ul>
|
|
<li>1</li>
|
|
<li>2</li>
|
|
<li>3</li>
|
|
<li>4</li>
|
|
<li>5</li>
|
|
<li>6</li>
|
|
<li>7</li>
|
|
<li>8</li>
|
|
</ul>
|
|
<div class="layer-content-header">
|
|
<div class="point-area">
|
|
<dl>
|
|
<dt>
|
|
<b>내 포인트</b><span>적립예정 : 10 건</span>
|
|
</dt>
|
|
<dd>
|
|
<strong>22,000</strong> P
|
|
</dd>
|
|
</dl>
|
|
|
|
<button type="button" class="btn-txt-arr"><em>포인트 내역보기</em></button>
|
|
<button type="button" class="btn-useage"><em>이용방법</em></button>
|
|
</div>
|
|
|
|
<div class="btn-area">
|
|
<button type="button" class="btn-discount">
|
|
통신비<br> 할인 받기
|
|
<label for="switchSlide" class="btn-switch">
|
|
<span class="switch">
|
|
<input type="checkbox" id="switchSlide" class="checkbox" checked="checked" />
|
|
<span class="slider"></span>
|
|
</span>
|
|
</label>
|
|
</button>
|
|
|
|
<button type="button" class="btn-point-use">포인트<br> 사용하기</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layer-content">
|
|
<div class="swiper category-area">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<!-- [D] 버튼 활성화 시 active 클래스 추가 -->
|
|
<button class="btn-cate active">전체</button>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<button class="btn-cate">종합몰</button>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<button class="btn-cate">뷰티</button>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<button class="btn-cate">패션</button>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<button class="btn-cate">종합몰</button>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<button class="btn-cate">종합몰</button>
|
|
</div>
|
|
</div>
|
|
<button class="btn-more"></button>
|
|
</div>
|
|
<div class="list-area">
|
|
<!-- [D] 즉시적립 시 noti에 quick 클래스 추가 -->
|
|
<div class="noti quick">
|
|
<div class="txt-area">
|
|
<span class="tit">쿠팡 쇼핑 금액의</span>
|
|
<span class="acc">
|
|
<strong>2.2</strong>% 적립 받기
|
|
</span>
|
|
</div>
|
|
<div class="img-area"><img src="./assets/images/brand_coupang.png" alt=""></div>
|
|
</div>
|
|
|
|
<!-- [D] 즉시적립 시 li에 quick 클래스 추가 -->
|
|
<ul class="list">
|
|
<li>
|
|
<a href="./쇼핑하고포인트적립.html">
|
|
<div class="txt-area">
|
|
<span class="tit">쿠팡</span>
|
|
<span class="acc"><strong>4</strong>%</span>
|
|
</div>
|
|
<div class="img-area"><img src="./assets/images/brand_ya.png" alt=""></div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="./쇼핑하고포인트적립.html">
|
|
<div class="txt-area">
|
|
<span class="tit">G마켓</span>
|
|
<span class="acc"><strong>1.21</strong>%</span>
|
|
</div>
|
|
<div class="img-area"><img src="./assets/images/brand_gmarket.png" alt=""></div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="./쇼핑하고포인트적립.html">
|
|
<div class="txt-area">
|
|
<span class="tit">알리익스프레스</span>
|
|
<span class="acc"><strong>5.67</strong>%</span>
|
|
</div>
|
|
<div class="img-area"><img src="./assets/images/brand_aliexpress.png" alt=""></div>
|
|
</a>
|
|
</li>
|
|
<li class="quick">
|
|
<a href="./쇼핑하고포인트적립.html">
|
|
<div class="txt-area">
|
|
<span class="tit">롯데온</span>
|
|
<span class="acc"><strong>2.2</strong>%</span>
|
|
</div>
|
|
<div class="img-area"><img src="./assets/images/brand_lotte_on.png" alt=""></div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="./쇼핑하고포인트적립.html">
|
|
<div class="txt-area">
|
|
<span class="tit">홈플러스</span>
|
|
<span class="acc"><strong>1.21</strong>%</span>
|
|
</div>
|
|
<div class="img-area"><img src="./assets/images/brand_homeplus.png" alt=""></div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="./쇼핑하고포인트적립.html">
|
|
<div class="txt-area">
|
|
<span class="tit">CJ더마켓</span>
|
|
<span class="acc"><strong>5.67</strong>%</span>
|
|
</div>
|
|
<div class="img-area"><img src="./assets/images/brand_cj_the_market.png" alt=""></div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="caution-area">
|
|
<h3>유의사항</h3>
|
|
<p>※ 유의사항 : 본 콘텐츠는 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- //container -->
|
|
</div>
|
|
<script src="assets/js/swiper.js"></script>
|
|
|
|
|
|
<script>
|
|
var swiper = new Swiper(".category-area", {
|
|
slidesPerView: "auto",
|
|
spaceBetween: 8,
|
|
freeMode: true,
|
|
});
|
|
|
|
const buttons = document.querySelectorAll('.btn-cate');
|
|
buttons.forEach((button) => {
|
|
button.addEventListener('click', () => {
|
|
buttons.forEach((btn) => btn.classList.remove('active'));
|
|
button.classList.add('active');
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|