diff --git a/Week2/css/index.style.css b/Week2/css/index.style.css new file mode 100644 index 000000000..fb8230288 --- /dev/null +++ b/Week2/css/index.style.css @@ -0,0 +1,276 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +header { + position: fixed; + top: 0; + left: 0; + width: 100%; + padding: 20px 20px; + display: flex; + align-items: center; + flex-direction: column; + gap: 8px; + height: 93px; + background-color: #F0F6FF; + flex: none; + align-self: stretch; + flex-grow: 0; + padding-left: 8%; + padding-right: 8%; + z-index: 1; +} + +header .logo { + position: absolute; + left: 10%; + top: 50%; + transform: translate(-50%, -50%); + color: #6D6AFE; + width: 133px; + height: 24px; + cursor: pointer; +} + +header .login_btn { + position: absolute; + right: 8%; + width: 128px; + height: 53px; + padding: 16px 20px 16px 20px; + border-radius: 8px; + border: 0; + outline: transparent; + cursor: pointer; + gap: 10px; + font-family: 'Pretendard'; + font-size: 18px; + font-weight: 600; + line-height: 21px; + letter-spacing: 0em; + text-align: center; + color: rgba(245, 245, 245, 1); + background: linear-gradient(90.99deg, #6D6AFE 0.12%, #6AE3FE 101.84%); +} + +.container { + left: 0; + width: 100%; + margin-top: 93px; + align-items: center; +} + +.contents-01 { + background-color: #F0F6FF; + width: 100%; + height: 953px; + align-items: center; + text-align: center; + padding: 16px 20px 16px 20px; +} + +.contents-01 h2 { + font-family: 'Pretendard'; + font-size: 64px; + font-weight: 700; + line-height: 80px; + letter-spacing: 0px; + text-align: center; + align-items: center; + color: linear-gradient(0deg, #000000, #000000); + position: relative; + top: 50px; +} + +.contents-01 h2 span { + background: linear-gradient(91.26deg, #6D6AFE 17.28%, #FF9F9F 74.98%); + color: transparent; + -webkit-background-clip: text; +} + +.register-btn { + width: 350px; + height: 53px; + top: 270px; + left: 785px; + margin: 100px; + border-radius: 8px; + border: 0; + background: linear-gradient(90.99deg, #6D6AFE 0.12%, #6AE3FE 101.84%); + color: rgba(245, 245, 245, 1); + font-family: 'Pretendard'; + font-size: 18px; + font-weight: 600; + line-height: 21px; + letter-spacing: 0em; + display: inline-block; + cursor: pointer; +} + +.search-link { + position: relative; + bottom: 66px; +} + +h3 { + font-family: 'Pretendard'; + font-size: 48px; + font-weight: 700; + line-height: 57.6px; + letter-spacing: -0.3px; + color: linear-gradient(0deg, #000000, #000000); +} + +.contents-02 h3 span { + background: linear-gradient(95.63deg, #FE8A8A 1.72%, #A4CEFF 74.97%); + color: transparent; + -webkit-background-clip: text; +} + +.contents-03 h3 span { + background: linear-gradient(277.01deg, #6FBAFF 59.22%, #FFD88B 93.66%); + color: transparent; + -webkit-background-clip: text; +} + +.contents-04 h3 span { + background: linear-gradient(99.5deg, #6D7CCD 19.76%, rgba(82, 136, 133, 0.22) 52.69%); + color: transparent; + -webkit-background-clip: text; +} + +.contents-05 h3 span { + background: linear-gradient(271.36deg, #FE578F -9.84%, #68E8F9 107.18%); + color: transparent; + -webkit-background-clip: text; +} + +.description { + font-family: 'Abel'; + font-size: 16px; + font-weight: 400; + line-height: 24px; + letter-spacing: 0px; + text-align: left; + color: rgba(107, 107, 107, 1); +} + +.contents-02, +.contents-03, +.contents-04, +.contents-05 { + background-color: white; + width: 100%; + height: 620px; + align-items: center; + text-align: left; + padding: 16px 20px 16px 20px; + position: relative; +} + +.middle { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 998px; + height: 450px; +} + +.contents-02 .text, +.contents-04 .text { + position: absolute; + height: 198px; + display: block; + top: 50%; + transform: translate(0, -50%); + width: 320px; + margin-right: 128px; +} + +.contents-02 .img, +.contents-04 .img { + position: absolute; + display: inline-block; + top: 50%; + transform: translate(0, -50%); + right: 0; +} + +.contents-03 .img, +.contents-05 .img { + position: absolute; + display: inline-block; + top: 50%; + transform: translate(0, -50%); +} + +.contents-03 .text, +.contents-05 .text { + position: absolute; + display: inline-block; + top: 50%; + transform: translate(0, -50%); + width: 320px; + right: 0; +} + +footer { + position: absolute; + width: 100%; + height: 160px; + padding: 32px 104px 64px 104px; + background: rgba(17, 19, 34, 1); + color: white; + text-align: center; +} + +.footer-content { + position: absolute; + top: 50%; + transform: translate(0, -50%); + display: grid; + grid-template: repeat(2, 1fr) / repeat(3, 1fr); + justify-content: space-between; + width: 80%; + height: 20px; + place-items: center; +} + +.footer-content a { + text-decoration: none; + color: rgba(207, 207, 207, 1); +} + +.privacyfaq { + display: flex; + align-items: center; + font-family: 'Acme'; + font-size: 16px; + font-weight: 400; + line-height: 20px; + letter-spacing: 0em; + text-align: center; + color: rgba(207, 207, 207, 1); + gap: 30px; +} + +.footer-info { + font-family: 'Acme'; + font-size: 16px; + font-weight: 400; + line-height: 20px; + letter-spacing: 0em; + color: rgba(103, 103, 103, 1); + justify-self: start; +} + +.footer-link { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + gap: 12px; + justify-self: end; +} \ No newline at end of file diff --git a/Week2/css/sign-in.style.css b/Week2/css/sign-in.style.css new file mode 100644 index 000000000..cea9f11c5 --- /dev/null +++ b/Week2/css/sign-in.style.css @@ -0,0 +1,157 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + background-color: #F0F6FF; + display: flex; + justify-content: center; + align-items: center; + font-family: 'Pretendard', sans-serif; +} + +.wrapper { + width: 400px; + height: 491px; + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + margin: auto; +} + +.logo { + display: flex; + color: #6D6AFE; + margin-bottom: 16px; + text-align: center; + justify-content: center; +} + +.signup { + display: flex; + font-family: 'Pretendard'; + font-size: 16px; + font-weight: 400; + line-height: 24px; + letter-spacing: 0em; + text-align: center; + justify-content: center; + gap: 8px; +} + +.signup a { + font-family: 'Pretendard'; + font-size: 16px; + font-weight: 600; + line-height: 19px; + letter-spacing: 0em; + text-align: left; + color: rgba(109, 106, 254, 1); +} + +form { + margin: 16px auto; + width: 400px; +} + +label { + color: rgba(0, 0, 0, 1); + display: block; + margin: 16px 0 8px; + font-family: 'Pretendard'; + font-size: 14px; + font-weight: 400; + line-height: 17px; + letter-spacing: 0em; + text-align: left; +} + +input { + border: 1px solid #d1d1d1; + display: block; + margin: 8px 0; + border-radius: 8px; + padding: 16px 24px; + width: 100%; + font-family: 'Pretendard'; + font-size: 16px; + font-weight: 400; + line-height: 24px; + letter-spacing: 0em; + text-align: left; + color: rgba(55, 55, 64, 1); + position: relative; +} + +input:focus { + outline-color: blue; +} + +#eyeicon { + position: absolute; + right: 10px; + top: 237px; +} + +button { + border: none; + display: block; + padding: 16px; + width: 100%; + height: 53px; + margin: 24px 0; + border-radius: 8px; + background: linear-gradient(90.99deg, #6D6AFE 0.12%, #6AE3FE 101.84%); + color: rgba(245, 245, 245, 1); + font-family: 'Pretendard'; + font-size: 18px; + font-weight: 600; + line-height: 21px; + letter-spacing: 0em; + text-align: center; + cursor: pointer; +} + +.social { + display: inline-block; + margin: 8px 0; + border-radius: 8px; + padding: 16px 24px; + width: 100%; + font-family: 'Pretendard'; + font-size: 14px; + font-weight: 400; + line-height: 17px; + letter-spacing: 0em; + text-align: left; + color: rgba(55, 55, 64, 1); + border: 1px solid rgba(204, 213, 227, 1); + background-color: rgba(231, 239, 251, 1); + position: relative; + width: 400px; + height: 66px; + padding: 12px 24px 12px 24px; + border: 1px; + justify: space-between; +} + +.social a { + text-decoration: none; +} + +.social p { + position: absolute; + top: 50%; + transform: translate(0%, -50%); +} + +.social .icon { + position: absolute; + top: 50%; + right: 5%; + transform: translate(0%, -50%); +} \ No newline at end of file diff --git a/Week2/css/sign-up.style.css b/Week2/css/sign-up.style.css new file mode 100644 index 000000000..0f3b76c23 --- /dev/null +++ b/Week2/css/sign-up.style.css @@ -0,0 +1,163 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + background-color: #F0F6FF; + display: flex; + justify-content: center; + align-items: center; + font-family: 'Pretendard', sans-serif; +} + +.wrapper { + width: 400px; + height: 491px; + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + margin: auto; +} + +.logo { + display: flex; + color: #6D6AFE; + margin-bottom: 16px; + text-align: center; + justify-content: center; +} + +.signup { + display: flex; + font-family: 'Pretendard'; + font-size: 16px; + font-weight: 400; + line-height: 24px; + letter-spacing: 0em; + text-align: center; + justify-content: center; + gap: 8px; +} + +.signup a { + font-family: 'Pretendard'; + font-size: 16px; + font-weight: 600; + line-height: 19px; + letter-spacing: 0em; + text-align: left; + color: rgba(109, 106, 254, 1); +} + +form { + margin: 16px auto; + width: 400px; +} + +label { + color: rgba(0, 0, 0, 1); + display: block; + margin: 16px 0 8px; + font-family: 'Pretendard'; + font-size: 14px; + font-weight: 400; + line-height: 17px; + letter-spacing: 0em; + text-align: left; +} + +input { + border: 1px solid #d1d1d1; + display: block; + margin: 8px 0; + border-radius: 8px; + padding: 16px 24px; + width: 100%; + font-family: 'Pretendard'; + font-size: 16px; + font-weight: 400; + line-height: 24px; + letter-spacing: 0em; + text-align: left; + color: rgba(55, 55, 64, 1); + position: relative; +} + +input:focus { + outline-color: blue; +} + +#eyeiconpw { + position: absolute; + right: 10px; + top: 237px; +} + +#eyeiconchpw { + position: absolute; + right: 10px; + top: 337px; +} + +button { + border: none; + display: block; + padding: 16px; + width: 100%; + height: 53px; + margin: 24px 0; + border-radius: 8px; + background: linear-gradient(90.99deg, #6D6AFE 0.12%, #6AE3FE 101.84%); + color: rgba(245, 245, 245, 1); + font-family: 'Pretendard'; + font-size: 18px; + font-weight: 600; + line-height: 21px; + letter-spacing: 0em; + text-align: center; + cursor: pointer; +} + +.social { + display: inline-block; + margin: 8px 0; + border-radius: 8px; + padding: 16px 24px; + width: 100%; + font-family: 'Pretendard'; + font-size: 14px; + font-weight: 400; + line-height: 17px; + letter-spacing: 0em; + text-align: left; + color: rgba(55, 55, 64, 1); + border: 1px solid rgba(204, 213, 227, 1); + background-color: rgba(231, 239, 251, 1); + position: relative; + width: 400px; + height: 66px; + padding: 12px 24px 12px 24px; + border: 1px; + justify: space-between; +} + +.social a { + text-decoration: none; +} + +.social p { + position: absolute; + top: 50%; + transform: translate(0%, -50%); +} + +.social .icon { + position: absolute; + top: 50%; + right: 5%; + transform: translate(0%, -50%); +} \ No newline at end of file diff --git a/Week2/faq.html b/Week2/faq.html new file mode 100644 index 000000000..03b7b5a2f --- /dev/null +++ b/Week2/faq.html @@ -0,0 +1,11 @@ + + + + + + Document + + + + + \ No newline at end of file diff --git a/Week2/images/Linkbrary.svg b/Week2/images/Linkbrary.svg new file mode 100644 index 000000000..c6c87a1cf --- /dev/null +++ b/Week2/images/Linkbrary.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/Week2/images/icon-facebook.svg b/Week2/images/icon-facebook.svg new file mode 100644 index 000000000..926157015 --- /dev/null +++ b/Week2/images/icon-facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/Week2/images/icon-google.svg b/Week2/images/icon-google.svg new file mode 100644 index 000000000..b468e8c6e --- /dev/null +++ b/Week2/images/icon-google.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/Week2/images/icon-instagram.svg b/Week2/images/icon-instagram.svg new file mode 100644 index 000000000..bb6820d84 --- /dev/null +++ b/Week2/images/icon-instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/Week2/images/icon-kakao.svg b/Week2/images/icon-kakao.svg new file mode 100644 index 000000000..939b487b2 --- /dev/null +++ b/Week2/images/icon-kakao.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/Week2/images/icon-twitter.svg b/Week2/images/icon-twitter.svg new file mode 100644 index 000000000..3d1ede5c5 --- /dev/null +++ b/Week2/images/icon-twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/Week2/images/icon-youtube.svg b/Week2/images/icon-youtube.svg new file mode 100644 index 000000000..de3692ac8 --- /dev/null +++ b/Week2/images/icon-youtube.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/Week2/images/landing-index-image-1.png b/Week2/images/landing-index-image-1.png new file mode 100644 index 000000000..81d0db12c Binary files /dev/null and b/Week2/images/landing-index-image-1.png differ diff --git a/Week2/images/landing-index-image-2.png b/Week2/images/landing-index-image-2.png new file mode 100644 index 000000000..42a35fc33 Binary files /dev/null and b/Week2/images/landing-index-image-2.png differ diff --git a/Week2/images/landing-index-image-3.png b/Week2/images/landing-index-image-3.png new file mode 100644 index 000000000..3d88fa54e Binary files /dev/null and b/Week2/images/landing-index-image-3.png differ diff --git a/Week2/images/landing-index-image-4.png b/Week2/images/landing-index-image-4.png new file mode 100644 index 000000000..79c4d9bfd Binary files /dev/null and b/Week2/images/landing-index-image-4.png differ diff --git a/Week2/images/landing-index-image-5.png b/Week2/images/landing-index-image-5.png new file mode 100644 index 000000000..fae93abad Binary files /dev/null and b/Week2/images/landing-index-image-5.png differ diff --git a/Week2/index.html b/Week2/index.html new file mode 100644 index 000000000..462ffcfbf --- /dev/null +++ b/Week2/index.html @@ -0,0 +1,115 @@ + + + + + + + Linkbrary + + + + + + + +
+ + +
+
+
+
+

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

+ +
+
+ 링크를 검색하는 화면 +
+
+
+
+
+

원하는 링크를
저장하세요

+

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

+
+
+ 링크를 저장하는 화면 +
+
+
+
+
+
+ 폴더 이름을 변경하는 화면 +
+
+

링크를 폴더로
관리하세요

+

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

+
+
+
+
+
+
+

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

+

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

+
+
+ 폴더를 공유하는 화면 +
+
+
+
+
+
+ 정보를 검색하는 화면 +
+
+

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

+

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

+
+
+
+
+ + + + \ No newline at end of file diff --git a/Week2/privacy.html b/Week2/privacy.html new file mode 100644 index 000000000..03b7b5a2f --- /dev/null +++ b/Week2/privacy.html @@ -0,0 +1,11 @@ + + + + + + Document + + + + + \ No newline at end of file diff --git a/Week2/signin.html b/Week2/signin.html new file mode 100644 index 000000000..ec4d41b1c --- /dev/null +++ b/Week2/signin.html @@ -0,0 +1,62 @@ + + + + + + + Linkbrary + + + + + + + + + + + +
+ +
+

회원이 아니신가요?

+ 회원 가입하기 +
+
+ + + + + + +
+
+

소셜 로그인

+
+ + 구글 아이콘 + + + 카카오톡 아이콘 + +
+
+
+ + + + + \ No newline at end of file diff --git a/Week2/signup.html b/Week2/signup.html new file mode 100644 index 000000000..54a728311 --- /dev/null +++ b/Week2/signup.html @@ -0,0 +1,78 @@ + + + + + + + Linkbrary + + + + + + + + + + + +
+ +
+

이미 회원이신가요?

+ 로그인하기 +
+
+ + + + + + + + + +
+
+

다른 방식으로 가입하기

+
+ + 구글 아이콘 + + + 카카오톡 아이콘 + +
+
+
+ + + + + + \ No newline at end of file