diff --git a/.github/workflows/delete-merged-branch-config.yml b/.github/workflows/delete-merged-branch-config.yml new file mode 100644 index 000000000..d54933615 --- /dev/null +++ b/.github/workflows/delete-merged-branch-config.yml @@ -0,0 +1,14 @@ +name: delete branch on close pr + +on: + pull_request: + types: [closed] + +jobs: + delete-branch: + runs-on: ubuntu-latest + steps: + - name: delete branch + uses: SvanBoxel/delete-merged-branch@main + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/2-Weekly-Mission/.gitignore b/2-Weekly-Mission/.gitignore new file mode 100644 index 000000000..722d5e71d --- /dev/null +++ b/2-Weekly-Mission/.gitignore @@ -0,0 +1 @@ +.vscode diff --git a/2-Weekly-Mission/faq.html b/2-Weekly-Mission/faq.html new file mode 100644 index 000000000..6612ae103 --- /dev/null +++ b/2-Weekly-Mission/faq.html @@ -0,0 +1,7 @@ + + + + + FAQ + + diff --git a/2-Weekly-Mission/folder.html b/2-Weekly-Mission/folder.html new file mode 100644 index 000000000..e69de29bb diff --git a/2-Weekly-Mission/images/99FE484C5C3451F218 1.svg b/2-Weekly-Mission/images/99FE484C5C3451F218 1.svg new file mode 100644 index 000000000..7a6062bc6 --- /dev/null +++ b/2-Weekly-Mission/images/99FE484C5C3451F218 1.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/2-Weekly-Mission/images/Linkbrary.png b/2-Weekly-Mission/images/Linkbrary.png new file mode 100644 index 000000000..a43c2cc9d Binary files /dev/null and b/2-Weekly-Mission/images/Linkbrary.png differ diff --git a/2-Weekly-Mission/images/eye-off.png b/2-Weekly-Mission/images/eye-off.png new file mode 100644 index 000000000..82183b351 Binary files /dev/null and b/2-Weekly-Mission/images/eye-off.png differ diff --git a/2-Weekly-Mission/images/eye-off.svg b/2-Weekly-Mission/images/eye-off.svg new file mode 100644 index 000000000..bec50d66f --- /dev/null +++ b/2-Weekly-Mission/images/eye-off.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/2-Weekly-Mission/images/eye-on.png b/2-Weekly-Mission/images/eye-on.png new file mode 100644 index 000000000..c74e06a94 Binary files /dev/null and b/2-Weekly-Mission/images/eye-on.png differ diff --git a/2-Weekly-Mission/images/facebook.svg b/2-Weekly-Mission/images/facebook.svg new file mode 100644 index 000000000..b9c9d4939 --- /dev/null +++ b/2-Weekly-Mission/images/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/2-Weekly-Mission/images/google.png b/2-Weekly-Mission/images/google.png new file mode 100644 index 000000000..e49ff34a3 Binary files /dev/null and b/2-Weekly-Mission/images/google.png differ diff --git a/2-Weekly-Mission/images/hero.png b/2-Weekly-Mission/images/hero.png new file mode 100644 index 000000000..11dc528fb Binary files /dev/null and b/2-Weekly-Mission/images/hero.png differ diff --git a/2-Weekly-Mission/images/image1.png b/2-Weekly-Mission/images/image1.png new file mode 100644 index 000000000..f6355852b Binary files /dev/null and b/2-Weekly-Mission/images/image1.png differ diff --git a/2-Weekly-Mission/images/image2.png b/2-Weekly-Mission/images/image2.png new file mode 100644 index 000000000..b9a3c674a Binary files /dev/null and b/2-Weekly-Mission/images/image2.png differ diff --git a/2-Weekly-Mission/images/image3.png b/2-Weekly-Mission/images/image3.png new file mode 100644 index 000000000..986a39679 Binary files /dev/null and b/2-Weekly-Mission/images/image3.png differ diff --git a/2-Weekly-Mission/images/image4.png b/2-Weekly-Mission/images/image4.png new file mode 100644 index 000000000..762bdc960 Binary files /dev/null and b/2-Weekly-Mission/images/image4.png differ diff --git a/2-Weekly-Mission/images/instagram.svg b/2-Weekly-Mission/images/instagram.svg new file mode 100644 index 000000000..0b9337b07 --- /dev/null +++ b/2-Weekly-Mission/images/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/2-Weekly-Mission/images/kakao.svg b/2-Weekly-Mission/images/kakao.svg new file mode 100644 index 000000000..778fe9461 --- /dev/null +++ b/2-Weekly-Mission/images/kakao.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/2-Weekly-Mission/images/logo.svg b/2-Weekly-Mission/images/logo.svg new file mode 100644 index 000000000..282022090 --- /dev/null +++ b/2-Weekly-Mission/images/logo.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/2-Weekly-Mission/images/twitter.svg b/2-Weekly-Mission/images/twitter.svg new file mode 100644 index 000000000..14a6069a1 --- /dev/null +++ b/2-Weekly-Mission/images/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/2-Weekly-Mission/images/youtube.svg b/2-Weekly-Mission/images/youtube.svg new file mode 100644 index 000000000..28ed0e8ba --- /dev/null +++ b/2-Weekly-Mission/images/youtube.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/2-Weekly-Mission/index.html b/2-Weekly-Mission/index.html new file mode 100644 index 000000000..e8019fb11 --- /dev/null +++ b/2-Weekly-Mission/index.html @@ -0,0 +1,131 @@ + + + + + Linkbrary + + + + + + + + + + + + + + +
+
+

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

+ + 링크 추가하기 + + Linkbrary 서비스 소개 +
+
+
+
+

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

+

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

+ 링크의 내용이 담긴 카드들 +
+
+

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

+

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

+ 폴더 이름 변경 기능 +
+
+

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

+

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

+ 폴더 공유 기능 +
+
+

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

+

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

+ 링크 검색 기능 +
+
+ + + diff --git a/2-Weekly-Mission/privacy.html b/2-Weekly-Mission/privacy.html new file mode 100644 index 000000000..abf71aaaf --- /dev/null +++ b/2-Weekly-Mission/privacy.html @@ -0,0 +1,7 @@ + + + + + Privacy + + diff --git a/2-Weekly-Mission/signin.html b/2-Weekly-Mission/signin.html new file mode 100644 index 000000000..e317d7ca9 --- /dev/null +++ b/2-Weekly-Mission/signin.html @@ -0,0 +1,65 @@ + + + + + 로그인 + + + + + +
+ + + +

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

+
+
+
+
+
+ + + +
+
+ + + + +
+
+ +
+
+ 소셜 로그인 +
+ + + + + + +
+
+
+ + + diff --git a/2-Weekly-Mission/signin.js b/2-Weekly-Mission/signin.js new file mode 100644 index 000000000..1c4ec740f --- /dev/null +++ b/2-Weekly-Mission/signin.js @@ -0,0 +1,63 @@ +/** 이메일 */ +const signInputBox = document.querySelector(".sign-input-box"); +const inputUserEmail = document.querySelector("#sign-email"); +const errorMessageEmail = document.querySelector(".error-message-email"); + +function validateEmail() { + const userEmail = inputUserEmail.value; + if (userEmail === "") { + errorMessageEmail.textContent = "이메일을 입력해주세요."; + errorMessageEmail.style.color = "red"; + errorMessageEmail.style.display = "block"; + inputUserEmail.style.border = "1px solid var(--linkbrary-red, #FF5B56)"; + } else if (!isValidEmail()) { + errorMessageEmail.textContent = "올바른 이메일 주소가 아닙니다."; + errorMessageEmail.style.color = "red"; + errorMessageEmail.style.display = "block"; + inputUserEmail.style.border = "1px solid var(--linkbrary-red, #FF5B56)"; + } else { + errorMessageEmail.style.display = "none"; + inputUserEmail.style.border = "1px solid var(--gray20)"; + } +} + +function isValidEmail() { + const regExp = + /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i; + return regExp.test(inputUserEmail.value); +} + +inputUserEmail.addEventListener("focusout", validateEmail); + +/** 비밀번호 */ +const inputUserPassword = document.querySelector("#sign-password"); +const errorMessagePassword = document.querySelector(".error-message-password"); +const eyeButton = document.querySelector(".eye-button"); + +function validatePassword() { + const userPassword = inputUserPassword.value; + if (userPassword === "") { + errorMessagePassword.textContent = "비밀번호를 입력해주세요."; + errorMessagePassword.style.color = "red"; + errorMessagePassword.style.display = "block"; + inputUserPassword.style.border = "1px solid var(--linkbrary-red, #FF5B56)"; + eyeButton.style.height = "6.1rem"; + } else if (!strongPassword(userPassword)) { + errorMessagePassword.textContent = + "비밀번호는 영문, 숫자 조합 8자 이상 입력해 주세요."; + errorMessagePassword.style.color = "red"; + errorMessagePassword.style.display = "block"; + inputUserPassword.style.border = "1px solid var(--linkbrary-red, #FF5B56)"; + eyeButton.style.height = "6.1rem"; + } else { + errorMessagePassword.style.display = "none"; + eyeButton.style.height = "1.6rem"; + inputUserPassword.style.border = "1px solid var(--gray20)"; + } +} + +function strongPassword(str) { + return /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$!%*#?&]{8,}$/.test(str); +} + +inputUserPassword.addEventListener("focusout", validatePassword); diff --git a/2-Weekly-Mission/signup.html b/2-Weekly-Mission/signup.html new file mode 100644 index 000000000..e6587b46b --- /dev/null +++ b/2-Weekly-Mission/signup.html @@ -0,0 +1,73 @@ + + + + + 회원가입 + + + + + +
+ + + +

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

+
+
+
+
+
+ + + +
+
+ + + + +
+
+ + + + +
+
+ +
+
+ 다른 방식으로 가입하기 +
+ + + + + + +
+
+
+ + + diff --git a/2-Weekly-Mission/signup.js b/2-Weekly-Mission/signup.js new file mode 100644 index 000000000..8b1fbc0a1 --- /dev/null +++ b/2-Weekly-Mission/signup.js @@ -0,0 +1,94 @@ +/** 이메일 */ +const signInputBox = document.querySelector(".sign-input-box"); +const inputUserEmail = document.querySelector("#sign-email"); +const errorMessageEmail = document.querySelector(".error-message-email"); + +function validateEmail() { + const userEmail = inputUserEmail.value; + if (userEmail === "") { + errorMessageEmail.textContent = "이메일을 입력해주세요."; + errorMessageEmail.style.color = "red"; + errorMessageEmail.style.display = "block"; + inputUserEmail.style.border = "1px solid var(--linkbrary-red, #FF5B56)"; + return noneMessageEmail; + } else if (!isValidEmail()) { + errorMessageEmail.textContent = "올바른 이메일 주소가 아닙니다."; + errorMessageEmail.style.color = "red"; + errorMessageEmail.style.display = "block"; + inputUserEmail.style.border = "1px solid var(--linkbrary-red, #FF5B56)"; + return wrongMessageEmail; + } else if (userEmail === "test@codeit.com") { + errorMessageEmail.textContent = "이미 사용 중인 이메일입니다."; + errorMessageEmail.style.color = "red"; + errorMessageEmail.style.display = "block"; + inputUserEmail.style.border = "1px solid var(--linkbrary-red, #FF5B56)"; + } else { + errorMessageEmail.style.display = "none"; + inputUserEmail.style.border = "1px solid var(--gray20)"; + } +} + +function isValidEmail() { + const regExp = + /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i; + return regExp.test(inputUserEmail.value); +} + +inputUserEmail.addEventListener("focusout", validateEmail); + +/** 비밀번호 */ +const inputUserPassword = document.querySelector("#sign-password"); +const errorMessagePassword = document.querySelector(".error-message-password"); +const eyeButton = document.querySelector(".eye-button"); + +function validatePassword() { + const userPassword = inputUserPassword.value; + if (userPassword === "") { + errorMessagePassword.textContent = "비밀번호를 입력해주세요."; + errorMessagePassword.style.color = "red"; + errorMessagePassword.style.display = "block"; + inputUserPassword.style.border = "1px solid var(--linkbrary-red, #FF5B56)"; + } else if (!strongPassword(userPassword)) { + errorMessagePassword.textContent = + "비밀번호는 영문, 숫자 조합 8자 이상 입력해 주세요."; + errorMessagePassword.style.color = "red"; + errorMessagePassword.style.display = "block"; + inputUserPassword.style.border = "1px solid var(--linkbrary-red, #FF5B56)"; + } else { + errorMessagePassword.style.display = "none"; + inputUserPassword.style.border = "1px solid var(--gray20)"; + } +} + +function strongPassword(str) { + return /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$!%*#?&]{8,}$/.test(str); +} + +inputUserPassword.addEventListener("focusout", validatePassword); + +/** 비밀번호 확인 */ +const inputUserPasswordAgain = document.querySelector("#sign-password-again"); +const errorMessagePasswordAgain = document.querySelector( + ".error-message-password-again" +); + +function validatePasswordAgain() { + const userPasswordAgain = inputUserPasswordAgain.value; + if (userPasswordAgain === "") { + errorMessagePasswordAgain.textContent = "비밀번호를 입력해주세요."; + errorMessagePasswordAgain.style.color = "red"; + errorMessagePasswordAgain.style.display = "block"; + inputUserPassword.style.border = "1px solid var(--linkbrary-red, #FF5B56)"; + } else if (userPasswordAgain !== inputUserPassword.value) { + errorMessagePasswordAgain.textContent = "비밀번호가 일치하지 않아요."; + errorMessagePasswordAgain.style.color = "red"; + errorMessagePasswordAgain.style.display = "block"; + } else { + errorMessagePasswordAgain.style.display = "none"; + inputUserPasswordAgain.style.border = "1px solid var(--gray20)"; + } +} + +inputUserPasswordAgain.addEventListener("focusout", validatePasswordAgain); + +/** 회원가입 버튼 */ diff --git a/2-Weekly-Mission/src/colors.css b/2-Weekly-Mission/src/colors.css new file mode 100644 index 000000000..e13967247 --- /dev/null +++ b/2-Weekly-Mission/src/colors.css @@ -0,0 +1,13 @@ +:root { + --primary: #6d6afe; + --red: #ff5b56; + --black: #111322; + --white: #ffffff; + + --gray100: #373740; + --gray60: #9fa6b2; + --gray20: #ccd5e3; + --gray10: #e7effb; + + --background: #f0f6ff; +} diff --git a/2-Weekly-Mission/src/global.css b/2-Weekly-Mission/src/global.css new file mode 100644 index 000000000..f20ab4ae7 --- /dev/null +++ b/2-Weekly-Mission/src/global.css @@ -0,0 +1,2 @@ +@import "./colors.css"; +@import "./reset.css"; diff --git a/2-Weekly-Mission/src/landing.css b/2-Weekly-Mission/src/landing.css new file mode 100644 index 000000000..5521d673c --- /dev/null +++ b/2-Weekly-Mission/src/landing.css @@ -0,0 +1,337 @@ +@import "./global.css"; + +body { + display: flex; + flex-direction: column; + align-items: center; +} + +nav { + display: flex; + justify-content: center; + position: sticky; + top: 0; + width: 100%; + background-color: #edf7ff; +} + +.gnb { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + height: 6.3rem; + padding: 0 3.2rem; + + @media (min-width: 768px) { + height: 9.4rem; + max-width: 86.3rem; + } + + @media (min-width: 1200px) { + height: 9.4rem; + max-width: 192rem; + padding: 0 20rem; + } +} + +.logo { + height: 1.6rem; + + @media (min-width: 768px) { + height: 2.4rem; + } +} + +header { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + background-color: #edf7ff; +} + +.hero-header { + display: flex; + flex-direction: column; + align-items: center; + row-gap: 2.4rem; + padding: 2.8rem 3.2rem 0; + + @media (min-width: 768px) { + padding: 3.9rem 0 0; + row-gap: 4rem; + } + + @media (min-width: 1200px) { + padding: 7rem 0 0; + } +} + +.cta { + display: flex; + justify-content: center; + align-items: center; + height: 3.7rem; + cursor: pointer; + background-image: linear-gradient(135deg, var(--primary) 0%, #6ae3fe 100%); + border-radius: 0.8rem; + color: #f5f5f5; + font-size: 1.4rem; + font-weight: 600; + + @media (min-width: 768px) { + height: 5.4rem; + border-radius: 0.8rem; + font-size: 1.8rem; + } +} + +.cta-short { + width: 8rem; + + @media (min-width: 768px) { + width: 12.8rem; + } +} + +.cta-long { + width: 20rem; + + @media (min-width: 768px) { + width: 35rem; + } +} + +.slogan { + width: 24rem; + text-align: center; + font-size: 3.2rem; + line-height: 131.25%; + font-weight: 700; + + @media (min-width: 768px) { + width: 48rem; + font-size: 6.4rem; + line-height: 125%; + } + + @media (min-width: 1200px) { + width: 80rem; + } +} + +.slogan-gradient { + background-image: linear-gradient(119deg, var(--primary) 0%, #ff9f9f 100%); +} + +.background-clip-text { + background-clip: text; + -webkit-background-clip: text; + color: transparent; +} + +.hero-image { + width: 100%; + height: fit-content; + @media (min-width: 768px) { + width: 69.8rem; + height: 34.3rem; + } + + @media (min-width: 1200px) { + width: 120rem; + height: 59rem; + } +} + +article { + padding-bottom: 4rem; + + @media (min-width: 768px) { + padding-top: 3rem; + padding-bottom: 12rem; + } + + @media (min-width: 1200px) { + padding-top: 7rem; + } +} + +section { + display: grid; + justify-content: center; + row-gap: 1.6rem; + width: 100%; + height: fit-content; + padding: 4rem 3.2rem; + + @media (min-width: 768px) { + height: 41.5rem; + column-gap: 5.1rem; + row-gap: 1rem; + padding: 5rem 0; + } + + @media (min-width: 1200px) { + height: 55rem; + column-gap: 15.7rem; + } +} + +section:nth-of-type(odd) { + grid-template-areas: + "title" + "image" + "description"; + + @media (min-width: 768px) { + grid-template-areas: + ". image" + "title image" + "description image" + ". image"; + grid-template-columns: 26.2rem 38.5rem; + } + + @media (min-width: 1200px) { + grid-template-columns: 29.1rem 55rem; + } +} + +section:nth-of-type(even) { + grid-template: + "title" + "image" + "description"; + + @media (min-width: 768px) { + grid-template-areas: + "image ." + "image title" + "image description" + "image ."; + grid-template-columns: 38.5rem 26.2rem; + } + + @media (min-width: 1200px) { + grid-template-columns: 55rem 29.1rem; + } +} + +.title { + grid-area: title; + font-weight: 700; + letter-spacing: -0.03rem; + font-size: 2.4rem; + + @media (min-width: 768px) { + font-size: 4.8rem; + line-height: 5.8rem; + } +} + +.title-1-gradient { + background-image: linear-gradient(117deg, #fe8a8a 2.29%, #a4ceff 100%); +} +.title-2-gradient { + background-image: linear-gradient(304deg, #6fbaff 0%, #ffd88b 100%); +} +.title-3-gradient { + background-image: linear-gradient(133deg, #2945c7 0%, #dbe1f8 100%); +} +.title-4-gradient { + background-image: linear-gradient(310deg, #fe578f 0%, #68e8f9 100%); +} + +.description { + grid-area: description; + font-size: 1.5rem; + font-weight: 500; + color: #6b6b6b; + line-height: 150%; + + @media (min-width: 768px) { + font-size: 1.6rem; + } +} + +.line-break-tablet-desktop { + display: none; + + @media (min-width: 768px) { + display: inline; + } +} + +.content-image { + grid-area: image; + width: 100%; + padding-top: 0.4rem; + + @media (min-width: 768px) { + width: 38.5rem; + height: 31.5rem; + padding-top: 0; + } + + @media (min-width: 1200px) { + width: 55rem; + height: 45rem; + } +} + +footer { + display: flex; + justify-content: center; + width: 100%; + height: 16rem; + background-color: var(--black); +} + +.footer-box { + display: grid; + justify-content: space-between; + grid-template: + "footer-links sns" + ". ." 1fr + "copyright ."; + width: 100%; + padding: 3.2rem; + + @media (min-width: 768px) { + display: flex; + justify-content: space-between; + grid-template: "copyright footer-links sns"; + height: fit-content; + max-width: 192rem; + padding: 3.2rem 10.4rem 0; + } +} + +.copyright { + grid-area: copyright; + color: #676767; + font-family: Arial; + font-size: 1.6rem; +} + +.footer-links { + grid-area: footer-links; + display: flex; + column-gap: 3rem; + padding-right: 1.8rem; +} + +.footer-link { + color: #cfcfcf; + font-family: Arial; + font-size: 1.6rem; +} + +.sns { + grid-area: sns; + display: flex; + column-gap: 1.2rem; + height: 2rem; +} diff --git a/2-Weekly-Mission/src/reset.css b/2-Weekly-Mission/src/reset.css new file mode 100644 index 000000000..830b517e4 --- /dev/null +++ b/2-Weekly-Mission/src/reset.css @@ -0,0 +1,30 @@ +/* user agent stylesheet 초기화 */ + +* { + box-sizing: border-box; + margin: 0; + font-family: "Pretendard"; + word-break: keep-all; +} + +html, +body { + font-size: 62.5%; +} + +a { + color: inherit; + text-decoration: none; + cursor: pointer; +} + +input:focus { + outline: none; +} + +button { + border: none; + padding: unset; + background-color: unset; + cursor: pointer; +} diff --git a/2-Weekly-Mission/src/sign.css b/2-Weekly-Mission/src/sign.css new file mode 100644 index 000000000..d28f20af2 --- /dev/null +++ b/2-Weekly-Mission/src/sign.css @@ -0,0 +1,179 @@ +@import "./global.css"; + +body { + background-color: var(--background); + display: flex; + flex-direction: column; + align-items: center; + row-gap: 3rem; + padding: 12rem 3.2rem 0; + + @media (min-width: 768px) { + padding: 20rem 0 0; + } + + @media (min-width: 1200px) { + padding: 23.8rem 0 0; + } +} + +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: 100%; + max-width: 40rem; + + @media (min-width: 768px) { + 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; +} + +input:focus { + outline: 1px solid #6d6afe; +} + +.sign-input-box { + display: flex; + flex-direction: column; + row-gap: 1.2rem; +} + +.sign-password, +#sign-password-again { + position: relative; +} + +#sign-email, +#sign-password { + font-size: 1.4rem; + font-weight: 400; +} + +#sign-email, +#sign-password, +#sign-password-again { + padding: 1.8rem 1.5rem; + border-radius: 0.8rem; + border: 0.1rem solid var(--gray20); + font-size: 1.6rem; + line-height: 150%; +} + +.error-message-email, +.error-message-password, +.error-message-password-again { + display: none; +} + +.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; +} diff --git a/2-Weekly-Mission/src/style.css b/2-Weekly-Mission/src/style.css new file mode 100644 index 000000000..9a2514322 --- /dev/null +++ b/2-Weekly-Mission/src/style.css @@ -0,0 +1,385 @@ +* { + margin: 0; + font-family: Pretendard; + box-sizing: border-box; +} + + +:root { + --linkbrary-primary-color: #6d6afe; + --linkbrary-red: #ff5b56; + --linkbrary-black: #111322; + --linkbrary-white: #ffffff; + --linkbrary-gray-1: #3e3e43; + --lingkbrary-gray-2: #9fa6b2; + --linkbrary-gray-20: #ccd5e3; + --linkbrary-gray-104: #e7effb; + --linkbrary-bg: #f0f6ff; +} + +header { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + background-color: #edf7ff; +} + +nav { + display: flex; + justify-content: center; + position: fixed; + z-index: 1; + top: 0; + background-color: #edf7ff; + width: 100%; + max-width: 192rem; + height: 9.4rem; +} + +.navbar { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + padding: 2rem 20rem; + gap: 8px; +} + + +.hero-header { + display: flex; + flex-direction: column; + align-items: center; + row-gap: 4rem; + padding-top: 7rem; + margin-top: 9.4rem; +} + +.break { + display: none; +} + +.cta { + display: flex; + justify-content: center; + align-items: center; + height: 5.4rem; + cursor: pointer; + background-image: linear-gradient(135deg, #6d6afe 0%, #6ae3fe 100%); + border-radius: 0.8rem; + color: #f5f5f5; + font-size: 1.8rem; + font-weight: 600; +} + +.cta-short { + width: 12.8rem; +} + +.cta-long { + width: 35rem; +} + +.slogan { + text-align: center; + font-size: 6.4rem; + font-weight: 700; + line-height: 8rem; +} + +.slogan-gradient { + background-image: linear-gradient(119deg, #6d6afe 0%, #ff9f9f 100%); +} + +.background-clip-text { + background-clip: text; + -webkit-background-clip: text; + color: transparent; +} + +.hero-image { + width: 120rem; + height: 59rem; +} + +article { + padding-top: 7rem; + padding-bottom: 12rem; +} + +section { + display: grid; + justify-content: center; + column-gap: 15.7rem; + row-gap: 1rem; + width: 100%; + height: 55rem; + padding: 50px 0; +} + + +section:nth-of-type(odd) { + grid-template: + ". image" + "title image" + "description image" + ". image" + /291px 55rem; +} + +section:nth-of-type(even) { + grid-template: + "image ." + "image title" + "image description" + "image ." + /550px 29.1rem; +} + +.title { + grid-area: title; + font-size: 48px; + font-weight: 700; + line-height: 5.8rem; + letter-spacing: -0.03rem; +} + +.title-1-gradient { + background-image: linear-gradient(117deg, #fe8a8a 2.29%, #a4ceff 100%); +} + +.title-2-gradient { + background-image: linear-gradient(304deg, #6fbaff 0%, #ffd88b 100%); +} + +.title-3-gradient { + background-image: linear-gradient(133deg, #2945c7 0%, #dbe1f8 100%); +} + +.title-4-gradient { + background-image: linear-gradient(310deg, #fe578f 0%, #68e8f9 100%); +} + +.description { + grid-area: description; + font-size: 16px; + font-weight: 500; + color: #6b6b6b; + line-height: 150%; +} + +.content-image { + grid-area: image; + width: 55rem; + height: 45rem; +} + +footer { + display: flex; + justify-content: center; + width: 100%; + height: 16rem; + padding-top: 3.2rem; + background-color: #111322; +} + +.footer-box { + display: flex; + justify-content: space-between; + width: 100%; + max-width: 192rem; + height: fit-content; + padding: 0 10.4rem; +} + +.copyright { + color: #676767; + font-family: Arial; + font-size: 1.6rem; +} + +.footer-links { + display: flex; + column-gap: 3rem; + padding-right: 1.8rem; +} + +.footer-link { + color: #cfcfcf; + font-family: Arial; + font-size: 1.6rem; +} + +.sns { + display: flex; + column-gap: 1.2rem; + height: 2rem; +} + + + + +/* Tablet */ +@media (max-width: 1200px) { + + .navbar { + width: 799px; + padding: 13px 32px; + } + + .hero-header { + width: 100%; + height: auto; + /* padding: 0 32px; */ + } + + .hero-header>img { + width: 100%; + height: 100%; + padding: 0 32px; + } + + article { + padding-top: 0; + padding-bottom: 4rem; + } + + .content-image { + width: 100%; + height: 100%; + } + + .footer-box { + padding: 0 3.2rem; + height: 100%; + } + + .break-section { + display: none; + } + +} + +/* Mobile */ +@media (max-width: 768px) { + + nav { + height: 64px; + } + + .navbar { + width: 100%; + padding: 0 32px; + } + + .navbar img { + width: 88.66px; + } + + .hero-header { + padding-top: 3rem; + } + + + .cta-short { + display: flex; + width: 80px; + height: 37px; + padding: 10px 16px; + justify-content: center; + align-items: center; + gap: 10px; + } + + .cta-short span { + font-size: 14px; + } + + .cta-long { + display: flex; + width: 200px; + padding: 10px 16px; + justify-content: center; + align-items: center; + gap: 10px; + } + + .cta-long span { + font-size: 14px; + } + + + .slogan { + text-align: center; + font-size: 32px; + font-style: normal; + font-weight: 700; + line-height: 42px; + } + + .hero-header { + width: 100%; + height: auto; + } + + .break { + display: inline; + } + + .hero-header>img { + width: 100%; + height: 100%; + padding: 0 32px; + } + + section { + display: flex; + flex-direction: column; + gap: 1rem; + height: auto; + padding: 4rem 3.2rem; + } + + .section-break { + display: none; + } + + article { + padding-top: 0; + padding-bottom: 4rem; + } + + .title { + font-size: 2.4rem; + line-height: 1.5; + } + + .description { + font-size: 1.5rem; + margin-bottom: 2.4rem; + } + + .content-image { + width: 100%; + height: 100%; + } + + .break-section { + display: none; + } + + .footer-box { + position: relative; + padding: 0 3.2rem; + height: 100%; + } + + .copyright { + position: absolute; + left: 3.2rem; + bottom: 3.2rem; + } + +} \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 000000000..a9535aef7 --- /dev/null +++ b/README.md @@ -0,0 +1 @@ +# weekly-mission