Tugas 6 PWEB B

-
Nama : Stefanus Albert Kosim
NRP : 05111940000096
Kelas : MPPL-A 2021

Tugas ini adalah membuat sebuah form login beserta form contact us dengan menggunakan bootstrap.

Tampilan Login :

Tampilan Contact Us :


Source Code:
<!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">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="icon" type="image/png" href="img/icon.png">
<title>Contact</title>
</head>
<body>
<div class="container-fluid px-1 px-md-5 px-lg-1 px-xl-5 py-5 mx-auto">
<div class="row justify-content-center align-items-center m-auto">
<div id=login-form class="col-5">
<div class="logo px-4 py-5 mb-4 mt-2"></div>
<div id="container-login">
<form autocomplete="off" onsubmit="return submitForm()" class="py-3">
<div class="row px-3">
<label class="mb-1">
<h6 class="mb-0 text-sm">Name</h6>
</label>
<input class="mb-4" type="text" name="name" id="name" placeholder="Enter your name" required>
</div>
<div class="row px-3">
<label class="mb-1">
<h6 class="mb-0 text-sm">Email</h6>
</label>
<input class="mb-4" type="email" name="email" id="email" placeholder="Enter a valid email address" required>
</div>
<div class="row px-3">
<label class="mb-1">
<h6 class="mb-0 text-sm">Phone</h6>
</label>
<input class="mb-4" type="text" name="phone" id="phone" placeholder="Enter phone number" required>
</div>
<div class="row px-3">
<label class="mb-1">
<h6 class="mb-0 text-sm">Message</h6>
</label>
<textarea class="mb-4" type="text" name="message" id="message" placeholder="Enter your message" rows="5" required></textarea>
</div>
<div class="row mb-3 px-3">
<button type="submit" class="btn btn-blue text-center text-white-14 m-auto" name="submit"
id="submit" value="submit">Send</button>
</div>
</form>
<div class="mb-4">
<center>
<h5 class="font-weight-bold">Click <a href="index.html" class="text-info">here</a> if you want to login.</h5>
</center>
</div>
</div>
</div>
</div>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
let i = 0;
function slideShow() {
if (i > 13) i = 0;
let x = "img/bg" + toString(i) + ".jpg";
document.body.style.backgroundImage = "url('img/bg" + i + ".jpg')";
i++;
setTimeout(slideShow, 20000);
}
function submitForm() {
alert("Login berhasil");
}
slideShow();
</script>
</body>
</html>
view raw contact.html hosted with ❤ by GitHub
<!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">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="icon" type="image/png" href="img/icon.png">
<title>Login</title>
</head>
<body>
<div class="container-fluid px-1 px-md-5 px-lg-1 px-xl-5 py-5 mx-auto">
<div class="row justify-content-center align-items-center m-auto">
<div id=login-form class="col-4">
<div class="logo px-4 py-5 mb-4 mt-2"></div>
<div id="container-login">
<form autocomplete="off" onsubmit="return submitForm()">
<div class="row px-3">
<input class="mb-4 input-box mr-auto ml-auto" type="email" name="email" id="email"
placeholder="Email address / Username" required>
</div>
<div class="row px-3">
<input class="mb-4 input-box mr-auto ml-auto" type="password" name="password" id="password"
placeholder="Password" required>
</div>
<div class="row px-3 mb-4 ml-2">
<div class="custom-control custom-checkbox custom-control-inline">
<input id="chk1" type="checkbox" name="chk" class="custom-control-input">
<label for="chk1" class="custom-control-label text-sm">Remember me</label>
</div>
<a href="#" class="ml-auto mb-0 text-sm mr-4">Forgot Password?</a>
</div>
<div class="row mb-3 px-3">
<button type="submit" class="btn btn-blue text-center text-white-14 m-auto" name="submit"
id="submit" value="submit">Login</button>
</div>
<div class="row mb-3 px-3">
<button type="submit" class="btn btn-blue text-center text-white-14 m-auto" name="submit"
id="submit" value="submit">Create an Account</button>
</div>
</form>
<div class="mb-4">
<center>
<h5 class="font-weight-bold">Have a message for us? Please drop <a href="contact.html" class="text-info">here</a>.</h5>
</center>
</div>
</div>
</div>
</div>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
let i = 0;
function slideShow() {
if (i > 13) i = 0;
document.body.style.backgroundImage = "url('img/bg" + i + ".jpg')";
i++;
setTimeout(slideShow, 20000);
}
function submitForm() {
alert("Login berhasil");
}
slideShow();
</script>
</body>
</html>
view raw index.html hosted with ❤ by GitHub
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body {
color: #000;
overflow-x: hidden;
font-family: 'Poppins';
height: 100%;
background-repeat: no-repeat;
background-size: cover;
}
.create-account {
display: flex;
justify-content: flex-end;
}
#login-form {
background-color: hsla(0,0%,100%,.92);
}
.logo {
background-image: url('../img/logo.png');
background-repeat: no-repeat;
background-position-x: center;
background-size: contain;
}
::placeholder {
color: #bdbdbd;
opacity: 1;
font-weight: 300;
}
:-ms-input-placeholder {
color: #bdbdbd;
font-weight: 300;
}
::-ms-input-placeholder {
color: #bdbdbd;
font-weight: 300;
}
input, textarea {
padding: 10px 12px 10px 12px;
border: 1px solid lightgrey;
border-radius: 2px;
margin-bottom: 5px;
margin-top: 2px;
width: 100%;
box-sizing: border-box;
color: #2c3e50;
font-size: 14px;
letter-spacing: 1px;
resize: none;
}
.input-box {
width: 350px;
height: 35px;
}
.btn-blue {
background-color: #0096fa;
width: 350px;
height: 40px;
color: #fff;
border-style: none;
border-radius: 20px;
font-weight: 700;
}
.btn-blue:hover {
background-color: #007dd1;
}
h5 {
font-size: 16px;
}
view raw style.css hosted with ❤ by GitHub

]

Komentar

Posting Komentar

Postingan populer dari blog ini

MPPL A - Tugas 1

-
Gambar
Membangun Kompetensi untuk Kebutuhan Proyek Nama         : Stefanus Albert Kosim NRP        : 05111940000096 Kelas      : MPPL A Pada kesempatan ini, saya akan menuliskan hasil dari tugas MPPL yaitu bergabung ke situs proyek, mencari sebuah proyek yang diinginkan, kemudian membuat daftar skill yang diperlukan serta penguasaan skill tersebut. 1. Bergabung ke Situs Proyek Saya bergabung ke beberapa situs proyek, salah satu diantaranya adalah  https://projects.co.id/ . Registrasi di situs ini lebih mudah karena tidak diperlukan pekerjaan spesifik yang dimiliki saat mendaftar. Username dari akun saya adalah yanzkosim. Tampilan home setelah berhasil melakukan registrasi dan telah login dengan username yanzkosim 2. Temukan proyek yang sesuai Karena saya tertarik dengan Android Programming, maka saya memilih proyek yang berhubungan dengan Android Link menuju proyek bisa diklik disini Preview proyek yang dipilih 3. Membuat skill yang h...
Baca selengkapnya

MPPL A - Tugas 2

-
Tugas 2 Identifikasi Aplikasi Moka POS Nama     : Stefanus Albert Kosim NRP         : 05111940000096 Kelas      : MPPL A 2021 1. Identification of the Problems Kesulitan dalam mencatat dan menelusuri riwayat transaksi Dibutuhkan kalkulasi serta yang cepat dan benar Kesulitan mencatat stok dan harga produk Ramainya uang digital digunakan Kesulitan ketika transaksi yang terjadi sangat banyak 2. Identification of the Scope Scope dari aplikasi Moka POS adalah UMKM di seluruh Indonesia 3. Identification of the Deliverables Dapat berupa aplikasi web atau berupa hardware sekaligus softwarenya 4. Identification of the Stakeholders Pemilik usaha Pemilik startup Perusahaan pembayaran digital 5. Development of Business Case Aplikasi dapat menyimpan riwayat transaksi secara otomatis Penjual dapat mencari transaksi tertentu Penjual dapat melihat detail transaksi Aplikasi dapat menghitung total pembayaran di transaksi secara otomatis Aplikasi dap...
Baca selengkapnya

Tugas 1 PWEB-B (CV)

-
Gambar
Nama     : Stefanus Albert Kosim NRP        : 05111940000096 Kelas      : PWEB-B Pada kesempatan ini, saya akan menuliskan hasil dari tugas yang saya kerjakan. Dalam membuat CV ini, saya menggunakan pure HTML dan CSS dan dihosting menggunakan github Untuk CV dapat diakses disini Preview :  HTML :  CSS :
Baca selengkapnya