Merge pull request #46 from O-daeun/part1-오다은-week2

[오다은]Week2
codeit-bootcamp-frontend · Feb 28, 2024 · 6a3a441 · 6a3a441
2 parents 4dc5dd0 + aebddb5
commit 6a3a441
Show file tree

Hide file tree

Showing 21 changed files with 580 additions and 0 deletions.
diff --git a/css/default.css b/css/default.css
@@ -0,0 +1,53 @@
+:root {
+  --primary-color: #6d6afe;
+  --red-color: #ff5b56;
+  --black-color: #111322;
+  --white-color: #ffffff;
+  --gray1-color: #3e3e43;
+  --gray2-color: #9fa6b2;
+  --gray3-color: #ccd5e3;
+  --gray4-color: #e7effb;
+  --gray5-color: #f0f6ff;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Pretendard", sans-serif;
+}
+
+a {
+  display: block;
+  text-decoration: none;
+  color: inherit;
+}
+
+li {
+  list-style: none;
+}
+
+button {
+  border: none;
+  outline: none;
+  cursor: pointer;
+}
+
+img {
+  display: block;
+}
+
+.btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 16px 0;
+  background: linear-gradient(90.99deg, #6d6afe 0.12%, #6ae3fe 101.84%);
+  border-radius: 8px;
+  color: var(--white-color);
+  font-weight: 600;
+  font-size: 18px;
+}
diff --git a/css/main.css b/css/main.css
@@ -0,0 +1,158 @@
+.header {
+  position: sticky;
+  top: 0;
+  height: 93px;
+  padding: 20px 200px;
+  background: var(--gray5-color);
+}
+
+.header__inner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 1520px;
+  margin: 0 auto;
+}
+
+.header__link-login {
+  width: 128px;
+}
+
+.main {
+  height: 953px;
+  background: url("../img/main_bg.png"), var(--gray5-color);
+  background-repeat: no-repeat;
+  background-position: center bottom;
+  background-size: 1118px;
+}
+
+.main__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 40px;
+  padding-top: 70px;
+}
+
+.main__text {
+  font-size: 64px;
+  font-weight: 700;
+  line-height: 80px;
+  text-align: center;
+}
+
+.main__text--gradient {
+  background: linear-gradient(91.26deg, #6d6afe 17.28%, #ff9f9f 74.98%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.main__link {
+  width: 350px;
+}
+
+.main-section {
+  padding: 120px 32px 170px;
+}
+
+.main-section__inner {
+  display: flex;
+  flex-direction: column;
+  gap: 100px;
+  max-width: 998px;
+  margin: 0 auto;
+}
+
+.main-article {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.main-article:nth-child(even) {
+  flex-direction: row-reverse;
+}
+
+.main-article__content {
+  width: 291px;
+}
+
+.main-article__title {
+  font-size: 48px;
+  font-weight: 700;
+  line-height: 58px;
+}
+
+.main-article:nth-child(1) .main-article__title--gradient {
+  background: linear-gradient(95.63deg, #fe8a8a 1.72%, #a4ceff 98.97%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.main-article:nth-child(2) .main-article__title--gradient {
+  background: linear-gradient(277.01deg, #6fbaff 13.22%, #ffd88b 94.66%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.main-article:nth-child(3) .main-article__title--gradient {
+  background: linear-gradient(
+    99.5deg,
+    #6d7ccd 53.76%,
+    rgba(82, 136, 133, 0.22) 125.69%
+  );
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.main-article:nth-child(4) .main-article__title--gradient {
+  background: linear-gradient(271.36deg, #fe578f -50.84%, #68e8f9 51.18%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.main-article__p {
+  margin-top: 10px;
+  font-family: "Abel", "Pretendard", sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  color: #6B6B6B;
+}
+
+.main-article__img {
+  width: 550px;
+}
+
+.footer {
+  padding: 32px 104px 108px;
+  background-color: var(--black-color);
+  font-family: "Acme", sans-serif;
+}
+
+.footer__inner {
+  display: flex;
+  justify-content: space-between;
+  max-width: 1712px;
+  margin: 0 auto;
+}
+
+.footer__address {
+  flex-basis: 120px;
+  color: #676767;
+}
+
+.footer__nav {
+  display: flex;
+  gap: 30px;
+  color: #cfcfcf;
+}
+
+.footer__sns {
+  flex-basis: 120px;
+  display: flex;
+  gap: 12px;
+}
+
+/* 로그인 */
+
diff --git a/css/signin.css b/css/signin.css
@@ -0,0 +1,113 @@
+.signin {
+  display: flex;
+  justify-content: center;
+  height: 100vh;
+  padding-top: 238px;
+  background-color: var(--gray5-color);
+}
+
+.signin__inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 400px;
+}
+
+.signin__logo {
+  width: 211px;
+}
+
+.signin__text-wp {
+  display: flex;
+  align-items: end;
+  gap: 8px;
+  margin-top: 16px;
+}
+
+.signin__text {
+  font-size: 16px;
+  line-height: 16px;
+}
+
+.signin__link {
+  border-bottom: 1px solid var(--primary-color);
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 19px;
+  color: var(--primary-color);
+}
+
+.signin-form {
+  width: 100%;
+  margin-top: 30px;
+}
+
+.signin-form__input-wp {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 24px;
+}
+
+.signin-form__input-wp:nth-child(1) {
+  margin-top: 0;
+}
+
+.signin-form__label {
+  font-size: 14px;
+}
+
+.signin-form__pw-wp {
+  position: relative;
+}
+
+.signin-form__eye {
+  position: absolute;
+  top: 22px;
+  right: 22px;
+  cursor: pointer;
+}
+
+.signin-form__input {
+  width: 100%;
+  padding: 18px 15px;
+  border: 1px solid var(--gray3-color);
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  color: #373740;
+}
+
+.signin-form__input:focus {
+  outline: 1px solid #6d6afe;
+}
+
+.signin-form__btn {
+  width: 100%;
+  margin-top: 30px;
+}
+
+.signin-sns {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  margin-top: 32px;
+  padding: 12px 24px;
+  background: var(--gray4-color);
+  border: 1px solid var(--gray3-color);
+  border-radius: 8px;
+}
+
+.signin-sns__title {
+  font-family: Pretendard;
+  font-size: 14px;
+  font-weight: 400;
+  color: #373740;
+}
+
+.signin-sns__ul {
+  display: flex;
+  gap: 16px;
+}
diff --git a/img/eye_off.png b/img/eye_off.png
diff --git a/img/eye_on.png b/img/eye_on.png
diff --git a/img/login_google.png b/img/login_google.png
diff --git a/img/login_kakaotalk.png b/img/login_kakaotalk.png
diff --git a/img/logo.png b/img/logo.png
diff --git a/img/logo_big.png b/img/logo_big.png
diff --git a/img/main_bg.png b/img/main_bg.png
diff --git a/img/section1.png b/img/section1.png
diff --git a/img/section2.png b/img/section2.png
diff --git a/img/section3.png b/img/section3.png
diff --git a/img/section4.png b/img/section4.png
diff --git a/img/sns_facebook.png b/img/sns_facebook.png
diff --git a/img/sns_instagram.png b/img/sns_instagram.png
diff --git a/img/sns_twitter.png b/img/sns_twitter.png
diff --git a/img/sns_youtube.png b/img/sns_youtube.png