Assalamu'alaikum Wr, Wb
pada kali ini saya akan memposting sebuah tutorial untuk mendesain sebuah halaman login dengan menggunakan bootstrap 4, langsung saja kita buat untuk langkah yang pertama yang harus dilakukan:
1. siapkan xampp kemudian jalankan apchenya.
2. siapkan text editor, kemudian ketikan script di bawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Login !!!!</title>
<link rel="icon" href="assets/images/favicon.ico">
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="assets/css/floating-labels.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="fullscreen_bg" class="fullscreen_bg"/>
<div class="container">
<form class="form-signin">
<h1 class="form-signin-heading" style="color: white;">Sign In</h1>
<div class="form-label-group">
<input class="form-control" name="inEmail" type="email" id="inEmail" placeholder="Email Address" required="">
<label for="inEmail">Email Address</label>
</div>
<div class="form-label-group">
<input class="form-control" name="inPass" type="password" id="inPass" placeholder="Password" required="">
<label for="inPass">Password</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">
Sign In
</button>
</form>
</div>
</body>
</html>
setelah selesai kemudian simpan script tersebut dengan extensi .php, dan disimpan di folder xampp/htdocs/desainlogin/
3. untuk mengecek hasil script diatas, masuk browser kemudian ketikan localhost/desainlogin/index.php
4. maka hasilnya akan menjadi seperti ini :
5. untuk mempercatik tampilan kita buatkan cssnya, ketikan script di bawah ini :
body {
padding-top: 120px;
padding-bottom: 40px;
background-color: #eee;
}
.btn
{
outline:0;
border:none;
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
box-shadow:inset 2px -3px rgba(0,0,0,0.15);
}
.btn:focus
{
outline:0;
-webkit-outline:0;
-moz-outline:0;
}
.fullscreen_bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
background-position: 50% 50%;
background-image: url('http://cleancanvas.herokuapp.com/img/backgrounds/color-splash.jpg');
background-repeat:repeat;
}
.form-signin {
max-width: 280px;
padding: 15px;
margin: 0 auto;
margin-top:50px;
}
.form-signin .form-signin-heading, .form-signin {
margin-bottom: 10px;
}
.form-signin .form-control {
position: relative;
font-size: 16px;
height: auto;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="text"] {
margin-bottom: -1px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-color: #000;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-color: rgb(0,0,0);
border-top:1px solid rgba(0,0,0,0.08);
}
.form-signin-heading {
color: #fff;
text-align: center;
text-shadow: 0 2px 2px rgba(0,0,0,0.5);
}
.form .h1{
color: white;
}
kemudian simpan di folder yang sama kemudian beri extensi style.css
6. kemudian di browser untuk merubah tampilannya, browsernya harus di refresh terlebih dahulu.
7. maka hasilnya akan berubah menjadi seperti ini :
8. sekian untuk tutorial kali ini , maaf jika ada salah-salah kata dari saya,
Wassalamu'alaikum, Wr, Wb
Komentar
Posting Komentar