diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..dc894ba1 Binary files /dev/null and b/.DS_Store differ diff --git a/assets/.DS_Store b/assets/.DS_Store index f4b98072..c5af2de7 100644 Binary files a/assets/.DS_Store and b/assets/.DS_Store differ diff --git a/assets/eyes.png b/assets/eyes.png new file mode 100644 index 00000000..8e80ce22 Binary files /dev/null and b/assets/eyes.png differ diff --git a/assets/google.png b/assets/google.png new file mode 100644 index 00000000..55700030 Binary files /dev/null and b/assets/google.png differ diff --git a/assets/kakao.png b/assets/kakao.png new file mode 100644 index 00000000..2a6cb101 Binary files /dev/null and b/assets/kakao.png differ diff --git a/css/login.css b/css/login.css new file mode 100644 index 00000000..0f34ac28 --- /dev/null +++ b/css/login.css @@ -0,0 +1,142 @@ +:root { + --gray-900: #111827; + --gray-800: #1F2937; + --gray-700: #374151; + --gray-600: #4B5563; + --gray-500: #6B7280; + --gray-400: #9CA3AF; + --gray-200: #E5E7EB; + --gray-100: #F3F4F6; + --gray-50: #F9FAFB; + --blue: #3692FF; +} + +* { + box-sizing: border-box; +} + +body { + margin: 0; +} + +.empty-area { + height: 231px; +} + +.hearder { + display: flex; + flex-direction: column; + justify-content: center; +} + +.panda-logo-img { + width: 396px; + height: 132px; + margin: 0 122px 40px 122px; +} + +.main { + height: 446px; +} + +.all-elements { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.form { + display: flex; + flex-direction: column; +} + +.google-logo, +.kakao-logo { + width: 42px; + height: 42px; +} + +.google-logo { + margin-right: 16px; +} + +.kakao-logo { + margin-right: 23px; +} + +.eyes { + width: 20.47px; + height: 18.07px; + position: relative; + top: 5px; + right: 50px; +} + +#google { + text-decoration: none; +} +#kakao { + text-decoration: none; +} + +.simple-login { + display: flex; + align-items: center; + justify-content: space-between; + background-color: #e6f2ff; + border-radius: 8px; + color: #1f2937; +} + +.form label { + margin-bottom: 16px; + font-size: 18px; + font-weight: 700; + font-family: "Pretendard"; +} + +.form input { + margin-bottom: 24px; + border-radius: 12px; + width: 640px; + height: 56px; + background-color: #f3f4f6; + border: 0; + padding: 0 0 0 24px; +} + +.form button { + margin-bottom: 24px; + width: 640px; + height: 56px; + border-radius: 40px; + border: 0; + background-color: var(--gray-400); + color: #f3f4f6; + font-size: 20px; +} + +.form button:hover { + background-color: var(--blue); +} + +.simple-login { + width: 640px; + height: 74px; + padding-left: 23px; +} + +.join { + margin-top: 24px; + display: flex; + justify-content: center; +} + +#join { + margin-left: 4px; +} + +.join-first { + color: var(--gray-800); +} diff --git a/css/signup.css b/css/signup.css new file mode 100644 index 00000000..c64d8576 --- /dev/null +++ b/css/signup.css @@ -0,0 +1,143 @@ +:root { + --gray-900: #111827; + --gray-800: #1F2937; + --gray-700: #374151; + --gray-600: #4B5563; + --gray-500: #6B7280; + --gray-400: #9CA3AF; + --gray-200: #E5E7EB; + --gray-100: #F3F4F6; + --gray-50: #F9FAFB; + --blue: #3692FF; +} + +* { + box-sizing: border-box; +} + +body { + margin: 0; +} + +.empty-area { + height: 231px; +} + +.empty-bottom { + height: 407px; +} + +.hearder { + display: flex; + flex-direction: column; + justify-content: center; +} + +.panda-logo-img { + width: 396px; + height: 132px; + margin: 0 122px 40px 122px; +} + +.main { + flex-grow: 1; +} + +.all-elements { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.form { + display: flex; + flex-direction: column; +} + +.google-logo, +.kakao-logo { + width: 42px; + height: 42px; +} + +.google-logo { + margin-right: 16px; +} + +.kakao-logo { + margin-right: 23px; +} + +#google { + text-decoration: none; +} +#kakao { + text-decoration: none; +} + +.simple-login { + display: flex; + align-items: center; + justify-content: space-between; + background-color: #e6f2ff; + border-radius: 8px; + color: var(--gray-800); + max-width: 640px; + height: 74px; + padding-left: 23px; +} + +.form label { + margin-bottom: 16px; + font-size: 18px; + font-weight: 700; + font-family: "Pretendard"; +} + +.form input { + margin-bottom: 24px; + border-radius: 12px; + width: 640px; + height: 56px; + background-color: #f3f4f6; + border: 0; + padding: 0 0 0 24px; +} + +.eyes { + width: 20.47px; + height: 18.07px; + position: relative; + top: 5px; + right: 50px; +} + +.form button { + margin-bottom: 24px; + width: 640px; + height: 56px; + border-radius: 40px; + border: 0; + background-color: var(--gray-400); + color: #f3f4f6; + font-size: 20px; +} + +.form button:hover { + background-color: var(--blue); +} + +.join { + margin-top: 24px; + display: flex; + justify-content: center; +} + +#join { + margin-left: 4px; +} + +.join-first { + color: var(--gray-800); +} diff --git a/style.css b/css/style.css similarity index 56% rename from style.css rename to css/style.css index 506d9ea9..3fa01541 100644 --- a/style.css +++ b/css/style.css @@ -12,7 +12,11 @@ body { display: flex; justify-content: space-between; align-items: center; - padding: 0 10.417vw; + padding: 0 200px; + position: fixed; + width: 100%; + background-color: #ffffff; + z-index: 1; } .panda-logo-image { @@ -36,15 +40,10 @@ body { margin: 11px 0; } -section { - padding: 0.1px; -} - .landing-page { max-width: 100%; height: 540px; background-color: #cfe5ff; - margin-bottom: 138px; display: flex; justify-content: center; } @@ -65,12 +64,12 @@ section { color: #374151; } -.Seeflex { +.see-flex { width: 357px; height: 3.5rem; } -.See { +.see { text-decoration: none; font-family: "Pretendard"; font-weight: 600; @@ -86,13 +85,14 @@ section { color: #f9fafb; } -.See:hover, +.see:hover, .login:hover { background-color: #1967d6; } .main-img { - max-width: 46.625rem; + width: 55%; + max-width: 55%; height: 21.25rem; position: relative; top: 12.5rem; @@ -106,6 +106,11 @@ section { margin-bottom: 138px; } +.main-list { + display: flex; + flex-direction: column; +} + .text-box { background-color: #fcfcfc; width: 400px; @@ -180,6 +185,7 @@ section { justify-content: space-around; align-items: baseline; height: 160px; + padding-top: 32.5px; } .design { @@ -205,7 +211,173 @@ section { gap: 10px; } -#JACJAC { +#twiter { position: relative; top: 3px; } + +@media (max-width: 1200px) { + .nav-flex { + padding: 0 200px; + } + + .large-text { + font-size: 2rem; + } + + .main-img { + width: 500px; + height: 340px; + } + + .see { + font-size: 1rem; + width: 300px; + height: 50px; + display: flex; + padding: 16px 60px; + } + + .large-text-last { + font-size: 2rem; + } + + .second-page img { + width: 450px; + height: 400px; + } + + .second-page .text-box, + .second-page .text-box-search, + .second-page .text-box-register { + width: 450px; + height: 400px; + } + + + + .event-text { + font-size: 1rem; + } + + .event-large-text { + font-size: 2rem; + } +} + +@media (max-width: 1024px) { + .nav-flex { + padding: 0 100px; + } + + .large-text { + font-size: 1.25rem; + } + + .main-img { + width: 400px; + margin-left: 50px; + } + + .see-flex { + width: 200px; + + } + + .see { + width: 200px; + font-size: 0.75rem; + } + + .landing-page-text { + margin-right: 20px; + top: 15rem; + } + + .large-text-last { + font-size: 1.25rem; + margin: 0; + } + + .second-page img { + width: 300px; + height: 250px; + } + + .second-page .text-box, + .second-page .text-box-search, + .second-page .text-box-register { + width: 300px; + height: 250px; + } + + + + .event-text { + font-size: 0.75rem; + } + + .event-large-text { + font-size: 1.5rem; + } +} + +@media (max-width: 768px) { + .nav-flex { + padding: 0 50px; + } + + .large-text { + font-size: 1rem; + } + + .main-img { + width: 250px; + margin-left: 50px; + } + + .see-flex { + width: 170px; + + } + + .see { + width: 200px; + font-size: 0.75rem; + } + + .landing-page-text { + margin-right: 20px; + top: 15rem; + } + + .large-text-last { + font-size: 1rem; + margin: 0; + } + + .second-page img { + width: 270px; + height: 270px; + } + + .second-page .text-box, + .second-page .text-box-search, + .second-page .text-box-register { + width: 270px; + height: 270px; + } + + + + .event-text { + font-size: 0.75rem; + } + + .event-large-text { + font-size: 1.5rem; + } +} + + + diff --git a/index.html b/index.html index fe54942e..dbe70f8e 100644 --- a/index.html +++ b/index.html @@ -1,10 +1,10 @@ - + 판다마켓 - + panda-logo-image 로그인 @@ -24,99 +24,101 @@
-
-
-
-

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

-
- 구경하러 가기 -
+
+
+

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

+
+ 구경하러 가기
-
-
+ A cute panda standing there + -
-
- +
+
+ A green panda shirt
-

Hot item

+ Hot item

인기 상품을
확인해보세요

-

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

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

Search

+ Search

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

-

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

+ 구매하고 싶은 물품은 검색해서
쉽게 찾아보세요
- + A magnifying glass picture
-
-
-
- +
+ +
+ Register for a variety of photos
-

Register

+ Register

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

-

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

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

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

-
- +
+
+ + 믿을 수 있는
판다마켓 중고 거래 +
-
+ A photo of a panda waving its hand +