diff --git a/img/facebook.svg b/img/facebook.svg new file mode 100644 index 000000000..bb41bca66 --- /dev/null +++ b/img/facebook.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/img/google.svg b/img/google.svg new file mode 100644 index 000000000..b468e8c6e --- /dev/null +++ b/img/google.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/img/instagram.svg b/img/instagram.svg new file mode 100644 index 000000000..38ba98a37 --- /dev/null +++ b/img/instagram.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/img/kakao.svg b/img/kakao.svg new file mode 100644 index 000000000..939b487b2 --- /dev/null +++ b/img/kakao.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/img/logo.svg b/img/logo.svg new file mode 100644 index 000000000..c6c87a1cf --- /dev/null +++ b/img/logo.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/img/main.png b/img/main.png new file mode 100644 index 000000000..97b9cba58 Binary files /dev/null and b/img/main.png differ diff --git a/img/manage.png b/img/manage.png new file mode 100644 index 000000000..35f5fab4a Binary files /dev/null and b/img/manage.png differ diff --git a/img/save.png b/img/save.png new file mode 100644 index 000000000..8f2a2c97b Binary files /dev/null and b/img/save.png differ diff --git a/img/search.png b/img/search.png new file mode 100644 index 000000000..cb76d8a3a Binary files /dev/null and b/img/search.png differ diff --git a/img/share.png b/img/share.png new file mode 100644 index 000000000..350f043d4 Binary files /dev/null and b/img/share.png differ diff --git a/img/twitter.svg b/img/twitter.svg new file mode 100644 index 000000000..455f79b24 --- /dev/null +++ b/img/twitter.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/img/youtube.svg b/img/youtube.svg new file mode 100644 index 000000000..2c48fb6ac --- /dev/null +++ b/img/youtube.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/main.html b/main.html new file mode 100644 index 000000000..464915ecb --- /dev/null +++ b/main.html @@ -0,0 +1,109 @@ + + + + + + Linkbrary + + + + + +
+
+ 세상의 모든 정보를
+ 쉽게 저장하고 관리해 보세요 +
+ +
+ header-img +
+
+
+
+

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

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

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

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

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

+
중요한 정보들을 검색으로 쉽게 찾아보세요.
+
+
+
+
+
©codeit - 2023
+
+ privacy Policy + FAQ +
+
+ Facebook + Twitter + + Youtube + Instagram +
+
+
+ + diff --git a/main.style.css b/main.style.css new file mode 100644 index 000000000..122c706f5 --- /dev/null +++ b/main.style.css @@ -0,0 +1,223 @@ +* { + box-sizing: border-box; +} +a { + text-decoration: none; +} +nav { + width: 100%; + height: 93px; + padding: 20px 200px 20px 200px; + background-color: #f0f6ff; + position: sticky; + top: 0; + z-index: 1; +} +.bar { + display: flex; + align-items: center; + justify-content: space-between; +} +.header-logo { + width: 133px; + height: 24px; +} +.login { + background: linear-gradient(90.99deg, #6d6afe 0.12%, #6ae3fe 101.84%); + border-radius: 8px; + color: #f5f5f5; + font-family: "Pretendard"; + font-size: 18px; + font-weight: 600; + line-height: 21px; + padding: 16px 20px; + text-align: left; + white-space: nowrap; +} +.main { + background-color: #f0f6ff; + height: 953px; + overflow: hidden; +} +.main-description { + font-family: Pretendard; + font-size: 64px; + font-weight: 700; + line-height: 80px; + letter-spacing: 0px; + text-align: center; +} +.text-gradient { + background: linear-gradient(91.26deg, #6d6afe 17.28%, #ff9f9f 74.98%); + color: transparent; + background-clip: text; +} +.signUp { + display: flex; + justify-content: center; +} +.addLink { + margin: 24px; + background: linear-gradient(90.99deg, #6d6afe 0.12%, #6ae3fe 101.84%); + color: #f5f5f5; + display: flex; + width: 350px; + height: 53px; + padding: 16px, 20px, 16px, 20px; + border-radius: 8px; + gap: 10px; + justify-content: center; + align-items: center; + font-family: Pretendard; + font-size: 18px; + font-weight: 600; +} +.header-img-section { + display: flex; + justify-content: center; +} +.header-img { + width: 1118px; + height: 659px; + top: 50px; + left: 41px; + border-radius: 25px; +} +.section { + width: 998px; + margin: 120px auto 50px; + display: grid; + grid-template: 1fr/2fr; + grid-template-areas: "img des"; +} +.section.save { + grid-template-areas: "des img"; +} +.save-description { + grid-area: des; + display: flex; + flex-direction: column; + justify-content: center; +} +h2 { + font-family: Pretendard; + font-size: 48px; + font-weight: 700; + letter-spacing: 0px; + text-align: left; +} +.link-gradient { + background: linear-gradient(95.63deg, #fe8a8a 1.72%, #a4ceff 74.97%); + color: transparent; + background-clip: text; +} +.save-img { + grid-area: img; + width: 550px; + height: 450px; + border-radius: 15px; + background-color: #f0f6ff; +} +.description { + font-family: Abel; + font-size: 16px; + font-weight: 400; + line-height: 24px; + letter-spacing: 0px; + text-align: left; + margin-top: -20px; + color: rgba(107, 107, 107, 1); +} +/* .section.manage { + display: grid; + grid-template: 1fr/2fr; + grid-template-areas: "img des"; +} */ +.manage-image { + width: 550px; + height: 450px; + padding: 114px, 68px, 66px, 68px; + border-radius: 15px; + grid-area: img; +} +.manage-gradient { + background: linear-gradient(277.01deg, #6fbaff 59.22%, #ffd88b 93.66%); + color: transparent; + background-clip: text; +} +.manage-description { + display: flex; + flex-direction: column; + justify-content: center; + grid-area: des; +} +.section.share { + grid-template-areas: "des img"; +} +.share-gradient { + background: linear-gradient( + 99.5deg, + #6d7ccd 19.76%, + rgba(82, 136, 133, 0.22) 52.69% + ); + color: transparent; + background-clip: text; +} +.share-description { + display: flex; + flex-direction: column; + justify-content: center; + grid-area: des; +} +.share-img { + width: 570px; + height: 450px; + top: -9px; + left: -10px; + border-radius: 25px; + grid-area: img; +} +.section.search { + grid-template-areas: "img des"; +} +.search-img { + width: 550px; + height: 450px; + border-radius: 15px; + grid-area: img; +} + +.search-description { + display: flex; + flex-direction: column; + justify-content: center; + grid-area: des; +} +.search-gradient { + background: linear-gradient(271.36deg, #fe578f -9.84%, #68e8f9 107.18%); + color: transparent; + background-clip: text; +} +.footer { + background-color: rgba(17, 19, 34, 1); + color: rgba(207, 207, 207, 1); + width: 100%; + height: 160px; + padding: 32px 104px 64px; +} +.footer-section { + display: flex; + justify-content: space-between; + flex-wrap: nowrap; + white-space: nowrap; +} +.footer-year { + color: rgba(103, 103, 103, 1); +} +.footer-main { + display: flex; + gap: 30px; +} +.footer-main a { + color: rgba(207, 207, 207, 1); +} diff --git a/signUp.css b/signUp.css new file mode 100644 index 000000000..5b9f7ed82 --- /dev/null +++ b/signUp.css @@ -0,0 +1,146 @@ +* { + box-sizing: border-box; +} +body { + background-color: #f0f6ff; + width: 100%; + height: 982px; + margin: 0; + position: relative; + display: flex; + flex-direction: column; + align-items: center; +} +.section { + position: absolute; + top: 238px; + width: 100%; + max-width: 400px; + height: 627px; + gap: 32px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; +} +.content { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + gap: 20px; +} +.title { + white-space: nowrap; + width: 210px; + height: 78px; + gap: 10px; + display: flex; + flex-direction: column; + align-items: center; +} +.logo-img { + width: 210px; + height: 38px; + display: flex; + align-items: center; +} +.question { + display: flex; + width: 204px; + height: 24px; + gap: 8px; + font-family: Pretendard; + font-size: 16px; + font-weight: 400; + line-height: 24px; + letter-spacing: 0em; + text-align: left; +} +.signinLink { + font-family: Pretendard; + font-size: 16px; + font-weight: 600; + line-height: 19px; + letter-spacing: 0em; + text-align: left; + color: rgba(109, 106, 254, 1); +} +.text { + font-family: Pretendard; + font-size: 14px; + font-weight: 400; + line-height: 17px; + letter-spacing: 0em; + text-align: left; +} +.input { + display: flex; + flex-direction: column; + justify-content: flex-start; + gap: 16px; +} +.input-section { + width: 400px; + height: 89px; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + gap: 12px; +} +.user-input { + width: 400px; + height: 60px; + border-radius: 8px; + border: 1px solid rgba(204, 213, 227, 1); + padding: 18px 15px; +} +.user-input:focus { + border-color: blue; + outline: none; +} +button { + cursor: pointer; +} +.signup { + font-family: Pretendard; + font-size: 18px; + font-weight: 600; + line-height: 21px; + letter-spacing: 0em; + text-align: center; + + color: rgba(245, 245, 245, 1); + width: 400px; + height: 53px; + padding: 16px 20px; + border: 0px; + border-radius: 8px; + gap: 10px; + background: linear-gradient(90.99deg, #6d6afe 0.12%, #6ae3fe 101.84%); +} +.social { + width: 400px; + height: 66px; + padding: 12px 24px; + border-radius: 8px; + border: 1px solid rgba(204, 213, 227, 1); + display: flex; + align-items: center; + justify-content: space-between; +} +.social-text { + font-family: Pretendard; + font-size: 14px; + font-weight: 400; + line-height: 17px; + letter-spacing: 0em; + text-align: left; + color: rgba(55, 55, 64, 1); +} +.social-link { + display: flex; + gap: 10px; +} diff --git a/signin.css b/signin.css new file mode 100644 index 000000000..bc778c5b5 --- /dev/null +++ b/signin.css @@ -0,0 +1,154 @@ +* { + box-sizing: border-box; +} +body { + background-color: #f0f6ff; + width: 100%; + height: 982px; + margin: 0; + position: relative; + display: flex; + flex-direction: column; + align-items: center; +} + +.section { + position: absolute; + top: 238px; + width: 100%; + max-width: 400px; + height: 627px; + gap: 32px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; +} +.content { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + gap: 20px; +} +.title { + white-space: nowrap; + width: 210px; + height: 78px; + gap: 10px; + display: flex; + flex-direction: column; + align-items: center; +} +.logo-img { + width: 210px; + height: 38px; + display: flex; + align-items: center; +} +.question { + display: flex; + width: 218px; + height: 24px; + flex-direction: row; + align-items: flex-start; + justify-content: center; +} +.question-text { + font-family: Pretendard; + font-size: 16px; + font-weight: 400; + line-height: 24px; + letter-spacing: 0em; + text-align: left; +} +.signupLink { + font-family: Pretendard; + font-size: 16px; + font-weight: 600; + line-height: 19px; + letter-spacing: 0em; + text-align: left; + + color: rgba(109, 106, 254, 1); +} +.text { + font-family: Pretendard; + font-size: 14px; + font-weight: 400; + line-height: 17px; + letter-spacing: 0em; + text-align: left; +} + +.input { + display: flex; + flex-direction: column; + justify-content: flex-start; + gap: 16px; +} +.input-section { + width: 400px; + height: 89px; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + gap: 12px; +} + +.user-input { + width: 400px; + height: 60px; + border-radius: 8px; + border: 1px solid rgba(204, 213, 227, 1); + padding: 18px 15px; +} +.user-input:focus { + border-color: blue; + outline: none; +} +button { + cursor: pointer; +} +.signin { + font-family: Pretendard; + font-size: 18px; + font-weight: 600; + line-height: 21px; + letter-spacing: 0em; + text-align: center; + + color: rgba(245, 245, 245, 1); + width: 400px; + height: 53px; + padding: 16px 20px; + border: 0px; + border-radius: 8px; + gap: 10px; + background: linear-gradient(90.99deg, #6d6afe 0.12%, #6ae3fe 101.84%); +} +.social { + width: 400px; + height: 66px; + padding: 12px 24px; + border-radius: 8px; + border: 1px solid rgba(204, 213, 227, 1); + display: flex; + align-items: center; + justify-content: space-between; +} +.social-text { + font-family: Pretendard; + font-size: 14px; + font-weight: 400; + line-height: 17px; + letter-spacing: 0em; + text-align: left; + color: rgba(55, 55, 64, 1); +} +.social-link { + display: flex; + gap: 10px; +} diff --git a/signin.html b/signin.html new file mode 100644 index 000000000..f7f656190 --- /dev/null +++ b/signin.html @@ -0,0 +1,48 @@ + + + + + + signIn + + + +
+
+
+ + + +
+
회원이 아니신가요?
+ 회원 가입하기 +
+
+
+
+
이메일
+ +
+
+
비밀번호
+ +
+
+
+ +
+ +
+
+ + diff --git a/signup.html b/signup.html new file mode 100644 index 000000000..8672512ad --- /dev/null +++ b/signup.html @@ -0,0 +1,53 @@ + + + + + + signUp + + + +
+
+
+ + + +
+ 이미 회원이신가요? + 로그인 하기 +
+
+
+
+
이메일
+ +
+
+
비밀번호
+ +
+
+
비밀번호 확인
+ + +
+
+
+ +
+
+ +
+ +