diff --git a/reset.css b/reset.css new file mode 100644 index 00000000..45a05ecf --- /dev/null +++ b/reset.css @@ -0,0 +1,129 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +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; +} diff --git a/sprint3/commod-form.css b/sprint3/commod-form.css new file mode 100644 index 00000000..0551ea60 --- /dev/null +++ b/sprint3/commod-form.css @@ -0,0 +1,106 @@ +* { + box-sizing: border-box; + font-family: "Pretendard Variable", sans-serif; +} + +body { + margin: 0; + padding: 0; + background-color: #fcfcfc; + color: #1f2937; +} + +.flex-center { + display: flex; + justify-content: center; + align-items: center; +} + +.form-group { + display: flex; + flex-direction: column; + gap: 8px; + text-align: left; + margin-bottom: 20px; +} + +.login-container { + max-width: 640px; + margin: 80px auto; + padding: 40px 30px; + text-align: center; +} + +.logo { + display: flex; + justify-content: center; + margin-bottom: 30px; +} + +.logo img { + height: 104px; + object-fit: contain; +} + +label { + display: block; + font-size: 18px; + margin-bottom: 16px; + font-weight: 700; +} + +.input-wrapper { + position: relative; +} + +.input-wrapper input { + width: 100%; + padding: 12px 40px 12px 12px; + border: none; + background: #f3f4f6; + border-radius: 8px; + font-size: 15px; +} + +.divider-box { + background-color: #e6f2ff; + height: 74px; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 23px; + margin-top: 24px; + border-radius: 8px; +} + +.divider { + font-size: 16px; + font-weight: 500; +} + +.social-login { + display: flex; + justify-content: center; + gap: 16px; +} + +.eye-icon { + position: absolute; + right: 12px; + top: 50%; + transform: translateY(-50%); + cursor: pointer; + width: 24px; + height: 24px; +} + +.social-login img { + width: 36px; + height: 36px; + cursor: pointer; +} + +.social-login a { + width: 42px; + height: 42px; +} diff --git a/sprint3/img/Component 2.png b/sprint3/img/Component 2.png new file mode 100644 index 00000000..64db8acb Binary files /dev/null and b/sprint3/img/Component 2.png differ diff --git a/sprint3/img/Component 3.png b/sprint3/img/Component 3.png new file mode 100644 index 00000000..d38e36cc Binary files /dev/null and b/sprint3/img/Component 3.png differ diff --git a/sprint3/img/Img_home_01.png b/sprint3/img/Img_home_01.png new file mode 100644 index 00000000..ba4fb615 Binary files /dev/null and b/sprint3/img/Img_home_01.png differ diff --git a/sprint3/img/Img_home_02.png b/sprint3/img/Img_home_02.png new file mode 100644 index 00000000..8a6d6b54 Binary files /dev/null and b/sprint3/img/Img_home_02.png differ diff --git a/sprint3/img/Img_home_03.png b/sprint3/img/Img_home_03.png new file mode 100644 index 00000000..6712b443 Binary files /dev/null and b/sprint3/img/Img_home_03.png differ diff --git a/sprint3/img/Img_home_bottom.png b/sprint3/img/Img_home_bottom.png new file mode 100644 index 00000000..ddf1e713 Binary files /dev/null and b/sprint3/img/Img_home_bottom.png differ diff --git a/sprint3/img/Img_home_top.png b/sprint3/img/Img_home_top.png new file mode 100644 index 00000000..ea6d9490 Binary files /dev/null and b/sprint3/img/Img_home_top.png differ diff --git a/sprint3/img/Vector.png b/sprint3/img/Vector.png new file mode 100644 index 00000000..36b751a4 Binary files /dev/null and b/sprint3/img/Vector.png differ diff --git a/sprint3/img/btn_visibility_on_24px (1).png b/sprint3/img/btn_visibility_on_24px (1).png new file mode 100644 index 00000000..a4ad23f0 Binary files /dev/null and b/sprint3/img/btn_visibility_on_24px (1).png differ diff --git a/sprint3/img/btn_visibility_on_24px.png b/sprint3/img/btn_visibility_on_24px.png new file mode 100644 index 00000000..0637b1f3 Binary files /dev/null and b/sprint3/img/btn_visibility_on_24px.png differ diff --git a/sprint3/img/ic_facebook.png b/sprint3/img/ic_facebook.png new file mode 100644 index 00000000..58333d45 Binary files /dev/null and b/sprint3/img/ic_facebook.png differ diff --git a/sprint3/img/ic_instagram.png b/sprint3/img/ic_instagram.png new file mode 100644 index 00000000..7a91d111 Binary files /dev/null and b/sprint3/img/ic_instagram.png differ diff --git a/sprint3/img/ic_youtube.png b/sprint3/img/ic_youtube.png new file mode 100644 index 00000000..f51731d4 Binary files /dev/null and b/sprint3/img/ic_youtube.png differ diff --git a/sprint3/img/logo.png b/sprint3/img/logo.png new file mode 100644 index 00000000..3a755608 Binary files /dev/null and b/sprint3/img/logo.png differ diff --git a/sprint3/img/mobile-logo.png b/sprint3/img/mobile-logo.png new file mode 100644 index 00000000..4510b03d Binary files /dev/null and b/sprint3/img/mobile-logo.png differ diff --git a/sprint3/reset.css b/sprint3/reset.css new file mode 100644 index 00000000..45a05ecf --- /dev/null +++ b/sprint3/reset.css @@ -0,0 +1,129 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +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; +} diff --git a/sprint3/rw-commod.css b/sprint3/rw-commod.css new file mode 100644 index 00000000..50db5e4d --- /dev/null +++ b/sprint3/rw-commod.css @@ -0,0 +1,64 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + list-style: none; + text-decoration: none; +} + +body { + background-color: #fff; + font-family: "Pretendard Variable", sans-serif; + color: #374151; + overflow-x: hidden; +} + +.flex-content { + display: flex; + justify-content: center; + align-items: center; +} + +button { + color: white; + border: none; + cursor: pointer; +} + +section { + width: 100vw; +} + +:root { + --color-primary: #3399ff; + --color-primary-dark: #1b62a9; + --color-text: #374151; + --color-text-light: #8b929e; + --color-background: #fcfcfc; + --color-background-dark: #111827; + --color-banner: #cfe5ff; + + --container-width: 1120px; + --header-height: 70px; + --footer-height: 160px; + + --spacing-xs: 12px; + --spacing-sm: 24px; + --spacing-md: 32px; + --spacing-lg: 60px; + --spacing-xl: 138px; +} + +/* 공통 버튼 스타일 */ +.btn-primary { + background-color: var(--color-primary); + color: white; + border: none; + border-radius: 40px; + font-weight: 600; + cursor: pointer; +} + +.btn-primary:hover { + background-color: var(--color-primary-dark); +} diff --git a/sprint3/rw-index.html b/sprint3/rw-index.html new file mode 100644 index 00000000..9f909b6b --- /dev/null +++ b/sprint3/rw-index.html @@ -0,0 +1,187 @@ + + + + + + 판다마켓 + + + + + + +
+
+
+ + 판다마켓 로고 + + +
+
+
+
+ +
+
+
+

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

+ + +
+ 동네 한 중심에 있는 판다가 손 흔들고 있는 이미지 +
+
+ + +
+
+ 두 판다가 셔츠를 구경하고 있는 이미지 +
+

Hot item

+

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

+

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

+
+
+
+ + +
+
+
+

Search

+

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

+

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

+
+ 돋보기로 상품을 검색하고 있는 이미지 +
+
+ + +
+
+ 판매상품을 요술봉으로 등록하고 있는 모습 +
+

Register

+

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

+

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

+
+
+
+ + +
+
+

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

+ 동네 한 가운데에서 두 판다가 정보를 공유하고 있는 이미지 +
+
+
+ + + + diff --git a/sprint3/rw-style.css b/sprint3/rw-style.css new file mode 100644 index 00000000..177ebb85 --- /dev/null +++ b/sprint3/rw-style.css @@ -0,0 +1,411 @@ +button { + color: white; + border: none; + cursor: pointer; +} + +.gnb { + width: 100%; + height: 70px; + display: flex; + justify-content: center; /* 내부 gnb-inner 중앙 정렬 */ + position: fixed; /* 상단바 고정 */ + top: 0; + left: 0; + z-index: 1000; /* 다른 요소보다 위에 보이도록 */ + background-color: #fff; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.gnb-inner { + width: 100%; + /* 1920 - 400(양쪽 여백) */ + max-width: 1520px; + padding-left: clamp(40px, 10vw, 200px); + padding-right: clamp(40px, 10vw, 200px); + + height: 100%; + display: flex; + justify-content: space-between; + align-items: center; +} + +.gnb img { + height: 40px; + display: block; +} + +.login { + background-color: #3399ff; + padding: 11px 43px; + border-radius: 8px; + font-size: 16px; + font-weight: 600; + color: white; +} + +.login:hover { + background-color: #1b62a9; +} + +.background-blue { + background-color: #cfe5ff; + height: 540px; +} + +.background-blue h1 { + font-size: 40px; + font-weight: 700; + margin-bottom: 20px; +} + +.background-blue button { + padding: 12px 124px; + background-color: #3399ff; + font-size: 20px; + font-weight: 600; + border-radius: 40px; + margin-top: 32px; +} + +.background-blue button:hover { + background-color: #1b62a9; +} + +.top { + z-index: 1; +} + +.home-top { + margin-top: 200px; + max-width: 746px; +} + +main { + background-color: #fcfcfc; +} + +.content-box { + padding-top: 138px; + background-color: #fff; +} + +#content-lastbox { + margin-bottom: 138px; +} + +.content { + display: flex; + width: 100%; + max-width: 988px; + height: auto; + margin: 0 auto; + border-radius: 12px; + background-color: #fcfcfc; + justify-content: space-around; +} + +#section03-text { + text-align: right; +} + +.section-text h1 { + margin-top: 12px; + margin-bottom: 24px; + font-size: clamp(24px, 2.6vw, 40px); + font-weight: 700; +} + +.section-text h2 { + margin-top: 103px; + color: #3399ff; + font-weight: 700; + font-size: 18px; +} + +.section-text p { + font-weight: 500; + font-size: clamp(18px, 1.5vw, 24px); +} + +.home-bottom { + margin-top: 145px; + overflow: hidden; +} + +footer { + height: 160px; + width: 100vw; + background-color: #111827; +} + +.fct { + width: 100%; + max-width: 1120px; + padding-top: 32.5px; + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: center; +} + +.fct p { + color: #8b929e; + font-size: clamp(12px, 1vw, 16px); + font-weight: 400; + order: 0; +} + +.fnav { + display: flex; + background-color: inherit; + color: #fff; + gap: 30px; +} + +.fnav button { + background-color: inherit; + font-size: 16px; + font-weight: 400; +} + +.fct ul { + display: flex; + gap: 12px; +} + +.fct li { + overflow: hidden; + width: 20px; + height: 20px; +} + +.fct a { + display: block; +} + +@media (min-width: 375px) and (max-width: 767px) { + .section { + width: 100%; + } + + .login { + height: 48px; + line-height: 27px; + } + + /* 헤더 좌우 여백 */ + .gnb-inner { + padding-left: 16px; + padding-right: 16px; + } + + .gnb-inner img { + content: url("img/mobile-logo.png"); + height: 53px; + } + + #section-top { + margin-top: 70px; + height: 540px; + } + + .top { + margin-top: 48px; + } + + /* background-blue 영역: 버튼이 이미지 위 */ + .background-blue { + flex-direction: column; + align-items: center; + text-align: center; + justify-content: space-between; + } + + .background-blue .home-top { + margin-top: 24px; + width: 80%; + } + + #section-bottom h1 { + margin-top: 121px; + } + + .home-bottom { + margin-top: 0; + width: 80%; + } + + .background-blue button { + margin-top: 16px; + padding: 12px 90px; + } + + /* 콘텐츠 세로 정렬 */ + .content { + flex-direction: column; + /* align-items: center; */ + padding: 0 16px; + /* text-align: center; */ + } + + #content-reverse { + flex-direction: column-reverse; + } + + .content img { + width: 100%; + margin-top: 24px; + } + + .section-text h1 { + font-size: 2.5rem; + margin-top: 16px; + } + + .section-text h2 { + font-size: 1.5rem; + margin-top: 24px; + } + + .section-text p { + font-size: 1.6rem; + margin-top: 24px; + } + + footer { + width: 100%; + height: auto; + } + + /* Footer 간격 축소 */ + .fct { + flex-wrap: wrap; + gap: 28px; + padding: 40px; + text-align: center; + justify-content: flex-start; + } + + .fct button { + font-size: 2rem; + } + + .fnav { + display: flex; + flex-wrap: wrap; + gap: 80px; + justify-content: center; + } + + .fct ul { + padding-left: 34px; + display: flex; + gap: 16px; + justify-content: center; + } + + .fct li { + width: 40px; + height: 40px; + } + + .fct img { + height: 40px; + width: 40px; + } + + .fct p { + font-size: 2rem; + order: 3; /* 글자가 맨 밑에 오도록 */ + color: #8b929e; + } +} + +/* 태블릿 */ +/* (min-width: 768px) and */ +@media (min-width: 768px) and (max-width: 1199px) { + section { + width: 100%; + } + h1 > br { + display: none; + } + + #section-top { + margin-top: 70px; + height: 770px; + } + + .section-text h1 { + font-size: 2.5rem; + margin-top: 16px; + } + + .section-text h2 { + font-size: 1.5rem; + margin-top: 24px; + } + + .section-text p { + font-size: 1.6rem; + margin-top: 24px; + } + + #section-bottom { + height: 927px; + } + + #section-bottom > img { + margin-top: 217px; + } + + .gnb-inner { + padding-left: 24px; + padding-right: 24px; + } + + .gnb img { + height: 50px; + } + + .background-blue button { + margin-top: 16px; + padding: 12px 60px; + } + + .content { + flex-direction: column; + padding: 0 24px; + text-align: left; + } + + .content img { + width: 100%; + margin-top: 24px; + } + + #content-reverse { + flex-direction: column-reverse; + } + + .flex-content { + flex-direction: column; + justify-content: flex-end; + text-align: center; + } + + .onlyPC { + display: block; + } + + .fct { + padding-top: 24px; + flex-direction: row; + justify-content: space-around; + } + + .fnav { + gap: 20px; + } +} diff --git a/sprint3/sprint-mission3-login.css b/sprint3/sprint-mission3-login.css new file mode 100644 index 00000000..71bd31f3 --- /dev/null +++ b/sprint3/sprint-mission3-login.css @@ -0,0 +1,49 @@ +input[type="email"], +input[type="password"] { + width: 100%; + padding: 12px; + border: none; + background: #f3f4f6; + border-radius: 8px; + font-size: 16px; + font-weight: 400; + height: 56px; +} + +.login-btn { + width: 100%; + height: 56px; + background-color: #9ca3af; + color: #f3f4f6; + padding: 12px; + border: none; + border-radius: 40px; + font-size: 20px; + font-weight: 600; + cursor: pointer; + margin-top: 10px; +} + +/* .login-btn:hover { + background-color: #02499f; +} */ + +.signup-link { + margin-top: 24px; + font-weight: 600; + font-size: 14px; + color: #666; + font-weight: 500; +} + +.signup-link a { + color: #3b82f6; + margin-left: 4px; +} + +@media (min-width: 375px) and (max-width: 767px) { + .login-container { + max-width: 400px; + padding: 0 16px; + } +} diff --git a/sprint3/sprint-mission3-login.html b/sprint3/sprint-mission3-login.html new file mode 100644 index 00000000..c32e17d4 --- /dev/null +++ b/sprint3/sprint-mission3-login.html @@ -0,0 +1,80 @@ + + + + + + 로그인 + + + + + + +
+ + +
+
+ + +
+ +
+ +
+ + 비밀번호 보기 +
+
+ + +
+ +
+
간편 로그인하기
+ +
+ +

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

+
+ + diff --git a/sprint3/sprint-mission3-signup.css b/sprint3/sprint-mission3-signup.css new file mode 100644 index 00000000..1a720a6a --- /dev/null +++ b/sprint3/sprint-mission3-signup.css @@ -0,0 +1,61 @@ +input[type="email"], +input[type="password"], +input[type="text"] { + width: 100%; + padding: 12px; + border: none; + background: #f3f4f6; + border-radius: 8px; + font-size: 16px; + font-weight: 400; + height: 56px; +} + +.signup-btn { + width: 100%; + height: 56px; + background-color: #9ca3af; + color: #f3f4f6; + padding: 12px; + border: none; + border-radius: 40px; + font-size: 20px; + font-weight: 600; + cursor: pointer; + margin-top: 10px; +} + +/* .signup-btn:hover { + background-color: #02499f; +} */ + +.social-login img { + width: 36px; + height: 36px; + cursor: pointer; +} + +.social-login a { + width: 42px; + height: 42px; +} + +.login-link { + margin-top: 24px; + font-weight: 600; + font-size: 14px; + color: #666; + font-weight: 500; +} + +.login-link a { + color: #3b82f6; + margin-left: 4px; +} + +@media (min-width: 375px) and (max-width: 767px) { + .login-container { + max-width: 400px; + padding: 0 16px; + } +} diff --git a/sprint3/sprint-mission3-signup.html b/sprint3/sprint-mission3-signup.html new file mode 100644 index 00000000..d1810e11 --- /dev/null +++ b/sprint3/sprint-mission3-signup.html @@ -0,0 +1,108 @@ + + + + + + 회원가입 + + + + + + +
+ + +
+
+ + +
+ +
+ + +
+ +
+ +
+ + 비밀번호 보기 +
+
+ +
+ +
+ + 비밀번호 보기 +
+
+ + +
+ +
+
간편 로그인하기
+ +
+ +

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

+
+ +