diff --git a/facebook.svg b/facebook.svg deleted file mode 100644 index af5130815..000000000 --- a/facebook.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/faq.html b/faq.html index e69de29bb..6b8f8e3f3 100644 --- a/faq.html +++ b/faq.html @@ -0,0 +1,11 @@ + + + + + + FAQ + + + + + \ No newline at end of file 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..b9c9d4939 --- /dev/null +++ b/images/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/google.png b/images/google.png new file mode 100644 index 000000000..e49ff34a3 Binary files /dev/null and b/images/google.png differ diff --git a/images/hero.png b/images/hero.png new file mode 100644 index 000000000..11dc528fb Binary files /dev/null and b/images/hero.png differ diff --git a/images/image1.png b/images/image1.png new file mode 100644 index 000000000..f6355852b Binary files /dev/null and b/images/image1.png differ diff --git a/images/image2.png b/images/image2.png new file mode 100644 index 000000000..b9a3c674a Binary files /dev/null and b/images/image2.png differ diff --git a/images/image3.png b/images/image3.png new file mode 100644 index 000000000..986a39679 Binary files /dev/null and b/images/image3.png differ diff --git a/images/image4.png b/images/image4.png new file mode 100644 index 000000000..762bdc960 Binary files /dev/null and b/images/image4.png differ diff --git a/images/instagram.svg b/images/instagram.svg new file mode 100644 index 000000000..0b9337b07 --- /dev/null +++ b/images/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/kakao.svg b/images/kakao.svg new file mode 100644 index 000000000..778fe9461 --- /dev/null +++ b/images/kakao.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/images/logo.svg b/images/logo.svg new file mode 100644 index 000000000..282022090 --- /dev/null +++ b/images/logo.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/images/preview.png b/images/preview.png new file mode 100644 index 000000000..57f279e04 Binary files /dev/null and b/images/preview.png differ diff --git a/images/twitter.svg b/images/twitter.svg new file mode 100644 index 000000000..14a6069a1 --- /dev/null +++ b/images/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/youtube.svg b/images/youtube.svg new file mode 100644 index 000000000..28ed0e8ba --- /dev/null +++ b/images/youtube.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/img1.png b/img1.png deleted file mode 100644 index 7049e456e..000000000 Binary files a/img1.png and /dev/null differ diff --git a/img2.png b/img2.png deleted file mode 100644 index eda3fe245..000000000 Binary files a/img2.png and /dev/null differ diff --git a/img3.png b/img3.png deleted file mode 100644 index bbaf4d3b9..000000000 Binary files a/img3.png and /dev/null differ diff --git a/img4.png b/img4.png deleted file mode 100644 index 45f681b6d..000000000 Binary files a/img4.png and /dev/null differ diff --git a/img5.png b/img5.png deleted file mode 100644 index f1ad1b576..000000000 Binary files a/img5.png and /dev/null differ diff --git a/img6.png b/img6.png deleted file mode 100644 index 915dd297a..000000000 Binary files a/img6.png and /dev/null differ diff --git a/img7.png b/img7.png deleted file mode 100644 index ad59ada6f..000000000 Binary files a/img7.png and /dev/null differ diff --git a/index.css b/index.css deleted file mode 100644 index 7c5747658..000000000 --- a/index.css +++ /dev/null @@ -1,337 +0,0 @@ -@font-face { - font-family: 'Pretendard-Regular'; - src:url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff'); - font-weight:400; - font-style: normal; -} - -@import url('https://fonts.googleapis.com/css2?family=Acme&display=swap'); - -:root { - --Primary: #6D6AFE; - --Red: #FF5B56; - --Black: #111322; - --White: #FFFFFF; - --Grey1: #3E3E43; - --Grey2: #9FA6B2; - --Grey3: #CCD5E3; - --Grey4: #E7EFFB; - --Grey5: #F0F6FF; - --GreyLight: #F5F5F5; -} - -header { - display: flex; - position: fixed; - top: 0; - left: 0; - right: 0; - padding: 20px 200px; - flex-direction: column; - align-items: center; - gap: 8px; - align-self: stretch; - background: var(--Grey5); - z-index: 1; -} - -.nav { - display: flex; - justify-content: space-between; - align-items: center; - align-self: stretch; -} - -.logo { - cursor: pointer; - text-decoration: none; - -} - -.login { - display: flex; - width: 128px; - padding: 16px 20px; - justify-content: center; - align-items: center; - gap: 10px; - border-radius: 8px; - background: var(--gra-purpleblue-to-skyblue, linear-gradient(91deg, #6D6AFE 0.12%, #6AE3FE 101.84%)); - color: var(--GreyLight); - font-family: 'pretendard-Regular'; - font-size: 18px; - font-style: normal; - font-weight: 600; - line-height: normal; - cursor: pointer; - text-decoration: none; -} - - -.contents01 { - display: flex; - padding: 163px 360px 0px 360px; - flex-direction: column; - justify-content: flex-end; - align-items: center; - gap: 40px; - background: var(--Grey5); -} - -.title01 { - text-align: center; - font-family: 'pretendard-Regular'; - font-size: 64px; - font-style: normal; - font-weight: 700; - line-height: 80px; /* 125% */ -} - -.title01 .txt1 { - background: linear-gradient(91deg, #6D6AFE 17.28%, #FF9F9F 74.98%); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; -} - -.title01 .txt2 { - color: #000; - font-family: 'pretendard-Regular'; - font-size: 64px; - font-style: normal; - font-weight: 700; - line-height: 80px; -} - -.add-link { - cursor: pointer; - display: flex; - width: 350px; - padding: 16px 20px; - justify-content: center; - align-items: center; - gap: 10px; - border-radius: 8px; - background: var(--gra-purpleblue-to-skyblue, linear-gradient(91deg, #6D6AFE 0.12%, #6AE3FE 101.84%)); - color: var(--GreyLight); - text-decoration: none; -} - -.example01 { - width: 1118px; - height: 659px; - flex-shrink: 0; - border-radius: 25px; - background: linear-gradient(180deg, rgba(196, 196, 196, 0.00) 67.68%, #F0F6FF 94.76%); - box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.08); -} - - -.contents02 { - display: flex; - padding: 120px 461px 50px 461px; - justify-content: center; - align-items: center; -} - -.frame { - display: flex; - align-items: center; - gap: 157px; -} - -.title02 { - display: flex; - width: 291px; - flex-direction: column; - align-items: flex-start; - gap: 10px; -} - -.title02-style { - font-family: 'pretendard-Regular'; - font-size: 48px; - font-style: normal; - font-weight: 700; - line-height: normal; - letter-spacing: -0.3px; -} - -.title02 .txt3 { - background: linear-gradient(96deg, #FE8A8A 1.72%, #A4CEFF 74.97%); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; -} - -.title02 .txt4{ - background: linear-gradient(96deg, #FE8A8A 1.72%, #A4CEFF 74.97%); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - font-family: 'pretendard-Regular'; - font-size: 48px; - font-style: normal; - font-weight: 700; - line-height: normal; -} - -.title02 .txt5{ - color: #000; - font-family: 'pretendard-Regular'; - font-size: 48px; - font-style: normal; - font-weight: 700; - line-height: normal; - letter-spacing: -0.3px; -} - -.txt6{ - color: #6B6B6B; - font-family: 'pretendard-Regular'; - font-size: 16px; - font-style: normal; - font-weight: 400; - line-height: 150%; /* 24px */ -} - -.example02 { - width: 550px; - height: 450px; -} - -.contents03 { - display: flex; - padding: 50px 461px; - justify-content: center; - align-items: center; -} - -.frame02 { - display: flex; - align-items: center; - gap: 157px; -} - -.example03 { - width: 550px; -} - -.title02-style .txt7 { - background: linear-gradient(277deg, #6FBAFF 59.22%, #FFD88B 93.66%); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - font-family: 'pretendard-Regular'; - font-size: 48px; - font-style: normal; - font-weight: 700; - line-height: normal; - letter-spacing: -0.3px; -} - -.title02-style .txt8 { - background: linear-gradient(99deg, #6D7CCD 19.76%, rgba(82, 136, 133, 0.22) 52.69%); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - font-family: 'pretendard-Regular'; - font-size: 48px; - font-style: normal; - font-weight: 700; - line-height: normal; -} - -.example04 { - width: 570px; - height: 469px; - flex-shrink: 0; -} - -.title02-style .txt9 { - background: var(--Fandom-K-gra-blue-to-pink, linear-gradient(271deg, #FE578F -9.84%, #68E8F9 107.18%)); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - font-family: 'pretendard-Regular'; - font-size: 48px; - font-style: normal; - font-weight: 700; - line-height: normal; -} - -footer { - display: flex; - height: 280px; - padding-top: 120px; - flex-direction: column; - align-items: center; - align-self: stretch; - border-radius: 30px; - box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.02); -} - -footer .frame03 { - display: flex; - height: 160px; - padding: 32px 104px 64px 104px; - flex-direction: column; - align-items: center; - flex-shrink: 0; - align-self: stretch; - background: var(--Black); -} - -.frame04 { - display: flex; - justify-content: space-between; - align-items: flex-start; - align-self: stretch; -} - -.frame04 .txt10 { - color: #676767; - text-align: center; - font-family: "Acme", sans-serif; - font-weight: 400; - font-style: normal; - font-size: 16px; - line-height: normal; -} - -.frame04 .txt11 { - display: flex; - width: 181.111px; - align-items: flex-start; - gap: 30px; - font-family: "Acme", sans-serif; - font-size: 16px; - font-style: normal; - font-weight: 400; - line-height: normal; - -} - -.privacy { - cursor: pointer; - text-decoration: none; - color: #CFCFCF; -} - -.faq { - cursor: pointer; - text-decoration: none; - color: #CFCFCF; -} - -.frame04 .sns { - display: flex; - align-items: flex-start; - gap: 12px; -} - -.frame04 .sns-logo { - width: 20px; - height: 20px; - cursor: pointer; -} \ No newline at end of file diff --git a/index.html b/index.html index 3f4d3addd..dbd41dfa2 100644 --- a/index.html +++ b/index.html @@ -1,116 +1,91 @@ - + Linkbrary - + + + + + + + +
-
- - +
+

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

+ 링크 추가하기 + 메인이미지
-
-
- 세상의 모든 정보를
쉽게 저장하고 관리해 보세요 -
- - 링크 추가하기 - - 예시화면 -
+
+
+

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

+

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

+ 링크기능이 담긴 예시화면 +
- -
-
-
-
- 원하는 링크를 저장하세요
-
-
- 나중에 읽고 싶은 글, 다시 보고 싶은 영상,
- 사고 싶은 옷, 기억하고 싶은 모든 것을
- 한 공간에 저장하세요. -
-
- 예시화면2 -
-
+
+ 폴더이름 변경기능이 담긴 사진 +

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

+

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

+
- -
-
- 예시화면3 -
-
- 링크를 폴더로 관리하세요 -
-
- 나만의 폴더를 무제한으로 만들고
다양하게 활용할 수 있습니다. -
-
-
-
+
+ 링크 공유 기능이 담긴 사진 +

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

+

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

+
- -
-
-
-
- 저장한 링크를 공유해 보세요. -
-
- 여러 링크를 폴더에 담고 공유할 수 있습니다.
- 가족, 친구, 동료들에게 쉽고 빠르게 링크를
공유해 보세요. -
-
- 예시화면4 -
-
+
+ 링크 검색 기능이 담긴 사진 +

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

+

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

+
+
- -
-
- 예시화면5 -
-
- 저장한 링크를 검색해 보세요 -
-
- 중요한 정보들을 검색으로 쉽게 찾아보세요. -
-
-
-
- diff --git a/instagram.svg b/instagram.svg deleted file mode 100644 index acd5df20b..000000000 --- a/instagram.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/logo.svg b/logo.svg deleted file mode 100644 index 002f21d71..000000000 --- a/logo.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - diff --git a/privacy.html b/privacy.html index e69de29bb..aadf89ea0 100644 --- a/privacy.html +++ b/privacy.html @@ -0,0 +1,11 @@ + + + + + + Privacy + + + + + \ No newline at end of file diff --git a/signin.css b/signin.css deleted file mode 100644 index eecfc6b29..000000000 --- a/signin.css +++ /dev/null @@ -1,154 +0,0 @@ -@font-face { - font-family: 'Pretendard-Regular'; - src:url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff'); - font-weight:400; - font-style: normal; - } - - :root { - --Primary: #6D6AFE; - --Red: #FF5B56; - --Black: #111322; - --White: #FFFFFF; - --Grey1: #3E3E43; - --Grey2: #9FA6B2; - --Grey3: #CCD5E3; - --Grey4: #E7EFFB; - --Grey5: #F0F6FF; - --GreyLight: #F5F5F5; -} - -body { - display: flex; - padding: 238px 0px 253px 0px; - justify-content: center; - align-items: center; - background: var(--Grey5); -} - -.frame01 { - display: flex; - flex-direction: column; - align-items: center; - gap: 32px; -} - -.frame02 { - display: flex; - flex-direction: column; - align-items: center; - gap: 30px; -} - -.frame03 { - display: flex; -flex-direction: column; -align-items: center; -gap: 16px; -} - -.frame03 .logo { - width: 210.583px; - height: 38px; -} - -.frame04 { - display: flex; - align-items: flex-start; - gap: 8px; -} -.frame04 .ask { - color: var(--black, #000); - font-family: 'pretendard-Regular'; -font-size: 16px; -font-style: normal; -font-weight: 400; -line-height: 24px; /* 150% */ -} - -.frame04 .signup{ - color: var(--Primary); - font-family: 'pretendard-Regular'; -font-size: 16px; -font-style: normal; -font-weight: 600; -line-height: normal; -} - -.input { - display: flex; -flex-direction: column; -align-items: flex-start; -gap: 24px; -} - -.info { - display: flex; -flex-direction: column; -align-items: flex-start; -gap: 12px; -} - -label { - color: var(--black, #000); - font-family: 'pretendard-Regular'; -font-size: 14px; -font-style: normal; -font-weight: 400; -line-height: normal; -} - -input { - display: flex; -width: 400px; -height: 24px; -padding: 18px 15px; -justify-content: center; -align-items: center; -border-radius: 8px; -background: var(--White); -border: 1px solid var(--Grey3); -} - -input:focus { - outline: none; - border: 1px solid var(--Primary); -} - -.login { - display: flex; -width: 400px; -padding: 16px 20px; -justify-content: center; -align-items: center; -gap: 10px; -border-radius: 8px; -background: var(--gra-purpleblue-to-skyblue, linear-gradient(91deg, #6D6AFE 0.12%, #6AE3FE 101.84%)); -color: var(--GreyLight); -font-family: 'pretendard-Regular'; -font-size: 18px; -font-style: normal; -font-weight: 600; -line-height: normal; -cursor: pointer; -} - -.social { - display: flex; -width: 400px; -padding: 12px 24px; -justify-content: space-between; -align-items: center; -border-radius: 8px; -border: 1px solid var(--Grey3); -background: var(--Grey4); -} - -p { - color: var(--Linkbrary-gray100, #373740); - font-family: 'pretendard-Regular'; -font-size: 14px; -font-style: normal; -font-weight: 400; -line-height: normal; -} \ No newline at end of file diff --git a/signin.html b/signin.html index 756f75e14..d9582c81c 100644 --- a/signin.html +++ b/signin.html @@ -1,42 +1,53 @@ - - - + + + + 로그인 + + - signin - - - -
-
-
- -
-
회원이 아니신가요?
- -
-
-
-
- - -
-
- - -
-
- + + +
+ + + +

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

+
+
+
+
+
+ + +
+
+ + + +
-
- - \ No newline at end of file + + diff --git a/signup.html b/signup.html index 0b276db45..042f1b9b3 100644 --- a/signup.html +++ b/signup.html @@ -1,46 +1,60 @@ - - - + + + + 회원가입 + + - Signup - - - -
-
-
- -
-
이미 회원이신가요?
- -
-
-
-
- - -
-
- - -
-
- 비밀번호 확인 - -
-
- + + +
+ + + +

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

+
+
+
+
+
+ + +
+
+ + + +
+
+ + + +
-
- - \ No newline at end of file + + diff --git a/src/colors.css b/src/colors.css new file mode 100644 index 000000000..5534fd4aa --- /dev/null +++ b/src/colors.css @@ -0,0 +1,14 @@ +:root { + --primary: #6d6afe; + --red: #ff5b56; + --black: #111322; + --white: #ffffff; + + --gray100: #373740; + --gray60: #9fa6b2; + --gray20: #ccd5e3; + --gray10: #e7effb; + + --background: #f0f6ff; + } + \ No newline at end of file diff --git a/src/global.css b/src/global.css new file mode 100644 index 000000000..fc4428003 --- /dev/null +++ b/src/global.css @@ -0,0 +1,2 @@ +@import "./colors.css"; +@import "./reset.css"; \ No newline at end of file diff --git a/src/landing.css b/src/landing.css new file mode 100644 index 000000000..2b64dba29 --- /dev/null +++ b/src/landing.css @@ -0,0 +1,269 @@ +@import "./global.css"; + +body { + display: flex; + align-items: center; + flex-direction: column; +} + +nav { + display: flex; + justify-content: space-between; + background: var(--background); + position: fixed; + top: 0; + width: 100%; +} + +.gnb { + display: flex; + justify-content: space-between; + align-items: center; + padding: 2rem 20rem; + width: 100%; +} + +.cta { + display: flex; + justify-content: center; + align-items: center; + width: 12.8rem; + background: var(--gra-purpleblue-to-skyblue, linear-gradient(91deg, #6D6AFE 0.12%, #6AE3FE 101.84%)); + border-radius: 0.8rem; + color: #f5f5f5; + height: 5.4rem; + font-size: 1.8rem; + font-weight: 600; +} + +header { + width: 100%; + padding-top: 16rem; + display: flex; + flex-direction: column; + justify-content: flex-end; + text-align: center; + + background:var( --background); + +} + +.main-description { + display: flex; + flex-direction: column; + align-items: center; + row-gap: 4rem; +} + +.maintitle { + color: #000; + font-size: 6.4rem; + font-weight: 700; + line-height: 8rem; +} + +.maintitle-style { + background: linear-gradient(91deg, #6D6AFE 17.28%, #FF9F9F 74.98%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.cta2 { + display: flex; + justify-content: center; + align-items: center; + width: 35rem; + background: var(--gra-purpleblue-to-skyblue, linear-gradient(91deg, #6D6AFE 0.12%, #6AE3FE 101.84%)); + border-radius: 0.8rem; + color: #f5f5f5; + height: 5.4rem; + font-size: 1.8rem; + font-weight: 600; +} + +.img1 { + flex-shrink: 0; + width: 120rem; + height: 53rem; +} + +section { + display: grid; + justify-content: center; + column-gap: 15.7rem; + width: 100%; + height: 55rem; + padding: 50px 0; + row-gap: 1rem; + align-items: center; +} + +section:nth-of-type(odd){ + grid-template: + ". image" + "title image" + "explation image" + ". image"; +} + +section:nth-of-type(even){ + grid-template: + "image ." + "image title" + "image explation" + "image ."; +} + +.title { + grid-area: title; + font-size: 4.8rem; + font-weight: 700; + line-height: 5.8rem; + letter-spacing: -0.03rem; + } + + +.explation { + grid-area: explation; + font-size: 1.6rem; + font-weight: 400; + color: #6b6b6b; + line-height: 150%; + } + + .content-image { + grid-area: image; + width: 55rem; + height: 45rem; + } + +.title-style2{ + background: linear-gradient(277deg, #6FBAFF 59.22%, #FFD88B 93.66%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.title-style { + background: linear-gradient(96deg, #FE8A8A 1.72%, #A4CEFF 74.97%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + + .title-style3{ + background: linear-gradient(99deg, #6D7CCD 19.76%, rgba(82, 136, 133, 0.22) 52.69%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + + .title-style4{ + background: var(--Fandom-K-gra-blue-to-pink, linear-gradient(271deg, #FE578F -9.84%, #68E8F9 107.18%)); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + + footer { + display: flex; + justify-content: center; + height: 16rem; + width: 100%; + background-color: var(--black); + padding-top: 3.2rem; + + } + + .footer-box { + display: flex; + justify-content: space-between; + max-width: 192rem; + padding: 0 10.4rem; + width: 100%; + height: 2rem; + } + + .copyright { + color: #676767; + font-size: 1.6rem; + font-family: Arial; + } + + .footer-links { + display: flex; + column-gap: 3rem; + } + + .footer-link { + color: #CFCFCF; + font-size: 1.6rem; + } + +.sns { + display: flex; + column-gap: 1.2rem; +} + +/* 반응형 페이지 만들기 */ +/* 태블릿 사이즈 */ +@media screen and (min-width: 768px) and (max-width: 1199px) { + .gnb { + padding: 2rem 32px; +} +} + +/* 모바일 */ +@media screen and (min-width: 375px) and (max-width: 767px) { + + + section { + display: grid; + justify-content: center; + column-gap: 16px; + width: 100%; + height: auto; + + row-gap: 16px; + align-items: center; + } + + .gnb { + padding: 2rem 32px; +} + + + section:nth-of-type(odd), + section:nth-of-type(even) { + grid-template: + "title" + "image" + "explation"; + } + + .title, .explation, .content-image { + width: calc(100% - 3.2rem); + margin: 0 16px; + } + + .maintitle { + font-size: 3.2rem; + line-height: 4rem; + + } + + .title { + font-size: 2.4rem; + } + + .title br{ + display: none; + } + + .img1 { + max-width: 400px; + height: auto; + } + +} \ No newline at end of file diff --git a/src/reset.css b/src/reset.css new file mode 100644 index 000000000..c51bc6544 --- /dev/null +++ b/src/reset.css @@ -0,0 +1,21 @@ +/* stylesheet 초기화 */ +* { + margin: 0; + font-family: "Pretendard"; +} + +html, body { + font-size: 62.5%; +} + +button { + border: none; + padding: unset; + background-color: unset; + cursor: pointer; + } + +a { + text-decoration: none; + cursor: pointer; +} \ No newline at end of file diff --git a/src/sign.css b/src/sign.css new file mode 100644 index 000000000..693eb3d2e --- /dev/null +++ b/src/sign.css @@ -0,0 +1,161 @@ +@import "./global.css"; + +body { + padding-top: 23.8rem; + background-color: var(--background); + display: flex; + flex-direction: column; + align-items: center; + row-gap: 3rem; +} + +header { + display: flex; + flex-direction: column; + row-gap: 1.6rem; +} + +.logo-link { + display: flex; + justify-content: center; +} + +.header-logo { + height: 3.8rem; +} + +.header-message { + display: flex; + column-gap: 0.8rem; + font-size: 1.6rem; + font-weight: 400; + line-height: 150%; +} + +.header-link { + height: fit-content; + font-size: 1.6rem; + font-weight: 600; + line-height: normal; + color: var(--primary); + border-bottom: 0.1rem solid var(--primary); +} + +.sign-box { + display: flex; + flex-direction: column; + align-items: center; + row-gap: 3.2rem; + width: 40rem; +} + +.sign-form { + display: flex; + flex-direction: column; + row-gap: 3rem; + width: 100%; +} + +.sign-inputs { + display: flex; + flex-direction: column; + row-gap: 2.4rem; +} + +.sign-input-box { + display: flex; + flex-direction: column; + row-gap: 1.2rem; +} + +.sign-password { + position: relative; +} + +.sign-input-label { + font-size: 1.4rem; + font-weight: 400; +} + +.sign-input { + padding: 1.8rem 1.5rem; + border-radius: 0.8rem; + border: 0.1rem solid var(--gray20); + font-size: 1.6rem; + line-height: 150%; +} + +.sign-input:focus { + border-color: var(--primary); +} + +.eye-button { + position: absolute; + bottom: 2.2rem; + right: 1.5rem; + width: 1.6rem; + height: 1.6rem; +} + +.cta { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 5.4rem; + background-image: linear-gradient(135deg, var(--primary) 0%, #6ae3fe 100%); + border-radius: 0.8rem; + color: #f5f5f5; + font-size: 1.8rem; + font-weight: 600; +} + +.sns-box { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + padding: 1.2rem 2.4rem; + border-radius: 0.8rem; + border: 0.1rem solid var(--gray20); + background-color: var(--gray10); +} + +.sns-links { + display: flex; + column-gap: 1.6rem; +} + +.sns-link { + display: flex; + justify-content: center; + align-items: center; + width: 4.2rem; + height: 4.2rem; + border-radius: 50%; +} + +.sns-text { + font-size: 1.4rem; + font-weight: 400; + color: var(--gray100); +} + +.google-link { + background-color: var(--white); + border: 0.1rem solid #d3d4dd; +} + +.kakao-link { + padding-top: 0.2rem; + background-color: #f5e14b; +} + +@media screen and (min-width: 375px) and (max-width: 767px) { + body { + padding: 2rem 32px; + } +} +.sns-box { + max-width: 40rem; +} \ No newline at end of file diff --git a/twitter.svg b/twitter.svg deleted file mode 100644 index 4586b559d..000000000 --- a/twitter.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/youtube.svg b/youtube.svg deleted file mode 100644 index b34c4693a..000000000 --- a/youtube.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - -