diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 000000000..23cfdd4be Binary files /dev/null and b/.DS_Store differ diff --git a/index.html b/index.html new file mode 100644 index 000000000..6b7bd224d --- /dev/null +++ b/index.html @@ -0,0 +1,122 @@ + + + + + + + Linkbrary + + +
+
+ + + + +
+ 로그인 +
+ +
+
+
+
+
+ + 세상의 모든 정보를
+ 쉽게 저장하고 관리해 보세요 + + +
링크 추가하기
+ + first +
+
+
+
+
+ + 원하는 링크를
저장하세요 + + + 나중에 읽고 싶은 글, 다시 보고 싶은 영상,
+ 사고 싶은 옷, 기억하고 싶은 모든 것을
+ 한 공간에 저장하세요. + +
+ second +
+
+
+
+ third +
+ + 링크를 폴더로
+ 관리하세요 + + + 나만의 폴더를 무제한으로 만들고
+ 다양하게 활용할 수 있습니다. + +
+
+
+
+
+
+ + 저장한 링크를
+ 공유해 보세요 + + + 여러 링크를 폴더에 담고 공유할 수 있습니다.
+ 가족, 친구, 동료들에게 쉽고 빠르게 링크를
+ 공유해 보세요. + +
+ fourth +
+
+
+
+ fifth +
+ + 저장한 링크를
+ 검색해보세요 + + + 중요한 정보들을 검색으로 쉽게 찾아보세요. + +
+
+
+
+ + + diff --git a/signin.html b/signin.html new file mode 100644 index 000000000..0856b9982 --- /dev/null +++ b/signin.html @@ -0,0 +1,73 @@ + + + + + + + + Signin + + +
+
+ +
+ + + +
+ + +
+ +
+ +
+
+ + + diff --git a/signup.html b/signup.html new file mode 100644 index 000000000..93676e726 --- /dev/null +++ b/signup.html @@ -0,0 +1,82 @@ + + + + + + + + Signup + + +
+
+ +
+ + + +
+ + +
+ +
+ + +
+ +
+ +
+
+ + + diff --git a/style.css b/style.css new file mode 100644 index 000000000..f89a23b87 --- /dev/null +++ b/style.css @@ -0,0 +1,270 @@ +.primary { + color: #6d6afe; +} +.red { + color: #ff5b56; +} +.black { + color: #111322; +} +.white { + color: #ffffff; +} +.gray-4 { + color: #3e3e43; +} +.gray-3 { + color: #9fa6b2; +} +.gray-2 { + color: #ccd5e3; +} +.gray-1 { + color: #e7effb; +} +.gray-0 { + color: #f0f6ff; +} +* { + box-sizing: border-box; +} +body { + margin: 0; +} +header { + padding: 20px 150px; + position: sticky; + top: 0; + left: 0; + width: 100%; + background-color: #f0f6ff; +} +.header-box { + display: flex; + justify-content: space-between; + align-items: center; +} +.logo { + width: 133px; + height: 24px; + display: inline-block; +} +.button { + display: flex; + padding: 16px 20px; + justify-content: center; + align-items: center; + border-radius: 8px; + gap: 10px; + font-size: 18px; + font-weight: 600; + background: linear-gradient(91deg, #6d6afe 0.12%, #6ae3fe 101.84%); +} +.button-log { + font-size: 18px; + font-weight: 600; +} + +.big-sec { + padding: 70px 360px 0; + background-color: #f0f6ff; +} +.l-container { + display: flex; + flex-direction: column; + align-items: center; + gap: 40px; +} +.big-title { + text-align: center; + font-size: 56px; + font-weight: 700; + display: block; + line-height: 80px; +} +.rainbow { + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-image: linear-gradient(91deg, #6d6afe 17.28%, #ff9f9f 74.98%); +} + +.small-sec { + padding: 120px 250px 50px; + justify-content: center; + align-items: center; +} +.s-container { + display: flex; + align-items: center; + justify-content: space-between; +} +.word-box { + display: flex; + width: 291px; + flex-direction: column; + align-items: flex-start; + gap: 10px; +} +.small-title { + font-size: 48px; + font-style: normal; + font-weight: 700; + line-height: normal; + letter-spacing: -0.3px; +} +.paragraph { + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 150%; +} +.title1-color { + background-image: linear-gradient(96deg, #fe8a8a 1.72%, #a4ceff 74.97%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} +.title2-color { + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-image: linear-gradient(277deg, #6fbaff 59.22%, #ffd88b 93.66%); +} +.title3-color { + background-image: linear-gradient( + 99deg, + #6d7ccd 19.76%, + rgba(82, 136, 133, 0.22) 52.69% + ); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} +.title4-color { + background-image: linear-gradient(271deg, #fe578f -9.84%, #68e8f9 107.18%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} +footer { + padding: 120px 0 0; +} +.footer-box { + padding: 32px 104px 64px; + background-color: #111322; + display: flex; + justify-content: space-between; +} +a { + text-decoration: none; +} +a:visited { + color: white; +} +.social { + display: flex; + gap: 12px; +} +.help { + display: flex; + gap: 30px; +} + +/* signin */ +.signin { + display: flex; + padding: 238px 0px 253px 0px; + justify-content: center; + align-items: center; + background: #f0f6ff; +} + +.signin-logo { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 16px; + margin-bottom: 30px; +} +.signin-logo img { + width: 210px; + height: 38px; +} +.question { + font-size: 16px; + font-weight: 400; + line-height: 24px; +} +.question a { + font-weight: 600; + text-decoration: underline; +} +.question a:visited { + color: #6d6afe; +} +input { + border-radius: 8px; + border: 1px solid #6d6afe; + padding: 18px 15px; + width: 400px; + display: block; + margin: 12px 0 24px; +} +label { + font-size: 14px; + font-weight: 400; +} +input::placeholder { + color: #9fa6b2; +} +.signin-but { + margin: 30px 0 32px; + display: flex; + width: 400px; + padding: 16px 20px; + justify-content: center; + align-items: center; + font-size: 18px; + font-weight: 600; + border-radius: 8px; + border: none; + background-image: linear-gradient(91deg, #6d6afe 0.12%, #6ae3fe 101.84%); +} +.social-login { + padding: 12px 24px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: #e7effb; + border-radius: 8px; + border: 1px solid #ccd5e3; + font-size: 14px; + font-weight: 400; +} +.social-images { + display: flex; + gap: 16px; +} +.social-images img { + width: 42px; + height: 42px; +} +.signin-form input { + border: solid 1px #9fa6b2; +} +.signin-form input:focus { + border: solid 1px #6d6afe; +} +.password { + position: relative; +} +.password i { + position: absolute; + top: 20px; + right: 20px; +} + +@media (min-width: 1920px) { +} diff --git a/svgs/facebook.svg b/svgs/facebook.svg new file mode 100644 index 000000000..926157015 --- /dev/null +++ b/svgs/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/svgs/fifth.svg b/svgs/fifth.svg new file mode 100644 index 000000000..378d89172 --- /dev/null +++ b/svgs/fifth.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/svgs/first.svg b/svgs/first.svg new file mode 100644 index 000000000..a17d6e4f0 --- /dev/null +++ b/svgs/first.svg @@ -0,0 +1,70 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/svgs/fourth.svg b/svgs/fourth.svg new file mode 100644 index 000000000..a5031205e --- /dev/null +++ b/svgs/fourth.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/svgs/google.svg b/svgs/google.svg new file mode 100644 index 000000000..c0669b38f --- /dev/null +++ b/svgs/google.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/svgs/insta.svg b/svgs/insta.svg new file mode 100644 index 000000000..bb6820d84 --- /dev/null +++ b/svgs/insta.svg @@ -0,0 +1,3 @@ + + + diff --git a/svgs/kakao.svg b/svgs/kakao.svg new file mode 100644 index 000000000..f8cc0c1c1 --- /dev/null +++ b/svgs/kakao.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/svgs/logo.svg b/svgs/logo.svg new file mode 100644 index 000000000..c6c87a1cf --- /dev/null +++ b/svgs/logo.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/svgs/second.svg b/svgs/second.svg new file mode 100644 index 000000000..1223fc9b8 --- /dev/null +++ b/svgs/second.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/svgs/third.svg b/svgs/third.svg new file mode 100644 index 000000000..27fb7e1cf --- /dev/null +++ b/svgs/third.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/svgs/twitter.svg b/svgs/twitter.svg new file mode 100644 index 000000000..3d1ede5c5 --- /dev/null +++ b/svgs/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/svgs/youtube.svg b/svgs/youtube.svg new file mode 100644 index 000000000..33fdfb47c --- /dev/null +++ b/svgs/youtube.svg @@ -0,0 +1,10 @@ + + + + + + + + + +