diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 000000000..af944401f --- /dev/null +++ b/css/reset.css @@ -0,0 +1,48 @@ +/* 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 { + 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; +} \ No newline at end of file diff --git a/css/signin.css b/css/signin.css new file mode 100644 index 000000000..707670b7b --- /dev/null +++ b/css/signin.css @@ -0,0 +1,164 @@ +@import "reset.css"; + +* { + box-sizing: border-box; +} + + +html{ + height:100%; +} + +body{ + position:relative; + width:100%; + height:100%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} + +.contents{ + display: flex; + flex-direction: column; + gap:30px; +} + +.title{ + display: flex; + flex-direction: column; + align-items: center; +} + +.logo{ + height: 38px; +} + +h2{ + color: black; + font-size: 16px; + font-family: Pretendard; + font-weight: 400; + line-height: 24px; +} + +h2 a{ + color: #6D6AFE; + font-size: 16px; + font-family: Pretendard; + font-weight: 600; +} + +h3{ + color: black; + font-size: 14px; + font-family: Pretendard; + font-weight: 400; + margin-bottom: 12px; +} + +.input-form{ + display: flex; + gap:24px; + flex-direction: column; +} + +input{ + width: 400px; + padding: 18px 15px; + border-radius: 8px; + border: 1px #CCD5E3 solid; + justify-content: center; + align-items: center; + color: #373740; + font-size: 16px; + font-family: Pretendard; + font-weight: 400; + line-height: 24px; +} + +input:focus { + outline: 1px #6D6AFE solid; +} + + +button{ + width: 100%; + padding: 16px 20px; + background: linear-gradient(91deg, #6D6AFE 0%, #6AE3FE 100%); + border-radius: 8px; + border: none; + color: #F5F5F5; + font-size: 18px; + font-family: Pretendard; + font-weight: 600; +} + +.social-login{ + display: flex; + width: 100%; + align-items: center; + justify-content: space-between; + padding: 12px 24px; + background-color: #E7EFFB; + border-radius: 8px; + border: 1px #CCD5E3 solid; +} + +.social-icon{ + display: flex; + gap: 16px +} + +.social-login p{ + color: #373740; + font-size: 14px; + font-family: Pretendard; + font-weight: 400; +} + +.social-login .image2{ + width:42px; + height:42px; + background-color: #FEE500; + border-radius: 37.33px; + position: relative; +} + +.social-login .image1{ + width:42px; + height:42px; + background-color: #FFFFFF; + border-radius: 37.33px; + position: relative; + border: 1px #D3D4DD solid; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); +} + +.image2 img{ + position: absolute; + top: 10px; + bottom: 8px; + left: 8px; + right: 8px; +} + +.image1 img{ + position: absolute; + top: 10px; + bottom: 10px; + left: 10px; + right: 10px; +} + +.pwd-input-check p{ + color: #FF5B56; + font-size: 14px; + font-family: Pretendard; + font-weight: 400; +} + +.pwd-input form{ + background-image: url(eye-off.svg); +} \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 000000000..14e2e5214 --- /dev/null +++ b/css/style.css @@ -0,0 +1,206 @@ +@import "reset.css"; + +:root { + --primary: #6D6AFD; /* CSS 전역 변수 선언 */ + --red:#FF5B56; + --black: #111322; + --white: #FFFFFF; + --gray01:#3E3E43; + --gray02:#9FA6B2; + --gray03:#CCD5E3; + --gray04:#E7EFFB; + --gray05:#F0F6FF; + +} + +* { + box-sizing: border-box; +} + +html{ + background-color: var(--gray); + width:100%; + min-width: 1920px; +} + +body{ + max-width:1920px; + margin:0 auto; +} + +header{ + margin:0 200px; + display: flex; + align-items: center;; + justify-content: space-between; + padding:20px; + position: sticky; + top:0; +} + +header button{ + font-size: 18px; + border:none; + padding: 16px 20px; + color: #F5F5F5; + font-size: 18px; + font-family: Pretendard; + font-weight: 600; + word-wrap: break-word; + width:128px; + border-radius: 8px; + background-image: linear-gradient(90deg,var(--primary),skyblue); + cursor: pointer; +} + +.main{ + margin: 70px 360px 0px 360px; + display: flex; + flex-direction: column; + align-items: center; + gap:40px; +} + +.main-title{ + color: black; + font-size: 64px; + font-family: Pretendard; + font-weight: 700; + line-height: 80px; + word-wrap: break-word; + text-align: center; +} + +.main-title span{ + color: #6D6AFE; + font-size: 64px; + font-family: Pretendard; + font-weight: 700; + line-height: 80px; + word-wrap: break-word; +} + +.main button{ + font-size: 18px; + border:none; + padding: 16px 20px; + color: #F5F5F5; + font-size: 18px; + font-family: Pretendard; + font-weight: 600; + word-wrap: break-word; + width:350px; + border-radius: 8px; + background-image: linear-gradient(90deg,var(--primary),skyblue); +} + +.main img{ + background: linear-gradient(180deg, rgba(196, 196, 196, 0) 0%, var(--gray05) 100%); + width:1200px; +} + +.service{ + background-color: white; + padding:120px 461px; +} + +.cards{ + display: flex; + gap:100px; + flex-direction: column; +} + +.card{ + display: flex; + align-items: center; + gap:157px; +} + +.card h2{ + color: #000000; + font-size: 48px; + font-family: Pretendard; + font-weight: 700; + margin-bottom: 10px; +} + +.card-text{ + color: #6B6B6B; + font-size: 16px; + font-family: Abel; + font-weight: 400; + width: 291px; +} + +.service .images{ + height: 450px; + width: 550px; + display: flex; + align-items: center; + justify-content: space-around ; + background-color: var(--gray05); + border-radius: 15px; + overflow: hidden; +} + +.service-01 img{ + border-radius: 11px; + overflow: hidden; +} + +.service-01 .center{ + position: relative; +} + +.service-01 .icon{ + position: absolute; + bottom:0; + right:0; +} + +.service-02 img{ + padding: 114px 68px 66px 68px; +} + +.service-03 .back{ + position: relative; + background: rgba(0, 0, 0, 0.40); + box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.08); + border-radius: 25px; +} + +.service-04 img{ + padding-top: 55px; + padding-left: 60px; +} + +footer{ + background-color: #000000; + padding: 32px 104px 64px 104px; +} + +footer p{ + color: #676767; + font-size: 16px; + font-family: Acme; + font-weight: 400; + word-wrap: break-word; +} + +.footer-info{ + display: flex; + justify-content: space-between; + align-items: flex-start; +} + +.middle a{ + color: #CFCFCF; + font-size: 16px; + font-family: Acme; + font-weight: 400; + word-wrap: break-word; +} + +.left img{ + width:18px; +} \ No newline at end of file diff --git a/images/99FE484C5C3451F218 1.svg b/images/99FE484C5C3451F218 1.svg new file mode 100644 index 000000000..99b981e6b --- /dev/null +++ b/images/99FE484C5C3451F218 1.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/images/Card 1.png b/images/Card 1.png new file mode 100644 index 000000000..aff3dddf4 Binary files /dev/null and b/images/Card 1.png differ diff --git a/images/Card-1.png b/images/Card-1.png new file mode 100644 index 000000000..01b35a22d Binary files /dev/null and b/images/Card-1.png differ diff --git a/images/Card.png b/images/Card.png new file mode 100644 index 000000000..62450144c Binary files /dev/null and b/images/Card.png differ diff --git a/images/Group 20.svg b/images/Group 20.svg new file mode 100644 index 000000000..acd88e383 --- /dev/null +++ b/images/Group 20.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/images/Kakao.svg b/images/Kakao.svg new file mode 100644 index 000000000..9f826e66b --- /dev/null +++ b/images/Kakao.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/images/akar-icons_facebook-fill.svg b/images/akar-icons_facebook-fill.svg new file mode 100644 index 000000000..af5130815 --- /dev/null +++ b/images/akar-icons_facebook-fill.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/images/akar-icons_twitter-fill.svg b/images/akar-icons_twitter-fill.svg new file mode 100644 index 000000000..4586b559d --- /dev/null +++ b/images/akar-icons_twitter-fill.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/images/akar-icons_youtube-fill.svg b/images/akar-icons_youtube-fill.svg new file mode 100644 index 000000000..c534eadd9 --- /dev/null +++ b/images/akar-icons_youtube-fill.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/images/ant-design_instagram-filled.svg b/images/ant-design_instagram-filled.svg new file mode 100644 index 000000000..acd5df20b --- /dev/null +++ b/images/ant-design_instagram-filled.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/images/eye-off.svg b/images/eye-off.svg new file mode 100644 index 000000000..bec50d66f --- /dev/null +++ b/images/eye-off.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/images/facebook.svg b/images/facebook.svg new file mode 100644 index 000000000..f0da6389e --- /dev/null +++ b/images/facebook.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/images/google.png b/images/google.png new file mode 100644 index 000000000..a32846c50 Binary files /dev/null and b/images/google.png differ diff --git a/images/google.svg b/images/google.svg new file mode 100644 index 000000000..75c873ae7 --- /dev/null +++ b/images/google.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/images/image 25.png b/images/image 25.png new file mode 100644 index 000000000..d57710297 Binary files /dev/null and b/images/image 25.png differ diff --git a/images/image25.png b/images/image25.png new file mode 100644 index 000000000..56bd3efb8 Binary files /dev/null and b/images/image25.png differ diff --git a/images/logo.svg b/images/logo.svg new file mode 100644 index 000000000..002f21d71 --- /dev/null +++ b/images/logo.svg @@ -0,0 +1,15 @@ + + + diff --git "a/images/\341\204\211\341\205\263\341\204\217\341\205\263\341\204\205\341\205\265\341\206\253\341\204\211\341\205\243\341\206\272 2023-03-17 \341\204\213\341\205\251\341\204\222\341\205\256 3.22 1.png" "b/images/\341\204\211\341\205\263\341\204\217\341\205\263\341\204\205\341\205\265\341\206\253\341\204\211\341\205\243\341\206\272 2023-03-17 \341\204\213\341\205\251\341\204\222\341\205\256 3.22 1.png" new file mode 100644 index 000000000..dadb8674b Binary files /dev/null and "b/images/\341\204\211\341\205\263\341\204\217\341\205\263\341\204\205\341\205\265\341\206\253\341\204\211\341\205\243\341\206\272 2023-03-17 \341\204\213\341\205\251\341\204\222\341\205\256 3.22 1.png" differ diff --git "a/images/\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/images/\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..499c10005 Binary files /dev/null and "b/images/\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/images/\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/images/\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..2ec352a0c Binary files /dev/null and "b/images/\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/index.html b/index.html new file mode 100644 index 000000000..4917ba88d --- /dev/null +++ b/index.html @@ -0,0 +1,117 @@ + + + + + Linkbrary + + + + + + + +
+ + + + +
+
+
+

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

+ + +
+ +
+
+
+
+

+ 원하는 링크
+ 지정하세요
+

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

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

+ 나만의 폴더를 무제한 만들고
+ 다양하게 사용할 수 있답니당 +
+
+
+
+

+ 저장한 링크를
+ 공유해 보세요
+

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

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

+ + 중요한 정보들을 검색으로 쉽게 찾아보세요 + +
+
+
+
+
+ + + \ No newline at end of file diff --git a/signin.html b/signin.html new file mode 100644 index 000000000..ec83bf79b --- /dev/null +++ b/signin.html @@ -0,0 +1,52 @@ + + + + + signin + + + + + + + +
+
+ +

+ 회원이 아니신가요? + 회원가입하기 +

+
+
+ +
+

비밀번호

+
+ +
+
+
+ +
+

소셜 로그인

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

+ 이미 회원이신가요> + 로그인하기 +

+
+
+ +
+

비밀번호

+
+ +
+
+
+

비밀번호 확인

+
+ +
+

비밀번호와 다릅니다

+
+
+ +
+

다른 방식으로 가입하기

+ +
+
+ \ No newline at end of file