신규 브랜치 머지 Reviewed-on: http://gilnas.synology.me:3000/gil/test-git/pulls/1 Co-authored-by: NEW_GIL_HOME\hyeon <hyeonggil2@gmail.com> Co-committed-by: NEW_GIL_HOME\hyeon <hyeonggil2@gmail.com>
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>
|
<!DOCTYPE html>
|
||||||
<html lang="ko">
|
<html lang="ko">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
<meta name="format-detection" content="telephone=no">
|
<meta name="format-detection" content="telephone=no" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=5"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=5" />
|
||||||
<title>쿠팡 방문하고 포인트 적립</title>
|
<title>쿠팡 방문하고 포인트 적립</title>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">
|
<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" />
|
<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>
|
<!-- container -->
|
||||||
<body>
|
<div class="layer-container">
|
||||||
<div class="layer-wrap">
|
<div>테스트를 위해 작성 주dd</div>
|
||||||
<!-- header -->
|
<ul>
|
||||||
<header class="layer-header">
|
<li>1</li>
|
||||||
<h1 class="header-title">쇼핑 적립</h1>
|
<li>2</li>
|
||||||
<button type="button" class="btn-close"><em>닫기</em></button>
|
<li>3</li>
|
||||||
</header>
|
<li>4</li>
|
||||||
<!-- //header -->
|
<li>5</li>
|
||||||
|
<li>6</li>
|
||||||
<!-- container -->
|
<li>7</li>
|
||||||
<div class="layer-container">
|
<li>8</li>
|
||||||
<div>
|
</ul>
|
||||||
테스트를 위해 작성 주dd
|
<div class="test-gil">이번에는 MR테스트트</div>
|
||||||
</div>
|
<div class="layer-content-header">
|
||||||
<ul>
|
<div class="point-area">
|
||||||
<li>1</li>
|
<dl>
|
||||||
<li>2</li>
|
<dt><b>내 포인트</b><span>적립예정 : 10 건</span></dt>
|
||||||
<li>3</li>
|
<dd><strong>22,000</strong> P</dd>
|
||||||
<li>4</li>
|
</dl>
|
||||||
<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-txt-arr"><em>포인트 내역보기</em></button>
|
||||||
<button type="button" class="btn-discount">
|
<button type="button" class="btn-useage"><em>이용방법</em></button>
|
||||||
통신비<br> 할인 받기
|
</div>
|
||||||
<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="btn-area">
|
||||||
<div class="swiper category-area">
|
<button type="button" class="btn-discount">
|
||||||
<div class="swiper-wrapper">
|
통신비<br />
|
||||||
<div class="swiper-slide">
|
할인 받기
|
||||||
<!-- [D] 버튼 활성화 시 active 클래스 추가 -->
|
<label for="switchSlide" class="btn-switch">
|
||||||
<button class="btn-cate active">전체</button>
|
<span class="switch">
|
||||||
</div>
|
<input type="checkbox" id="switchSlide" class="checkbox" checked="checked" />
|
||||||
<div class="swiper-slide">
|
<span class="slider"></span>
|
||||||
<button class="btn-cate">종합몰</button>
|
</span>
|
||||||
</div>
|
</label>
|
||||||
<div class="swiper-slide">
|
</button>
|
||||||
<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 클래스 추가 -->
|
<button type="button" class="btn-point-use">
|
||||||
<ul class="list">
|
포인트<br />
|
||||||
<li>
|
사용하기
|
||||||
<a href="./쇼핑하고포인트적립.html">
|
</button>
|
||||||
<div class="txt-area">
|
</div>
|
||||||
<span class="tit">쿠팡</span>
|
</div>
|
||||||
<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">
|
<div class="layer-content">
|
||||||
<h3>유의사항</h3>
|
<div class="swiper category-area">
|
||||||
<p>※ 유의사항 : 본 콘텐츠는 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.</p>
|
<div class="swiper-wrapper">
|
||||||
</div>
|
<div class="swiper-slide">
|
||||||
</div>
|
<!-- [D] 버튼 활성화 시 active 클래스 추가 -->
|
||||||
</div>
|
<button class="btn-cate active">전체</button>
|
||||||
</div>
|
</div>
|
||||||
<!-- //container -->
|
<div class="swiper-slide">
|
||||||
</div>
|
<button class="btn-cate">종합몰</button>
|
||||||
<script src="assets/js/swiper.js"></script>
|
</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>
|
<div class="caution-area">
|
||||||
var swiper = new Swiper(".category-area", {
|
<h3>유의사항</h3>
|
||||||
slidesPerView: "auto",
|
<p>※ 유의사항 : 본 콘텐츠는 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.</p>
|
||||||
spaceBetween: 8,
|
</div>
|
||||||
freeMode: true,
|
</div>
|
||||||
});
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- //container -->
|
||||||
|
</div>
|
||||||
|
<script src="assets/js/swiper.js"></script>
|
||||||
|
|
||||||
const buttons = document.querySelectorAll('.btn-cate');
|
<script>
|
||||||
buttons.forEach((button) => {
|
var swiper = new Swiper(".category-area", {
|
||||||
button.addEventListener('click', () => {
|
slidesPerView: "auto",
|
||||||
buttons.forEach((btn) => btn.classList.remove('active'));
|
spaceBetween: 8,
|
||||||
button.classList.add('active');
|
freeMode: true,
|
||||||
});
|
});
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
const buttons = document.querySelectorAll(".btn-cate");
|
||||||
|
buttons.forEach((button) => {
|
||||||
</body>
|
button.addEventListener("click", () => {
|
||||||
|
buttons.forEach((btn) => btn.classList.remove("active"));
|
||||||
|
button.classList.add("active");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user