Merge pull request #82 from Injaeeee/Basic-정인재-sprint3

[정인재] sprint3
codeit-bootcamp-frontend · Jun 9, 2024 · 9ca1f42 · 9ca1f42
2 parents 953f0d1 + e5dc57c
commit 9ca1f42
Show file tree

Hide file tree

Showing 6 changed files with 249 additions and 28 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/index.html b/index.html
@@ -24,8 +24,7 @@
         <div class="frame">
             <div class="content">
                 <div class="frame-text">
-                    일상의 모든 물건을 </br>
-                    거래해보세요
+                    일상의 모든 물건을<br class="line mobile-line" /> 거래해보세요
                 </div>
                 <a class="see-more" href="items/">구경하러가기</a>
             </div>
@@ -37,45 +36,43 @@
 
             <article class="element">
 
-                <img src="/img/Img_home_01.png">
+                <img class="element-img" src="/img/Img_home_01.png">
                 <div class="element-text-left">
                     <span class="category">Hot item</span>
-                    <p class="element-main-text">인기 상품을 <br />
-                        확인해 보세요 </p>
+                    <p class="element-main-text">인기 상품을 <br class="line" />
+                        확인해보세요 </p>
                     <p class="element-sub-text"> 가장 HOT한 중고거래 물품을 <br />
                         판다 마켓에서 확인해 보세요</p>
                 </div>
             </article>
 
-            <article class="element">
-
+            <article class="element right">
                 <div class="element-text-right">
                     <span class="category">Search</span>
-                    <p class="element-main-text">구매를 원하는 <br />
+                    <p class="element-main-text">구매를 원하는 <br class="line" />
                         상품을 검색하세요</p>
                     <p class="element-sub-text">
                         구매하고 싶은 물품은 검색해서 <br />
                         쉽게 찾아보세요
                     </p>
                 </div>
-                <img src="img/Img_home_02.png">
+                <img class="element-img" src="img/Img_home_02.png">
             </article>
 
             <article class="element">
-                <img src="img/Img_home_03.png">
+                <img class="element-img" src="img/Img_home_03.png">
                 <div class="element-text-left">
                     <span class="category">Register</span>
-                    <p class="element-main-text">판매를 원하는 <br />
+                    <p class="element-main-text">판매를 원하는 <br class="line" />
                         상품을 등록하세요</p>
                     <p class="element-sub-text">
-                        어떤 물건이든 판매하고 싶은 상품을<br />
+                        어떤 물건이든 판매하고 싶은 상품을 <br />
                         쉽게 등록하세요
                     </p>
                 </div>
             </article>
         </section>
 
-        </div>
 
         <div class="frame">
             <div class="content">

diff --git a/login/index.html b/login/index.html
@@ -9,13 +9,13 @@
 </head>
 
 <body class="loginPage">
+
     <a href="./">
         <div class="logo">
             <img src="/img/logo.png" />
         </div>
     </a>
 
-
     <main>
         <form class="login">
             <div class="login-input">

diff --git a/login/style.css b/login/style.css
@@ -108,4 +108,43 @@ input:focus-out {
     transform: translateY(350%);
     pointer-events: none;
     /* 눈 모양 아이콘 */
+}
+
+/* Tablet */
+@media (max-width: 1200px) {}
+
+
+/* Mobile */
+@media (max-width: 768px) {
+
+    .loginPage {
+        justify-content: flex-start;
+        gap: 20px;
+    }
+
+    .logo {
+        margin-top: 50px;
+    }
+
+    .logo img {
+        width: 198px;
+        height: 66px;
+        object-fit: contain;
+    }
+
+    label {
+        font-size: 14px;
+    }
+
+    input {
+        width: 343px;
+    }
+
+    .login-button {
+        width: 343px;
+    }
+
+    .easy-login {
+        width: 344px;
+    }
 }
diff --git a/signup/style.css b/signup/style.css
@@ -108,4 +108,46 @@ input:focus-out {
     transform: translateY(350%);
     pointer-events: none;
     /* 눈 모양 아이콘 */
+}
+
+
+
+
+/* Tablet */
+@media (max-width: 1200px) {}
+
+
+/* Mobile */
+@media (max-width: 768px) {
+
+    .signupPage {
+        justify-content: flex-start;
+        gap: 20px;
+    }
+
+    .logo {
+        margin-top: 50px;
+    }
+
+    .logo img {
+        width: 198px;
+        height: 66px;
+        object-fit: contain;
+    }
+
+    label {
+        font-size: 14px;
+    }
+
+    input {
+        width: 343px;
+    }
+
+    .signup-button {
+        width: 343px;
+    }
+
+    .easy-login {
+        width: 344px;
+    }
 }