diff --git a/css/indexStyle.css b/css/indexStyle.css new file mode 100644 index 000000000..27b279e31 --- /dev/null +++ b/css/indexStyle.css @@ -0,0 +1,250 @@ +* { + box-sizing: border-box; +} + +body { + /* 폰트 색상 weight 변수 */ + --primary-color:#6d6afd; + --cst_red-color:#FF5B56; + --cst_black-color:#111322; + --cst_darkGray-color:#3E3E43; + --cst_darkGray2-color:#9FA6B2; + --cst_midGray-color:#CCD5E3; + --cst_lightGray-color:#E7EFFB; + --cst_lightGray2-color:#F0F6FF; + + + --logo-weight:700; + margin: 0; + font-family: "Montserrat Alternates", 'Noto Sans KR', sans-serif; +} + +header { + background-color: var(--cst_lightGray2-color); +} + +a { + text-decoration: none; +} + +nav { + position: sticky; + background-color: var(--cst_lightGray2-color); + top: 0px; + height: 50px; + width: 100%; +} + +.nav-container { + display: flex; + justify-content: space-between; + gap: 20px; + align-items: center; +} + +/* 로고 */ +a.btn-home { + margin-left: 200px; + color: var(--primary-color); + font-weight: var(--logo-weight); + font-size: 24px; +} + +/* 버튼 기본 속성 */ +.btn { + background-image: linear-gradient(to right, #6D6AFE, #6AE3FE); + border-radius: 8px; + color: #F5F5F5; + display: flex; + align-items: center; +} + +/* 로그인 버튼 */ +.login { + margin-right: 200px; + font-size: 16px; + font-weight: 600; + padding: 16px 20px; + height: 40px; + margin-top: 5px; + margin-bottom: 5px; + min-width: 85px; +} + +.header-container { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + overflow: hidden; +} + +.header-contents-txt { + text-align: center; + margin-top: 70px; + font-size: 64px; +} + +.gra-PurToPink { + background-image: linear-gradient(to right, #6D6AFE, #FF9F9F); + background-clip: text; + -webkit-background-clip: text; + color: transparent; +} + +.add-link { + display: flex; + align-items: center; + justify-content: center; + width: 350px; + height: 53px; + padding: 16px 20px; + font-size: 18px; + font-weight: 600; + margin: 40px 0; +} + +/* 크기 조절하여 밑 부분 짤리게 (+overflow) */ +.header-contents-img { + max-width: 1200px; + max-height: 590px; +} + +.header-img { + border-radius: 25px; + margin: 50px 41px; + width: 1118px; + height: 700px; + + /* 이미지 안쪽에 그라데이션 */ + background: linear-gradient(to top, + rgba(0, 0, 0, 1), + rgba(196, 196, 196, 0) 30%), url("../img/page.png"); + background-size: cover; + + /* 이미지 바깥 그라데이션 */ + box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.22); + +} + +main{ + /* 450 998 */ + display: grid; + grid-template-columns: 1fr minmax(300px,998px) 1fr; + /* grid-template-columns: 1fr 998px 1fr;*/ + grid-template-rows: repeat(4, 450px); + margin-top: 120px; + gap: 100px; +} + +.main-container { + grid-column: 2 / 3; + display: flex; + justify-content: space-between; + align-items: center; + gap: 30px; +} + +.main-contents-txt { + font-size: 48px; + max-height: 450px; + font-weight: 700; +} + +.gra-PinkToSky { + background-image: linear-gradient(to right, #FE8A8A, #A4CEFF); + background-clip: text; + -webkit-background-clip: text; + color: transparent; +} + +.mainTxt-description { + font-size: 16px; + font-weight: 400; +} + +.main-contents-img { + background-color: var(--cst_lightGray2-color); + border-radius: 15px; + display: flex; + overflow: hidden; + justify-content: center; + align-items: center; + width: 550px; + height: 450px; +} + +.main-img-save { + width: 244px; height: 239px; +} + +.main-img-fav { + width: 414px; height: 270px; +} + +.gra-YelToSky { + background-image: linear-gradient(to right, #FFD88B, #6FBAFF); + background-clip: text; + -webkit-background-clip: text; + color: transparent; +} + +.gra-BluToBlu { + background-image: linear-gradient(to right, #528885, #6D7CCD); + background-clip: text; + -webkit-background-clip: text; + color: transparent; +} + +.share { + background-color: black; + background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), + url("../img/page2.png"); + background-size: cover; + background-position: center; +} + +.main-img-share { + width: 619px; height: 584px; + position: relative; + top: 110px; + left: 90px; + box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.22); + border-radius: 15px; +} + +.search { +} + +.gra-GrenToSky { + background-image: linear-gradient(to right, #68E8F9, #FE578F); + background-clip: text; + -webkit-background-clip: text; + color: transparent; +} + +footer { + margin-top: 80px; + padding: 40px 0 0 104px; + background-color: var(--cst_black-color); + display: flex; + justify-content: space-between; + align-items: top; + width: 100%; + height: 200px; + gap: 10px; + + /* 폰트 설정 */ + color: #676767; + font-size: 16px; + font-weight: 400; + +} + +a.footer-policy { + color: #cfcfcf +} + +.footer-sns { + padding-right: 104px; +} diff --git a/css/login.css b/css/login.css new file mode 100644 index 000000000..02bdec320 --- /dev/null +++ b/css/login.css @@ -0,0 +1,117 @@ +* { + box-sizing: border-box; +} + +body { + /* 폰트 색상 weight 변수 */ + --primary-color:#6d6afd; + --logo-weight:700; + margin: 0; + font-family: "Montserrat Alternates", 'Noto Sans KR', sans-serif; + background-color: #F0F6FF; +} + +a { + text-decoration: none; +} + +input{ + width: 100%; + height: 60px; + border-radius: 8px; + padding: 18px 15px; +} + +a.btn-home { + color: var(--primary-color); + font-weight: var(--logo-weight); + font-size: 45px; +} + +.container { + margin: 238px 520px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.login-top { + text-align: center; + font-size: 16px; + font-weight: 400; +} + +.signUp { + text-decoration: underline; + font-size: 16px; + font-weight: 600; + color: var(--primary-color); +} + +.login-mid{ + font-size: 14px; + font-weight: 400; + width: 400px; + margin-top: 30px; + margin-bottom: 10px; +} + +#input-email { + margin-top: 10px; + margin-bottom: 10px; +} + +#input-password { + margin-top: 10px; + margin-bottom: 10px; +} + +/* 버튼 기본 속성 */ +.btn { + background-image: linear-gradient(to right, #6D6AFE, #6AE3FE); + border-radius: 8px; + color: #F5F5F5; + display: flex; + align-items: center; +} + +/* 로그인 버튼 */ +.login { + font-size: 16px; + font-weight: 600; + padding: 16px 20px; + height: 53px; + width: 100%; + margin-top: 10px; + display: flex; + align-items: center; + justify-content: center; + border: none; +} + +.login-btm { +} + +.snsLogin-container { + width: 400px; + height: 66px; + border-radius: 8px; + display: flex; + justify-content: space-between; + padding: 12px 24px; + background-color: #E7EFFB; + align-items: center; + border: 1px solid #ccd5e3; +} + +.google-login { + width: 42px; + height: 42px; + margin-right: 15px; +} + +.kakao-login { + width: 42px; + height: 42px; +} \ No newline at end of file diff --git a/css/signup.css b/css/signup.css new file mode 100644 index 000000000..b62adca63 --- /dev/null +++ b/css/signup.css @@ -0,0 +1,117 @@ +* { + box-sizing: border-box; +} + +body { + /* 폰트 색상 weight 변수 */ + --primary-color:#6d6afd; + --logo-weight:700; + margin: 0; + font-family: "Montserrat Alternates", 'Noto Sans KR', sans-serif; + background-color: #F0F6FF; +} + +a { + text-decoration: none; +} + +input{ + width: 100%; + height: 60px; + border-radius: 8px; + padding: 18px 15px; +} + +a.btn-home { + color: var(--primary-color); + font-weight: var(--logo-weight); + font-size: 45px; +} + +.container { + margin: 238px 520px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.login-top { + text-align: center; + font-size: 16px; + font-weight: 400; +} + +.signUp { + text-decoration: underline; + font-size: 16px; + font-weight: 600; + color: var(--primary-color); +} + +.login-mid{ + font-size: 14px; + font-weight: 400; + width: 400px; + margin-top: 30px; + margin-bottom: 10px; +} + +#input-email { + margin-top: 10px; + margin-bottom: 10px; +} + +#input-password { + margin-top: 18px; + margin-bottom: 10px; +} + +/* 버튼 기본 속성 */ +.btn { + background-image: linear-gradient(to right, #6D6AFE, #6AE3FE); + border-radius: 8px; + color: #F5F5F5; + display: flex; + align-items: center; +} + +/* 로그인 버튼 */ +.login { + font-size: 16px; + font-weight: 600; + padding: 16px 20px; + height: 53px; + width: 100%; + margin-top: 10px; + display: flex; + align-items: center; + justify-content: center; + border: none; +} + +.login-btm { +} + +.snsLogin-container { + width: 400px; + height: 66px; + border-radius: 8px; + display: flex; + justify-content: space-between; + padding: 12px 24px; + background-color: #E7EFFB; + align-items: center; + border: 1px solid #ccd5e3; +} + +.google-login { + width: 42px; + height: 42px; + margin-right: 15px; +} + +.kakao-login { + width: 42px; + height: 42px; +} \ No newline at end of file diff --git a/faq.html b/faq.html new file mode 100644 index 000000000..4820db6d4 --- /dev/null +++ b/faq.html @@ -0,0 +1,11 @@ + + + + + + Document + + + faq + + \ No newline at end of file diff --git a/img/Vector.png b/img/Vector.png new file mode 100644 index 000000000..293ea76c5 Binary files /dev/null and b/img/Vector.png differ diff --git a/img/bed.png b/img/bed.png new file mode 100644 index 000000000..5d2cc83bd Binary files /dev/null and b/img/bed.png differ diff --git a/img/dog.png b/img/dog.png new file mode 100644 index 000000000..392e43137 Binary files /dev/null and b/img/dog.png differ diff --git a/img/fav.png b/img/fav.png new file mode 100644 index 000000000..9416c5dd9 Binary files /dev/null and b/img/fav.png differ diff --git a/img/gra.png b/img/gra.png new file mode 100644 index 000000000..cadee1b33 Binary files /dev/null and b/img/gra.png differ diff --git a/img/icn_facebook.png b/img/icn_facebook.png new file mode 100644 index 000000000..879bb9f11 Binary files /dev/null and b/img/icn_facebook.png differ diff --git a/img/icn_goolge.png b/img/icn_goolge.png new file mode 100644 index 000000000..e6f5aff87 Binary files /dev/null and b/img/icn_goolge.png differ diff --git a/img/icn_instagram.png b/img/icn_instagram.png new file mode 100644 index 000000000..8b63592da Binary files /dev/null and b/img/icn_instagram.png differ diff --git a/img/icn_kakao.png b/img/icn_kakao.png new file mode 100644 index 000000000..bd7678005 Binary files /dev/null and b/img/icn_kakao.png differ diff --git a/img/icn_twitter.png b/img/icn_twitter.png new file mode 100644 index 000000000..54dc9acb9 Binary files /dev/null and b/img/icn_twitter.png differ diff --git a/img/icn_youtube.png b/img/icn_youtube.png new file mode 100644 index 000000000..13bdfd53c Binary files /dev/null and b/img/icn_youtube.png differ diff --git a/img/landing/Card 1.png b/img/landing/Card 1.png new file mode 100644 index 000000000..4969af3e4 Binary files /dev/null and b/img/landing/Card 1.png differ diff --git a/img/landing/Card-1.png b/img/landing/Card-1.png new file mode 100644 index 000000000..a271db9b7 Binary files /dev/null and b/img/landing/Card-1.png differ diff --git a/img/landing/Card.png b/img/landing/Card.png new file mode 100644 index 000000000..18005bbf8 Binary files /dev/null and b/img/landing/Card.png differ diff --git a/img/landing/image 25.png b/img/landing/image 25.png new file mode 100644 index 000000000..5168bbcbc Binary files /dev/null and b/img/landing/image 25.png differ diff --git "a/img/landing/\353\224\224\354\212\244\355\201\254\353\246\275\354\205\230 \354\227\206\353\212\224 \355\214\235\354\227\205 1.png" "b/img/landing/\353\224\224\354\212\244\355\201\254\353\246\275\354\205\230 \354\227\206\353\212\224 \355\214\235\354\227\205 1.png" new file mode 100644 index 000000000..2a39b46ff Binary files /dev/null and "b/img/landing/\353\224\224\354\212\244\355\201\254\353\246\275\354\205\230 \354\227\206\353\212\224 \355\214\235\354\227\205 1.png" differ diff --git "a/img/landing/\354\212\244\355\201\254\353\246\260\354\203\267 2023-03-17 \354\230\244\355\233\204 3.22 1.png" "b/img/landing/\354\212\244\355\201\254\353\246\260\354\203\267 2023-03-17 \354\230\244\355\233\204 3.22 1.png" new file mode 100644 index 000000000..dc3a0e3b1 Binary files /dev/null and "b/img/landing/\354\212\244\355\201\254\353\246\260\354\203\267 2023-03-17 \354\230\244\355\233\204 3.22 1.png" differ diff --git "a/img/landing/\355\217\264\353\215\224 \352\263\265\354\234\240\355\225\230\352\270\260 \355\214\235\354\227\205 1.png" "b/img/landing/\355\217\264\353\215\224 \352\263\265\354\234\240\355\225\230\352\270\260 \355\214\235\354\227\205 1.png" new file mode 100644 index 000000000..0b163e887 Binary files /dev/null and "b/img/landing/\355\217\264\353\215\224 \352\263\265\354\234\240\355\225\230\352\270\260 \355\214\235\354\227\205 1.png" differ diff --git a/img/page.png b/img/page.png new file mode 100644 index 000000000..a88950b7d Binary files /dev/null and b/img/page.png differ diff --git a/img/page2.png b/img/page2.png new file mode 100644 index 000000000..52aa2d415 Binary files /dev/null and b/img/page2.png differ diff --git a/img/search.png b/img/search.png new file mode 100644 index 000000000..75c868b2e 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..6f3cd9800 Binary files /dev/null and b/img/share.png differ diff --git a/index.html b/index.html new file mode 100644 index 000000000..e4985dec0 --- /dev/null +++ b/index.html @@ -0,0 +1,124 @@ + + + + + + Linkbrary + + + + + + + + + +
+
+
+ 세상의 모든 정보를
+ 쉽게 저장하고 관리해보세요 +
+ 링크 추가하기 +
+ +
+
+
+ +
+ +
+
+
+ + 원하는 링크를
+ 저장하세요
+
+
+ 나중에 읽고 싶은 글, 다시 보고 싶은 영상,
+ 사고 싶은 옷, 기억하고 싶은 모든 것을
+ 한 공간에 저장하세요.
+
+
+
+ + + +
+
+ +
+
+ +
+
+
+ 링크를 폴더로
+ 관리하세요
+
+
+ 나만의 폴더를 무제한으로 만들고
+ 다양하게 활용할 수 있습니다. +
+
+
+ +
+
+
+ 저장한 링크를
+ 공유해 보세요.
+
+
+ 여러 링크를 폴더에 담고 공유할 수 있습니다.
+ 가족, 친구, 동료들에게 쉽고 빠르게 링크를
+ 공유해 보세요. +
+
+ +
+ +
+
+ +
+
+
+ 저장한 링크를
+ 검색해 보세요
+
+
+ 중요한 정보들을 검색으로 쉽게 찾아보세요.
+
+
+
+
+ + + + \ No newline at end of file diff --git a/login.html b/login.html new file mode 100644 index 000000000..0d5fb6a51 --- /dev/null +++ b/login.html @@ -0,0 +1,43 @@ + + + + + + Linkbrary + + + + + + +
+
+ Linkbrary

+ 회원이 아니신가요? +
+
+
+ + + +
+
+
+
+ 소셜 로그인 +
+ + +
+
+
+
+ + \ No newline at end of file diff --git a/privacy.html b/privacy.html new file mode 100644 index 000000000..353f67446 --- /dev/null +++ b/privacy.html @@ -0,0 +1,11 @@ + + + + + + Document + + + privacy + + \ No newline at end of file diff --git a/signup.html b/signup.html new file mode 100644 index 000000000..453655ddc --- /dev/null +++ b/signup.html @@ -0,0 +1,46 @@ + + + + + + Linkbrary + + + + + + +
+
+ Linkbrary

+ 이미 회원이신가요? +
+
+
+ + + + +
+
+
+
+ 다른 방식으로 가입하기 +
+ + +
+
+
+
+ + \ No newline at end of file diff --git "a/\354\262\253\355\224\214\353\236\234.jpg" "b/\354\262\253\355\224\214\353\236\234.jpg" new file mode 100644 index 000000000..0dea48526 Binary files /dev/null and "b/\354\262\253\355\224\214\353\236\234.jpg" differ