Membuat Halaman Login dan Contact Us Menggunakan Bootstrap

Pada blogpost ini saya belajar cara menggunakan Bootstrap untuk membuat halaman login dan contact us. Berikut adalah hasil dari pekerjaan saya.


Source Code:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<div id="login">
<h3 class="text-center text-white pt-5">Login form</h3>
<div class="container">
<p style="text-align: center;">
<img src="https://villavignesetsoleil.fr/images/login/avatar.png" alt="Login avatar" style="width:128px;height:128px;">
</p>
<div id="login-row" class="row justify-content-center align-items-center">
<div id="login-column" class="col-md-6">
<div id="login-box" class="col-md-12">
<form id="login-form" class="form" action="" method="post">
<h3 class="text-center text-info">Login</h3>
<div class="form-group">
<label for="username" class="text-info">Username:</label><br>
<input type="text" name="username" id="username" class="form-control">
</div>
<div class="form-group">
<label for="password" class="text-info">Password:</label><br>
<input type="text" name="password" id="password" class="form-control">
</div>
<div class="form-group">
<label for="remember-me" class="text-info"><span>Remember me</span> <span><input id="remember-me" name="remember-me" type="checkbox"></span></label><br>
<input type="submit" name="submit" class="btn btn-info btn-md" value="Submit">
</div>
<div id="contact-us" class="text-right">
<a href="contact.html" class="text-info">Contact Us</a>
</div>
<div id="register-link" class="text-right">
<a href="#" class="text-info">Register Here</a>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
view raw index.html hosted with ❤ by GitHub
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container contact-form" style="margin-top: 15%; margin-left: 34%">
<form method="post">
<h3 class="text-info">Contact Us</h3>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" name="txtName" class="form-control" placeholder="Your Name *" value="" />
</div>
<div class="form-group">
<input type="text" name="txtEmail" class="form-control" placeholder="Your Email *" value="" />
</div>
<div class="form-group">
<input type="text" name="txtPhone" class="form-control" placeholder="Your Phone Number *" value="" />
</div>
<div class="form-group">
<textarea name="txtMsg" class="form-control" placeholder="Your Message *" style="width: 100%; height: 150px;"></textarea>
</div>
<div class="form-group">
<button type="button" class="btn btn-info btn-md">Submit</button>
</div>
</div>
</div>
</div>
</form>
</div>
view raw contact.html hosted with ❤ by GitHub



Comments

Post a Comment

Popular posts from this blog

Game Pong Java

Image
 Pong adalah game arcade bertema tenis meja yang merupakan salah satu video game arcade paling awal. Game ini dibuat oleh Atari dan dirilis pada tahun 1972. Pong adalah video game pertama yang sukses secara komersial, dan itu membantu membangun industri video game. Berikut adalah kelas yang digunakan pada game ini: 1. Pong.java merupakan main class yang menginisialisasi kelas lain, membuat jframe, timer, score, serta control dari gamenya.  2. Renderer.java merupakan kelas untuk merender game. 3. Ball.java membuat Ball dimana Ball bergerak dengan kecepatan tertentu dan memantul saat menabrak sesuatu. 4. Paddle.java membuat Paddle yang akan dikontrol user dan bot. Class Diagram Source Code Pong.java Renderer.java Ball.java Paddle.java Output
Read more

File & Directory

Image
Dengan menggunakan library java.io, kita dapat membuat program kita membaca file dengan direktori yang diberikan.  Selain itu, kita juga dapat mengedit dan menyimpan suatu file yang telah dibuat atau dimodifikasi. Untuk menunjukkan ini, berikut adalah program text editor yang diambil dari geeksforgeeks yang menggunakan Java Swing untuk membuat GUI dari program text editor ini.  Program ini menggunakan JFileChooser yang dapat diakses menggunakan Java Swing untuk menangani file, terutama untuk membuka dan menyimpan file.  Program ini menggunakan satu kelas dengan tiga method: 1. Method editor membuat GUI (termasuk frame, menu bar, dan menu item) dan ActionListener untuk program text editor ini. 2. Method actionPerformed memberitahukan program apa yang akan terjadi setelah user mengklik salah satu dari menu item dari program text editor ini. Program akan melakukan file handling setelah menu item "open" untuk membuka file atau "save" untuk menyimpan file diklik. 3. Meth...
Read more