diff --git a/Login/login.css b/Login/login.css new file mode 100644 index 00000000..ef4974e3 --- /dev/null +++ b/Login/login.css @@ -0,0 +1,145 @@ +html, +body { + margin: 0; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +main { + margin-top: 70px; + background-color: #ffffff; +} + +.login_main { + display: grid; + justify-content: center; + align-items: center; + height: 618px; + grid-template-rows: 1fr 3fr; +} + +.login_header { + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +/*login_content */ +.login_content { + text-align: left; + width: 640px; +} + +.login_content > h3 { + font-size: 18px; + font-weight: 700; + color: #1f2937; + margin-bottom: 16px; +} + +/*input */ +.input_wrapper { + display: flex; + align-items: center; + background-color: #f3f4f6; + height: 40px; + border-radius: 12px; + padding: 16px 24px; + margin-bottom: 16px; + position: relative; + border: 2px solid transparent; +} + +.input_wrapper:focus-within { + border-color: #3692ff; /* 포커스 상태 테두리 색상 */ +} + +input { + border: none; + background-color: transparent; /* 투명 배경 */ + outline: none; + flex: 1; + font-size: 16px; +} + +input::placeholder { + font-size: 16px; + font-weight: 400; + line-height: 26px; + color: #9ca3af; +} + +.input_icon { + display: flex; + width: 24px; + height: 24px; + justify-content: center; + align-items: center; + cursor: pointer; +} + +.btn_login2 { + width: 640px; + height: 56px; + background-color: #9ca3af; + color: #f3f4f6; + border: none; + border-radius: 40px; + padding: 16px 124px; + cursor: pointer; + font-size: 20px; + font-weight: 600; +} + +/*sns_login*/ +.sns_login { + display: flex; + margin-top: 24px; + width: 100%; + height: 74px; + background-color: #e6f2ff; + align-items: center; + border-radius: 8px; +} + +.sns_login_content { + width: 594px; + height: 42px; + display: flex; + text-align: center; + align-items: center; + color: #1f2937; + font-size: 16px; + justify-content: space-between; + font-weight: 500; +} + +.sns_login_text { + font-size: 16px; + margin-left: 15px; + font-weight: 500; +} + +.sns_link { + color: #e6f2ff; +} + +.sns_login_icon { + width: 42px; + height: 42px; + cursor: pointer; +} + +.first_text { + font-size: 14px; + margin-top: 15px; + text-align: center; + font-weight: 500; +} + +.signup-link { + color: #3692ff; +} diff --git a/Login/login.html b/Login/login.html new file mode 100644 index 00000000..e206ecc3 --- /dev/null +++ b/Login/login.html @@ -0,0 +1,71 @@ + + + + 로그인 + + + + + + +
+
+ + +
+
+ + diff --git a/Signup/signup.css b/Signup/signup.css new file mode 100644 index 00000000..b59233f9 --- /dev/null +++ b/Signup/signup.css @@ -0,0 +1,13 @@ +main { + margin-top: 70px; + background-color: #ffffff; +} + +.signup_main { + display: grid; + width: 640px; + height: 842px; + justify-content: center; + align-items: center; + grid-template-rows: 1fr 3fr; +} diff --git a/Signup/signup.html b/Signup/signup.html new file mode 100644 index 00000000..df864888 --- /dev/null +++ b/Signup/signup.html @@ -0,0 +1,91 @@ + + + + 회원가입 + + + + + + +
+
+ + +
+
+ + diff --git a/img/bottom_main.png b/img/bottom_main.png deleted file mode 100644 index 3f278e35..00000000 Binary files a/img/bottom_main.png and /dev/null differ diff --git a/img/bottom_main.svg b/img/bottom_main.svg new file mode 100644 index 00000000..ed1d4ec0 --- /dev/null +++ b/img/bottom_main.svg @@ -0,0 +1,111 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/hotitem.png b/img/hotitem.png deleted file mode 100644 index 25a836fd..00000000 Binary files a/img/hotitem.png and /dev/null differ diff --git a/img/hotitem.svg b/img/hotitem.svg new file mode 100644 index 00000000..bc38d706 --- /dev/null +++ b/img/hotitem.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/icon_facebook.png b/img/icon_facebook.png deleted file mode 100644 index 93506ba7..00000000 Binary files a/img/icon_facebook.png and /dev/null differ diff --git a/img/icon_facebook.svg b/img/icon_facebook.svg new file mode 100644 index 00000000..8491c2f8 --- /dev/null +++ b/img/icon_facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/icon_instagram.png b/img/icon_instagram.png deleted file mode 100644 index 272c3841..00000000 Binary files a/img/icon_instagram.png and /dev/null differ diff --git a/img/icon_instagram.svg b/img/icon_instagram.svg new file mode 100644 index 00000000..c83306f8 --- /dev/null +++ b/img/icon_instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/icon_twitter.png b/img/icon_twitter.png deleted file mode 100644 index 45c46baa..00000000 Binary files a/img/icon_twitter.png and /dev/null differ diff --git a/img/icon_twitter.svg b/img/icon_twitter.svg new file mode 100644 index 00000000..14a6069a --- /dev/null +++ b/img/icon_twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/icon_youtube.png b/img/icon_youtube.png deleted file mode 100644 index 0b4c07a8..00000000 Binary files a/img/icon_youtube.png and /dev/null differ diff --git a/img/icon_youtube.svg b/img/icon_youtube.svg new file mode 100644 index 00000000..fa219e03 --- /dev/null +++ b/img/icon_youtube.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/img/login/btn_showpw.svg b/img/login/btn_showpw.svg new file mode 100644 index 00000000..45ad6232 --- /dev/null +++ b/img/login/btn_showpw.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/login/icon_google.svg b/img/login/icon_google.svg new file mode 100644 index 00000000..39de6337 --- /dev/null +++ b/img/login/icon_google.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/img/login/icon_kakao.svg b/img/login/icon_kakao.svg new file mode 100644 index 00000000..15dc4d0f --- /dev/null +++ b/img/login/icon_kakao.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/img/login/login_logo.svg b/img/login/login_logo.svg new file mode 100644 index 00000000..8100d2f6 --- /dev/null +++ b/img/login/login_logo.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/img/logo.png b/img/logo.png deleted file mode 100644 index e5f101f8..00000000 Binary files a/img/logo.png and /dev/null differ diff --git a/img/logo.svg b/img/logo.svg new file mode 100644 index 00000000..763adc2c --- /dev/null +++ b/img/logo.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/img/register.png b/img/register.png deleted file mode 100644 index a3f91e53..00000000 Binary files a/img/register.png and /dev/null differ diff --git a/img/register.svg b/img/register.svg new file mode 100644 index 00000000..75dbcc76 --- /dev/null +++ b/img/register.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/search.png b/img/search.png deleted file mode 100644 index 8cea15aa..00000000 Binary files a/img/search.png and /dev/null differ diff --git a/img/search.svg b/img/search.svg new file mode 100644 index 00000000..0d80c6c1 --- /dev/null +++ b/img/search.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/start_main.png b/img/start_main.png deleted file mode 100644 index d254fd5a..00000000 Binary files a/img/start_main.png and /dev/null differ diff --git a/img/start_main.svg b/img/start_main.svg new file mode 100644 index 00000000..1b3f1345 --- /dev/null +++ b/img/start_main.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html index 2255bf2a..50fb3760 100644 --- a/index.html +++ b/index.html @@ -1,80 +1,121 @@ - - 판다마켓 - - - - + + 판다마켓 + + + + + - + +
+ +
-
- -
+
+
+
+ +

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

+ +
+
-
-
-
- -

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

- -
-
+
+ +
+

Hot Item

+

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

+

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

+
+
-
- -
-

Hot Item

-

인기 상품을
확인해 보세요

-

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

-
-
+
+
+

Search

+

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

+

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

+
+ +
-
-
-

Search

-

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

-

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

-
- -
+
+ +
+

Register

+

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

+

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

+
+
-
- -
-

Register

-

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

-

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

-
-
+
+
+ +

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

+
+
-
-
- -

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

-
-
- - - -
- - \ No newline at end of file + +
+ + diff --git a/main.css b/main.css index 38ba4982..243871ff 100644 --- a/main.css +++ b/main.css @@ -1,218 +1,211 @@ - -/*전체 요소 마진 제거*/ -* { - margin: 0; - padding: 0; - box-sizing: border-box; +/* 글자 위 아래 공백 추가 */ +.spaced_font { + line-height: 1.3; } /* header */ header { - position: fixed; - top: 0; - width: 100%; - background-color: white; - z-index: 1; -} - header > nav{ - max-width: 1920px; - height : 70px; - margin: 0 auto; - display: flex; - align-items: center; - justify-content: space-between; - padding: 0 200px; - } - .btn_login { - width : 128px; - height : 48px; - background-color: #3692FF; - color: #ffffff; - border: none; - border-radius: 8px; - padding: 12px 23px; - cursor: pointer; - font-size: 16px; - font-weight : 600; - } - + position: fixed; + top: 0; + width: 100%; + background-color: white; + z-index: 1; +} +header > nav { + max-width: 1920px; + height: 70px; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 200px; +} +.btn_login { + width: 128px; + height: 48px; + background-color: #3692ff; + color: #ffffff; + border: none; + border-radius: 8px; + padding: 12px 23px; + cursor: pointer; + font-size: 16px; + font-weight: 600; +} main { - margin-top: 70px; + margin-top: 70px; } /* start */ .start_main { - width: 100%; - height: 540px; - background-color: #cfe5ff; - } + width: 100%; + height: 540px; + background-color: #cfe5ff; +} .start_main2 { - max-width: 1110px; - height: 340px; - position: relative; - margin: 0 auto; - top:200px; -} - .start_main2 > img { - position: absolute; - bottom: 0; - right: 0; - height: 340px; - } - .start_main2 > h1 { - font-size: 40px; - font-weight: 700; - color: #374151; - position: absolute; - top: 20px; - } - .btn_item { - margin-top : 190px; - width : 357px; - height : 56px; - background-color: #3692FF; - color: #ffffff; - border: none; - border-radius: 40px; - padding: 16px 124px; - cursor: pointer; - font-size: 20px; - font-weight : 600; - text-align: center; - white-space: nowrap; /* 텍스트 줄바꿈 방지*/ - } + max-width: 1110px; + height: 340px; + position: relative; + margin: 0 auto; + top: 200px; +} +.start_main2 > img { + position: absolute; + bottom: 0; + right: 0; + height: 340px; +} +.start_main2 > h1 { + font-size: 40px; + font-weight: 700; + color: #374151; + position: absolute; + top: 20px; +} +.btn_item { + margin-top: 190px; + width: 357px; + height: 56px; + background-color: #3692ff; + color: #ffffff; + border: none; + border-radius: 40px; + padding: 16px 124px; + cursor: pointer; + font-size: 20px; + font-weight: 600; + text-align: center; + white-space: nowrap; /* 텍스트 줄바꿈 방지*/ +} /*section */ .section { - position: relative; - width: 100%; - height: 720px; - display: flex; - align-items: center; - justify-content: center; - gap: 40px; -} - .section_img { - width: 579px; - height: 444px; - } + position: relative; + width: 100%; + height: 720px; + display: flex; + align-items: center; + justify-content: center; + gap: 40px; +} +.section_img { + width: 579px; + height: 444px; +} - .section_text{ - text-align: left; - } +.section_text { + text-align: left; +} - .section_text2 { - text-align: right; - } +.section_text2 { + text-align: right; +} - .section_text > h2, - .section_text2 > h2 { - color: #3692ff; - font-size: 18px; - font-weight: 700; - margin-bottom: 10px; - } - .section_text > h3, - .section_text2 > h3 { - color: #374151; - font-size: 40px; - font-weight: 700; - letter-spacing: 0.8px; - margin-bottom: 20px; - } - .section_text > p, - .section_text2 > p { - color: #374151; - font-size: 24px; - font-weight: 500; - margin-top: 20px; - } +.section_text > h2, +.section_text2 > h2 { + color: #3692ff; + font-size: 18px; + font-weight: 700; + margin-bottom: 10px; +} +.section_text > h3, +.section_text2 > h3 { + color: #374151; + font-size: 40px; + font-weight: 700; + letter-spacing: 0.8px; + margin-bottom: 20px; +} +.section_text > p, +.section_text2 > p { + color: #374151; + font-size: 24px; + font-weight: 500; + margin-top: 20px; +} /* bottom */ .bottom_main { - width: 100%; - height: 540px; - background-color: #cfe5ff; + width: 100%; + height: 540px; + background-color: #cfe5ff; } .bottom_main2 { - max-width: 1110px; - height: 340px; - position: relative; - margin: 0 auto; - top:200px; -} - - .bottom_main2 > img { - position: absolute; - bottom: 0; - right: 0; - height: 340px; - } - .bottom_main2 > h1 { - font-size: 40px; - font-weight: 700; - color: #374151; - position: absolute; - top: 20px; - } + max-width: 1110px; + height: 340px; + position: relative; + margin: 0 auto; + top: 200px; +} + +.bottom_main2 > img { + position: absolute; + bottom: 0; + right: 0; + height: 340px; +} + +.bottom_main2 > h2 { + font-size: 40px; + font-weight: 700; + color: #374151; + position: absolute; + top: 20px; +} /* footer */ footer { - background-color: #111827; - height: 160px; + background-color: #111827; + height: 160px; } - footer > div { - width: 100%; - margin: 0 auto; - display: flex; - align-items: center; - justify-content: space-evenly; - padding-top: 20px; - } - - .copyright { - color: #9ca3af; - font-size: 16px; - font-weight: 400; - } - - .footer_nav { - display: flex; - gap: 40px; - } - - .footer_nav>a { - color: #e5e7eb; - font-size: 16px; - font-weight: 400; - text-decoration: none; - } - - .snsicons { - width: 116px; - display: flex; - justify-content: space-evenly; - } - - .snsicons img { - height: 20px; - } - +footer > div { + width: 100%; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: space-evenly; + padding-top: 20px; +} +.copyright { + color: #9ca3af; + font-size: 16px; + font-weight: 400; +} +.footer_nav { + display: flex; + gap: 40px; +} -@media (max-width: 1920px) { - header > nav { - padding: 0 200px; - } +.footer_nav > a { + color: #e5e7eb; + font-size: 16px; + font-weight: 400; + text-decoration: none; } +.snsicons { + width: 116px; + display: flex; + justify-content: space-evenly; +} + +.snsicons img { + height: 20px; +} + +@media (max-width: 1920px) { + header > nav { + padding: 0 200px; + } +} @media (max-width: 1120px) { - header > nav { - padding: 0 50px; - } -} \ No newline at end of file + header > nav { + padding: 0 50px; + } +} diff --git a/reset.css b/reset.css new file mode 100644 index 00000000..ff0b5eeb --- /dev/null +++ b/reset.css @@ -0,0 +1,64 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +/* prettier 비활성화 */ +/* prettier-ignore */ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +}