tugas 05

rickyedowai · Feb 22, 2024 · b54f7c5 · b54f7c5
1 parent 6ce1f7b
commit b54f7c5
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 0 deletions.
diff --git a/g.png b/g.png
diff --git a/index.html b/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tugas 05</title>
+    <link
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
+      crossorigin="anonymous"
+    />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+
+  <body>
+    <div class="container d-flex justify-content-center align-items-center" style="min-height: 100vh">
+      <!--  -->
+
+      <div class="row border rounded-5 p-3 bg-white shadow box-area">
+        <!--  -->
+
+        <div class="col-md-6 rounded-4 d-flex justify-content-center align-items-center flex-column left-box" style="background: #103cbe">
+          <div class="featured-image mb-3">
+            <img src="png1.png" class="img-fluid" style="width: 250px" />
+          </div>
+          <p class="text-white fs-2" style="font-family: 'Courier New', Courier, monospace; font-weight: 600">Be verified</p>
+          <small class="text-white text-wrap text-center" style="width: 17rem; font-family: 'Courier New', Courier, monospace">Join reperienced Designer on this platform.</small>
+        </div>
+
+        <div class="col-md-6 right-box">
+          <div class="row align-items-center">
+            <div class="header-text">
+              <h2>Hello Again</h2>
+              <p>we are happy to have you back.</p>
+            </div>
+
+            <div class="input-grup mb-3">
+              <input type="text" class="form-control form-control-lg bg-light fs-6" placeholder="Email Address" />
+            </div>
+            <div class="input-grup mb-3">
+              <input type="password" class="form-control form-control-lg bg-light fs-6" placeholder="Password" />
+            </div>
+
+            <!--  -->
+
+            <div class="input-grup mb-5 justify-content-between">
+              <div class="form-check">
+                <input type="checkbox" class="form-check-input" id="formCheck" />
+                <label for="form-check" class="form-check-label text-secondary"></label>
+              </div>
+              <div class="forgot">
+                <small><a href="">Forgot Password?</a></small>
+              </div>
+            </div>
+            <div class="input-group mb-3">
+              <button class="btn btn-lg btn-primary 100 fs-6">Login</button>
+            </div>
+            <div class="input-group mb-3">
+              <button class="btn btn-lg btn-light w-100 fs-6"><img src="g.png" style="width: 20px" class="me-2" />Sign In with Google</button>
+            </div>
+            <div class="row">
+              <small>Don't have account? <a href="">Sign Up</a></small>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/png1.png b/png1.png
diff --git a/style.css b/style.css
@@ -0,0 +1,33 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+
+body {
+  font-family: " Poppins", sans-serif;
+  background: #ececec;
+}
+
+.box-area {
+  width: 930px;
+}
+
+.right-box {
+  padding: 40px 30px 40px 40px;
+}
+
+::placeholder {
+  font-size: 16px;
+}
+
+@media only screen and (max-width: 768px) {
+  .box-area {
+    margin: 0 10px;
+  }
+
+  .left-box {
+    height: 100px;
+    overflow: hidden;
+  }
+
+  .right-box {
+    padding: 20px;
+  }
+}