diff --git a/assets/.DS_Store b/assets/.DS_Store new file mode 100644 index 000000000..76f4b75af Binary files /dev/null and b/assets/.DS_Store differ diff --git a/assets/css/.DS_Store b/assets/css/.DS_Store new file mode 100644 index 000000000..5008ddfcf Binary files /dev/null and b/assets/css/.DS_Store differ diff --git a/assets/css/common.css b/assets/css/common.css new file mode 100644 index 000000000..c6b5b02ec --- /dev/null +++ b/assets/css/common.css @@ -0,0 +1,38 @@ +/* font */ + +@import url("https://fonts.googleapis.com/css2?family=Acme&display=swap"); + +.acme-regular { + font-family: "Acme", sans-serif; + font-weight: 400; + font-style: normal; +} + +/* color palette */ + +:root { + --primary: #6d6afe; + --red: #ff5b56; + --black: #111322; + --white: #ffffff; + --gray1: #3e3e43; + --gray2: #9fa6b2; + --gray3: #ccd5e3; + --gray4: #e7effb; + --gray5: #f0f6ff; +} + +html { + font-size: 16px; +} + +* { + margin: 0; + padding: 0; + font-family: "Pretendard", sans-serif; +} + +a { + cursor: pointer; + text-decoration: none; +} diff --git a/assets/css/main.css b/assets/css/main.css new file mode 100644 index 000000000..3e86a5978 --- /dev/null +++ b/assets/css/main.css @@ -0,0 +1,172 @@ +/* layout */ + +#wrap { + width: 100%; +} + +#header { + position: sticky; + top: 0; + background-color: var(--gray5); +} + +#main { + width: 100%; + height: inherit; + background-color: var(--gray5); +} + +#section { + width: 100%; +} + +#footer { + width: 100%; + background: var(--black); + color: var(--white); + box-sizing: border-box; + padding: 32px 104px 108px 104px; +} + +.container { + width: 1200px; + height: inherit; + margin: 0 auto; +} + +/* text gradient */ + +.gradient_main { + background: linear-gradient(270deg, #ff9f9f, var(--primary)); +} + +.gradient_link { + background: linear-gradient(270deg, #a4ceff, #fe8a8a); +} + +.folder_gradient { + background: linear-gradient(270deg, #a4ceff, #ffd88b); +} + +.share_gradient { + background: linear-gradient(270deg, #a4ceff, #528885); +} + +.sns_gradient { + background: linear-gradient(270deg, #a4ceff, #76dbf0); +} + +.gradient_txt { + background-clip: text; + color: transparent; +} + +/* header */ + +.header_wrap { + max-width: 1920px; + padding: 20px 200px; + display: flex; + justify-content: space-between; + align-items: center; + background: var(--gray6); +} + +.header_wrap .login { + box-sizing: border-box; +} + +.header_wrap .login > a { + display: inline-block; + text-align: center; + color: var(--white); + background: linear-gradient(90.99deg, #6d6afe 0.12%, #6ae3fe 101.84%); + padding: 16px 40px; + border-radius: 8px; +} + +/* main */ + +.main_wrap { + padding-top: 7rem; + text-align: center; +} + +.main_wrap > h1 { + font-weight: 700; + font-size: 64px; + line-height: 80px; +} + +.main_wrap .link_add { + display: inline-block; + background: linear-gradient(90.99deg, #6d6afe 0.12%, #6ae3fe 101.84%); + color: #fff; + padding: 16px 126px; + border-radius: 8px; + margin-top: 40px; + margin-bottom: 90px; +} + +/* section */ + +.contents { + display: flex; + justify-content: center; + padding: 50px 0; +} + +.contents .cont_item { + display: flex; + justify-content: space-between; + align-items: center; + width: 998px; +} + +.contents .cont_item .cont_txt { + font-size: 48px; + font-weight: 700; +} + +.contents .cont_item .cont_desc { + margin-top: 10px; + font-weight: 400; + font-size: 16px; + line-height: 24px; + color: var(--gray1); +} + +.contents .cont_item .cont_img > img { + width: 550px; + height: 450px; +} + +.contents .cont_item .cont_order { + order: -1; +} + +/* footer */ + +.footer_wrap { + display: grid; + grid-template-columns: repeat(3, 1fr); + align-items: center; +} + +.footer_wrap .copyright { + color: #676767; + align-items: center; +} + +.footer_wrap .privacy_box { + justify-self: center; +} +.footer_wrap .privacy_box a { + color: #cfcfcf; +} + +.footer_wrap .sns_box { + justify-self: end; + display: flex; + gap: 16px; +} diff --git a/assets/css/reset.css b/assets/css/reset.css new file mode 100644 index 000000000..5d2f8bac0 --- /dev/null +++ b/assets/css/reset.css @@ -0,0 +1,141 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section, +main { + display: block; +} + +body { + line-height: 1; +} + +ol, +ul { + list-style: none; +} + +blockquote, +q { + quotes: none; +} + +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +img { + max-width: 100%; + border: 0px; + vertical-align: middle; +} diff --git a/assets/css/signin.css b/assets/css/signin.css new file mode 100644 index 000000000..9eb260f82 --- /dev/null +++ b/assets/css/signin.css @@ -0,0 +1,118 @@ +html, +body { + background-color: var(--gray5); + height: 100vh; +} + +#wrap { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + height: 100%; +} + +section { + width: 400px; +} + +section label { + display: inline-block; + width: 100%; + font-size: 14px; + margin-bottom: 12px; +} + +section input { + width: 100%; + height: 60px; + font-size: 14px; + border: 1px solid var(--gray3); + border-radius: 8px; + padding: 18px 15px; + margin-bottom: 24px; + box-sizing: border-box; +} + +section input:hover, +section input:focus { + border: 1px solid var(--primary); +} + +.login_title { + text-align: center; + margin-bottom: 30px; +} + +.login_title > p > a { + position: relative; + color: var(--primary); + font-weight: 600; +} + +.login_title > p > a::after { + width: 100%; + height: 1px; + background: var(--primary); + content: ""; + display: block; + position: absolute; + left: 0; +} + +.login_title img { + margin-bottom: 16px; +} + +.pwd_box { + position: relative; +} + +.pwd_box > img { + position: absolute; + top: 30%; + right: 3%; + margin: -6px 0 0; +} + +.buttype01 { + width: 100%; + border: none; + font-size: 18px; + font-weight: 600; + border-radius: 8px; + padding: 16px 20px; + text-align: center; + background: linear-gradient(90.99deg, #6d6afe 0.12%, #6ae3fe 101.84%); + color: var(--white); +} + +.sns_login { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + font-size: 14px; + margin-top: 34px; + box-sizing: border-box; + padding: 11px 24px; + color: #373740; + border: 1px solid var(--gray3); + border-radius: 8px; + background-color: var(--gray4); +} + +.sns_login > ul { + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; +} + +.sns_login > ul > li a { + transition: 0.3s box-shadow; +} + +.sns_login > ul > li a:hover { + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); +} diff --git a/assets/images/.DS_Store b/assets/images/.DS_Store new file mode 100644 index 000000000..d82cefbfa Binary files /dev/null and b/assets/images/.DS_Store differ diff --git a/assets/images/main/_dim.png b/assets/images/main/_dim.png new file mode 100644 index 000000000..b5c1df576 Binary files /dev/null and b/assets/images/main/_dim.png differ diff --git a/assets/images/main/facebook_icon.svg b/assets/images/main/facebook_icon.svg new file mode 100644 index 000000000..926157015 --- /dev/null +++ b/assets/images/main/facebook_icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/main/img1.png b/assets/images/main/img1.png new file mode 100644 index 000000000..16c68fbbf Binary files /dev/null and b/assets/images/main/img1.png differ diff --git a/assets/images/main/img2.png b/assets/images/main/img2.png new file mode 100644 index 000000000..29ea2135d Binary files /dev/null and b/assets/images/main/img2.png differ diff --git a/assets/images/main/img3.png b/assets/images/main/img3.png new file mode 100644 index 000000000..4d313adaf Binary files /dev/null and b/assets/images/main/img3.png differ diff --git a/assets/images/main/img4.png b/assets/images/main/img4.png new file mode 100644 index 000000000..18bac8c45 Binary files /dev/null and b/assets/images/main/img4.png differ diff --git a/assets/images/main/instagram_icon.svg b/assets/images/main/instagram_icon.svg new file mode 100644 index 000000000..bb6820d84 --- /dev/null +++ b/assets/images/main/instagram_icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/main/logo.png b/assets/images/main/logo.png new file mode 100644 index 000000000..e0ba626ad Binary files /dev/null and b/assets/images/main/logo.png differ diff --git a/assets/images/main/mainImg.png b/assets/images/main/mainImg.png new file mode 100644 index 000000000..87cd0edfd Binary files /dev/null and b/assets/images/main/mainImg.png differ diff --git a/assets/images/main/twitter_icon.svg b/assets/images/main/twitter_icon.svg new file mode 100644 index 000000000..3d1ede5c5 --- /dev/null +++ b/assets/images/main/twitter_icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/main/youtube_icon.svg b/assets/images/main/youtube_icon.svg new file mode 100644 index 000000000..c3f8ff49a --- /dev/null +++ b/assets/images/main/youtube_icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/assets/images/signin/Linkbrary.png b/assets/images/signin/Linkbrary.png new file mode 100644 index 000000000..81caafec2 Binary files /dev/null and b/assets/images/signin/Linkbrary.png differ diff --git a/assets/images/signin/eye-off.svg b/assets/images/signin/eye-off.svg new file mode 100644 index 000000000..1fac531a5 --- /dev/null +++ b/assets/images/signin/eye-off.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/images/signin/eye-on.svg b/assets/images/signin/eye-on.svg new file mode 100644 index 000000000..1c6047aba --- /dev/null +++ b/assets/images/signin/eye-on.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/images/signin/google_icon.svg b/assets/images/signin/google_icon.svg new file mode 100644 index 000000000..23fbec778 --- /dev/null +++ b/assets/images/signin/google_icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/assets/images/signin/kakao_icon.svg b/assets/images/signin/kakao_icon.svg new file mode 100644 index 000000000..1a155750e --- /dev/null +++ b/assets/images/signin/kakao_icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/landing.html b/landing.html new file mode 100644 index 000000000..5d61a09f2 --- /dev/null +++ b/landing.html @@ -0,0 +1,148 @@ + + + + + + Linkbrary + + + + + + + +
+ + +
+
+
+

+ 세상의 모든 정보
+

+

쉽게 저장하고 관리해 보세요

+ 링크 추가하기 + +
+
+
+ +
+
+
+
+

+ 원하는 링크를 +

+

저장하세요

+

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

+
+
+ +
+
+
+
+
+
+

링크를 폴더로

+

+ 관리하세요 +

+

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

+
+
+ +
+
+
+
+
+
+

저장한 링크를

+

+ 해 보세요. +

+

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

+
+
+ +
+
+
+
+
+
+

저장한 링크를

+

+ 검색해 보세요 +

+

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

+
+
+ +
+
+
+
+ + +
+ + diff --git a/signin.html b/signin.html new file mode 100644 index 000000000..06a6c98cc --- /dev/null +++ b/signin.html @@ -0,0 +1,80 @@ + + + + + + Linkbrary + + + + + +
+
+ + +
+
+ + diff --git a/signup.html b/signup.html new file mode 100644 index 000000000..930e7f04d --- /dev/null +++ b/signup.html @@ -0,0 +1,81 @@ + + + + + + Linkbrary + + + + + +
+
+ +
+
+ +