diff --git a/Sprint-Mision-1-css/Sprint-Mision-1.css b/Sprint-Mision-1-css/Sprint-Mision-1.css deleted file mode 100644 index 188b7cb6..00000000 --- a/Sprint-Mision-1-css/Sprint-Mision-1.css +++ /dev/null @@ -1,183 +0,0 @@ -* { - box-sizing: border-box; -} - -html { - font-size: clamp(14px, 1.2vw, 18px); -} - -body { - margin: 0; -} - -header, footer { - padding: 1rem 5vw; -} - -header { - display: flex; - justify-content: space-between; - border-bottom: 1px; - text-decoration: none; - padding: 9px 400px; - gap: 10px; -} - -header > a { - display: flex; - align-items: center; - text-decoration: none; -} - -.logo { - display: flex; - align-items: center; - text-decoration: none; - font-weight: 700; - font-size: 25.6px; - line-height: 100%; - color: #3692ff; - font-family: ROKAF sans-serif; -} - -.login { - border-radius: 8px; - color: #ffffff; - background-color: #3692ff; - padding: 12px 23px; - font-family: Pretendard; -} - -main { - background-color: #cfe5ff; - padding-top: 200px; -} - -.main { - display: flex; - align-items: center; - justify-content: center; -} - -.main-title { - font-weight: 700; - font-size: 2.5rem; - line-height: 140%; - color: #374151; - margin-bottom: 1.25rem; - font-family: pretenderd; -} - -.main-btn { - display: inline-block; - border-radius: 40px; - padding: 1rem 6rem; - color: #f9fafb; - background-color: #3692ff; - text-decoration: none; - font-size: 1.25rem; - font-weight: 600; - cursor: pointer; - font-family: pretenderd; -} - -.content { - display: flex; - align-items: center; - justify-content: center; - padding: 8rem 10%; - gap: 4rem; - border-radius: 12px; - background-color: #FCFCFC; -} - -.content-box { - padding-right: 24px; - gap: 12px; -} - -.content-name { - font-size: 18px; - font-weight: 800; - line-height: 26px; - font-family: Abhaya Libre ExtraBold; - color: #3692FF; -} - -.content-title { - font-weight: 700; - font-size: 2.5rem; - line-height: 140%; - letter-spacing: 2%; - color: #374151; -} - -.content-Subheading { - font-weight: 500; - font-size: 1.5rem; - line-height: 32px; - color: #374151; -} - -.content-title.content-Subheading{ - font-family: pretenderd; - gap: 24px; -} - -.content-2 { - display: flex; - align-items: center; - justify-content: center; - text-align: right; - padding: 138px 466px; - gap: 64px; - border-radius: 12px; -} - -.bottom { - background-color: #cfe5ff; - padding-top: 200px; -} - -.bottom-main { - display: flex; - align-items: center; - justify-content: center; - position: relative; - gap: 69px; -} - -footer { - padding: 32px 400px; - gap: 10px; - background-color: #111872; - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - text-align: center; - font-family: pretenderd; -} - -.footer-left { - margin: 0; - font-weight: 400; - font-size: 16px; - line-height: 100%; - color: #9ca3af; -} - -.footer-center a { - margin: 0 12px; - text-decoration: none; - font-weight: 400; - font-size: 16px; - line-height: 100%; - color: #e5e7eb; -} - -.footer-right img { - width: 20px; - height: 20px; - margin-right: 12px; -} \ No newline at end of file diff --git a/Sprint-Mision-1-html/Sprint-Mision-1.html b/Sprint-Mision-1-html/Sprint-Mision-1.html deleted file mode 100644 index 61528751..00000000 --- a/Sprint-Mision-1-html/Sprint-Mision-1.html +++ /dev/null @@ -1,90 +0,0 @@ - - - - - - 판다마켓 - - - - - -
-
- -
- 로그인 -
-
-
-
-

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

- 구경하러가기 -
- 판다홈탑 -
-
- -
- -
- Hot item -

인기 상품을
확인해 보세요

-

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

-
-
-
-
- Search -

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

-

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

-
- -
-
- -
- Register -

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

-

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

-
-
-
-
-
-

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

-
- 판다홈탑 -
-
- - - - \ No newline at end of file diff --git a/Sprint-Mission-1.html b/Sprint-Mission-1.html deleted file mode 100644 index df1b8aa1..00000000 --- a/Sprint-Mission-1.html +++ /dev/null @@ -1,104 +0,0 @@ - - - - - - 판다마켓 - - - - - - - - - -
-
- -
- 로그인 -
-
-
-
-

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

- 구경하러가기 -
- Img_home_top -
-
- -
- -
- Hot item -

인기 상품을
확인해 보세요

-

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

-
-
-
-
- Search -

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

-

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

-
- -
-
- -
- Register -

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

-

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

-
-
-
-
-
-

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

-
- home_bottom -
-
- - - - \ No newline at end of file diff --git a/Sprint-Mission-1/Sprint-Mission-1-css/Sprint-Mission-1.css b/Sprint-Mission-1/Sprint-Mission-1-css/Sprint-Mission-1.css deleted file mode 100644 index 188b7cb6..00000000 --- a/Sprint-Mission-1/Sprint-Mission-1-css/Sprint-Mission-1.css +++ /dev/null @@ -1,183 +0,0 @@ -* { - box-sizing: border-box; -} - -html { - font-size: clamp(14px, 1.2vw, 18px); -} - -body { - margin: 0; -} - -header, footer { - padding: 1rem 5vw; -} - -header { - display: flex; - justify-content: space-between; - border-bottom: 1px; - text-decoration: none; - padding: 9px 400px; - gap: 10px; -} - -header > a { - display: flex; - align-items: center; - text-decoration: none; -} - -.logo { - display: flex; - align-items: center; - text-decoration: none; - font-weight: 700; - font-size: 25.6px; - line-height: 100%; - color: #3692ff; - font-family: ROKAF sans-serif; -} - -.login { - border-radius: 8px; - color: #ffffff; - background-color: #3692ff; - padding: 12px 23px; - font-family: Pretendard; -} - -main { - background-color: #cfe5ff; - padding-top: 200px; -} - -.main { - display: flex; - align-items: center; - justify-content: center; -} - -.main-title { - font-weight: 700; - font-size: 2.5rem; - line-height: 140%; - color: #374151; - margin-bottom: 1.25rem; - font-family: pretenderd; -} - -.main-btn { - display: inline-block; - border-radius: 40px; - padding: 1rem 6rem; - color: #f9fafb; - background-color: #3692ff; - text-decoration: none; - font-size: 1.25rem; - font-weight: 600; - cursor: pointer; - font-family: pretenderd; -} - -.content { - display: flex; - align-items: center; - justify-content: center; - padding: 8rem 10%; - gap: 4rem; - border-radius: 12px; - background-color: #FCFCFC; -} - -.content-box { - padding-right: 24px; - gap: 12px; -} - -.content-name { - font-size: 18px; - font-weight: 800; - line-height: 26px; - font-family: Abhaya Libre ExtraBold; - color: #3692FF; -} - -.content-title { - font-weight: 700; - font-size: 2.5rem; - line-height: 140%; - letter-spacing: 2%; - color: #374151; -} - -.content-Subheading { - font-weight: 500; - font-size: 1.5rem; - line-height: 32px; - color: #374151; -} - -.content-title.content-Subheading{ - font-family: pretenderd; - gap: 24px; -} - -.content-2 { - display: flex; - align-items: center; - justify-content: center; - text-align: right; - padding: 138px 466px; - gap: 64px; - border-radius: 12px; -} - -.bottom { - background-color: #cfe5ff; - padding-top: 200px; -} - -.bottom-main { - display: flex; - align-items: center; - justify-content: center; - position: relative; - gap: 69px; -} - -footer { - padding: 32px 400px; - gap: 10px; - background-color: #111872; - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - text-align: center; - font-family: pretenderd; -} - -.footer-left { - margin: 0; - font-weight: 400; - font-size: 16px; - line-height: 100%; - color: #9ca3af; -} - -.footer-center a { - margin: 0 12px; - text-decoration: none; - font-weight: 400; - font-size: 16px; - line-height: 100%; - color: #e5e7eb; -} - -.footer-right img { - width: 20px; - height: 20px; - margin-right: 12px; -} \ No newline at end of file diff --git a/Sprint-Mission-1/Sprint-Mission-1-html/Sprint-Mission-1.html b/Sprint-Mission-1/Sprint-Mission-1-html/Sprint-Mission-1.html deleted file mode 100644 index 99f5a23a..00000000 --- a/Sprint-Mission-1/Sprint-Mission-1-html/Sprint-Mission-1.html +++ /dev/null @@ -1,90 +0,0 @@ - - - - - - 판다마켓 - - - - - -
-
- -
- 로그인 -
-
-
-
-

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

- 구경하러가기 -
- 판다홈탑 -
-
- -
- -
- Hot item -

인기 상품을
확인해 보세요

-

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

-
-
-
-
- Search -

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

-

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

-
- -
-
- -
- Register -

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

-

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

-
-
-
-
-
-

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

-
- 판다홈탑 -
-
- - - - \ No newline at end of file diff --git a/Sprint-Mission-2(join).html b/Sprint-Mission-2(join).html deleted file mode 100644 index 2cc8805a..00000000 --- a/Sprint-Mission-2(join).html +++ /dev/null @@ -1,62 +0,0 @@ - - - - - - - 회원가입 - - -
-
- -
-
-
-
- -
-
- -
-
-
- - -
-
-
-
- - -
-
- - - -
- -
-
- - \ No newline at end of file diff --git a/Sprint-Mission-2(login).html b/Sprint-Mission-2(login).html deleted file mode 100644 index a946c2b5..00000000 --- a/Sprint-Mission-2(login).html +++ /dev/null @@ -1,52 +0,0 @@ - - - - - - - 로그인 - - -
-
- -
-
-
-
- -
-
-
- - -
-
- - - -
-
-
- - - - \ No newline at end of file diff --git a/Sprint-Mission-2/Sprint-Mission-2-html/Sprint-Mission-2(join).html b/Sprint-Mission-2/Sprint-Mission-2-html/Sprint-Mission-2(join).html deleted file mode 100644 index b37718c0..00000000 --- a/Sprint-Mission-2/Sprint-Mission-2-html/Sprint-Mission-2(join).html +++ /dev/null @@ -1,52 +0,0 @@ - - - - - - - 회원가입 - - -
-
- -
-
-
-
- -
-
- -
-
- -
-
- -
- - - -
- -
-
- - \ No newline at end of file diff --git a/Sprint-Mission-2/Sprint-Mission-2-html/Sprint-Mission-2(login).html b/Sprint-Mission-2/Sprint-Mission-2-html/Sprint-Mission-2(login).html deleted file mode 100644 index 8d8b5dcf..00000000 --- a/Sprint-Mission-2/Sprint-Mission-2-html/Sprint-Mission-2(login).html +++ /dev/null @@ -1,46 +0,0 @@ - - - - - - - 로그인 - - -
-
- -
-
-
-
- -
-
- -
- - - -
- -
-
- - \ No newline at end of file diff --git a/Sprint-Mission-2/Sprint-Mission-2-html/Sprint-Mission-2(main).html b/Sprint-Mission-2/Sprint-Mission-2-html/Sprint-Mission-2(main).html deleted file mode 100644 index 7428e394..00000000 --- a/Sprint-Mission-2/Sprint-Mission-2-html/Sprint-Mission-2(main).html +++ /dev/null @@ -1,98 +0,0 @@ - - - - - - 판다마켓 - - - - - -
-
- -
- 로그인 -
-
-
-
-

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

- 구경하러가기 -
- 판다홈탑 -
-
- -
- -
- Hot item -

인기 상품을
확인해 보세요

-

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

-
-
-
-
- Search -

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

-

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

-
- -
-
- -
- Register -

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

-

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

-
-
-
-
-
-

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

-
- 판다홈탑 -
-
- - - - \ No newline at end of file diff --git a/Sprint-Mission-2/Sprint-Mssion-2-css/Sprint-Mission-2(main).css b/Sprint-Mission-2/Sprint-Mssion-2-css/Sprint-Mission-2(main).css deleted file mode 100644 index 4c16453a..00000000 --- a/Sprint-Mission-2/Sprint-Mssion-2-css/Sprint-Mission-2(main).css +++ /dev/null @@ -1,195 +0,0 @@ -* { - box-sizing: border-box; -} - -html { - font-size: clamp(14px, 1.2vw, 18px); -} - -body { - margin: 0; -} - -header, footer { - padding: 1rem 3.75rem; -} - - - -.header { - position: fixed; - top: 0; - left: 0; - right: 0; - background-color: #ffffff; - display: flex; - justify-content: space-between; - border-bottom: 1px; - text-decoration: none; - padding: 9px 400px; - gap: 10px; -} - -header > a { - display: flex; - align-items: center; - text-decoration: none; -} - -.logo { - display: flex; - align-items: center; - text-decoration: none; - font-weight: 700; - font-size: 25.6px; - line-height: 100%; - color: #3692ff; - font-family: ROKAF sans-serif; -} - -.button-primary { - border-radius: 8px; - color: #ffffff; - background-color: #3692ff; - padding: 12px 23px; - font-family: Pretendard; -} - -main { - background-color: #cfe5ff; - padding-top: 200px; -} - -.main { - display: flex; - align-items: center; - justify-content: center; -} - -.main-title { - font-weight: 700; - font-size: 2.5rem; - line-height: 140%; - color: #374151; - margin-bottom: 1.25rem; - font-family: pretenderd; -} - -.main-btn { - display: inline-block; - border-radius: 40px; - padding: 1rem 6rem; - color: #f9fafb; - background-color: #3692ff; - text-decoration: none; - font-size: 1.25rem; - font-weight: 600; - cursor: pointer; - font-family: pretenderd; -} - -.content { - display: flex; - align-items: center; - justify-content: center; - padding: 8rem 10%; - gap: 4rem; - border-radius: 12px; - background-color: #FCFCFC; -} - -.content-box { - padding-right: 24px; - gap: 12px; -} - -.content-name { - font-size: 18px; - font-weight: 800; - line-height: 26px; - font-family: Abhaya Libre ExtraBold; - color: #3692FF; -} - -.content-title { - font-weight: 700; - font-size: 2.5rem; - line-height: 140%; - letter-spacing: 2%; - color: #374151; -} - -.content-Subheading { - font-weight: 500; - font-size: 1.5rem; - line-height: 32px; - color: #374151; -} - -.content-title.content-Subheading{ - font-family: pretenderd; - gap: 24px; -} - -.content-2 { - display: flex; - align-items: center; - justify-content: center; - text-align: right; - padding: 138px 466px; - gap: 64px; - border-radius: 12px; -} - -.bottom { - background-color: #cfe5ff; - padding-top: 200px; -} - -.bottom-main { - display: flex; - align-items: center; - justify-content: center; - position: relative; - gap: 69px; -} - -footer { - padding: 32px 400px; - gap: 10px; - background-color: #111872; - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - text-align: center; - font-family: pretenderd; -} - -.footer-left { - margin: 0; - font-weight: 400; - font-size: 16px; - line-height: 100%; - color: #9ca3af; -} - -.footer-center a { - margin: 0 12px; - text-decoration: none; - font-weight: 400; - font-size: 16px; - line-height: 100%; - color: #e5e7eb; -} - -.footer-social a{ - width: 20px; - height: 20px; - margin-right: 12px; -} - -.footer-social li{ - list-style: none; - float: left; -} \ No newline at end of file diff --git a/Sprint-Mission-2/Sprint-Mssion-2-css/Sprint-Msiion-2(login).css b/Sprint-Mission-2/Sprint-Mssion-2-css/Sprint-Msiion-2(login).css deleted file mode 100644 index ec396b8c..00000000 --- a/Sprint-Mission-2/Sprint-Mssion-2-css/Sprint-Msiion-2(login).css +++ /dev/null @@ -1,128 +0,0 @@ -* { - box-sizing: border-box; -} - -body { - margin: 0; -} - -.content-box { - margin: 230px 640px; -} - -.container { - vertical-align: middle; - display: flex; - align-items: center; - justify-content: center; - gap: 40px; - margin-top: 230px; - border: 1px; -} - -.logo a{ - font-weight: 700; - font-size: 4rem; - line-height: 100%; - text-decoration: none; - color: #3692ff; - display: flex; - align-items: center; - gap: 20px; -} - -.sign-in { - display: flex; - text-align: left; - align-items: center; - justify-content: center; - flex-direction: column; - -} - -form { - margin-top: 40px; - gap: 16px; -} - -.sign-in label{ - font-weight: 700; - font-size: 18px; - line-height: 26px; - letter-spacing: 0; - color: #1f2937; - width: 47px; - height: 26px; -} - -input { - width: 640px; - height: 56px; - border: 2px #3182f6; - border-radius: 12px; - background-color: #f3f4f8; - margin-top: 16px; - margin-bottom: 24px; -} - -.button { - text-align: center; - width: 100%; - padding: 16px 124px; - gap: 10px; - border-radius: 40px; - background-color: #3692ff; - margin-bottom: 24px; - font-weight: 600; - font-size: 20px; - line-height: 32px; - letter-spacing: 0; - vertical-align: middle; - color: #f3f4f6; -} - -.easy-sign-up { - padding: 16px 23px; - gap: 10px; - background-color: #e6f2ff; - justify-content: space-between; - display: flex; - text-align: center; - align-items: center; -} - -.easy-sign-up a { - margin: 0; - font-size: 16px; - font-weight: 500; - line-height: 26px; - letter-spacing: 0; - color: #1f2937; -} - -.easy-sign-up img { - width: 42px; - height: 42px; -} - -form p{ - gap: 4px; - font-size: 14px; - font-weight: 500; - text-align: center; - line-height: 24px; - color: #1f2937; -} -form a{ - font-size: 14px; - font-weight: 500; - line-height: 100%; - text-decoration: underline; - color: #3692ff; -} - -.create-an-account { - display: flex; - justify-content: center; - align-items: center; -} \ No newline at end of file diff --git a/Sprint-Mission-2/Sprint-Mssion-2-css/Sprint-Mssion-2(join).css b/Sprint-Mission-2/Sprint-Mssion-2-css/Sprint-Mssion-2(join).css deleted file mode 100644 index ec396b8c..00000000 --- a/Sprint-Mission-2/Sprint-Mssion-2-css/Sprint-Mssion-2(join).css +++ /dev/null @@ -1,128 +0,0 @@ -* { - box-sizing: border-box; -} - -body { - margin: 0; -} - -.content-box { - margin: 230px 640px; -} - -.container { - vertical-align: middle; - display: flex; - align-items: center; - justify-content: center; - gap: 40px; - margin-top: 230px; - border: 1px; -} - -.logo a{ - font-weight: 700; - font-size: 4rem; - line-height: 100%; - text-decoration: none; - color: #3692ff; - display: flex; - align-items: center; - gap: 20px; -} - -.sign-in { - display: flex; - text-align: left; - align-items: center; - justify-content: center; - flex-direction: column; - -} - -form { - margin-top: 40px; - gap: 16px; -} - -.sign-in label{ - font-weight: 700; - font-size: 18px; - line-height: 26px; - letter-spacing: 0; - color: #1f2937; - width: 47px; - height: 26px; -} - -input { - width: 640px; - height: 56px; - border: 2px #3182f6; - border-radius: 12px; - background-color: #f3f4f8; - margin-top: 16px; - margin-bottom: 24px; -} - -.button { - text-align: center; - width: 100%; - padding: 16px 124px; - gap: 10px; - border-radius: 40px; - background-color: #3692ff; - margin-bottom: 24px; - font-weight: 600; - font-size: 20px; - line-height: 32px; - letter-spacing: 0; - vertical-align: middle; - color: #f3f4f6; -} - -.easy-sign-up { - padding: 16px 23px; - gap: 10px; - background-color: #e6f2ff; - justify-content: space-between; - display: flex; - text-align: center; - align-items: center; -} - -.easy-sign-up a { - margin: 0; - font-size: 16px; - font-weight: 500; - line-height: 26px; - letter-spacing: 0; - color: #1f2937; -} - -.easy-sign-up img { - width: 42px; - height: 42px; -} - -form p{ - gap: 4px; - font-size: 14px; - font-weight: 500; - text-align: center; - line-height: 24px; - color: #1f2937; -} -form a{ - font-size: 14px; - font-weight: 500; - line-height: 100%; - text-decoration: underline; - color: #3692ff; -} - -.create-an-account { - display: flex; - justify-content: center; - align-items: center; -} \ No newline at end of file diff --git a/Sprint-Msiion-2(login).css b/Sprint-Msiion-2(login).css deleted file mode 100644 index 95ceb1b0..00000000 --- a/Sprint-Msiion-2(login).css +++ /dev/null @@ -1,174 +0,0 @@ -* { - box-sizing: border-box; -} - -body { - margin: 0; -} - -.content-box { -margin: 230px 640px; -} - -.container { - vertical-align: middle; - display: flex; - align-items: center; - justify-content: center; - gap: 40px; - margin-top: 230px; - border: 1px; -} - -.logo a{ - font-weight: 700; - font-size: 4rem; - line-height: 100%; - text-decoration: none; - color: #3692ff; - display: flex; - align-items: center; - gap: 20px; -} - -.sign-in { - display: flex; - text-align: left; - align-items: center; - justify-content: center; - flex-direction: column; - -} - -.btn_visibility{ - position: relative; - display: flex; - align-items: center; - width: 100%; -} - -.btn_visibility button{ - position: absolute; - right: 8px; - background: none; - border: none; - cursor: pointer; - padding: 0; -} - -.btn_visibility img { - width: 24px; - height: 24px; -} - -form { - margin-top: 40px; - gap: 16px; -} - -.sign-in label{ - font-weight: 700; - font-size: 18px; - line-height: 26px; - letter-spacing: 0; - color: #1f2937; - width: 47px; - height: 26px; -} - -input { - width: 640px; - height: 56px; - border: 2px #3182f6; - border-radius: 12px; - background-color: #f3f4f8; - margin-top: 16px; - margin-bottom: 24px; -} - -.button { - text-align: center; - width: 100%; - padding: 16px 124px; - gap: 10px; - border-radius: 40px; - border: none; - background-color: #3692ff; - margin-bottom: 24px; - font-weight: 600; - font-size: 20px; - line-height: 32px; - letter-spacing: 0; - vertical-align: middle; - color: #f3f4f6; -} - -.easy-sign-up { - padding: 16px 23px; - gap: 10px; - background-color: #e6f2ff; - justify-content: space-between; - display: flex; - text-align: center; - align-items: center; -} - -.easy-sign-up a { - margin: 0; - font-size: 16px; - font-weight: 500; - line-height: 26px; - letter-spacing: 0; - color: #1f2937; -} - -.easy-sign-up img { - width: 42px; - height: 42px; -} - -form p{ - gap: 4px; - font-size: 14px; - font-weight: 500; - text-align: center; - line-height: 24px; - color: #1f2937; -} -form a{ - font-size: 14px; - font-weight: 500; - line-height: 100%; - text-decoration: underline; - color: #3692ff; -} - -.create-an-account { - display: flex; - justify-content: center; - align-items: center; -} - -.easy-sign-up a{ - text-decoration: none; -} - -@media screen and (min-width: 1200px) {} -@media screen and (min-width: 768px) and (max-width: 1199px) { - header { - padding: 9px 24px; - } -} -@media screen and (min-width: 375px) and (max-width: 767px) { - header { - padding: 9px 16px; - } - - .content-box { - padding: 0 16px; - width: 100%; - max-width: 400px; - box-sizing: border-box; - margin: 0 auto; - } -} \ No newline at end of file diff --git a/Sprint-Mssion-2(join).css b/Sprint-Mssion-2(join).css deleted file mode 100644 index c8433534..00000000 --- a/Sprint-Mssion-2(join).css +++ /dev/null @@ -1,174 +0,0 @@ -* { - box-sizing: border-box; -} - -body { - margin: 0; -} - -.content-box { - margin: 230px 640px; -} - -.container { - vertical-align: middle; - display: flex; - align-items: center; - justify-content: center; - gap: 40px; - margin-top: 230px; - border: 1px; -} - -.logo a{ - font-weight: 700; - font-size: 4rem; - line-height: 100%; - text-decoration: none; - color: #3692ff; - display: flex; - align-items: center; - gap: 20px; -} - -.sign-in { - display: flex; - text-align: left; - align-items: center; - justify-content: center; - flex-direction: column; - -} - -.btn_visibility{ - position: relative; - display: flex; - align-items: center; - width: 100%; -} - -.btn_visibility button{ - position: absolute; - right: 8px; - background: none; - border: none; - cursor: pointer; - padding: 0; -} - -.btn_visibility img { - width: 24px; - height: 24px; -} - -form { - margin-top: 40px; - gap: 16px; -} - -.sign-in label{ - font-weight: 700; - font-size: 18px; - line-height: 26px; - letter-spacing: 0; - color: #1f2937; - width: 47px; - height: 26px; -} - -input { - width: 640px; - height: 56px; - border: 2px #3182f6; - border-radius: 12px; - background-color: #f3f4f8; - margin-top: 16px; - margin-bottom: 24px; -} - -.button { - text-align: center; - width: 100%; - padding: 16px 124px; - gap: 10px; - border-radius: 40px; - border: none; - background-color: #3692ff; - margin-bottom: 24px; - font-weight: 600; - font-size: 20px; - line-height: 32px; - letter-spacing: 0; - vertical-align: middle; - color: #f3f4f6; -} - -.easy-sign-up { - padding: 16px 23px; - gap: 10px; - background-color: #e6f2ff; - justify-content: space-between; - display: flex; - text-align: center; - align-items: center; -} - -.easy-sign-up a { - margin: 0; - font-size: 16px; - font-weight: 500; - line-height: 26px; - letter-spacing: 0; - color: #1f2937; -} - -.easy-sign-up img { - width: 42px; - height: 42px; -} - -form p{ - gap: 4px; - font-size: 14px; - font-weight: 500; - text-align: center; - line-height: 24px; - color: #1f2937; -} -form a{ - font-size: 14px; - font-weight: 500; - line-height: 100%; - text-decoration: underline; - color: #3692ff; -} - -.create-an-account { - display: flex; - justify-content: center; - align-items: center; -} - -.easy-sign-up a{ - text-decoration: none; -} - - -@media screen and (min-width: 1200px) {} -@media screen and (min-width: 768px) and (max-width: 1199px) { - header { - padding: 9px 24px; - } -} -@media screen and (min-width: 375px) and (max-width: 767px) { - header { - padding: 9px 16px; - } - .content-box{ - padding: 0 16px; - width: 100%; - max-width: 400px; - box-sizing: border-box; - margin: 0 auto; - } -} \ No newline at end of file diff --git a/img/Img_home_01.png b/assets/img/Img_home_01.png similarity index 100% rename from img/Img_home_01.png rename to assets/img/Img_home_01.png diff --git a/img/Img_home_02.png b/assets/img/Img_home_02.png similarity index 100% rename from img/Img_home_02.png rename to assets/img/Img_home_02.png diff --git a/img/Img_home_03.png b/assets/img/Img_home_03.png similarity index 100% rename from img/Img_home_03.png rename to assets/img/Img_home_03.png diff --git a/img/Img_home_bottom.png b/assets/img/Img_home_bottom.png similarity index 100% rename from img/Img_home_bottom.png rename to assets/img/Img_home_bottom.png diff --git a/img/Img_home_top.png b/assets/img/Img_home_top.png similarity index 100% rename from img/Img_home_top.png rename to assets/img/Img_home_top.png diff --git a/assets/img/btn_visibility_off.svg b/assets/img/btn_visibility_off.svg new file mode 100644 index 00000000..a538d84e --- /dev/null +++ b/assets/img/btn_visibility_off.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/assets/img/btn_visibility_on.svg b/assets/img/btn_visibility_on.svg new file mode 100644 index 00000000..35a75305 --- /dev/null +++ b/assets/img/btn_visibility_on.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/ic_facebook.svg b/assets/img/ic_facebook.svg new file mode 100644 index 00000000..8491c2f8 --- /dev/null +++ b/assets/img/ic_facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/ic_google.svg b/assets/img/ic_google.svg new file mode 100644 index 00000000..593a8357 --- /dev/null +++ b/assets/img/ic_google.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/assets/img/ic_instagram.svg b/assets/img/ic_instagram.svg new file mode 100644 index 00000000..c83306f8 --- /dev/null +++ b/assets/img/ic_instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/ic_kakao.svg b/assets/img/ic_kakao.svg new file mode 100644 index 00000000..09fae80e --- /dev/null +++ b/assets/img/ic_kakao.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/assets/img/ic_logo.svg b/assets/img/ic_logo.svg new file mode 100644 index 00000000..d1f6f15d --- /dev/null +++ b/assets/img/ic_logo.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/assets/img/ic_twitter.svg b/assets/img/ic_twitter.svg new file mode 100644 index 00000000..14a6069a --- /dev/null +++ b/assets/img/ic_twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/ic_youtube.svg b/assets/img/ic_youtube.svg new file mode 100644 index 00000000..a23b104c --- /dev/null +++ b/assets/img/ic_youtube.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/img/og_image.png b/assets/img/og_image.png similarity index 100% rename from img/og_image.png rename to assets/img/og_image.png diff --git a/Sprint-Mission-1.css b/home/index.css similarity index 87% rename from Sprint-Mission-1.css rename to home/index.css index 4cb54c6e..4a6a9c90 100644 --- a/Sprint-Mission-1.css +++ b/home/index.css @@ -2,6 +2,7 @@ box-sizing: border-box; } + html { font-size: clamp(14px, 1.2vw, 18px); } @@ -10,12 +11,11 @@ body { margin: 0; } -header, -footer { +header { padding: 1rem 5vw; } -header { +.header { display: flex; justify-content: space-between; border-bottom: 1px; @@ -24,7 +24,7 @@ header { gap: 10px; } -header > a { +.header > a { display: flex; align-items: center; text-decoration: none; @@ -66,7 +66,7 @@ main { line-height: 140%; color: #374151; margin-bottom: 1.25rem; - font-family: pretenderd; + font-family: Pretendard; } .main-btn { @@ -93,7 +93,8 @@ main { } .content-box { - padding-right: 24px; + display: flex; + flex-direction: column; gap: 12px; } @@ -120,9 +121,9 @@ main { color: #374151; } -.content-title.content-Subheading { - font-family: pretenderd; - gap: 24px; +.content-title, +.content-Subheading { + font-family: Pretendard; } .content-2 { @@ -130,7 +131,7 @@ main { align-items: center; justify-content: center; text-align: right; - padding: 138px 466px; + padding: 8rem 10%; gap: 64px; border-radius: 12px; } @@ -148,7 +149,7 @@ main { gap: 69px; } -footer { +.footer { padding: 32px 400px; gap: 10px; background-color: #111872; @@ -157,7 +158,7 @@ footer { justify-content: space-between; width: 100%; text-align: center; - font-family: pretenderd; + font-family: Pretendard; } .footer-left { @@ -187,20 +188,24 @@ footer { text-decoration: none; } -@media screen and (min-width: 1200px) {} -@media screen and (min-width: 768px) and (max-width: 1199px) { - header { - padding: 9px 24px; +.footer li { + float: left; +} + +@media screen and (min-width: 1200px) { + footer { + padding: 32px 200px; } +} + +@media screen and (min-width: 768px) and (max-width: 1199px) { footer { padding: 32px 24px; gap: 8px; } } -@media screen and (min-width: 375px) and (max-width: 767px) { - header { - padding: 9px 16px; - } + +@media screen and (max-width: 767px) { footer { padding: 32px 16px; gap: 4px; diff --git a/home/index.html b/home/index.html new file mode 100644 index 00000000..ab5fbf73 --- /dev/null +++ b/home/index.html @@ -0,0 +1,156 @@ + + + + + + 판다마켓 + + + + + + + + + + +
+
+ +
+ 로그인 +
+
+
+
+

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

+ 구경하러가기 +
+ Img_home_top +
+
+ +
+ 인기 상품 이미지 +
+ Hot item +

인기 상품을
확인해 보세요

+

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

+
+
+
+
+ Search +

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

+

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

+
+ 구매 상품 이미지 +
+
+ 판매 상품 이미지 +
+ Register +

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

+

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

+
+
+
+
+
+

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

+
+ home_bottom +
+
+ + + + diff --git a/img/Group.png b/img/Group.png deleted file mode 100644 index 8cd6e9c6..00000000 Binary files a/img/Group.png and /dev/null differ diff --git a/img/Vector.png b/img/Vector.png deleted file mode 100644 index 5de32540..00000000 Binary files a/img/Vector.png and /dev/null differ diff --git a/img/btn_visibility_off_24px.png b/img/btn_visibility_off_24px.png deleted file mode 100644 index a3711023..00000000 Binary files a/img/btn_visibility_off_24px.png and /dev/null differ diff --git a/img/btn_visibility_on.png b/img/btn_visibility_on.png deleted file mode 100644 index a3711023..00000000 Binary files a/img/btn_visibility_on.png and /dev/null differ diff --git a/img/ic_facebook.png b/img/ic_facebook.png deleted file mode 100644 index 8a99d0de..00000000 Binary files a/img/ic_facebook.png and /dev/null differ diff --git a/img/ic_google.png b/img/ic_google.png deleted file mode 100644 index 199f3d62..00000000 Binary files a/img/ic_google.png and /dev/null differ diff --git a/img/ic_instagram.png b/img/ic_instagram.png deleted file mode 100644 index 5de32540..00000000 Binary files a/img/ic_instagram.png and /dev/null differ diff --git a/img/ic_kakaotalk.png b/img/ic_kakaotalk.png deleted file mode 100644 index bfadc1d3..00000000 Binary files a/img/ic_kakaotalk.png and /dev/null differ diff --git a/img/ic_logo.png b/img/ic_logo.png deleted file mode 100644 index ee10fdc0..00000000 Binary files a/img/ic_logo.png and /dev/null differ diff --git a/img/ic_twitter.png b/img/ic_twitter.png deleted file mode 100644 index 75f85548..00000000 Binary files a/img/ic_twitter.png and /dev/null differ diff --git a/img/ic_youtube.png b/img/ic_youtube.png deleted file mode 100644 index 8cd6e9c6..00000000 Binary files a/img/ic_youtube.png and /dev/null differ diff --git "a/img/\355\214\220\353\213\244 \354\226\274\352\265\264.png" "b/img/\355\214\220\353\213\244 \354\226\274\352\265\264.png" deleted file mode 100644 index a95dba91..00000000 Binary files "a/img/\355\214\220\353\213\244 \354\226\274\352\265\264.png" and /dev/null differ diff --git a/js/errorMessage.js b/js/errorMessage.js new file mode 100644 index 00000000..9e59f36d --- /dev/null +++ b/js/errorMessage.js @@ -0,0 +1,14 @@ +//에러 메시지 + +//에러 메시지 보여주기 +export function showError(inputEle, errorEle, message) { + inputEle.classList.add("error-border"); + errorEle.textContent = message; + errorEle.style.display = "block"; +} + +//에러 메세지 숨기기 +export function hideError(inputEle, errorEle) { + inputEle.classList.remove("error-border"); + errorEle.style.display = "none"; +} diff --git a/js/login.js b/js/login.js new file mode 100644 index 00000000..937addfe --- /dev/null +++ b/js/login.js @@ -0,0 +1,62 @@ +import { + validateEmailField, + validatePasswordField, + updateButtonState, +} from './validation.js'; + +import { ROUTES } from './shared_variable.js'; + +// DOM 요소 선택 +const userEmail = document.querySelector('#userEmail'); +const userPassword = document.querySelector('#userPassword'); +const emailErrorMsg = document.querySelector('#emailErrorMsg'); +const passwordErrorMsg = document.querySelector('#passwordErrorMsg'); +const loginButton = document.querySelector('#submitButton'); +const loginForm = document.querySelector('#loginForm'); +const toggleButton = document.querySelector('.togglePassword'); +const passwordIcon = toggleButton.querySelector('img'); + +// 유효성 상태 변수 +let isEmailValid = false; +let isPasswordValid = false; + +// 에러 메시지 존재 여부 검사 +function hasAnyErrorMessages(...errorElements) { + return errorElements.some((el) => el.textContent.trim() !== ''); +} + +// 폼 전체 검사 → 버튼 활성화 여부 결정 +function checkFormValidity() { + const hasError = hasAnyErrorMessages(emailErrorMsg, passwordErrorMsg); + const isFormValid = isEmailValid && isPasswordValid && !hasError; + updateButtonState(loginButton, isFormValid); +} + +// 이메일 유효성 검사 +userEmail.addEventListener('focusout', () => { + isEmailValid = validateEmailField(userEmail, emailErrorMsg); + checkFormValidity(); +}); + +// 비밀번호 유효성 검사 +userPassword.addEventListener('focusout', () => { + isPasswordValid = validatePasswordField(userPassword, passwordErrorMsg); + checkFormValidity(); +}); + +// 비밀번호 보기 토글 +toggleButton.addEventListener('click', () => { + const isVisible = userPassword.type === 'text'; + userPassword.type = isVisible ? 'password' : 'text'; + passwordIcon.src = isVisible + ? '../assets/img/btn_visibility_off.svg' + : '../assets/img/btn_visibility_on.svg'; +}); + +// 로그인 시 이동 +loginForm.addEventListener('submit', (e) => { + e.preventDefault(); + if (isEmailValid && isPasswordValid) { + window.location.href = ROUTES.items; + } +}); \ No newline at end of file diff --git a/js/shared_variable.js b/js/shared_variable.js new file mode 100644 index 00000000..8fa83e79 --- /dev/null +++ b/js/shared_variable.js @@ -0,0 +1,24 @@ +// Validation 기준 상수 +const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; +export const MIN_PASSWORD_LENGTH = 8; + +//이메일 유효성 검사 함수 +export function validateEmail(email) { + return EMAIL_REGEX.test(email.trim()); +} + +// 공통 에러 메세지 상수 +export const ERROR_MESSAGE = { + emptyEmail: "이메일을 입력해주세요.", + invalidEmail: "잘못된 이메일 형식입니다.", + emptyPassword: "비밀번호를 입력해주세요.", + shortPassword: `비밀번호를 ${MIN_PASSWORD_LENGTH}자 이상 입력해주세요.`, + emptyNickname: "닉네임을 입력해주세요.", + passwordMismatch: "비밀번호가 일치하지 않습니다.", +}; + +// 이동 경로 상수 +export const ROUTES = { + items: "/items", + login: "../login/login.html", +}; \ No newline at end of file diff --git a/js/signup.js b/js/signup.js new file mode 100644 index 00000000..73a00622 --- /dev/null +++ b/js/signup.js @@ -0,0 +1,93 @@ +import { + validateEmailField, + validatePasswordField, + validateNicknameField, + validatePasswordConfirmField, + updateButtonState +} from './validation.js'; + +import { ROUTES } from './shared_variable.js'; + +// DOM 요소 선택 +const userEmail = document.querySelector('#userEmail'); +const userNickname = document.querySelector('#userNickname'); +const userPassword = document.querySelector('#userPassword'); +const passwordConfirm = document.querySelector('#passwordConfirm'); + +const emailErrorMsg = document.querySelector('#emailErrorMsg'); +const nicknameErrorMsg = document.querySelector('#nicknameErrorMsg'); +const pwErrorMsg = document.querySelector('#passwordErrorMsg'); +const pwConfirmErrorMsg = document.querySelector('#pwConfirmErrorMsg'); + +const signupButton = document.querySelector('#submitButton'); +const signupForm = document.querySelector('#signupForm'); +const toggleButtons = document.querySelectorAll('.togglePassword'); + +// 유효성 상태 +let isEmailValid = false; +let isNicknameValid = false; +let isPasswordValid = false; +let isPasswordMatch = false; + +// 에러 메시지 존재 여부 검사 +function hasAnyErrorMessages(...errorElements) { + return errorElements.some((el) => el.textContent.trim() !== ''); +} + +// 전체 유효성 검사 후 버튼 상태 갱신 +function checkFormValidity() { + const hasError = hasAnyErrorMessages( + emailErrorMsg, + nicknameErrorMsg, + pwErrorMsg, + pwConfirmErrorMsg + ); + const isFormValid = + isEmailValid && isNicknameValid && isPasswordValid && isPasswordMatch && !hasError; + updateButtonState(signupButton, isFormValid); +} + +// 이벤트 바인딩 +userEmail.addEventListener('focusout', () => { + isEmailValid = validateEmailField(userEmail, emailErrorMsg); + checkFormValidity(); +}); + +userNickname.addEventListener('focusout', () => { + isNicknameValid = validateNicknameField(userNickname, nicknameErrorMsg); + checkFormValidity(); +}); + +userPassword.addEventListener('focusout', () => { + isPasswordValid = validatePasswordField(userPassword, pwErrorMsg); + isPasswordMatch = validatePasswordConfirmField(userPassword, passwordConfirm, pwConfirmErrorMsg); + checkFormValidity(); +}); + +passwordConfirm.addEventListener('focusout', () => { + isPasswordMatch = validatePasswordConfirmField(userPassword, passwordConfirm, pwConfirmErrorMsg); + checkFormValidity(); +}); + +// 비밀번호 보기 토글 +toggleButtons.forEach((btn) => { + const input = btn.previousElementSibling; + const icon = btn.querySelector('img'); + + btn.addEventListener('click', () => { + const showing = input.type === 'text'; + input.type = showing ? 'password' : 'text'; + icon.src = showing + ? '../assets/img/btn_visibility_off.svg' + : '../assets/img/btn_visibility_on.svg'; + }); +}); + +// 회원가입 완료 시 → 로그인 페이지로 이동 +signupForm.addEventListener('submit', (e) => { + e.preventDefault(); + + if (isEmailValid && isNicknameValid && isPasswordValid && isPasswordMatch) { + window.location.href = ROUTES.login; + } +}); \ No newline at end of file diff --git a/js/validation.js b/js/validation.js new file mode 100644 index 00000000..1a91da1f --- /dev/null +++ b/js/validation.js @@ -0,0 +1,70 @@ +import { validateEmail, MIN_PASSWORD_LENGTH, ERROR_MESSAGE } from './shared_variable.js'; +import { showError, hideError } from './errorMessage.js'; + +// 이메일 input 유효성 검사 +export function validateEmailField(inputEle, errorEle) { + const value = inputEle.value.trim(); + + if (value === "") { + showError(inputEle, errorEle, ERROR_MESSAGE.emptyEmail); + return false; + } + + if (!validateEmail(value)) { + showError(inputEle, errorEle, ERROR_MESSAGE.invalidEmail); + return false; + } + + hideError(inputEle, errorEle); + return true; +} + +// 비밀번호 input 유효성 검사 +export function validatePasswordField(inputEle, errorEle) { + const value = inputEle.value.trim(); + + if (value === "") { + showError(inputEle, errorEle, ERROR_MESSAGE.emptyPassword); + return false; + } + + if (value.length < MIN_PASSWORD_LENGTH) { + showError(inputEle, errorEle, ERROR_MESSAGE.shortPassword); + return false; + } + + hideError(inputEle, errorEle); + return true; +} + +// 닉네임 input 유효성 검사 (회원가입 전용) +export function validateNicknameField(inputEle, errorEle) { + const value = inputEle.value.trim(); + + if (value === "") { + showError(inputEle, errorEle, ERROR_MESSAGE.emptyNickname); + return false; + } + + hideError(inputEle, errorEle); + return true; +} + +// 비밀번호 확인 input 검사 (회원가입 전용) +export function validatePasswordConfirmField(passwordEle, confirmEle, errorEle) { + const password = passwordEle.value.trim(); + const confirm = confirmEle.value.trim(); + + if (password !== confirm) { + showError(confirmEle, errorEle, ERROR_MESSAGE.passwordMismatch); + return false; + } + + hideError(confirmEle, errorEle); + return true; +} + +//버튼 상태 업데이트 (활성화 / 비활성화) +export function updateButtonState(buttonEle, isValid) { + buttonEle.disabled = !isValid; +} \ No newline at end of file diff --git a/login/login.css b/login/login.css new file mode 100644 index 00000000..d1b849e7 --- /dev/null +++ b/login/login.css @@ -0,0 +1,196 @@ +body { + margin: 0; +} + +.content-box { + margin: 8rem auto; + max-width: 400px; + padding: 0 16px; +} + +.container { + vertical-align: middle; + display: flex; + align-items: center; + justify-content: center; + gap: 40px; + margin-top: 230px; + border: 1px; +} + +.logo a { + font-weight: 700; + font-size: 4rem; + line-height: 100%; + text-decoration: none; + color: #3692ff; + display: flex; + align-items: center; + gap: 20px; +} + +.logo img { + width: 103px; + height: 103px; +} + +.sign-in { + display: flex; + text-align: left; + align-items: center; + justify-content: center; + flex-direction: column; +} + +.btn_visibility { + position: relative; + display: flex; + align-items: center; + width: 100%; +} + +.btn_visibility button { + position: absolute; + right: 8px; + background: none; + border: none; + cursor: pointer; + padding: 0; +} + +.btn_visibility img { + width: 24px; + height: 24px; +} + +form { + margin-top: 40px; + gap: 16px; +} + +.sign-in label { + font-weight: 700; + font-size: 18px; + line-height: 26px; + letter-spacing: 0; + color: #1f2937; + width: 47px; + height: 26px; +} + +input { + width: 640px; + height: 56px; + border: 2px #3182f6; + border-radius: 12px; + background-color: #f3f4f8; + margin-top: 16px; + margin-bottom: 24px; +} + +.button { + text-align: center; + width: 100%; + padding: 16px 124px; + gap: 10px; + border-radius: 40px; + border: none; + background-color: #3692ff; + margin-bottom: 24px; + font-weight: 600; + font-size: 20px; + line-height: 32px; + letter-spacing: 0; + vertical-align: middle; + color: #f3f4f6; +} + +.easy-sign-up { + padding: 16px 23px; + gap: 10px; + background-color: #e6f2ff; + justify-content: space-between; + display: flex; + text-align: center; + align-items: center; +} + +.easy-sign-up a { + margin: 0; + font-size: 16px; + font-weight: 500; + line-height: 26px; + letter-spacing: 0; + color: #1f2937; + text-decoration: none; +} + +.easy-sign-up img { + width: 42px; + height: 42px; +} + +form p { + gap: 4px; + font-size: 14px; + font-weight: 500; + text-align: center; + line-height: 24px; + color: #1f2937; +} +form a { + font-size: 14px; + font-weight: 500; + line-height: 100%; + text-decoration: underline; + color: #3692ff; +} + +.create-an-account { + display: flex; + justify-content: center; + align-items: center; +} + +.error-message { + color: #f74747; + font-size: 14px; + font-weight: 600; + line-height: 24px; + margin: 4px 0; + text-align: left; + display: block; + width: 100%; +} + +.error-border { + border: 1px solid #f74747; +} + +.button:disabled { + background-color: #cccccc; + color: #666666; + cursor: not-allowed; + opacity: 0.6; +} + +@media screen and (min-width: 1200px) { +} +@media screen and (min-width: 768px) and (max-width: 1199px) { + header { + padding: 9px 24px; + } +} +@media screen and (min-width: 375px) and (max-width: 767px) { + header { + padding: 9px 16px; + } + + .content-box { + padding: 0 16px; + width: 100%; + max-width: 400px; + box-sizing: border-box; + margin: 0 auto; + } +} diff --git a/login/login.html b/login/login.html new file mode 100644 index 00000000..b40ed1cf --- /dev/null +++ b/login/login.html @@ -0,0 +1,87 @@ + + + + + + + + 로그인 + + +
+
+ +
+
+
+
+
+ +

+
+
+
+
+
+ + +
+

+
+
+ + + +
+
+
+ + + + diff --git a/signup/signup.css b/signup/signup.css new file mode 100644 index 00000000..2b297385 --- /dev/null +++ b/signup/signup.css @@ -0,0 +1,193 @@ +body { + margin: 0; +} + +.content-box { + margin: 230px 640px; +} + +.container { + vertical-align: middle; + display: flex; + align-items: center; + justify-content: center; + gap: 40px; + margin-top: 230px; + border: 1px; +} + +.logo a { + font-weight: 700; + font-size: 4rem; + line-height: 100%; + text-decoration: none; + color: #3692ff; + display: flex; + align-items: center; + gap: 20px; +} + +.logo img { + width: 103px; + height: 103px; +} + +.sign-in { + display: flex; + text-align: left; + align-items: center; + justify-content: center; + flex-direction: column; +} + +.btn_visibility { + position: relative; + display: flex; + align-items: center; + width: 100%; +} + +.btn_visibility button { + position: absolute; + right: 8px; + background: none; + border: none; + cursor: pointer; + padding: 0; +} + +.btn_visibility img { + width: 24px; + height: 24px; +} + +form { + margin-top: 40px; + gap: 16px; +} + +.sign-in label { + font-weight: 700; + font-size: 18px; + line-height: 26px; + letter-spacing: 0; + color: #1f2937; + width: 47px; + height: 26px; +} + +input { + width: 640px; + height: 56px; + border: 2px #3182f6; + border-radius: 12px; + background-color: #f3f4f8; + margin-top: 16px; + margin-bottom: 24px; +} + +.button { + text-align: center; + width: 100%; + padding: 16px 124px; + gap: 10px; + border-radius: 40px; + border: none; + background-color: #3692ff; + margin-bottom: 24px; + font-weight: 600; + font-size: 20px; + line-height: 32px; + letter-spacing: 0; + vertical-align: middle; + color: #f3f4f6; +} + +.easy-sign-up { + padding: 16px 23px; + gap: 10px; + background-color: #e6f2ff; + justify-content: space-between; + display: flex; + text-align: center; + align-items: center; +} + +.easy-sign-up a { + margin: 0; + font-size: 16px; + font-weight: 500; + line-height: 26px; + letter-spacing: 0; + color: #1f2937; + text-decoration: none; +} + +.easy-sign-up img { + width: 42px; + height: 42px; +} + +form p { + gap: 4px; + font-size: 14px; + font-weight: 500; + text-align: center; + line-height: 24px; + color: #1f2937; +} + +form a { + font-size: 14px; + font-weight: 500; + line-height: 100%; + text-decoration: underline; + color: #3692ff; +} + +.create-an-account { + display: flex; + justify-content: center; + align-items: center; +} + +.error-message { + color: #f74747; + font-size: 14px; + font-weight: 600; + line-height: 24px; + margin: 4px 0; + text-align: left; + display: block; + width: 100%; +} + +.error-border { + border: 1px solid #f74747; +} + +.button:disabled { + background-color: #cccccc; + color: #666666; + cursor: not-allowed; + opacity: 0.6; +} + +@media screen and (min-width: 1200px) {} +@media screen and (min-width: 768px) and (max-width: 1199px) { + header { + padding: 9px 24px; + } +} +@media screen and (min-width: 375px) and (max-width: 767px) { + header { + padding: 9px 16px; + } + .content-box { + padding: 0 16px; + width: 100%; + max-width: 400px; + box-sizing: border-box; + margin: 0 auto; + } +} diff --git a/signup/signup.html b/signup/signup.html new file mode 100644 index 00000000..bf69703e --- /dev/null +++ b/signup/signup.html @@ -0,0 +1,120 @@ + + + + + + + + 회원가입 + + +
+
+ +
+
+
+
+
+ +

+
+
+
+
+ +

+
+
+
+
+
+ + +
+

+
+
+
+
+
+ + +
+

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