diff --git a/.github/delete-merged-branch-config.yml b/.github/workflows/delete-merged-branch-config.yml similarity index 76% rename from .github/delete-merged-branch-config.yml rename to .github/workflows/delete-merged-branch-config.yml index 2a6d27bef..d54933615 100644 --- a/.github/delete-merged-branch-config.yml +++ b/.github/workflows/delete-merged-branch-config.yml @@ -4,12 +4,11 @@ on: pull_request: types: [closed] -permissions: - pull-requests: write - jobs: delete-branch: runs-on: ubuntu-latest steps: - name: delete branch uses: SvanBoxel/delete-merged-branch@main + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..aef844305 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/css/main.css b/css/main.css new file mode 100644 index 000000000..8e31f39bd --- /dev/null +++ b/css/main.css @@ -0,0 +1,477 @@ +@charset "utf-8"; + +/* 공통-가운데영역 */ +.container { + max-width: 1150px; + padding: 0 20px; + margin: 0 auto; +} + +/* 공통-레이아웃 */ +p.title { + font-weight: 700; + font-size: 40px; + line-height: 1.4; +} + +.infoBox { + display: flex; + height: 444px; + border-radius: 12px; + overflow: hidden; +} + +.infoBox .imgBox { + flex-shrink: 0; + width: 580px; +} + +.infoBox .imgBox img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; +} + +.infoBox .infoText { + display: block; + margin-bottom: 12px; + color: #3692FF; + font-size: 18px; + line-height: 1.44; + font-weight: 700; +} + +.infoBox .textBox { + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + padding: 0 21px 0 52px; + background-color: #FCFCFC; +} + +.infoBox .textBox p.title { + margin-bottom: 24px; +} + +.infoBox .textBox p.text { + font-size: 24px; + line-height: 1.33; + font-size: 24px; + font-weight: 500; +} + +@media (max-width: 1024px) { + + p.title { + font-size: 27px; + } + + .infoBox { + height: 362px; + } + + .infoBox .imgBox { + width: 450px; + } + + .infoBox .textBox p.title { + margin-bottom: 17px; + } + +} + +@media (max-width: 768px) { + + p.title { + font-size: 22px; + } + + .infoBox { + height: 280px; + } + + .infoBox .imgBox { + width: 329px; + } + + .infoBox .textBox p.text { + font-size: 18px; + } + +} + +/* 공통-영역 */ +#section02 .container, +#section03 .container, +#section04 .container { + max-width: 1028px; +} + +#section02, +#section03, +#section04 { + padding: 138px 0; +} + +@media (max-width: 1024px) { + + #section02, + #section03, + #section04 { + padding: 60px 0; + } + + +} + +@media (max-width: 768px) { + + #section02, + #section03, + #section04 { + padding: 30px 0; + } + +} + +/* 공통-헤더 */ +#header { + position: fixed; + top: 0; + left: 0; + right: 0; + height: 70px; + background-color: #fff; + z-index: 99; +} + +#header .header { + height: 70px; + display: flex; + align-items: center; + justify-content: space-between; +} + +#header .logo h1 a, +#header .logo h1 a img { + display: block; +} + +#header .loginBox a { + display: block; + width: 128px; + height: 48px; + line-height: 48px; + background-color: #3692FF; + border-radius: 8px; + text-align: center; + color: #F3F4F6; + font-weight: 600; + transition: all .3s; +} + +#header .loginBox a:hover { + background-color: #1967D6; +} + +@media (max-width: 1920px) { + + #header .container { + max-width: 1510px; + padding: 0 200px; + } + +} + +/* 공통-푸터 */ +#footer { + padding: 33px 0 0; + height: 160px; + background-color: #111827; +} + +#footer .footer { + display: flex; + align-items: center; + justify-content: space-between; +} + +#footer .text { + display: block; + color: #9CA3AF; +} + +#footer .footerLink { + display: flex; + align-items: center; + gap: 0 30px; +} + +#footer .footerLink li a { + display: block; + color: #E5E7EB; +} + +#footer .text, +#footer .footerLink, +#footer .snsLink { + flex-shrink: 0; +} + +#footer .text, +#footer .snsLink { + width: 116px; +} + +#footer .snsLink { + display: flex; + justify-content: flex-end; + align-items: center; + gap: 0 13px; +} + +#footer .snsLink li a { + display: block; +} + +#footer .snsLink li a.faceBook { + width: 18px; + height: 18px; + background: url(../images/facebook_icon.svg)no-repeat center; + background-size: cover; +} + +#footer .snsLink li a.twitter { + width: 19px; + height: 15px; + background: url(../images/twitter_icon.svg)no-repeat center; + background-size: cover; +} + +#footer .snsLink li a.youtube { + width: 20px; + height: 13px; + background: url(../images/youtube_icon.svg)no-repeat center; + background-size: cover; +} + +#footer .snsLink li a.insta { + width: 17px; + height: 17px; + background: url(../images/insta_icon.svg)no-repeat center; + background-size: cover; +} + + +/* 영역1 */ +#section01 { + background-color: #CFE5FF; +} + +#section01 .section01 { + position: relative; + padding: 240px 0 0; + height: 540px; + z-index: 1; +} + +#section01 .section01::after { + content: ''; + width: 746px; + height: 340px; + position: absolute; + right: 0; + bottom: 0; + background: url(../images/img01.png) no-repeat center; + background-size: cover; + z-index: -1; +} + +#section01 .title { + margin-bottom: 32px; +} + +#section01 .view { + display: block; + width: 357px; + height: 56px; + line-height: 58px; + border-radius: 50px; + text-align: center; + background-color: #3692FF; + color: #fff; + transition: all .3s; +} + +#section01 .view:hover { + background-color: #1967D6; +} + +@media (max-width: 1024px) { + + + #section01 .section01 { + padding: 206px 0 0; + height: 437px; + } + + #section01 .section01::after { + width: 616px; + height: 275px; + } + + #section01 .title { + margin-bottom: 23px; + } + + #section01 .view { + width: 234px; + } + +} + +@media (max-width: 768px) { + + #section01 .section01 { + padding: 160px 0 0; + } + + #section01 .section01 { + height: 354px; + } + + #section01 .section01::after { + width: 484px; + height: 217px; + } + + #section01 .view { + width: 188px; + height: 45px; + line-height: 47px; + } + +} + +/* 영역2 */ +@media (max-width: 1024px) { + + #section02 { + padding: 100px 0 60px; + } + +} + +@media (max-width: 768px) { + + #section02 { + padding: 60px 0 30px; + } + +} + +/* 영역3 */ +#section03 .infoBox { + flex-direction: row-reverse; +} + +#section03 .infoBox .textBox { + padding: 0 64px 0 48px; + text-align: right; +} + +@media (max-width: 1024px) { + + .infoBox .textBox { + padding: 0 20px 0 48px; + } + +} + +/* 영역4 */ +@media (max-width: 1024px) { + + #section04 { + padding: 60px 0 100px; + } + +} + +@media (max-width: 768px) { + + #section04 { + padding: 30px 0 60px; + } + +} + +/* 영역5 */ +#section05 { + position: relative; + background-color: #CFE5FF; +} + +#section05::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 138px; + background-color: #fcfcfc; +} + +#section05 .section05 { + position: relative; + height: 678px; + z-index: 1; +} + +#section05 .section05::before { + content: ''; + position: absolute; + bottom: 0; + right: 0; + width: 746px; + height: 397px; + background: url(../images/img03.png)no-repeat center; + background-size: cover; + z-index: -1; +} + +#section05 .section05 { + padding: 394px 0 0; +} + +@media (max-width: 1024px) { + + #section05 .section05 { + padding: 379px 0 0; + height: 637px; + } + + #section05::after { + height: 100px; + } + +} + +@media (max-width: 768px) { + + #section05 .section05 { + height: 430px; + padding: 253px 0 0; + } + + #section05 .section05::before { + width: 495px; + height: 263px; + } + + #section05::after { + height: 60px; + } + +} \ No newline at end of file diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 000000000..c785a9223 --- /dev/null +++ b/css/reset.css @@ -0,0 +1,55 @@ +/* 초기화 */ +* { + box-sizing: border-box; +} + +html, +body { + height: 100%; +} + +body { + margin: 0; + color: #374151; + font-family: 'pretendard', sans-serif; + line-height: 1.2; +} + +input, +button { + font-family: 'pretendard', sans-serif; + padding: 0; + border: 0; +} + +button { + cursor: pointer; +} + +a { + color: #374151; + text-decoration: none; +} + +p { + margin: 0; +} + +ul { + margin: 0; + padding: 0; +} + +ul, +li { + list-style: none; +} + +.blind { + position: absolute; + clip: rect(0 0 0 0); + width: 1px; + height: 1px; + margin: -1px; + overflow: hidden; +} \ No newline at end of file diff --git a/css/sub.css b/css/sub.css new file mode 100644 index 000000000..8f78594d1 --- /dev/null +++ b/css/sub.css @@ -0,0 +1,171 @@ +#wrap, +#main { + height: 100%; +} + +#main { + padding: 100px 0; +} + +:root { + --color01: #3692FF; + --color02: #1F2937; + --color03: #9CA3AF; + --color04: #F3F4F6; +} + +/* 로그인 */ +.loginWrap { + height: 100%; + display: flex; + align-items: center; +} + +.loginBox { + display: flex; + flex-direction: column; + justify-content: center; + padding: 0 20px; + max-width: 680px; + width: 100%; + margin: auto; +} + +.loginBox h1 { + margin-bottom: 40px; +} + +.loginBox h1 a, +.loginBox h1 a img { + display: block; +} + +.loginBox h1 a img { + margin: 0 auto; +} + +.loginBox form .inputBox { + margin-bottom: 24px; +} + +.loginBox form .inputBox label { + margin-bottom: 16px; + display: block; + font-size: 18px; + color: var(--color02); + font-weight: 700; + line-height: 1.4; +} + +.loginBox form .inputBox input { + width: 100%; + padding: 0 0 0 24px; + height: 56px; + background-color: var(--color04); + border-radius: 12px; +} + +.loginBox form .inputBox .box { + position: relative; +} + +.loginBox form .inputBox .pwToggleBtn { + width: 24px; + height: 24px; + position: absolute; + top: 50%; + transform: translateY(-50%); + right: 24px; + background: url(../images/pwbtn_icon.svg)no-repeat center; +} + +.loginBox form .inputBox .pwToggleBtn.hidden { + background: url(../images/pwbtn_hidden_icon.svg)no-repeat center; +} + +.loginBox form .inputBox input::placeholder { + color: var(--color03); + font-size: 16px; +} + +.loginBox form .loginBtn { + margin-bottom: 24px; + display: block; + width: 100%; + height: 56px; + line-height: 56px; + background-color: var(--color03); + color: #fff; + font-size: 20px; + font-weight: 600; + border-radius: 40px; +} + +.loginBox .snsLinkBox { + margin-bottom: 24px; + padding: 0 23px; + display: flex; + align-items: center; + justify-content: space-between; + height: 74px; + background-color: #E6F2FF; + border-radius: 8px; +} + +.loginBox .snsLinkBox span { + padding-top: 3.5px; + color: var(--color02); + font-weight: 500; +} + +.loginBox .snsLinkBox .snsLink { + display: flex; + gap: 0 16px; +} + +.loginBox .snsLinkBox .snsLink li a, +.loginBox .snsLinkBox .snsLink li a img { + display: block; +} + +.loginBox .infoLink { + font-size: 14px; + font-weight: 500; + color: var(--color02); + line-height: 1.7; + text-align: center; +} + +.loginBox .infoLink a { + color: var(--color01); + text-decoration: underline; +} + +/* 로그인-포커스 */ +.loginBox form .inputBox input:focus { + outline-color: var(--color01); +} + +@media (max-width: 1024px) { + + .loginBox h1 a img { + width: 200px; + } + + .loginBox form .inputBox label { + margin-bottom: 13px; + font-size: 16px; + } + + .loginBox form .inputBox input::placeholder { + font-size: 14px; + } + + .loginBox form .loginBtn { + font-size: 18px; + } + +} + + + diff --git a/images/facebook_icon.svg b/images/facebook_icon.svg new file mode 100644 index 000000000..3a24fb4bf --- /dev/null +++ b/images/facebook_icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/google_icon.svg b/images/google_icon.svg new file mode 100644 index 000000000..39de6337b --- /dev/null +++ b/images/google_icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/images/img01.png b/images/img01.png new file mode 100644 index 000000000..6bfc14e8a Binary files /dev/null and b/images/img01.png differ diff --git a/images/img02-1.jpg b/images/img02-1.jpg new file mode 100644 index 000000000..563071d33 Binary files /dev/null and b/images/img02-1.jpg differ diff --git a/images/img02-2.jpg b/images/img02-2.jpg new file mode 100644 index 000000000..1ffc72d99 Binary files /dev/null and b/images/img02-2.jpg differ diff --git a/images/img02-3.jpg b/images/img02-3.jpg new file mode 100644 index 000000000..c0485eeb5 Binary files /dev/null and b/images/img02-3.jpg differ diff --git a/images/img03.png b/images/img03.png new file mode 100644 index 000000000..a7cd8fc8d Binary files /dev/null and b/images/img03.png differ diff --git a/images/insta_icon.svg b/images/insta_icon.svg new file mode 100644 index 000000000..389855097 --- /dev/null +++ b/images/insta_icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/kakao_icon.svg b/images/kakao_icon.svg new file mode 100644 index 000000000..15dc4d0ff --- /dev/null +++ b/images/kakao_icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/images/logo.png b/images/logo.png new file mode 100644 index 000000000..f5467bfcc Binary files /dev/null and b/images/logo.png differ diff --git a/images/logo02.png b/images/logo02.png new file mode 100644 index 000000000..56d535fdd Binary files /dev/null and b/images/logo02.png differ diff --git a/images/pwbtn_hidden_icon.svg b/images/pwbtn_hidden_icon.svg new file mode 100644 index 000000000..35a75305e --- /dev/null +++ b/images/pwbtn_hidden_icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/pwbtn_icon.svg b/images/pwbtn_icon.svg new file mode 100644 index 000000000..4d515a023 --- /dev/null +++ b/images/pwbtn_icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/images/twitter_icon.svg b/images/twitter_icon.svg new file mode 100644 index 000000000..ad45285ac --- /dev/null +++ b/images/twitter_icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/youtube_icon.svg b/images/youtube_icon.svg new file mode 100644 index 000000000..beffba93f --- /dev/null +++ b/images/youtube_icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/index.html b/index.html new file mode 100644 index 000000000..e8cc3ed1c --- /dev/null +++ b/index.html @@ -0,0 +1,272 @@ + + + + + + + + + + 판다마켓 + + + + + + + +
+ + + + +
+
+
+
+ +

+ 일상의 모든 물건을
+ 거래해 보세요 +

+ + + 구경하러가기 + + +
+
+ + +
+ + +
+
+
+
+
+ +
+ + +
+ + + Hot item + + +

+ 인기 상품을
+ 확인해보세요 +

+ +

+ 가장 HOT한 중고거래 물품을
+ 판다 마켓에서 확인해 보세요 +

+ +
+ + +
+ + +
+ + +
+ + +
+ + +
+
+
+
+
+ +
+ + +
+ + + Search + + +

+ 구매를 원하는
+ 상품을 검색하세요 +

+ +

+ 구매하고 싶은 물품은 검색해서
+ 쉽게 찾아보세요 +

+ +
+ + +
+ + +
+ + +
+ + +
+ + +
+
+
+
+
+ +
+ + +
+ + + Register + + +

+ 판매를 원하는
+ 상품을 등록하세요 +

+ +

+ 어떤 물건이든 판매하고 싶은 상품을
+ 쉽게 등록하세요 +

+ +
+ + +
+ + +
+ + +
+ + +
+ + +
+
+
+ +

+ 믿을 수 있는
+ 판다마켓 중고 거래 +

+ + +
+ + +
+ + +
+ + +
+ + + + + +
+ + + + + \ No newline at end of file diff --git a/login.html b/login.html new file mode 100644 index 000000000..dd5922109 --- /dev/null +++ b/login.html @@ -0,0 +1,98 @@ + + + + + + + + + + 로그인 + + + + + + + +
+ +
+
+ +
+

+ + 판다마켓 + +

+ +
+ +
+ +
+ +
+
+ +
+ +
+ + +
+
+ + + +
+ +
+ 간편로그인 + + + +
+ + +

+ 판다마켓이 처음이신가요? + + 회원가입 + +

+ + +
+ + +
+ + +
+ + +
+ + + + + \ No newline at end of file diff --git a/signup.html b/signup.html new file mode 100644 index 000000000..cf892acc6 --- /dev/null +++ b/signup.html @@ -0,0 +1,113 @@ + + + + + + + + + + 회원가입 + + + + + + + +
+
+
+
+

+ + 판다마켓 + +

+ +
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ + +
+
+ +
+ +
+ + +
+
+ + + +
+ +
+ 간편로그인 + + + +
+ + +

+ 이미 회원이신가요? + + 로그인 + +

+ + +
+ + +
+ + +
+ + +
+ + + + + \ No newline at end of file