codeit-bootcamp-frontend · sobokki · Oct 27, 2023 · Oct 27, 2023 · Oct 27, 2023 · Oct 27, 2023
diff --git a/asset/landing/KakaoTalk_20231103_112314340.png b/asset/landing/KakaoTalk_20231103_112314340.png
diff --git a/asset/landing/_img1.png b/asset/landing/_img1.png
diff --git a/asset/landing/_img4.png b/asset/landing/_img4.png
diff --git a/asset/landing/eye-off.svg b/asset/landing/eye-off.svg
diff --git a/asset/landing/eye-on.svg b/asset/landing/eye-on.svg
diff --git a/asset/landing/img2.png b/asset/landing/img2.png
diff --git a/asset/landing/img3.png b/asset/landing/img3.png
diff --git a/asset/signin/Component 2.png b/asset/signin/Component 2.png
diff --git a/change.html b/change.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>landinPage</title>
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
+      crossorigin="anonymous"
+    />
+  </head>
+  <body>
+    <div class="card" style="width: 18rem">
+      <img src="asset/landingpageimage.jpg" class="card-img-top" alt="..." />
+      <div class="card-body">
+        <p>WITHJ.NETLIFY.APP</p>
+        <h1>Linkbrary</h1>
+        <p class="card-text">세상의 모든 정보를 쉽게 저장하고 관리해 보세요</p>
+      </div>
+    </div>
+    <script
+      src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
+      integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"
+      integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+"
+      crossorigin="anonymous"
+    ></script>
+  </body>
+</html>
diff --git a/css/week1.css → css/landing.css b/css/week1.css → css/landing.css
@@ -1,4 +1,3 @@
-
 /* header */
 * {
   box-sizing: border-box;
@@ -123,19 +122,16 @@ section {
   line-height: 150%;
   width: 20rem;
 }
+.mobileText {
+  display: none;
+}
 
 .content-image {
   grid-area: image;
   width: 34rem;
 }
 
 footer {
-  /*display: flex;
-  width: 100%;
-  height: 16rem;
-  padding-top: 3.2rem;
-  background-color:#111322; 
-  justify-content: center;*/
   display: flex;
   justify-content: center;
   width: 100%;
@@ -265,7 +261,12 @@ footer {
     width: 22rem;
     margin-top: 0.6rem;
   }
-
+  .ex > .description {
+    display: none;
+  }
+  .mobileText {
+    display: flex;
+  }
   section {
     flex-direction: column;
     align-items: center;
@@ -288,6 +289,7 @@ footer {
   }
   .footer_box {
     padding: 2rem 2rem 4rem 2rem;
+    position: relative;
   }
   .footer_left {
     display: flex;
@@ -304,21 +306,17 @@ footer {
   }
   .copyright {
     margin-top: 6.875rem;
-    position: relative;
-    bottom: -3.13rem;
   }
-}
-=======
-.display1 {
-  background: #f0f6ff;
-
+  .display1 {
+    background: #f0f6ff;
+  }
 }
 /* start header */
 .header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 2.0rem 20.0rem;
+  padding: 2rem 20rem;
   position: fixed;
   background: #f0f6ff;
   top: 0;
@@ -334,31 +332,31 @@ footer {
     linear-gradient(91deg, #6d6afe 0.12%, #6ae3fe 101.84%)
   );
   cursor: pointer;
-  padding: 1.6rem 2.0rem;
+  padding: 1.6rem 2rem;
   text-decoration: none;
 }
 .login-text {
   color: var(--grey-light, #f5f5f5);
   font-family: Pretendard;
   font-size: 1.8rem;
   font-style: normal;
-  font-weight: 60.0;
+  font-weight: 60;
   line-height: normal;
 }
 /* end header */
 
 /* start content1 */
 .content1 {
-  padding: 7.0rem 36.0rem;
+  padding: 7rem 36rem;
   text-align: center;
 }
 .sub-tilte {
   text-align: center;
   font-family: Pretendard;
   font-size: 6.4rem;
   font-style: normal;
-  font-weight: 70.0;
-  line-height: 8.0rem;
+  font-weight: 70;
+  line-height: 8rem;
 }
 .sub-tilte > span {
   background: linear-gradient(91deg, #6d6afe 17.28%, #ff9f9f 74.98%);
@@ -399,96 +397,96 @@ footer {
 /* end content1 */
 
 /* start content2 */
-.content2{  
+.content2 {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 15.7rem;
-  padding: 12.0rem 46.0rem 5.0rem;
-
-
+  padding: 12rem 46rem 5rem;
 }
- .frame{
+.frame {
   display: flex;
   width: 29.1rem;
   flex-direction: column;
   align-items: center;
-  gap: 1.0rem;
+  gap: 1rem;
 }
- #title{
+#title {
   font-family: Pretendard;
   font-size: 4.8rem;
-  font-weight: 70.0;
+  font-weight: 70;
   line-height: 5.8rem;
   letter-spacing: 0rem;
   text-align: left;
-}/* 왜 안되는지 모르겠음*/
-#want-link{
-  background: linear-gradient(96deg, #FE8A8A 1.72%, #A4CEFF 74.97%);
-background-clip: text;
--webkit-background-clip: text;
--webkit-text-fill-color: transparent;
-font-style: normal;
-line-height: normal
-}
-.content2-comment{
-color: #6B6B6B;
-font-family: Pretendard;
-font-size: 1.6rem;
-font-style: normal;
-font-weight: 500;
-line-height: 150%
-}
-.content2-imgs{
+} /* 왜 안되는지 모르겠음*/
+#want-link {
+  background: linear-gradient(96deg, #fe8a8a 1.72%, #a4ceff 74.97%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-style: normal;
+  line-height: normal;
+}
+.content2-comment {
+  color: #6b6b6b;
+  font-family: Pretendard;
+  font-size: 1.6rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 150%;
+}
+.content2-imgs {
   gap: 1.2rem;
 }
 
-#care{
-  background: linear-gradient(277deg, #6FBAFF 59.22%, #FFD88B 93.66%);
-background-clip:text;
--webkit-background-clip:text;
--webkit-text-fill-color: transparent;
-font-style: normal;
-line-height: normal;}
+#care {
+  background: linear-gradient(277deg, #6fbaff 59.22%, #ffd88b 93.66%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-style: normal;
+  line-height: normal;
+}
 
-#share{
-background: linear-gradient(99deg, #6D7CCD 19.76%, rgba(82, 136, 133, 0.22) 52.69%);
-background-clip:text;
--webkit-background-clip:text;
--webkit-text-fill-color: transparent;
-font-style: normal;
-line-height: normal;}
-#search{
-  background: var(--fandom-k-gra-blue-to-pink, linear-gradient(271deg, #FE578F -9.84%, #68E8F9 107.18%));
+#share {
+  background: linear-gradient(
+    99deg,
+    #6d7ccd 19.76%,
+    rgba(82, 136, 133, 0.22) 52.69%
+  );
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-style: normal;
+  line-height: normal;
+}
+#search {
+  background: var(
+    --fandom-k-gra-blue-to-pink,
+    linear-gradient(271deg, #fe578f -9.84%, #68e8f9 107.18%)
+  );
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
-#content5-img{
+#content5-img {
   width: 61.9rem;
   height: 58.4rem;
   background-size: cover;
 }
-#rever{
+#rever {
   flex-direction: row-reverse;
 }
-footer{
-  margin-top: 12.0rem;
+footer {
+  margin-top: 12rem;
   padding: 3.2rem 10.4rem 6.4rem;
   display: flex;
-  background-color:#111322; 
+  background-color: #111322;
   justify-content: space-between;
   align-items: center;
   color: white;
 }
-a{text-decoration: none;
-color: white;}
-
-
-
-
-
-
-
-
-
+a {
+  text-decoration: none;
+  color: white;
+}
diff --git a/css/week2.css → css/signin.css b/css/week2.css → css/signin.css
@@ -60,7 +60,7 @@ body {
   justify-content: center;
   align-items: center;
   border-radius: 0.8rem;
-  border: 1rem solid --light_gray;
+  border: 0.1rem solid #9fa6b2;
   background: var(--linkbrary-white, --white);
 }
 
@@ -95,10 +95,7 @@ button {
   border: 1px solid var(--blue_gray);
   background: var(--mint_gray);
 }
-.email > input > #signup-email:focus,
-.password > input > #signup-password:focus {
-  border-color: var(--blue);
-}
+
 @media (max-width: 1199px) {
   .frame {
     padding: 20rem 40rem 29rem 40rem;
@@ -135,3 +132,29 @@ button {
     padding: 0.6rem 2.4rem;
   }
 }
+.email input:focus {
+  border: 1px solid blue;
+  outline: none;
+}
+.password input:focus {
+  border: 1px solid blue;
+  outline: none;
+}
+.error {
+  border: 1px solid red;
+}
+
+.error-message,
+.error-message2,
+.login-message {
+  color: red;
+  display: none;
+}
+.eye {
+  position: relative;
+  top: -45px;
+  left: 400px;
+}
+.eye-on {
+  display: none;
+}