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