diff --git a/auth/signin.html b/auth/signin.html index f38d3b1a8..e09d332f8 100644 --- a/auth/signin.html +++ b/auth/signin.html @@ -1,44 +1,56 @@ - - - - + 로그인 + + -
-
- - - - 회원이 아니신가요? 회원 가입하기 + + + +

+ 회원이 아니신가요?회원 가입하기 -

-
-
- - +

+ +
+ +
+
+ + +
+
+ + + +
-
- - - -
- + -
- 다른 방식으로 가입하기 -
- google - kakao +
+ 소셜 로그인 +
+ + + + + +
diff --git a/auth/signup.html b/auth/signup.html index 9320410d4..46145299d 100644 --- a/auth/signup.html +++ b/auth/signup.html @@ -1,53 +1,63 @@ - - - - + 회원가입 + + -
-
- - - - 이미 회원이신가요? 로그인 하기 -
-
-
- - +
+ + + +

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

+
+
+ +
+
+ + +
+
+ + + +
+
+ + + +
-
- - - -
-
- - - -
- + -
- 다른 방식으로 가입하기 -
- - +
+ 다른 방식으로 가입하기 +
+ + + + + +
diff --git a/auth/styles.css b/auth/styles.css index 798d12919..0d73c38c9 100644 --- a/auth/styles.css +++ b/auth/styles.css @@ -1,143 +1,163 @@ +@import "../src/global.css"; + body { - font-family: Arial, sans-serif; - background: var(--gray-5, #f0f6ff); - margin: 0; - padding-top: 24rem; + padding-top: 23.8rem; + background-color: var(--background); + display: flex; + flex-direction: column; + align-items: center; + row-gap: 3rem; } -.logo { - width: 210px; +header { + display: flex; + flex-direction: column; + row-gap: 1.6rem; } -.form-container { - margin: 0 auto; - width: 400px; +.logo-link { + display: flex; + justify-content: center; } -header { - display: flex; - flex-direction: column; - align-items: center; - gap: 16px; +.header-logo { + height: 3.8rem; } -header span { - font-size: 1.4rem; - font-style: normal; +.header-message { + display: flex; + column-gap: 0.8rem; + font-size: 1.6rem; font-weight: 400; - line-height: 24px; + line-height: 150%; } -header span > a { - color: var(--primary, #6d6afe); +.header-link { + height: fit-content; + font-size: 1.6rem; font-weight: 600; - text-decoration: underline; + line-height: normal; + color: var(--primary); + border-bottom: 0.1rem solid var(--primary); } -form { +.sign-box { display: flex; flex-direction: column; - margin: 30px 0; - gap: 24px; + align-items: center; + row-gap: 3.2rem; + width: 40rem; } -input { - margin-bottom: 10px; - padding: 10px; - border: 1px solid #ddd; - border-radius: 5px; +.sign-form { + display: flex; + flex-direction: column; + row-gap: 3rem; + width: 100%; } -.form-group { +.sign-inputs { display: flex; flex-direction: column; - align-items: flex-start; - gap: 12px; + row-gap: 2.4rem; } -.form-group label { - font-size: 1.4rem; - font-style: normal; - font-weight: 400; - line-height: normal; +.sign-input-box { + display: flex; + flex-direction: column; + row-gap: 1.2rem; } -.form-group input { - width: 100%; - padding: 18px 15px; +.sign-password { + position: relative; } -input:focus { - border: 1px solid var(--primary, #6d6afe); - outline: none; +.sign-input-label { + font-size: 1.4rem; + font-weight: 400; } -input[type="password"] { - padding-right: 40px; +.sign-input { + padding: 1.8rem 1.5rem; + border-radius: 0.8rem; + border: 0.1rem solid var(--gray-3); + font-size: 1.6rem; + line-height: 150%; } -.password-wrapper { - position: relative; +.sign-input:focus { + border-color: var(--primary); } -.eye-icon { +.eye-button { position: absolute; - top: 52%; - right: 15px; - width: 16px; - height: 16px; - cursor: pointer; + bottom: 2.2rem; + right: 1.5rem; + width: 1.6rem; + height: 1.6rem; } -button { +.cta { display: flex; - width: 400px; - padding: 16px 20px; justify-content: center; align-items: center; - gap: 10px; - border: 0; - border-radius: 8px; - background: var( - --gra-purpleblue-to-skyblue, - linear-gradient(91deg, var(--primary, #6d6afe) 0.12%, #6ae3fe 101.84%) - ); + width: 100%; + height: 5.4rem; + background-image: linear-gradient(135deg, var(--primary) 0%, #6ae3fe 100%); + border-radius: 0.8rem; color: #f5f5f5; - font-family: Pretendard; - font-size: 18px; - font-style: normal; + font-size: 1.8rem; font-weight: 600; - line-height: normal; } -.auth { +.sns-box { display: flex; - width: 100%; - padding: 12px 24px; justify-content: space-between; align-items: center; + width: 100%; + padding: 1.2rem 2.4rem; + border-radius: 0.8rem; + border: 0.1rem solid var(--gray-3); + background-color: var(--gray-4); +} - border-radius: 8px; - border: 1px solid var(--linkbrary-gray-20, #ccd5e3); - background: var(--linkbrary-gray-10, #e7effb); +.sns-links { + display: flex; + column-gap: 1.6rem; } -.auth span { - color: var(--linkbrary-gray-100, #373740); +.sns-link { + display: flex; + justify-content: center; + align-items: center; + width: 4.2rem; + height: 4.2rem; + border-radius: 50%; +} - font-family: Pretendard; - font-size: 14px; - font-style: normal; +.sns-text { + font-size: 1.4rem; font-weight: 400; - line-height: normal; + color: var(--gray100); } -.icon { - display: flex; - gap: 1.6rem; +.google-link { + background-color: var(--white); + border: 0.1rem solid #d3d4dd; } -.auth-icon { - width: 42px; - height: 42px; +.kakao-link { + padding-top: 0.2rem; + background-color: #f5e14b; +} + +@media (max-width: 767px) { + body { + padding: 12rem 3.2rem; + } + + .sign-box { + width: 100%; + max-width: 40rem; + } } diff --git a/index.html b/index.html index 5e9fce301..eaa437903 100644 --- a/index.html +++ b/index.html @@ -8,18 +8,30 @@ type="text/css" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" /> + + + + + + +

@@ -27,7 +39,8 @@

세상의 모든 정보를
- 쉽게 저장하고 관리해 보세요 + 쉽게 저장하고
+ 관리해 보세요

링크 추가하기 @@ -44,14 +57,14 @@

원하는 링크를 -
+
저장하세요

나중에 읽고 싶은 글, 다시 보고 싶은 영상, -
+
사고 싶은 옷, 기억하고 싶은 모든 것을 -
+
한 공간에 저장하세요.

링크를 폴더로 -
+
관리하세요

나만의 폴더를 무제한으로 만들고 -
+
다양하게 활용할 수 있습니다.

저장한 링크를 -
+
공유해 보세요

- 여러 링크를 폴더에 담고 공유할 수 있습니다. -
- 가족, 친구, 동료들에게 쉽고 빠르게 링크를 -
- 공유해 보세요. + 여러 링크를 폴더에 담고 공유할 수 있습니다. 가족, 친구, 동료들에게 + 쉽고 빠르게 링크를 공유해 보세요.

저장한 링크를 -
+
검색해 보세요

diff --git a/src/colors.css b/src/colors.css new file mode 100644 index 000000000..dc8179b32 --- /dev/null +++ b/src/colors.css @@ -0,0 +1,15 @@ +:root { + /* root */ + --background: #f0f6ff; + --primary: #6d6afe; + --Red: #ff5b56; + --black: #111322; + --white: #fff; + + /* gray */ + --gray-1: #3e3e43; + --gray-2: #9fa6b2; + --gray-3: #ccd5e3; + --gray-4: #e7effb; + --gray-5: #f0f6ff; +} diff --git a/src/global.css b/src/global.css new file mode 100644 index 000000000..f20ab4ae7 --- /dev/null +++ b/src/global.css @@ -0,0 +1,2 @@ +@import "./colors.css"; +@import "./reset.css"; diff --git a/src/reset.css b/src/reset.css index 6f07dc1be..41b0cb0d3 100644 --- a/src/reset.css +++ b/src/reset.css @@ -1,15 +1,4 @@ /* user agent stylesheet 초기화 */ -:root { - --primary: #6d6afe; - --Red: #ff5b56; - --black: #111322; - --white: #fff; - --gray-1: #3e3e43; - --gray-2: #9fa6b2; - --gray-3: #ccd5e3; - --gray-4: #e7effb; - --gray-5: #f0f6ff; -} * { box-sizing: border-box; @@ -26,3 +15,14 @@ a { color: inherit; text-decoration: none; } + +input:focus { + outline: none; +} + +button { + border: none; + padding: unset; + background-color: unset; + cursor: pointer; +} diff --git a/src/style.css b/src/style.css index ede5bc819..e8e2df625 100644 --- a/src/style.css +++ b/src/style.css @@ -1,21 +1,36 @@ -header { +@import "./global.css"; + +body { display: flex; flex-direction: column; align-items: center; - width: 100%; - background-color: var(--gray-4, #e7effb); } nav { + display: flex; + justify-content: center; + position: sticky; + top: 0; + width: 100%; + background-color: #edf7ff; +} + +.gnb { display: flex; justify-content: space-between; align-items: center; width: 100%; - max-width: 192rem; height: 9.4rem; + max-width: 192rem; padding: 0 20rem; - position: fixed; - top: 0; +} + +header { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + background-color: #edf7ff; } .hero-header { @@ -26,17 +41,17 @@ nav { padding-top: 7rem; } +.hero-break { + display: none; +} + .cta { display: flex; justify-content: center; align-items: center; height: 5.4rem; cursor: pointer; - background-image: linear-gradient( - 135deg, - var(--primary, #6d6afe) 0%, - #6ae3fe 100% - ); + background-image: linear-gradient(135deg, var(--primary) 0%, #6ae3fe 100%); border-radius: 0.8rem; color: #f5f5f5; font-size: 1.8rem; @@ -59,11 +74,7 @@ nav { } .slogan-gradient { - background-image: linear-gradient( - 119deg, - var(--primary, #6d6afe) 0%, - #ff9f9f 100% - ); + background-image: linear-gradient(119deg, var(--primary) 0%, #ff9f9f 100%); } .background-clip-text { @@ -151,7 +162,7 @@ footer { width: 100%; height: 16rem; padding-top: 3.2rem; - background-color: #111322; + background-color: var(--black); } .footer-box { @@ -186,3 +197,145 @@ footer { column-gap: 1.2rem; height: 2rem; } + +/* tablet */ +@media screen and (max-width: 1199px) { + .gnb { + max-width: 80rem; + padding: 0 3.2rem; + } + .hero-header { + padding-top: 3.9rem; + } + header { + margin-bottom: 3.9rem; + } + .hero-break { + display: block; + } + + .cta-long { + width: 31rem; + } + + .hero-image { + width: 65rem; + height: 38.3rem; + } + .content-image { + width: 38.5rem; + height: 31.5rem; + } + article { + padding-top: 3rem; + } + section { + column-gap: 5.2rem; + height: 41.5rem; + } + + section:nth-of-type(odd) { + grid-template: + ". image" + "title image" + "description image" + ". image" + /26.2rem 38.5rem; + } + + section:nth-of-type(even) { + grid-template: + "image ." + "image title" + "image description" + "image ." + /38.5rem 26.2rem; + } +} + +/* mobile */ +@media screen and (max-width: 767px) { + .slogan { + font-size: 3.2rem; + line-height: normal; + } + + .hero-image { + width: 100%; + height: auto; + padding: 0 32px; + } + .content-image { + width: 100%; + height: auto; + margin: 0 auto; + } + + .cta-long { + width: 20rem; + } + + article { + padding-top: 0; + padding-bottom: 4rem; + } + + section { + display: flex; + flex-direction: column; + height: fit-content; + padding: 4rem 3.2rem; + } + + section:nth-of-type(odd) { + grid-template: + "title" + "image" + "description"; + } + + section:nth-of-type(even) { + grid-template: + "title" + "image" + "description"; + } + + .section-break { + display: none; + } + + .title { + font-size: 24px; + font-style: normal; + font-weight: 700; + line-height: normal; + letter-spacing: -0.3px; + } + + .description { + font-size: 1.5rem; + font-weight: 500; + color: #6b6b6b; + line-height: 150%; + } + + .footer-box { + display: grid; + grid-template: + "links sns" + "copyright ."; + gap: 60px; + padding: 0 3.2rem; + } + + .footer-links { + grid-area: links; + } + .copyright { + grid-area: copyright; + } + .sns { + grid-area: sns; + } +}