Skip to content

KDT0_KimMinSeob 인터파크 홈페이지 클론코딩 #63

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
LikeFireAndSky wants to merge 53 commits into
base: main
Choose a base branch
from
Open

KDT0_KimMinSeob 인터파크 홈페이지 클론코딩 #63

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
53 commits
Select commit Hold shift + click to select a range
9857f16
Feat: "프로젝트 시작"
IAMISTP Jul 25, 2023
bdacb96
Feat: "header view 작업"
IAMISTP Jul 26, 2023
d52cb2e
Style: "header css작업"
IAMISTP Jul 26, 2023
8f5fabe
Style: "img 추가"
IAMISTP Jul 26, 2023
42de03b
Feat: "footer view 작업 , span 태그 -> a 태그로 변경"
IAMISTP Jul 26, 2023
ae870af
Style:"index.css 분리"
IAMISTP Jul 26, 2023
5b6c632
Style:"a 태그로 수정"
IAMISTP Jul 26, 2023
3ab097d
Style:"player css 작업"
IAMISTP Jul 26, 2023
617e08f
Style: "player 에 필요한 icon 추가"
IAMISTP Jul 26, 2023
ecb18a0
Feat: "banner 구현 "
IAMISTP Jul 27, 2023
5efd897
Style: "width 값 고정 제거"
IAMISTP Jul 27, 2023
15e6aed
Style: "main css 분리"
IAMISTP Jul 27, 2023
50d8f29
Style: "Banner css "
IAMISTP Jul 27, 2023
5010ced
Style: "main 에 필요한 이미지 추가"
IAMISTP Jul 27, 2023
68ef625
Feat: "매거진 view 작업 "
IAMISTP Jul 27, 2023
86954b2
Feat: "main view 구현"
IAMISTP Jul 27, 2023
0a013aa
Style: "main css 추가"
IAMISTP Jul 27, 2023
7c6b5ba
Style: "배경색상 지정"
IAMISTP Jul 27, 2023
19589cc
Style: "메인 view 구현에 필요한 이미지 추가 , 삭제"
IAMISTP Jul 27, 2023
06e4ab1
Feat: "footer view 작업"
IAMISTP Jul 27, 2023
3c42ea2
Style: "footer css 완료"
IAMISTP Jul 27, 2023
95f944c
Style: "footer icon 추가"
IAMISTP Jul 27, 2023
4e905ba
Feat: "메인 슬라이드 기능구현_view 작업"
IAMISTP Jul 28, 2023
0f6d227
Style: "main 슬라이드 기능구현_css"
IAMISTP Jul 28, 2023
662ba1d
Feat: "main 슬라이드 기능구현_javascript"
IAMISTP Jul 28, 2023
e350f9f
Style: "슬라이드 요소 이미지 추가 , icon 추가"
IAMISTP Jul 28, 2023
6896fbe
Fix: "요소 class명 변경 , 컨텐츠 내용 변경"
IAMISTP Jul 28, 2023
0101229
Style: "메인 요소 hover 시 underline 추가"
IAMISTP Jul 28, 2023
cfa15d4
Fix: "오디오 바 view 수정"
IAMISTP Jul 28, 2023
7196516
Style: "오디오 바 스타일 설정"
IAMISTP Jul 28, 2023
0ba56a2
Feat: "오디오바 기능구현"
IAMISTP Jul 28, 2023
4becc4d
Fix: "title 명 변경"
IAMISTP Jul 28, 2023
6f54d7a
Merge pull request #51 from KDT1-FE/KDT0_hyeminpark
IAMISTP Jul 28, 2023
9458d91
Update README.md
IAMISTP Jul 28, 2023
f48751f
Dep : Add Deploy version
LikeFireAndSky Jul 28, 2023
6093214
Fix : fix Prettierrc Setting
LikeFireAndSky Aug 3, 2023
1374d8f
Fix : Fix className and CSS Style. Delete repeated Element
LikeFireAndSky Aug 4, 2023
f03a500
Fix : Fix header display and bottom nav bar
LikeFireAndSky Aug 7, 2023
4bdd5f4
Fix : Event banner Conatiner and repeated Swiper-css property
LikeFireAndSky Aug 7, 2023
8fc7595
Fix : Shopping Banner and Trip Banner with Responsive web
LikeFireAndSky Aug 7, 2023
5621db2
Fix : Movie Banner and arrange repeated css
LikeFireAndSky Aug 7, 2023
e62441b
Fix : Fix Live Banner and add responsive css property
LikeFireAndSky Aug 7, 2023
f526127
Fix : Fix book banner and add responsive css property
LikeFireAndSky Aug 7, 2023
f97a6ca
Fix : fix book banner bottom button and fix ad banner
LikeFireAndSky Aug 7, 2023
7e86fc1
Fix Footer Banner List and fix modal hovering issue
LikeFireAndSky Aug 8, 2023
c3162b0
Fix Footer Modal Button Range
LikeFireAndSky Aug 8, 2023
d3a4585
Fix : Fix Footer CSS and delete repeated css property
LikeFireAndSky Aug 8, 2023
34d16de
Fix : Header Modal Close Issue
LikeFireAndSky Aug 8, 2023
b30dbef
Fix : Header Fixed Banner
LikeFireAndSky Aug 8, 2023
b4d4e5c
Feat : Add autoplay feature and Add left button
LikeFireAndSky Aug 8, 2023
d84370c
Feat : Add Intersection Observer Feature
LikeFireAndSky Aug 9, 2023
7a9ea96
Feat : Add Intersection Observer Feature
LikeFireAndSky Aug 9, 2023
b4b2241
Feat : Add datalist Tag
LikeFireAndSky Aug 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions css/bookBanner.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,14 @@
flex-direction: column;

width: 100%;
height: 80%;
height: 100%;

position: relative;
}

.book__container {
width: 100%;
height: 80%;
height: 90%;

margin: 0 auto;
}
Expand Down Expand Up @@ -74,5 +74,5 @@
}

.book__section {
transform: translateY(-150%);
transform: translateY(-100%);
}
143 changes: 46 additions & 97 deletions css/footer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,6 @@

width: 100%;
height: 100%;

background-color: #f2f2f2;
}

.footer__banner {
Expand All @@ -24,29 +22,27 @@

border-top: 0.1rem solid rgba(0, 0, 0, 0.1);
border-bottom: 0.1rem solid rgba(0, 0, 0, 0.1);

background-color: aquamarine;
}

.footer__banner--list {
display: flex;
align-items: center;
justify-content: space-between;
justify-content: center;

width: 75%;

margin: 0 auto;

font-size: 0.8rem;
line-height: 3rem;
background-color: bisque;

gap: 5.2%;
}

.footer__banner--item {
position: relative;

white-space: nowrap;
background-color: violet;
}

:where(.footer__banner--title-modal)::before {
Expand Down Expand Up @@ -79,7 +75,7 @@

position: absolute;
top: 80%;
right: -30%;
right: -35%;
z-index: 2;

background: #fff;
Expand All @@ -98,136 +94,89 @@
white-space: nowrap;
}

.footer__banner .footer__banner--list .list--item:not(:first-child)::before {
.footer__banner--item:not(:first-child)::before {
content: '';
width: 0.06rem;
height: 1.2rem;

position: absolute;
top: 50%;
left: -2.7rem;
margin: 0;
transform: translateY(-50%);
content: '';
display: inline-block;
line-height: 1.7rem;
width: 0.1rem;
height: 1.2rem;
vertical-align: middle;
left: -2rem;

background-color: rgba(0, 0, 0, 0.3);
}

.footer__info {
max-width: 128rem;
padding: 0 0 5rem;
width: 75%;
margin: 0 auto;

text-align: center;
color: hsla(0, 0%, 7%, 0.5);
font-size: 1.1rem;
}

.footer__info .footer__info--content {
padding: 0;
position: relative;
.footer__info--container {
display: flex;
position: relative;
justify-content: space-between;

width: 100%;
margin-top: 3rem;
box-sizing: border-box;
margin-top: 2rem;
}

.footer__info--content .footer__box {
padding-left: 2.2rem;
.footer__info--wrapper {
display: flex;
width: 50%;
margin: 0;
overflow: hidden;
}

.footer__info--content .footer__box:last-child::after {
content: '';
display: block;
position: absolute;
left: 50%;
top: 0;
width: 0.1rem;
height: 100%;
margin-left: -0.05rem;
background-color: rgba(0, 0, 0, 0.08);
}
.footer__info--content .footer__box h2 {
margin-right: 1rem;
white-space: nowrap;
display: block;
margin-bottom: 1rem;
font-size: 1.5rem;
margin-bottom: 1rem;
font-size: 1.5rem;
font-weight: 700;
line-height: 1.7rem;
color: #111;
text-align: left;
}
width: 48%;

.footer__content--address {
max-width: none;
margin: 0;
padding: 0;
font-size: 1.2rem;
font-size: 0.8rem;
color: #666;
text-align: left;
line-height: 1.7rem;
line-height: 1.3rem;
}

.footer__content--address ul li {
.footer__info--wrapper:last-child::after {
display: block;
}
content: '';

.footer__content--address ul li a {
color: blue;
text-decoration: underline;
}
width: 0.1rem;
height: 100%;

.footer__content--tel {
max-width: none;
padding: 0;
font-size: 1.2rem;
color: #666;
text-align: left;
line-height: 1.7rem;
}
position: absolute;
left: 50%;
top: 0;

.footer__content--tel .tel-service {
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 1rem;
background-color: rgba(0, 0, 0, 0.08);
}

.transaction-title {
font-size: 1.2rem;
margin-right: 1rem;
line-height: 1.7rem;
margin-top: 1rem;
.footer__info--title {
margin-right: 3%;

font-size: 1rem;
font-weight: 700;
line-height: 1.3rem;
white-space: nowrap;

color: #111;
}

.service-title {
font-size: 1.2rem;
margin-right: 1rem;
line-height: 1.7rem;
.footer__info--content-title {
margin-top: 1rem;

color: black;

font-weight: 700;
color: #111;
}

.footer__box a {
.footer__info--address-tag {
color: blue;

font-weight: 400;
text-decoration: underline;
}

.footer__content--notice {
.footer__info--bottom {
margin-top: 1rem;
width: 90%;
line-height: 1.8rem;
display: flex;
text-align: start;
align-items: start;

color: rgba(0, 0, 0, 0.3);
}
2 changes: 1 addition & 1 deletion css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
*/

html {
height: 600%;
height: 590%;

font-size: 16px;
box-sizing: border-box;
Expand Down
56 changes: 28 additions & 28 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1497,35 +1497,35 @@ <h1 class="banner--title-top">이벤트</h1>
</ul>
</div>
<div class="footer__info">
<div class="footer__info--content">
<div class="footer__box">
<h2 class="footer__title">(주)인터파크트리플</h2>
<div class="footer__content">
<div class="footer__content--address">
<ul class="address">
<div class="footer__info--container">
<div class="footer__info--wrapper">
<h2 class="footer__info--title">(주)인터파크트리플</h2>
<div class="footer__info--content">
<div>
<ul class="footer__info--address-wrapper">
<li>서울시 서초구 강남대로447 (서초동, 남서울빌딩)</li>
<li>호스팅서비스제공자 (주)인터파크커머스 | 대표이사 김동식</li>
<li>
사업자등록번호 422-81-03185
<a class="item--block" href="javascript:void(0)">사업자정보확인</a>통신판매업신고 2023-서울서초-0823
<a class="footer__info--address-tag" href="javascript:void(0)">사업자정보확인</a>통신판매업신고 2023-서울서초-0823
</li>
</ul>
</div>
<div class="footer__content--tel">
<div class="tel-service">
<div class="service-title">
<div>
<div>
<div class="footer__info--content-title">
고객센터
<a class="item--block" href="javascript:void(0)">쇼핑1:1문의</a>
<a class="footer__info--address-tag" href="javascript:void(0)">쇼핑1:1문의</a>
|
<a class="item--block" href="javascript:void(0)">도서1:1문의</a>
<a class="footer__info--address-tag" href="javascript:void(0)">도서1:1문의</a>
</div>
<ul>
<li>쇼핑 1588-1555 | 도서 1577-2555</li>
<li>팩스 02-6924-9050 | 이메일 helpshop@interparkshop.com</li>
</ul>
</div>
<div class="tel-transaction">
<div class="transaction-title">
<div class="footer__info--content-title">
<span>전자금융거래 분쟁처리 담당</span>
</div>
<ul>
Expand All @@ -1534,42 +1534,42 @@ <h2 class="footer__title">(주)인터파크트리플</h2>
</ul>
</div>
</div>
<div class="footer__content--notice">
<div class="footer__info--bottom">
<p>
(주)인터파크트리플은 인터파크티켓, 인터파크투어의 통신판매중개자로서 통신판매의 당사자가 아니므로, 개별 판매자가 등록한 오픈마켓 상품에 대해서 (주)인터파크트리플은
일체 책임을 지지 않습니다. Copyright ⓒ InterparkTriple Corp. All Rights Reserved.
</p>
</div>
</div>
</div>
<div class="footer__box">
<h2 class="footer__title">(주)인터파크커머스</h2>
<div class="footer__content">
<div class="footer__content--address">
<ul class="address">
<div class="footer__info--wrapper">
<h2 class="footer__info--title">(주)인터파크커머스</h2>
<div class="footer__info--content">
<div>
<ul class="footer__info--address-wrapper">
<li>서울시 서초구 강남대로447 (서초동, 남서울빌딩)</li>
<li>호스팅서비스제공자 (주)인터파크커머스 | 대표이사 김동식</li>
<li>
사업자등록번호 422-81-03185
<a class="item--block" href="javascript:void(0)">사업자정보확인</a>통신판매업신고 2023-서울서초-0823
<a class="footer__info--address-tag" href="javascript:void(0)">사업자정보확인</a>통신판매업신고 2023-서울서초-0823
</li>
</ul>
</div>
<div class="footer__content--tel">
<div class="tel-service">
<div class="service-title">
<div>
<div>
<div class="footer__info--content-title">
고객센터
<a class="item--block" href="javascript:void(0)">쇼핑1:1문의</a>
<a class="footer__info--address-tag" href="javascript:void(0)">쇼핑1:1문의</a>
|
<a class="item--block" href="javascript:void(0)">도서1:1문의</a>
<a class="footer__info--address-tag" href="javascript:void(0)">도서1:1문의</a>
</div>
<ul>
<li>쇼핑 1588-1555 | 도서 1577-2555</li>
<li>팩스 02-6924-9050 | 이메일 helpshop@interparkshop.com</li>
</ul>
</div>
<div class="tel-transaction">
<div class="transaction-title">
<div>
<div class="footer__info--content-title">
<span>전자금융거래 분쟁처리 담당</span>
</div>

Expand All @@ -1579,7 +1579,7 @@ <h2 class="footer__title">(주)인터파크커머스</h2>
</ul>
</div>
</div>
<div class="footer__content--notice">
<div class="footer__info--bottom">
<p>
(주)인터파크커머스는 인터파크쇼핑, 인터파크도서의 통신판매중개자로서 통신판매의 당사자가 아니므로, 개별 판매자가 등록한 오픈마켓 상품에 대해서 주식회사
인터파크커머스는 일체 책임을 지지 않습니다.
Expand Down
Loading