codeit-bootcamp-frontend · 1005hoon · Feb 28, 2024 · Feb 23, 2024 · Feb 23, 2024 · Feb 23, 2024
diff --git a/css/_variables.css b/css/_variables.css
@@ -0,0 +1,12 @@
+:root {
+  --primary: #6d5afe;
+  --red: #ff5b56;
+  --black: #111322;
+  --white: #ffffff;
+  --primary-gradient: linear-gradient(to right, var(--primary), #6ae3fe);
+  --gray-darker: #3e3e43;
+  --gray-dark: #9fa6b2;
+  --gray: #ccd5e3;
+  --gray-light: #e7effb;
+  --gray-lighter: #f0f6ff;
+}
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,285 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: var(--black);
+}
+
+header {
+  width: 100%;
+  background-color: var(--gray-lighter);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+footer {
+  width: 100%;
+  display: grid;
+  grid-template: auto / 1fr 1fr 1fr;
+  padding: 40px;
+  margin-top: 70px;
+  background-color: var(--black);
+}
+
+nav {
+  width: 100%;
+  max-width: 1920px;
+  position: fixed;
+  top: 0;
+  height: 110px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  z-index: 1;
+}
+
+@media (max-width: 1920px) {
+  nav {
+    width: 100%;
+    padding: 0 200px;
+  }
+
+  footer {
+    width: 100%;
+    padding: 40px 104px;
+  }
+}
+
+a {
+  text-decoration: none;
+  color: var(--white);
+  padding: 10px 30px;
+}
+
+/* 메인 홈페이지 스타일 */
+/*-----------------------------------------------*/
+
+.sign__button {
+  background: var(--primary-gradient);
+  border-radius: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 22px;
+  font-weight: 600;
+}
+
+.sign__button,
+.home__button :hover {
+  cursor: pointer;
+}
+
+.header__content {
+  width: 1920px;
+  margin-top: 140px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow: hidden;
+}
+
+.header__content h1 {
+  font-size: 65px;
+  text-align: center;
+}
+
+.header__content span {
+  background: linear-gradient(to right, var(--primary), #ff9f9f);
+  background-clip: text;
+  color: transparent;
+}
+
+.header__content img {
+  position: relative;
+  top: 10px;
+}
+
+.header__content a {
+  margin-bottom: 20px;
+  background: var(--primary-gradient);
+  border-radius: 8px;
+  font-size: 20px;
+  font-weight: 600;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.main__card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 60px auto;
+  gap: 160px;
+}
+
+.main__card:nth-child(even) {
+  flex-direction: row-reverse;
+}
+
+.main__card--text {
+  width: 280px;
+}
+
+.main__card--text h2 {
+  font-size: 50px;
+}
+
+.main__card--text p {
+  color: var(--gray-darker);
+}
+
+.main__card img {
+  width: 500px;
+  height: 400px;
+}
+
+#special-text-first {
+  background: linear-gradient(to right, #fe8a8a, #a4ceff);
+  background-clip: text;
+  color: transparent;
+}
+
+#special-text-second {
+  background: linear-gradient(to right, #6fbaff, #ffd88b);
+  background-clip: text;
+  color: transparent;
+}
+
+#special-text-third {
+  background: linear-gradient(to right, #6d7ccd, #528885);
+  background-clip: text;
+  color: transparent;
+}
+
+#special-text-fourth {
+  background: linear-gradient(to right, #a4ceff, #fe8a8a);
+  background-clip: text;
+  color: transparent;
+}
+
+.company-name {
+  color: var(--gray-dark);
+}
+
+.for-customer {
+  text-align: center;
+}
+
+.social-media {
+  text-align: end;
+}
+
+.social-media a {
+  padding: 10px;
+}
+
+/* 로그인/회원가입 페이지 스타일 */
+/*-----------------------------------------------*/
+
+.sign__container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--gray-lighter);
+}
+
+.sign__container .logo {
+  width: 220px;
+}
+
+.sign__container--header {
+  margin-bottom: 30px;
+}
+
+.goto__sign {
+  margin-left: 30px;
+  color: var(--primary);
+  padding: 0;
+  font-weight: 600;
+}
+
+.form__container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 30px;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+input {
+  width: 400px;
+  height: 60px;
+  border-radius: 8px;
+  border: 1px solid var(--gray);
+  padding-left: 10px;
+}
+
+#email :focus,
+#password :focus {
+  border-color: var(--primary);
+}
+
+#submit {
+  color: var(--white);
+}
+
+.social-login__container {
+  width: 400px;
+  height: 60px;
+  background-color: var(--gray-light);
+  border: 1px solid var(--gray);
+  border-radius: 8px;
+  padding: 0 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.social-login {
+  display: flex;
+}
+
+.social-login__button {
+  padding: 5px;
+  border-radius: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 5px;
+  box-shadow: 1px 2px 2px var(--gray);
+}
+
+.google {
+  background-color: var(--white);
+}
+
+.kakao {
+  background-color: #f5e14b;
+}
+
+.password__box {
+  position: relative;
+}
+
+.password_eye {
+  position: absolute;
+  right: 20px;
+  top: 23px;
+}
diff --git a/image/google_logo.svg b/image/google_logo.svg
diff --git a/image/img1.svg b/image/img1.svg
diff --git a/image/img2.svg b/image/img2.svg
diff --git a/image/img3.svg b/image/img3.svg
diff --git a/image/img4.svg b/image/img4.svg
diff --git a/image/kakao_logo.svg b/image/kakao_logo.svg
diff --git a/image/logo.svg b/image/logo.svg
diff --git a/image/main_img.svg b/image/main_img.svg
diff --git a/image/password_eye.svg b/image/password_eye.svg