[조나래]Sprint22 스프린트 미션 2

css/login.css

@@ -0,0 +1,91 @@
+body {
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #fcfcfc;
+}
+
+.auth-container {
+  width: 640px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 40px;
+}
+
+.logo {
+  margin: 0;
+}
+
+.logo a {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.logo img {
+  width: 104px;
+  height: auto;
+}
+
+.logo-text {
+  font-family: 'ROKAF Sans', sans-serif;
+  font-size: 66px;
+  line-height: 90px;
+  font-weight: 700;
+  color: #3692ff;
+}
+
+.auth-form {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.input-field {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.input-field label {
+  font-size: 18px;
+  line-height: 26px;
+  font-weight: 700;
+  color: #1f2937;
+}
+
+.input-field input {
+  height: 56px;
+  padding: 16px 24px;
+  background: #f3f4f6;
+  border-radius: 12px;
+  border: none;
+  outline: none;
+  font-size: 16px;
+  color: #1f2937;
+}
+
+.auth-form-button {
+  height: 56px;
+  background: #3692ff;
+  border-radius: 40px;
+  font-size: 20px;
+  line-height: 32px;
+  font-weight: 600;
+  color: #ffffff;
+}
+
+.auth-helper-text {
+  text-align: center;
+  font-size: 14px;
+  line-height: 24px;
+  color: #1f2937;
+}
+
+.auth-helper-text a {
+  color: #3692ff;
+  text-decoration: underline;
+}

css/reset.css

@@ -0,0 +1,32 @@
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: Pretendard, sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+button {
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

css/signup.css

@@ -0,0 +1,85 @@
+body {
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #fcfcfc;
+}
+
+.auth-container {
+  width: 640px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 40px;
+}
+
+.home-link {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.logo {
+  width: 104px;
+  height: auto;
+}
+
+.logo-text {
+  font-family: 'ROKAF Sans', sans-serif;
+  font-size: 66px;
+  line-height: 90px;
+  font-weight: 700;
+  color: #3692ff;
+}
+
+.auth-form {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.input-field {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.input-field label {
+  font-size: 18px;
+  line-height: 26px;
+  font-weight: 700;
+  color: #1f2937;
+}
+
+.input-field input {
+  height: 56px;
+  padding: 16px 24px;
+  background: #f3f4f6;
+  border-radius: 12px;
+  font-size: 16px;
+  color: #1f2937;
+}
+
+.auth-form-button {
+  height: 56px;
+  background: #3692ff;
+  border-radius: 40px;
+  font-size: 20px;
+  line-height: 32px;
+  font-weight: 600;
+  color: #ffffff;
+}
+
+.auth-helper-text {
+  text-align: center;
+  font-size: 14px;
+  line-height: 24px;
+  color: #1f2937;
+}
+
+.auth-helper-text a {
+  color: #3692ff;
+  text-decoration: underline;
+}

style.css → css/style.css

@@ -1,10 +1,16 @@
+@font-face {
+  font-family: 'ROKAF Sans';
+  src: url('./fonts/ROKAF Sans Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
 * {
   box-sizing: border-box;
 }
 
 body {
   margin: 0;
-  font-family: Pretendard, sans-serif;
 }
 
 a {
@@ -19,31 +25,36 @@ a {
   display: flex;
   justify-content: center;
   background: #fff;
-  background: #fff;
 }
 
 .gnb-inner {
-  width: 1120px;
+  max-width: 1110px;
+  width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
 .logo {
+  margin: 0;
+}
+
+.logo a {
   display: flex;
   align-items: center;
   gap: 8px;
 }
 
+.logo img {
+  width: 40px;
+  height: 40px;
+}
+
 .logo-text {
   font-weight: 700;
   font-size: 26px;
   color: #3692ff;
-}
-
-.logo img {
-  width: 40px;
-  height: 40px;
+  font-family: 'ROKAF Sans', Pretendard, sans-serif;
 }
 
 .login-btn {
@@ -69,7 +80,8 @@ a {
 }
 
 .hero-inner {
-  width: 1110px;
+  max-width: 1110px;
+  width: 100%;
   height: 340px;
   display: flex;
   justify-content: space-between;
@@ -84,7 +96,7 @@ a {
   margin-bottom: 100px;
 }
 
-.hero-text h1 {
+.hero-text h2 {
   margin: 0;
   font-size: 40px;
   line-height: 56px;
@@ -123,7 +135,8 @@ a {
 }
 
 .card {
-  width: 988px;
+  max-width: 988px;
+  width: 100%;
   height: 444px;
   background: #fcfcfc;
   border-radius: 12px;
@@ -151,15 +164,12 @@ a {
 }
 
 .card-label {
-  font-family: 'Abhaya Libre ExtraBold', sans-serif;
   font-weight: 800;
   font-size: 18px;
-  line-height: 26px;
   color: #3692ff;
 }
 
 .card-content {
-  width: 100%;
   display: flex;
   flex-direction: column;
   gap: 24px;
@@ -202,7 +212,8 @@ a {
 }
 
 .bottom-inner {
-  width: 1110px;
+  max-width: 1110px;
+  width: 100%;
   height: 397px;
   display: flex;
   align-items: center;
@@ -233,6 +244,7 @@ a {
 }
 
 .footer-inner {
-  width: 1120px;
+  max-width: 1110px;
+  width: 100%;
   height: 100%;
 }