#6.10~12 navigation

shtjrgus010 · Feb 8, 2024 · d7e1dba · d7e1dba
1 parent d43385e
commit d7e1dba
Show file tree

Hide file tree

Showing 7 changed files with 120 additions and 43 deletions.
diff --git a/css/components/nav-bar.css b/css/components/nav-bar.css
@@ -0,0 +1,17 @@
+.nav{
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    background-color: #f9f9fa;
+    padding: 20px 50px;
+    box-sizing: border-box;
+    border-top: 1px solid rgba(121,121,123,0.3);
+}
+.nav__list{
+    display: flex;
+    justify-content: space-between;
+    padding: 20px 40px;
+}
+.nav__link{
+    color: #2e363e;
+}
diff --git a/css/status-bar.css → css/components/status-bar.css b/css/status-bar.css → css/components/status-bar.css
@@ -1,4 +1,3 @@
-
 .status-bar{
     display: flex;
     justify-content: center;

diff --git a/css/reset.css b/css/reset.css
@@ -45,3 +45,7 @@ table {
 input:focus{
 	outline: none;
 }
+a {
+	color: inherit;
+	text-decoration: none;
+}
diff --git a/css/screens/login.css b/css/screens/login.css
@@ -0,0 +1,37 @@
+#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;
+}
diff --git a/css/stlyles.css b/css/stlyles.css
@@ -1,6 +1,9 @@
 @import "reset.css";
-@import "status-bar.css";
+@import "components/status-bar.css";
+@import "components/nav-bar.css";
 @import "variables.css";
+@import "screens/login.css";
+
 
 body {
     font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
@@ -22,42 +25,4 @@ body {
 .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;
 }
diff --git a/friends.html b/friends.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="css/stlyles.css">
+    <title>friends - KoKoa Clone</title>
+</head>
+
+<body>
+    <div class="status-bar">
+        <div class="status-bar__column">
+            <span>No Service</span>
+            <i class="fa-solid fa-wifi"></i>
+        </div>
+        <div class="status-bar__column">
+            <span>18:43</span>
+        </div>
+        <div class="status-bar__column">
+            <span>71%</span>
+            <i class="fa-solid fa-battery-three-quarters"></i>
+            <i class="fa-solid fa-bolt"></i>
+        </div>
+    </div>
+    <nav class="nav">
+        <ul class="nav__list">
+            <li class="nav__btn">
+                <a class="nav__link" href="#">
+                    <i class="fa-solid fa-user fa-2x"></i>
+                </a>
+            </li>
+            <li class="nav__btn">
+                <a class="nav__link" href="#">
+                    <i class="fa-regular fa-comment fa-2x"></i>
+                </a>
+            </li>
+            <li class="nav__btn">
+                <a class="nav__link" href="#">
+                    <i class="fa-solid fa-magnifying-glass fa-2x"></i>
+                </a>
+            </li>
+            <li class="nav__btn">
+                <a class="nav__link" href="#">
+                    <i class="fa-solid fa-ellipsis fa-2x"></i>
+                </a>
+            </li>
+        </ul>
+    </nav>
+
+    <script src="https://kit.fontawesome.com/59ff05d9f3.js" crossorigin="anonymous"></script>
+</body>
+
+
+</html>
diff --git a/index.html b/index.html
@@ -27,9 +27,9 @@
         <h1 class="Welcome-header__title">Welcome to KoKoa Clone</h1>
         <p class="Welcome-header__text"> If you have a Kokoa Account, log in with your email or phone number.</p>
     </header>
-    <form id="login-form">
-        <input type="text" placeholder="Email or phone number"/>
-        <input type="password" placeholder="Password"/>
+    <form action="friends.html" method="get" id="login-form">
+        <input name="username" type="text" placeholder="Email or phone number"/>
+        <input name="password" type="password" placeholder="Password"/>
         <input type="submit" value="Log In"/>
         <a href="#">Find Kokoa Acoount or Password</a>
     <script src="https://kit.fontawesome.com/59ff05d9f3.js" crossorigin="anonymous"></script>