From d43385e8b4cf2eb14f41c47d238c758fe8f5a4a4 Mon Sep 17 00:00:00 2001
From: shtjrgus010 <shtjrgus010@naver.com>
Date: Thu, 8 Feb 2024 11:45:31 +0900
Subject: [PATCH] #6.7~6.8 Login form

---
 css/reset.css     |  5 ++++-
 css/stlyles.css   | 52 ++++++++++++++++++++++++++++++++++++++++++-----
 css/variables.css |  3 +++
 index.html        |  1 +
 4 files changed, 55 insertions(+), 6 deletions(-)
 create mode 100644 css/variables.css

diff --git a/css/reset.css b/css/reset.css
index 9eb5bb7..165b2f1 100644
--- a/css/reset.css
+++ b/css/reset.css
@@ -41,4 +41,7 @@ q:before, q:after {
 table {
 	border-collapse: collapse;
 	border-spacing: 0;
-}
\ No newline at end of file
+}
+input:focus{
+	outline: none;
+}
diff --git a/css/stlyles.css b/css/stlyles.css
index 42061da..e4fc691 100644
--- a/css/stlyles.css
+++ b/css/stlyles.css
@@ -1,21 +1,63 @@
 @import "reset.css";
 @import "status-bar.css";
-body{
-    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+@import "variables.css";
+
+body {
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 }
 
-.Welcome-header{
+.Welcome-header {
     margin: 90px 0px;
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
 }
-.Welcome-header__title{
+
+.Welcome-header__title {
     margin-bottom: 20px;
     font-size: 25px;
 }
-.Welcome-header__text{
+
+.Welcome-header__text {
     width: 60%;
     opacity: 0.7;
+}
+
+#login-form {
+    display: flex;
+    flex-direction: column;
+    margin: 0px 30px;
+}
+
+#login-form input {
+    border: none;
+    padding: 15px 0px;
+    font-size: 18px;
+    margin-bottom: 25px;
+}
+
+#login-form input:not([type="submit"]) {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+#login-form input::placeholder {
+    color: rgba(0, 0, 0, 0.4);
+}
+
+#login-form input:focus {
+    border-color: var(--yellow);
+}
+
+#login-form input[type="submit"] {
+    background-color: var(--yellow);
+    cursor: pointer;
+    padding: 20px 0px;
+    border-radius: 5px;
+}
+#login-form a{
+    text-align: center;
+    text-decoration: none;
+    color: inherit;
+    font-size: 13px;
 }
\ No newline at end of file
diff --git a/css/variables.css b/css/variables.css
new file mode 100644
index 0000000..9c6a831
--- /dev/null
+++ b/css/variables.css
@@ -0,0 +1,3 @@
+:root{
+    --yellow: #fae100;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 47b6735..7ba1f7f 100644
--- a/index.html
+++ b/index.html
@@ -35,4 +35,5 @@ <h1 class="Welcome-header__title">Welcome to KoKoa Clone</h1>
     <script src="https://kit.fontawesome.com/59ff05d9f3.js" crossorigin="anonymous"></script>
 </body>
 
+
 </html>
\ No newline at end of file