[유경민] sprint3

css/index.css

@@ -1,6 +1,6 @@
 body {
   width: 100%;
-  margin: 0;
+  margin: 0 auto;
   padding: 0;
   font-family: 'Pretendard', sans-serif;
   box-sizing: border-box;
@@ -14,15 +14,14 @@ a {
 
 .inner {
   width: 100%;
-  max-width: 1100px;
-  margin: 0 auto;
+  margin: 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 20px;
 }
 
-header {
+.header {
   height: 80px;
   display: flex; 
   justify-content: center;
@@ -33,8 +32,9 @@ header img{
   height: 70px;
 }
 
+
 .btn,
-.login-btn {
+.button-primary {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -51,7 +51,7 @@ header img{
   border-radius: 40px;
 }
 
-.login-btn {
+.button-primary {
   width: 128px;
   height: 48px;
   font-size: 16px;
@@ -64,7 +64,7 @@ header img{
   height: 540px;
   display: flex;
   justify-content: center;
-  /* align-items: center; */
+  align-items: center;
   align-items: flex-end;
   width:100%;
 }
@@ -101,8 +101,6 @@ header img{
   display: flex;
   align-items: center;
   background-color: #FCFCFC;
-  border-radius: 12px;
-
 }
 
 .card-content.reverse {
@@ -111,7 +109,7 @@ header img{
 }
 
 .card-content img {
-  width: 579px;
+  width: 696px;
   height: 100%;
 }
 
@@ -180,3 +178,133 @@ header img{
   list-style: none;
   gap: 12px;
 }
+
+/*tablet*/
+@media (max-width: 1199px){
+  /*blue block*/
+  .blue-block {
+    height: 774px;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+  }
+
+  .container {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    justify-content: space-between;
+    padding-top: 84px;
+    height: 100%
+  }
+
+  .container-text {
+    align-items: center;                        
+  }
+
+  .container-text p#top br,
+  h3 br{
+  display: none;
+  }
+
+  /*card*/
+  .card-wrapper{
+    padding: 24px;
+    margin: 0 0 50px;
+    height: auto;
+  }
+
+  .card-content img {
+    width: 100%;
+    height: auto;
+  }
+
+  .card-content {
+    flex-direction: column;
+    position: relative; 
+    background: none;
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    height: auto;
+    gap: 24px;
+
+  }
+
+  .card-content.reverse { 
+    flex-direction: column; 
+  }
+
+  .card-text {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    text-align: left;
+    width: 100%;
+    padding: 0;
+    position: relative;
+    gap: 16px;
+    z-index: 1;
+  }
+
+  .footer-container {
+    padding: 20px;
+  }
+}
+
+/*mobile*/
+@media (min-width: 375px) and (max-width: 767px) {
+  /*blue block*/
+  .blue-block {
+    height: 540px;
+    gap: 18px;
+  }
+
+   .container {
+    padding-top: 48px;
+  }
+
+   .container img {
+    width: 100%;
+    max-width: 448px;
+    height: auto;
+  }
+
+  .container-text {
+    font-size: 32px;
+  }
+
+  .container-text p#top br{
+    display: inline;
+  }
+
+  /*card*/
+  .card-wrapper {
+    padding: 15px;
+    margin: 0 0 40px;
+  }
+
+  .card-subtitle {
+    font-size: 16px;
+  }
+
+  .card-title {
+    font-size: 24px;
+  }
+
+  .card-desc {
+    font-size: 16px;
+  }
+
+  /*footer*/
+  .footer-container {
+    flex-wrap: wrap;
+    gap: 50px;
+  }
+  .footer-copyright {
+  flex-basis: 100%;
+  order: 1;
+  }
+
+}
+

css/login.css

@@ -93,7 +93,7 @@ input[type="password"] {
 .login-btn {
   width: 100%;
   height: 56px;
-  background-color: #3692FF;
+  background-color: #9CA3AF;
   color: #ffffff;
   font-weight: 600;
   font-size: 20px;
@@ -138,9 +138,17 @@ input[type="password"] {
 }
 
 .signup-callout a {
-  color: #3692FF;
+  color: #3182F6;
   font-size: 14px;
   font-weight: 500;
 }
 
-
+@media (max-width: 767px) and (min-width: 375px) {
+  .login-box {
+    max-width: 400px;
+  }
+  .logo-img {
+    width: 100%;
+    height: auto;
+  }
+}

css/reset.css

@@ -0,0 +1,58 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+.inner,
+.container,
+.card-wrapper,
+.footer-container {
+  width: 100%;
+  max-width: 1100px;
+  margin: 0 auto;   
+  box-sizing: border-box;
+}
+
+
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

css/signup.css

@@ -95,7 +95,7 @@ input[type="text"]{
 .login-btn {
   width: 100%;
   height: 56px;
-  background-color: #3692FF;
+  background-color: #9CA3AF;
   color: #ffffff;
   font-weight: 600;
   font-size: 20px;
@@ -140,9 +140,19 @@ input[type="text"]{
 }
 
 .signup-callout a {
-  color: #3692FF;
+  color: #3182F6;
   font-size: 14px;
   font-weight: 500;
 }
 
+@media (max-width: 767px) and (min-width: 375px) {
+  .login-box {
+    max-width: 400px;
+  }
+  .logo-img {
+    width: 100%;
+    height: auto;
+  }
+}
+