refactor: test-gil 브랜치 추가
This commit is contained in:
2239
assets/css/style.css
2239
assets/css/style.css
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
353
index.html
353
index.html
@@ -1,192 +1,185 @@
|
||||
<!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>
|
||||
<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 -->
|
||||
|
||||
</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>
|
||||
<!-- 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="test-gil">이번에는 MR테스트트</div>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<button type="button" class="btn-txt-arr"><em>포인트 내역보기</em></button>
|
||||
<button type="button" class="btn-useage"><em>이용방법</em></button>
|
||||
</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>
|
||||
<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>
|
||||
|
||||
<!-- [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>
|
||||
<button type="button" class="btn-point-use">
|
||||
포인트<br />
|
||||
사용하기
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="caution-area">
|
||||
<h3>유의사항</h3>
|
||||
<p>※ 유의사항 : 본 콘텐츠는 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- //container -->
|
||||
</div>
|
||||
<script src="assets/js/swiper.js"></script>
|
||||
<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>
|
||||
|
||||
<script>
|
||||
var swiper = new Swiper(".category-area", {
|
||||
slidesPerView: "auto",
|
||||
spaceBetween: 8,
|
||||
freeMode: true,
|
||||
});
|
||||
<div class="caution-area">
|
||||
<h3>유의사항</h3>
|
||||
<p>※ 유의사항 : 본 콘텐츠는 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- //container -->
|
||||
</div>
|
||||
<script src="assets/js/swiper.js"></script>
|
||||
|
||||
const buttons = document.querySelectorAll('.btn-cate');
|
||||
buttons.forEach((button) => {
|
||||
button.addEventListener('click', () => {
|
||||
buttons.forEach((btn) => btn.classList.remove('active'));
|
||||
button.classList.add('active');
|
||||
});
|
||||
});
|
||||
<script>
|
||||
var swiper = new Swiper(".category-area", {
|
||||
slidesPerView: "auto",
|
||||
spaceBetween: 8,
|
||||
freeMode: true,
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user