diff --git a/faq.html b/faq.html new file mode 100644 index 000000000..e3075f343 --- /dev/null +++ b/faq.html @@ -0,0 +1,12 @@ + + + + + + fag + + + +

FAQ 페이지

+ + \ No newline at end of file diff --git a/img/Card3-back.png b/img/Card3-back.png new file mode 100644 index 000000000..d57710297 Binary files /dev/null and b/img/Card3-back.png differ diff --git a/img/Card3.png b/img/Card3.png new file mode 100644 index 000000000..2ec352a0c Binary files /dev/null and b/img/Card3.png differ diff --git a/img/Card4-img.png b/img/Card4-img.png new file mode 100644 index 000000000..dadb8674b Binary files /dev/null and b/img/Card4-img.png differ diff --git a/img/akar-icons_facebook-fill.svg b/img/akar-icons_facebook-fill.svg new file mode 100644 index 000000000..af5130815 --- /dev/null +++ b/img/akar-icons_facebook-fill.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/img/akar-icons_twitter-fill.svg b/img/akar-icons_twitter-fill.svg new file mode 100644 index 000000000..4586b559d --- /dev/null +++ b/img/akar-icons_twitter-fill.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/img/akar-icons_youtube-fill.svg b/img/akar-icons_youtube-fill.svg new file mode 100644 index 000000000..903a18478 --- /dev/null +++ b/img/akar-icons_youtube-fill.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/img/ant-design_instagram-filled.svg b/img/ant-design_instagram-filled.svg new file mode 100644 index 000000000..acd5df20b --- /dev/null +++ b/img/ant-design_instagram-filled.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/img/card1.png b/img/card1.png new file mode 100644 index 000000000..577317636 Binary files /dev/null and b/img/card1.png differ diff --git a/img/card2.png b/img/card2.png new file mode 100644 index 000000000..2fb42b2ac Binary files /dev/null and b/img/card2.png differ diff --git a/img/eye-off.svg b/img/eye-off.svg new file mode 100644 index 000000000..bec50d66f --- /dev/null +++ b/img/eye-off.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/img/google.png b/img/google.png new file mode 100644 index 000000000..a32846c50 Binary files /dev/null and b/img/google.png differ diff --git a/img/googleback.svg b/img/googleback.svg new file mode 100644 index 000000000..75c873ae7 --- /dev/null +++ b/img/googleback.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/img/header-logo.svg b/img/header-logo.svg new file mode 100644 index 000000000..002f21d71 --- /dev/null +++ b/img/header-logo.svg @@ -0,0 +1,15 @@ + + + diff --git a/img/kakao.svg b/img/kakao.svg new file mode 100644 index 000000000..99b981e6b --- /dev/null +++ b/img/kakao.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/img/kakaoback.svg b/img/kakaoback.svg new file mode 100644 index 000000000..f0da6389e --- /dev/null +++ b/img/kakaoback.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/img/logo.svg b/img/logo.svg new file mode 100644 index 000000000..0488f157c --- /dev/null +++ b/img/logo.svg @@ -0,0 +1,15 @@ + + + diff --git a/img/mainbg.png b/img/mainbg.png new file mode 100644 index 000000000..c9073dfcf Binary files /dev/null and b/img/mainbg.png differ diff --git a/index.html b/index.html new file mode 100644 index 000000000..250e9e8d7 --- /dev/null +++ b/index.html @@ -0,0 +1,128 @@ + + + + + + + + + + + Linkbrary + + + + + +
+
+

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

+ +
+ 링크 검색 이미지 +
+
+
+ +
+ +
+
+

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

+

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

+
+ 링크 저장 이미지 +
+ + +
+ 폴더 관리 팝업창 이미지 +
+

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

+

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

+
+
+ + +
+
+

+ 저장된 링크로
+ 공유해 보세요 +

+

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

+
+
+ 폴더 공유 팝업창 이미지 +
+
+ + +
+
+ 검색 이미지 +
+
+

+ 저장한 링크로
+ 검색보세요 +

+

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

+
+
+
+ + + + \ No newline at end of file diff --git a/privacy.html b/privacy.html new file mode 100644 index 000000000..50544c57d --- /dev/null +++ b/privacy.html @@ -0,0 +1,12 @@ + + + + + + privacy + + + +

Privacy 페이지

+ + \ No newline at end of file diff --git a/signin.html b/signin.html new file mode 100644 index 000000000..75ee7d782 --- /dev/null +++ b/signin.html @@ -0,0 +1,62 @@ + + + + + + + + + + + signin + + + +
+ + +
+
+ + +
+ +
+
+ +
+

소셜 로그인

+
+ + + + + + +
+
+ + \ No newline at end of file diff --git a/signup.html b/signup.html new file mode 100644 index 000000000..afdf6582b --- /dev/null +++ b/signup.html @@ -0,0 +1,71 @@ + + + + + + + + + + + signup + + + +
+ + +
+
+ + + +
+ +
+
+ +
+

다른 방식으로 가입하기

+
+ + + + + + +
+
+ + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 000000000..d23cefea9 --- /dev/null +++ b/style.css @@ -0,0 +1,441 @@ +:root { + --black: #000; + --linkbrary-white: #FFF; + --linkbrary-primary-color: #6D6AFE; + --linkbrary-gray20: #CCD5E3; + --linkbrary-gray10: #E7EFFB; + --linkbrary-gray100: #373740; + --linkbrary-bg: #F0F6FF; + --grey-light: #F5F5F5; + --the-julge-black: #111322; + --card-item-text: #6B6B6B; + --footer-text: #676767; + --footer-link-text: #CFCFCF; + --The-julge-black: #111322; + --gra-purpleblue-to-skyblue: linear-gradient(91deg, #6D6AFE 0.12%, #6AE3FE 101.84%); + --header-title: linear-gradient(91deg, #6D6AFE 17.28%, #FF9F9F 74.98%); + --card3-line-bg: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)); + --card1-title: linear-gradient(96deg, #FE8A8A 1.72%, #A4CEFF 90.97%); + --card2-title: linear-gradient(277deg, #6FBAFF 2.22%, #FFD88B 93.66%); + --card3-title: linear-gradient(99deg, #6D7CCD 19.76%, rgba(82, 136, 133, 0.22) 99.99%); + --card4-title: linear-gradient(271deg, #FE578F -100%, #68E8F9 107.18%); +} + +* { + box-sizing: border-box; +} + +body { + margin: 0; +} + +.btn-color { + color: var(--grey-light); + background: var(--gra-purpleblue-to-skyblue); + font-family: Pretendard; + font-size: 18px; + font-style: normal; + font-weight: 600; + line-height: normal; + text-decoration: none; + border-radius: 8px; +} + +.nav { + position: sticky; + top: 0; + display: flex; + justify-content: center; + z-index: 1; + width: 100%; + background: var(--linkbrary-bg); +} + +.nav__inner { + display: flex; + text-align: center; + justify-content: space-between; + flex-grow: 1; + padding: 20px 200px; + max-width: 1920px; + align-items: center; +} + +.nav__inner__logo { + display: flex; +} + +.nav__inner__signin { + display: flex; + justify-content: center; + align-items: center; + gap: 10px; + width: 128px; + padding: 16px 20px; +} + +.header { + width: 100%; + margin: 0 auto; + background: var(--linkbrary-bg); +} + +.header__inner { + display: flex; + flex-direction: column; + justify-content: flex-end; + gap: 40px; + padding: 70px 0 0; + margin: 0 auto; + text-align: center; +} + +.header__title { + margin: 0; + color: var(--black); + font-family: Pretendard; + text-align: center; + font-size: 64px; + font-style: normal; + font-weight: 700; + line-height: 80px; +} + +.header__title__text { + background: var(--header-title); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.header__link { + display: inline; + width: 350px; + margin: 0 auto; +} + +.header__link__signup { + display: flex; + justify-content: center; + align-items: center; + gap: 10px; + padding: 16px 20px; +} + +.header__bg { + display: flex; + justify-content: center; +} + +.main__img__in { + width: 1200px; + height: 590px; +} + +.card-item { + display: flex; + justify-content: center; + align-items: center; + gap: 0 157px; + padding: 50px; +} + +.card3-line { + background-image: + var(--card3-line-bg), + url('/img/Card3-back.png'); + + padding: 121px 77px 77px; + border-radius: 25px; +} + +.card4-line { + padding: 30px 0 0 35px; + border-radius: 15px; + background: var(--linkbrary-bg); +} + +.card1-wrap { + max-width: 1080px; + width: 100%; + margin: 120px auto 0; + padding-top: 0; +} + +.card-item__img { + margin: 0; + width: 550px; + height: 450px; +} + +.card-item__title { + margin: 0 0 10px 0; + color: var(--black); + font-family: Pretendard; + font-size: 48px; + font-style: normal; + font-weight: 700; + line-height: normal; + letter-spacing: -0.3px; + white-space:nowrap +} + +.card1-item__title__font { + background: var(--card1-title); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + font-family: Pretendard; + font-size: 48px; + font-style: normal; + font-weight: 700; + line-height: normal; +} + +.card2-item__title__font { + background: var(--card2-title); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + font-family: Pretendard; + font-size: 48px; + font-style: normal; + font-weight: 700; + line-height: normal; + letter-spacing: -0.3px; +} + +.card3-item__title__font { + background: var(--card3-title); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + font-family: Pretendard; + font-size: 48px; + font-style: normal; + font-weight: 700; + line-height: normal; +} + +.card4-item__title__font { + background: var(--card4-title); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + font-family: Pretendard; + font-size: 48px; + font-style: normal; + font-weight: 700; + line-height: normal; +} + +.card-item__text { + margin: 0; + align-self: stretch; + color: var(--card-item-text); + font-family: Abel; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 150%; + white-space:nowrap +} + +.footer { + display: flex; + justify-content: center; + align-items: center; + margin-top: 120px; + background: var(--The-julge-black); +} + +.footer__inner { + display: flex; + justify-content: space-between; + align-items: center; + padding: 32px 104px 64px 104px; + flex-shrink: 0; + align-self: stretch; + max-width: 1920px; + flex-grow: 1; + color: var(--footer-text); +} + +.footer__inner__link { + display: flex; + align-items: flex-start; + gap: 30px; + width: 181.111px; + text-decoration: none; +} + +.footer__inner__link__font { + color: var(--footer-link-text); + font-family: Acme; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: normal; + text-decoration: none; +} + +.footer__inner__icon { + display: flex; + align-items: flex-start; + gap: 12px; +} + +/*로그인 & 회원가입*/ +.sign { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 32px; + padding: 238px 0px 253px 0px; + background: var(--linkbrary-bg); +} + +.sign__inner { + display: flex; + flex-direction: column; + align-items: center; + gap: 30px; +} + +.sign__inner__logo { + display: flex; + flex-direction: column; + align-items: center; + gap: 16px; +} + +.sign__logo__img { + width: 210.583px; + height: 38px; +} + +.sign__logo__centerTest { + display: flex; + align-items: flex-start; + gap: 8px; +} + +.sign__logo__not-member { + margin: 0; + color: var(--black); + font-family: Pretendard; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 24px; +} + +.signin__logo__link-signup { + color: var(--linkbrary-primary-color); + font-family: Pretendard; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: normal; +} + +.sign-input { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 24px; +} + +.sign-input__login { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 12px; +} + +.sign-input__login__label { + color: var(--black); + font-family: Pretendard; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: normal; +} + +.sign-input__login__input { + display: flex; + justify-content: center; + align-items: center; + width: 400px; + padding: 18px 15px; + border: 1px solid var(--linkbrary-gray20); + border-radius: 8px; + background: var(--linkbrary-white); +} + +.sign-input__login__input:focus { + outline: 1px solid var(--linkbrary-primary-color); +} + + +.sign-input__pw-eye { + position: relative; +} + +.sign-input__pw-eye-off { + position: absolute; + top: 18px; + right: 15px; +} + +.sign-btn { + display: flex; + justify-content: center; + align-items: center; + gap: 10px; + width: 400px; + padding: 16px 20px; + margin-top: 30px; + border: solid 1px rgba(0,0,0,.15); + cursor: pointer; +} + +.other-login { + display: flex; + justify-content: space-between; + align-items: center; + width: 400px; + padding: 12px 24px; + margin: 0 auto; + border: 1px solid var(--linkbrary-gray20); + border-radius: 8px; + background: var(--linkbrary-gray10); +} + + +.other-login__title { + margin: 0; + color: var(--linkbrary-gray100); + font-family: Pretendard; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: normal; +} + +.other-login__inner { + display: flex; + align-items: flex-start; + gap: 16px; +} + +.other-login__inner__icon { + display: flex; + justify-content: center; + align-items: center; +} +.other-login__icon-img { + position: absolute; + z-index: 1; +} \ No newline at end of file