Tugas Pertemuan 10 PWEB

-

Nama  : Moh. Rizky Rahmadian Makkani

NRP    : 5025231035

Kelas : PWEB E

Tugas Pertemuan 10 : PWEB



index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>Login Form</title>
    <!-- Font Awesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
    />
    <!-- Google Fonts Roboto -->
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap"
    />
    <!-- MDB -->
    <link rel="stylesheet" href="css/mdb.min.css" />
  </head>
  <body>
    <!-- Section: Design Block -->
      <section class="background-radial-gradient overflow-hidden">
        <style>
          .background-radial-gradient {
            background-color: hsl(218, 41%, 15%);
            background-image: radial-gradient(650px circle at 0% 0%,
                hsl(218, 41%, 35%) 15%,
                hsl(218, 41%, 30%) 35%,
                hsl(218, 41%, 20%) 75%,
                hsl(218, 41%, 19%) 80%,
                transparent 100%),
              radial-gradient(1250px circle at 100% 100%,
                hsl(218, 41%, 45%) 15%,
                hsl(218, 41%, 30%) 35%,
                hsl(218, 41%, 20%) 75%,
                hsl(218, 41%, 19%) 80%,
                transparent 100%);
          }

          #radius-shape-1 {
            height: 220px;
            width: 220px;
            top: -60px;
            left: -130px;
            background: radial-gradient(#44006b, #ad1fff);
            overflow: hidden;
          }

          #radius-shape-2 {
            border-radius: 38% 62% 63% 37% / 70% 33% 67% 30%;
            bottom: -60px;
            right: -110px;
            width: 300px;
            height: 300px;
            background: radial-gradient(#44006b, #ad1fff);
            overflow: hidden;
          }

          .bg-glass {
            background-color: hsla(0, 0%, 100%, 0.9) !important;
            backdrop-filter: saturate(200%) blur(25px);
          }
        </style>

        <div class="container px-4 py-5 px-md-5 text-center text-lg-start my-5">
          <div class="row gx-lg-5 align-items-center mb-5">
            <div class="col-lg-6 mb-5 mb-lg-0" style="z-index: 10">
              <h1 class="my-5 display-5 fw-bold ls-tight" style="color: hsl(218, 81%, 95%)">
                The best offer <br />
                <span style="color: hsl(218, 81%, 75%)">for your business</span>
              </h1>
              <p class="mb-4 opacity-70" style="color: hsl(218, 81%, 85%)">
                Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                Temporibus, expedita iusto veniam atque, magni tempora mollitia
                dolorum consequatur nulla, neque debitis eos reprehenderit quasi
                ab ipsum nisi dolorem modi. Quos?
              </p>
            </div>

            <div class="col-lg-6 mb-5 mb-lg-0 position-relative">
              <div id="radius-shape-1" class="position-absolute rounded-circle shadow-5-strong"></div>
              <div id="radius-shape-2" class="position-absolute shadow-5-strong"></div>

              <div class="card bg-glass">
                <div class="card-body px-4 py-5 px-md-5">
                  <form>
                    <!-- 2 column grid layout with text inputs for the first and last names -->
                    <div class="row">
                      <div class="col-md-6 mb-4">
                        <div data-mdb-input-init class="form-outline">
                          <input type="text" id="form3Example1" class="form-control" />
                          <label class="form-label" for="form3Example1">First name</label>
                        </div>
                      </div>
                      <div class="col-md-6 mb-4">
                        <div data-mdb-input-init class="form-outline">
                          <input type="text" id="form3Example2" class="form-control" />
                          <label class="form-label" for="form3Example2">Last name</label>
                        </div>
                      </div>
                    </div>

                    <!-- Email input -->
                    <div data-mdb-input-init class="form-outline mb-4">
                      <input type="email" id="form3Example3" class="form-control" />
                      <label class="form-label" for="form3Example3">Email address</label>
                    </div>

                    <!-- Password input -->
                    <div data-mdb-input-init class="form-outline mb-4">
                      <input type="password" id="form3Example4" class="form-control" />
                      <label class="form-label" for="form3Example4">Password</label>
                    </div>

                    <!-- Checkbox -->
                    <div class="form-check d-flex justify-content-center mb-4">
                      <input class="form-check-input me-2" type="checkbox" value="" id="form2Example33" checked />
                      <label class="form-check-label" for="form2Example33">
                        Subscribe to our newsletter
                      </label>
                    </div>

                    <!-- Submit button -->
                    <button type="submit" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-block mb-4">
                      Sign up
                    </button>

                    <!-- Register buttons -->
                    <div class="text-center">
                      <p>or sign up with:</p>
                      <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-floating mx-1">
                        <i class="fab fa-facebook-f"></i>
                      </button>

                      <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-floating mx-1">
                        <i class="fab fa-google"></i>
                      </button>

                      <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-floating mx-1">
                        <i class="fab fa-twitter"></i>
                      </button>

                      <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-floating mx-1">
                        <i class="fab fa-github"></i>
                      </button>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- Section: Design Block -->
    <!-- MDB -->
    <script type="text/javascript" src="js/mdb.umd.min.js"></script>
    <!-- Custom scripts -->
    <script type="text/javascript"></script>
  </body>
</html>



Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas 2 PBO : Konsep OOP

-
Gambar
 Nama : Moh. Rizky Rahmadian Makkani NRP : 5025231035 Kelas : PBO A Tugas Pertemuan 2 : Konsep OOP 1. Apa itu C lass?      Class adalah konsep dasar dalam pemrograman berbasis objek (OOP) yang berfungsi sebagai cetak biru atau blueprint untuk menciptakan objek, membuat pemrograman menjadi lebih terstruktur dan efisien.      Analoginya, class seperti gambar desain yang digunakan oleh seorang arsitek untuk membangun sebuah rumah. Gambar arsitektur tersebut mendefinisikan struktur, tata letak, dan bentuk rumah yang akan dibangun. Secara serupa, class dalam pemrograman mendefinisikan struktur dan perilaku dari object yang akan diciptakan. 2. Apa itu Object?      Yang dimaksud dengan objek pada java adalah sekumpulan software yang terdiri dari variable dan method-method yang terkait. Objek juga merupakan benda nyata yang di buat berdasarkan rancangan yang di definisikan di dalam class      Object adalah instance dari class. Jik...
Baca selengkapnya

Tugas Pertemuan 14 PBO

-
Gambar
Nama    : Moh. Rizky Rahmadian Makkani NRP     : 5025231035 Kelas : PBO A Tugas Pertemuan 14 : PBO 1. Membuat frame windows user login dan password. Code LoginWindow.java : import javax.swing.*; import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; public class LoginWindow { public static void main (String[] args) { // Membuat frame JFrame frame = new JFrame( "Login" ); frame.setSize( 300 , 150 ); frame.setDefaultCloseOperation(JFrame. EXIT_ON_CLOSE ); frame.setLayout( new GridLayout( 3 , 2 , 5 , 5 )); // Komponen GUI JLabel usernameLabel = new JLabel( "Username:" ); JTextField usernameField = new JTextField(); JLabel passwordLabel = new JLabel( "Password:" ); JPasswordField passwordField = new JPasswordField(); JButton loginButton = new JButton( "Login" ); JButton cancelButton = new JButton( "Cancel"...
Baca selengkapnya

Tugas Pertemuan 10 PBO

-
Gambar
  Nama    : Moh. Rizky Rahmadian Makkani NRP     : 5025231035 Kelas : PBO A Tugas Pertemuan 10 : PBO Code SalesItem.java : import java.util.ArrayList; import java.util.Iterator; public class SalesItem { private String name ; private int price ; // in cents private ArrayList<Comment> comments ; public SalesItem (String name, int price) { this . name = name; this . price = price; comments = new ArrayList<Comment>(); } public String getName () { return name ; } public int getPrice () { return price ; } public int getNumberOfComments () { return comments .size(); } public boolean addComment (String author, String text, int rating) { if (ratingInvalid(rating)) { // reject invalid ratings return false ; } if (findCommentByAuthor(author) != null ) { return false ; } comments .add(...
Baca selengkapnya