diff --git a/README.md b/README.md new file mode 100644 index 000000000..9e4362a59 --- /dev/null +++ b/README.md @@ -0,0 +1,36 @@ +## 요구사항 + +### 기본 + +- [o] 2주차 부터는 Github에 Pull Request를 만들어 주세요. +- [o] Netlify에 파일 배포가 아닌 포크한 Github 레포지토리와 연결해 주세요. +- [o] 아래로 스크롤 해도 "Linkbrary"로고와 "로그인" 버튼이 있는 상단 네비게이션 바(Global Navigation Bar)가 최상단에 고정되게 해주세요. +- (로그인, 회원 가입 페이지 공통) +- [o] Linkbrary 로고 클릭시 루트 페이지("/")로 이동해야 합니다. +- [o] 로그인 페이지, 회원가입 페이지 모두 로고 위 상단 여백이 동일해야 합니다. +- [o] input 요소에 focus in 일 때, 테두리 색상은 파랑색입니다. (pseudo class를 활용해 보세요) +- [o] input 요소에 focus out 일 때, 테두리 색상은 회색입니다. +- [o] input 요소에 빨강색 테두리와 아래 빨강색 문구는 무시해 주세요.(추후 만들어갈 예정이에요.) +- [o] SNS 아이콘들은 클릭시 각각 “https://www.google.com/”, “https://www.kakaocorp.com/page/” 으로 이동합니다. +- [o] “로그인 하기”는 클릭시 “/signin” 페이지로 이동합니다. +성 +### 심화 + +- [] 비밀번호 input 요소 위에 눈모양 아이콘을 추가해 주세요.(추후 클릭으로 비밀번호를 보거나 가릴 수 있도록 기능을 만들어 갈 예정이에요.) +- [x] palette에 있는 color값들을 css 변수로 등록하고 사용해 주세요. + +## 주요 변경사항 + +- Landing Page, SignIn Page, SignUp Page 완성 + +## 스크린샷 + +![image](/screenshots/스크린샷%202023-11-08%20200037.png) +![image](/screenshots/스크린샷%202023-11-08%20200259.png) +![image](/screenshots/스크린샷%202023-11-08%20200322.png) + +## 멘토에게 + +- 늦게 올려드려서 죄송합니다. +- 3주차 진행사항이 조금 섞여 있습니다. (nav바 고정 등) +- 셀프 코드 리뷰를 통해 질문 이어가겠습니다. diff --git a/faq.html b/faq.html new file mode 100644 index 000000000..6612ae103 --- /dev/null +++ b/faq.html @@ -0,0 +1,7 @@ + + + + + FAQ + + diff --git a/images/Kakao-yellow.svg b/images/Kakao-yellow.svg new file mode 100644 index 000000000..f0da6389e --- /dev/null +++ b/images/Kakao-yellow.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/images/Kakao.svg b/images/Kakao.svg new file mode 100644 index 000000000..69a3b3109 --- /dev/null +++ b/images/Kakao.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/images/eye-off.svg b/images/eye-off.svg new file mode 100644 index 000000000..8064ce682 --- /dev/null +++ b/images/eye-off.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/images/eye-on.svg b/images/eye-on.svg new file mode 100644 index 000000000..737575ae6 --- /dev/null +++ b/images/eye-on.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/images/facebook.svg b/images/facebook.svg new file mode 100644 index 000000000..b9c9d4939 --- /dev/null +++ b/images/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/google.png b/images/google.png new file mode 100644 index 000000000..a32846c50 Binary files /dev/null and b/images/google.png differ diff --git a/images/google.svg b/images/google.svg new file mode 100644 index 000000000..75c873ae7 --- /dev/null +++ b/images/google.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/images/hero.png b/images/hero.png new file mode 100644 index 000000000..11dc528fb Binary files /dev/null and b/images/hero.png differ diff --git a/images/image1.png b/images/image1.png new file mode 100644 index 000000000..f6355852b Binary files /dev/null and b/images/image1.png differ diff --git a/images/image2.png b/images/image2.png new file mode 100644 index 000000000..b9a3c674a Binary files /dev/null and b/images/image2.png differ diff --git a/images/image3.png b/images/image3.png new file mode 100644 index 000000000..986a39679 Binary files /dev/null and b/images/image3.png differ diff --git a/images/image4.png b/images/image4.png new file mode 100644 index 000000000..762bdc960 Binary files /dev/null and b/images/image4.png differ diff --git a/images/instagram.svg b/images/instagram.svg new file mode 100644 index 000000000..0b9337b07 --- /dev/null +++ b/images/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/logo.svg b/images/logo.svg new file mode 100644 index 000000000..282022090 --- /dev/null +++ b/images/logo.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/images/twitter.svg b/images/twitter.svg new file mode 100644 index 000000000..14a6069a1 --- /dev/null +++ b/images/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/youtube.svg b/images/youtube.svg new file mode 100644 index 000000000..28ed0e8ba --- /dev/null +++ b/images/youtube.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 000000000..d54ad3910 --- /dev/null +++ b/index.html @@ -0,0 +1,115 @@ + + + + + Linkbrary + + + + + + +
+ +
+

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

+ + 링크 추가하기 + + Linkbrary 서비스 소개 +
+
+
+
+

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

+

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

+ 링크의 내용이 담긴 카드들 +
+
+

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

+

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

+ 폴더 이름 변경 기능 +
+
+

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

+

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

+ 폴더 공유 기능 +
+
+

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

+

중요한 정보들을 검색으로 쉽게 찾아보세요.

+ 링크 검색 기능 +
+
+ + + diff --git a/privacy.html b/privacy.html new file mode 100644 index 000000000..abf71aaaf --- /dev/null +++ b/privacy.html @@ -0,0 +1,7 @@ + + + + + Privacy + + diff --git "a/screenshots/\354\212\244\355\201\254\353\246\260\354\203\267 2023-11-08 200037.png" "b/screenshots/\354\212\244\355\201\254\353\246\260\354\203\267 2023-11-08 200037.png" new file mode 100644 index 000000000..749727355 Binary files /dev/null and "b/screenshots/\354\212\244\355\201\254\353\246\260\354\203\267 2023-11-08 200037.png" differ diff --git "a/screenshots/\354\212\244\355\201\254\353\246\260\354\203\267 2023-11-08 200259.png" "b/screenshots/\354\212\244\355\201\254\353\246\260\354\203\267 2023-11-08 200259.png" new file mode 100644 index 000000000..6831d89db Binary files /dev/null and "b/screenshots/\354\212\244\355\201\254\353\246\260\354\203\267 2023-11-08 200259.png" differ diff --git "a/screenshots/\354\212\244\355\201\254\353\246\260\354\203\267 2023-11-08 200322.png" "b/screenshots/\354\212\244\355\201\254\353\246\260\354\203\267 2023-11-08 200322.png" new file mode 100644 index 000000000..b5081d2df Binary files /dev/null and "b/screenshots/\354\212\244\355\201\254\353\246\260\354\203\267 2023-11-08 200322.png" differ diff --git a/signin.html b/signin.html new file mode 100644 index 000000000..2abdd64c5 --- /dev/null +++ b/signin.html @@ -0,0 +1,54 @@ + + + + + 로그인 + + + + + +
+
+ + + +
+

회원이 아니신가요?

+ 회원 가입하기 +
+
+

이메일

+ +
+
+

비밀번호

+ + + +
+ + 로그인 + + +
+ +
+ + diff --git a/signup.html b/signup.html new file mode 100644 index 000000000..f611e083f --- /dev/null +++ b/signup.html @@ -0,0 +1,60 @@ + + + + + 회원가입 + + + + + +
+
+ + + +
+

이미 회원이신가요?

+ 로그인 하기 +
+
+

이메일

+ +
+
+

비밀번호

+ + + +
+
+

비밀번호 확인

+ + + +

비밀번호가 다릅니다

+
+ + 회원가입 + + +
+
+ + diff --git a/src/reset.css b/src/reset.css new file mode 100644 index 000000000..ec6265ebe --- /dev/null +++ b/src/reset.css @@ -0,0 +1,17 @@ +/* user agent stylesheet 초기화 */ + +* { + box-sizing: border-box; + margin: 0; + font-family: "Pretendard"; +} + +html, +body { + font-size: 62.5%; +} + +a { + color: inherit; + text-decoration: none; +} diff --git a/src/signin.css b/src/signin.css new file mode 100644 index 000000000..610c1d837 --- /dev/null +++ b/src/signin.css @@ -0,0 +1,148 @@ +.body { + color: var(--black, #000); + font-family: Pretendard; + font-style: normal; +} + +.signin { + display: flex; + width: 100%; + padding: 238px 0px 252px 0px; + justify-content: center; + align-items: center; + background: var(--linkbrary-bg, #F0F6FF); +} + +#logo { + width: 210.583px; + height: 38px; +} + +.signin-body { + display: flex; + flex-direction: column; + align-items: center; + gap: 30px; +} + +.check-user { + display: flex; + align-items: flex-start; + gap: 8px; +} +.check-user > p { + font-size: 16px; + font-weight: 400; + line-height: 24px; +} +.check-user > a { + color: var(--linkbrary-primary-color, #6D6AFE); + font-size: 16px; + font-weight: 600; + line-height: normal; +} + +.input-div { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 12px;; + position: relative; +} +.input-div > p { + font-size: 14px; + font-weight: 400; + line-height: normal; +} +.input-div input { + display: flex; + width: 400px; + padding: 18px 15px; + justify-content: center; + align-items: center; + border-radius: 8px; + background: var(--linkbrary-white, #FFF); + border: 1px solid var(--linkbrary-gray-20, #CCD5E3); +} +.input-div input :focus { + outline: none; + border: 1px solid var(--linkbrary-primary-color, #6D6AFE); +} + +.eye { + width: 16px; + height: 16px; + fill: #373740; + position: absolute; + top: 50%; + right: 5%; + transform: translateY(50%); +} + +.cta { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 5.4rem; + cursor: pointer; + background-image: linear-gradient(135deg, #6d6afe 0%, #6ae3fe 100%); + border-radius: 0.8rem; + color: #f5f5f5; + font-size: 1.8rem; + font-weight: 600; +} + +.social-login { + display: flex; + width: 100%; + padding: 12px 24px; + justify-content: space-between; + align-items: center; + border-radius: 8px; + border: 1px solid var(--linkbrary-gray-20, #CCD5E3); + background: var(--linkbrary-gray-10, #E7EFFB); +} +.social-login > p { + color: var(--linkbrary-gray-100, #373740); + font-size: 14px; + font-weight: 400; + line-height: normal; +} + +.social-icons { + display: flex; + align-items: flex-start; + gap: 16px; +} +.social-icon { + width: 42px; + height: 42px; + position: relative; + width: 42px; + height: 42px; + margin: 0 0; +} +#icon-google { + display: flex; + width: 22px; + height: 22px; + justify-content: center; + align-items: center; + flex-shrink: 0; + z-index: 1; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +#icon-kakao { + width: 26px; + height: 24px; + flex-shrink: 0; + z-index: 1; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} \ No newline at end of file diff --git a/src/signup.css b/src/signup.css new file mode 100644 index 000000000..f161dae4d --- /dev/null +++ b/src/signup.css @@ -0,0 +1,161 @@ +.body { + color: var(--black, #000); + font-family: Pretendard; + font-style: normal; +} + +.signup { + display: flex; + width: 100%; + padding: 238px 0px 252px 0px; + justify-content: center; + align-items: center; + background: var(--linkbrary-bg, #F0F6FF); +} + +#logo { + width: 210.583px; + height: 38px; +} + +.signup-body { + display: flex; + flex-direction: column; + align-items: center; + gap: 30px; +} + +.check-user { + display: flex; + align-items: flex-start; + gap: 8px; +} +.check-user > p { + font-size: 16px; + font-weight: 400; + line-height: 24px; +} +.check-user > a { + color: var(--linkbrary-primary-color, #6D6AFE); + font-size: 16px; + font-weight: 600; + line-height: normal; +} + +.input-div { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 6px; + position: relative; +} +.input-div > p { + font-size: 14px; + font-weight: 400; + line-height: normal; +} +.input-div input { + display: flex; + width: 400px; + padding: 18px 15px; + justify-content: center; + align-items: center; + border-radius: 8px; + background: var(--linkbrary-white, #FFF); + border: 1px solid var(--linkbrary-gray-20, #CCD5E3); +} +.input-div input :focus { + outline: none; + border: 1px solid var(--linkbrary-primary-color, #6D6AFE); +} + +.eye { + width: 16px; + height: 16px; + fill: #373740; + position: absolute; + top: 35px; + right: 5%; + transform: translateY(50%); +} + +#password-repeat { + border: 1px solid var(--linkbrary-red, #FF5B56); +} + +#wrong-password { + color: var(--linkbrary-red, #FF5B56); + font-family: Pretendard; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: normal; +} + +.cta { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 5.4rem; + cursor: pointer; + background-image: linear-gradient(135deg, #6d6afe 0%, #6ae3fe 100%); + border-radius: 0.8rem; + color: #f5f5f5; + font-size: 1.8rem; + font-weight: 600; +} + +.social-join { + display: flex; + width: 100%; + padding: 12px 24px; + justify-content: space-between; + align-items: center; + border-radius: 8px; + border: 1px solid var(--linkbrary-gray-20, #CCD5E3); + background: var(--linkbrary-gray-10, #E7EFFB); +} +.social-join > p { + color: var(--linkbrary-gray-100, #373740); + font-size: 14px; + font-weight: 400; + line-height: normal; +} + +.social-icons { + display: flex; + align-items: flex-start; + gap: 16px; +} +.social-icon { + width: 42px; + height: 42px; + position: relative; + width: 42px; + height: 42px; + margin: 0 0; +} +#icon-google { + display: flex; + width: 22px; + height: 22px; + justify-content: center; + align-items: center; + flex-shrink: 0; + z-index: 1; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +#icon-kakao { + width: 26px; + height: 24px; + flex-shrink: 0; + z-index: 1; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} \ No newline at end of file diff --git a/src/style.css b/src/style.css new file mode 100644 index 000000000..ed206019b --- /dev/null +++ b/src/style.css @@ -0,0 +1,184 @@ +header { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + background-color: #edf7ff; +} + +nav { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + max-width: 192rem; + height: 9.4rem; + padding: 0 20rem; + + position:fixed; + top: 0; + background-color: #edf7ff; +} + +.hero-header { + display: flex; + flex-direction: column; + align-items: center; + row-gap: 4rem; + padding-top: 7rem; + + margin-top: 9.4rem; +} + +.cta { + display: flex; + justify-content: center; + align-items: center; + height: 5.4rem; + cursor: pointer; + background-image: linear-gradient(135deg, #6d6afe 0%, #6ae3fe 100%); + border-radius: 0.8rem; + color: #f5f5f5; + font-size: 1.8rem; + font-weight: 600; +} + +.cta-short { + width: 12.8rem; +} + +.cta-long { + width: 35rem; +} + +.slogan { + text-align: center; + font-size: 6.4rem; + font-weight: 700; + line-height: 8rem; +} + +.slogan-gradient { + background-image: linear-gradient(119deg, #6d6afe 0%, #ff9f9f 100%); +} + +.background-clip-text { + background-clip: text; + -webkit-background-clip: text; + color: transparent; +} + +.hero-image { + width: 120rem; + height: 59rem; +} + +article { + padding-top: 7rem; + padding-bottom: 12rem; +} + +section { + display: grid; + justify-content: center; + column-gap: 15.7rem; + row-gap: 1rem; + width: 100%; + height: 55rem; + padding: 50px 0; +} + +section:nth-of-type(odd) { + grid-template: + ". image" + "title image" + "description image" + ". image" + /291px 55rem; +} + +section:nth-of-type(even) { + grid-template: + "image ." + "image title" + "image description" + "image ." + /550px 29.1rem; +} + +.title { + grid-area: title; + font-size: 4.8rem; + font-weight: 700; + line-height: 5.8rem; + letter-spacing: -0.03rem; +} + +.title-1-gradient { + background-image: linear-gradient(117deg, #fe8a8a 2.29%, #a4ceff 100%); +} +.title-2-gradient { + background-image: linear-gradient(304deg, #6fbaff 0%, #ffd88b 100%); +} +.title-3-gradient { + background-image: linear-gradient(133deg, #2945c7 0%, #dbe1f8 100%); +} +.title-4-gradient { + background-image: linear-gradient(310deg, #fe578f 0%, #68e8f9 100%); +} + +.description { + grid-area: description; + font-size: 1.6rem; + font-weight: 500; + color: #6b6b6b; + line-height: 150%; +} + +.content-image { + grid-area: image; + width: 55rem; + height: 45rem; +} + +footer { + display: flex; + justify-content: center; + width: 100%; + height: 16rem; + padding-top: 3.2rem; + background-color: #111322; +} + +.footer-box { + display: flex; + justify-content: space-between; + width: 100%; + max-width: 192rem; + height: fit-content; + padding: 0 10.4rem; +} + +.copyright { + color: #676767; + font-family: Arial; + font-size: 1.6rem; +} + +.footer-links { + display: flex; + column-gap: 3rem; + padding-right: 1.8rem; +} + +.footer-link { + color: #cfcfcf; + font-family: Arial; + font-size: 1.6rem; +} + +.sns { + display: flex; + column-gap: 1.2rem; + height: 2rem; +}