diff --git a/Login Page/images/logo.png b/Login Page/images/logo.png
new file mode 100644
index 0000000..090f1e7
Binary files /dev/null and b/Login Page/images/logo.png differ
diff --git a/Login Page/index.html b/Login Page/index.html
new file mode 100644
index 0000000..57265e5
--- /dev/null
+++ b/Login Page/index.html	
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!--FONT AWESOME-->
+    <script src="https://kit.fontawesome.com/a43ef1b1c0.js" crossorigin="anonymous"></script>
+    <!--CSS LINKS-->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
+    <link rel="stylesheet" href="styles.css">
+    <title>Halaman Login</title>
+</head>
+<body>
+    <div class="login-page">
+        <div class="top-logo">
+            <img src="images/logo.png" alt="logo">
+        </div>
+    
+        <div class="page">
+            <form>
+                <div class="details input-group mb-3">
+                    <span class="icon input-group-text"><i class="fas fa-user"></i></span>
+                    <input class="form-control input_user" type="text" placeholder="Username"> <br>
+                </div>
+                <div class="details input-group mb-3">
+                    <span class="icon input-group-text"><i class="fas fa-key"></i></span>
+                    <input class="form-control input_pass" type="password" placeholder="Kata Sandi"><br>
+                </div>
+
+                <label class="container"><b>Ingat Saya</b>
+                    <input type="checkbox" checked="checked">
+                    <span class="checkmark"></span>
+                  </label>
+                  
+              <button class="btn btn-danger d-grid gap-2 mx-auto col-6"><b>Masuk</b></button>
+                <br>
+            </form>
+            <div class="end">
+                <span><b>Ga Punya Akun?</b></span>
+                  <a href="">Daftar Disini</a> <br>
+                  <a href="">Lupa Kata Sandi?</a>
+                  <p><Marquee>HACKTOBERFEST 2021</p></marquee>
+            </div>
+        </div>
+        
+    </div>
+    
+</body>
+</html>
diff --git a/Login Page/styles.css b/Login Page/styles.css
new file mode 100644
index 0000000..80878bc
--- /dev/null
+++ b/Login Page/styles.css	
@@ -0,0 +1,114 @@
+body{
+    background-color: rgba(13, 124, 128, 0.993);
+    text-align: center;
+}
+.login-page{
+    margin: 200px;
+}
+
+img{
+    height: 170px;
+    width: 170px;
+    position: absolute;
+    top: 110px;
+    left: 43.5%;
+    border: 10px solid rgba(13, 124, 128, 0.993);;
+    border-radius: 100%;
+    text-align: center;
+    z-index: 1;
+
+}
+a{
+    text-decoration: none;
+}
+
+form{
+    margin: 60px 3px;
+}
+.page{
+    height: 500px;
+    width: 400px;
+    background-color: rgb(231, 185, 34);
+    display: inline-block;
+    padding: 50px;
+    border-radius: 10px;
+    
+}
+
+
+.icon{
+    background-color: rgb(192, 72, 72);
+    color: #fff;
+}
+.details{
+    margin: 10px 0;
+    padding: 0%;
+}
+.container {
+    display: block;
+    position: relative;
+    padding-left: 35px;
+    margin-bottom: 12px;
+    cursor: pointer;
+    font-size: 15px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    text-align: left;
+  }
+  
+  /* Hide the browser's default checkbox */
+  .container input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+  }
+  
+  /* Create a custom checkbox */
+  .checkmark {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 18px;
+    width: 18px;
+    background-color: #eee;
+    border-radius: 5px;
+  }
+  
+  /* On mouse-over, add a grey background color */
+  .container:hover input ~ .checkmark {
+    background-color: #ccc;
+  }
+  
+  /* When the checkbox is checked, add a blue background */
+  .container input:checked ~ .checkmark {
+    background-color: #e2453ae7;
+  }
+  
+  /* Create the checkmark/indicator (hidden when not checked) */
+  .checkmark:after {
+    content: "";
+    position: absolute;
+    display: none;
+  }
+  
+  /* Show the checkmark when checked */
+  .container input:checked ~ .checkmark:after {
+    display: block;
+  }
+  
+  /* Style the checkmark/indicator */
+  .container .checkmark:after {
+    left: 6px;
+    top: 3px;
+    width: 5px;
+    height: 10px;
+    border: solid white;
+    border-width: 0 3px 3px 0;
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+  }
\ No newline at end of file
