#6.7~6.8 Login form

css/reset.css

@@ -41,4 +41,7 @@ q:before, q:after {
 table {
 	border-collapse: collapse;
 	border-spacing: 0;
-}
+}
+input:focus{
+	outline: none;
+}

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;
 }

css/variables.css

@@ -0,0 +1,3 @@
+:root{
+    --yellow: #fae100;
+}

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>