Fix: Align section titles

codeit-bootcamp-frontend · Jan 10, 2025 · 80445b7 · 80445b7
1 parent 39c250a
commit 80445b7
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 9 deletions.
diff --git a/index.html b/index.html
@@ -10,7 +10,7 @@
     <header class="land-header" role="navigation">
         <div class="land-header--container">
             <a href="/" class="logo"><img src="images/logo.svg" alt="판다마켓 로고"></a>
-            <a href="/login" class="button button--normal">로그인</a>
+            <a href="/login.html" class="button button--normal">로그인</a>
         </div>
     </header>
     <main class="land-main">

diff --git a/login.html b/login.html
@@ -25,7 +25,7 @@
             <a class="icon icon--42" href="https://www.kakaocorp.com" style="background-image: url(images/ico_kakao.svg);"></a>
         </div>
         <footer>
-            판다마켓이 처음이신가요? <a href="/signup">회원가입</a>
+            판다마켓이 처음이신가요? <a href="/signup.html">회원가입</a>
         </footer>
     </div>
 </body>

diff --git a/signup.html b/signup.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>회원가입 - 판다마켓</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body class="sign">
+    <div class="sign-container">
+        <a href="/" class="logo"><img src="images/logo.svg" alt="판다마켓 로고"></a>
+        <form class="sign-form" action="">
+
+            <label for="email">이메일</label>
+            <input class="sign-form__input" placeholder="이메일을 입력해주세요" type="text" name="email" id="email">
+
+            <label for="name">닉네임</label>
+            <input class="sign-form__input" placeholder="닉네임을 입력해주세요" type="text" name="name" id="name">
+
+            <label for="password">비밀번호</label>
+            <div class="password-container">
+                <input class="sign-form__input" placeholder="비밀번호를 입력해주세요" type="password" name="password" id="password">
+                <button id="password__toggle" class="icon icon--24" style="background-image: url(images/ico_eye-close.svg);"></button>
+            </div>
+
+            <label for="password--check">비밀번호 확인</label>
+            <div class="password-container">
+                <input class="sign-form__input" placeholder="비밀번호를 다시 한 번 입력해주세요" type="password" name="password--check" id="password--check">
+                <button id="password__toggle" class="icon icon--24" style="background-image: url(images/ico_eye-close.svg);"></button>
+            </div>
+
+            <input class="button button--wide" type="submit" value="회원가입">
+        </form>
+        <div class="social-log-wrap">
+            <p class="social-log-wrap__title">간편 로그인하기</p>
+            <a class="icon icon--42" href="https://www.google.com" style="background-image: url(images/ico_google.svg);"></a>
+            <a class="icon icon--42" href="https://www.kakaocorp.com" style="background-image: url(images/ico_kakao.svg);"></a>
+        </div>
+        <footer>
+            이미 회원이신가요? <a href="/login.html">로그인</a>
+        </footer>
+    </div>
+</body>
+</html>
diff --git a/style.css b/style.css
diff --git a/style.css.map b/style.css.map
diff --git a/style.scss b/style.scss
@@ -174,7 +174,7 @@ body {
             background: #CFE5FF;
             align-items: end;
 
-            .texts {
+            .land-h1, .land-h2 {
                 text-align: left;
             }
         }
@@ -227,10 +227,11 @@ body {
 }
 
 .sign {
+    margin-top: 140px;
     background: $basic;
     display: flex;
     justify-content: center;
-    padding-top: 230px;
+    align-items: center;
 
     &-container {
         width: 640px;
@@ -249,7 +250,7 @@ body {
             &__input {
                 box-sizing: border-box;
                 width: 100%;
-                height: 72px;
+                height: 56px;
                 padding: 16px 24px;
                 border: none;
                 border-radius: 12px;