Tugas Pemrograman Web - D
Jonathan Timothy Siregar
0511194000120
Hai, Saya Jonathan Timothy Siregar mahasiswa Teknik Informatika ITS angkatan 2019. Pada mata kuliah Pemrograman Web ini diberikan sebuah tugas untuk membangun sebuah situs berisikan Bootstrap dari suatu Form login dan juga form contact us.
Pada HTML yang saya buat, terdapat metode bootstrap, serta file gambar bertipe jpg. Kombinasi dari keseluruhan file ini akan dilampirkan di bawah.
Berikut Lampiran dari pengerjaan web saya :
https://bootsrap-jonathants.netlify.app/
Login page
Contact us
HTML Form Login:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Snippet - BBBootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet"/>
<script type="text/javascript" src=""></script>
<style>
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background: #ecf0f3;
}
.wrapper {
max-width: 550px;
min-height: 500px;
margin: 80px auto;
padding: 40px 30px 30px 30px;
background-color: #ecf0f3;
border-radius: 15px;
box-shadow: 13px 13px 20px #cbced1, -13px -13px 20px #fff;
}
.logo {
width: 80px;
margin: auto;
}
.logo img {
width: 100%;
height: 80px;
object-fit: cover;
border-radius: 50%;
box-shadow: 0px 0px 3px #5f5f5f, 0px 0px 0px 5px #ecf0f3,
8px 8px 15px #a7aaa7, -8px -8px 15px #fff;
}
.wrapper .name {
font-weight: 600;
font-size: 1.4rem;
letter-spacing: 1.3px;
padding-left: 10px;
color: #555;
}
.wrapper .form-field input {
width: 200%;
display: block;
border: none;
outline: none;
background: none;
font-size: 1.2rem;
color: #666;
padding: 10px 15px 10px 10px;
}
.wrapper .form-field {
padding-left: 100px;
margin-bottom: 20px;
border-radius: 20px;
box-shadow: inset 8px 8px 8px #cbced1, inset -8px -8px 8px #fff;
}
.wrapper .form-field .fas {
color: #555;
}
.wrapper .btn {
box-shadow: none;
width: 100%;
height: 40px;
background-color: #0182be;
color: #fff;
border-radius: 25px;
box-shadow: 3px 3px 3px #b1b1b1, -3px -3px 3px #fff;
letter-spacing: 1.3px;
}
.wrapper .btn:hover {
background-color: #00a8fc;
}
.wrapper a {
text-decoration: none;
font-size: 0.8rem;
color: #03a9f4;
}
.wrapper a:hover {
color: #039be5;
}
@media (max-width: 380px) {
.wrapper {
margin: 30px 20px;
padding: 40px 15px 15px 15px;
}
}
</style>
</head>
<body oncontextmenu="return false" class="snippet-body" style="background-image: url('bg.jpeg');background-repeat: no-repeat; background-size: cover;">
<div class="wrapper">
<div class="logo">
<img src="j.png"alt=""/>
</div>
<div class="text-center mt-4 name">jonathantsite</div>
<form class="p-3 mt-3">
<div class="form-field d-flex align-items-center text-align-center">
<span class="far fa-user"></span>
<input type="text"name="userName"id="userName" placeholder="Username"/>
</div>
<div class="form-field d-flex align-items-center">
<span class="fas fa-key"></span>
<input type="password" name="password" id="pwd" placeholder="Password"/>
</div>
<button class="btn mt-3">Login</button>
</form>
<div class="text-center fs-6"> <a href="contact.html">Contact Us</a></div>
</div>
</body>
</html>
HTML Contact us :
<!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">
<title>Document</title>
<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>
<!------ Include the above in your HEAD tag ---------->
</head>
<body style="background-image: url('bg.jpeg');background-repeat: no-repeat; background-size: cover; margin-top: 200px">
<div class="container contact-form">
<div class="contact-image" style="margin-left: 450px;">
<img src="j.png" alt="jonathantsite"/>
</div>
<form method="post">
<h3 style="margin-left: 450px; color: antiquewhite;">CONTACT US</h3>
<br><br>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" name="txtName" class="form-control" placeholder="Username" value="" />
</div>
<div class="form-group">
<input type="text" name="txtEmail" class="form-control" placeholder="Email" value="" />
</div>
<div class="form-group">
<input type="text" name="txtPhone" class="form-control" placeholder="Phone Number" value="" />
</div>
<div class="form-group">
<input type="submit" name="btnSubmit" class="btn-primary" value="Submit" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<textarea name="txtMsg" class="form-control" placeholder="Message" style="width: 100%; height: 150px;"></textarea>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
Sekian Dokumentasi bootstrap saya, terima kasih
Comments
Post a Comment