Skip to content

Instantly share code, notes, and snippets.

@amin007

amin007/login.html

Created July 22, 2019 07:17
Show Gist options
  • Save amin007/c6c6709766d1573b2f04f972bbdfba36 to your computer and use it in GitHub Desktop.
Save amin007/c6c6709766d1573b2f04f972bbdfba36 to your computer and use it in GitHub Desktop.
Download ZIP
Mengayakan borang daftar
Raw
login.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 name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Contoh Borang Login</title>
<link href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" rel="stylesheet" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<style type="text/css">
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
width: 100%;
display: table;
font-weight: 100;
}
.kotakAtas {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.kotakTengah {
text-align: center;
display: inline-block;
}
</style>
<style type="text/css">
table.excel {
border-style:ridge;
border-width:1;
border-collapse:collapse;
font-family:sans-serif;
font-size:11px;
}
table.excel thead th, table.excel tbody th {
background:#CCCCCC;
border-style:ridge;
border-width:1;
text-align: center;
vertical-align: top;
}
table.excel tbody th { text-align:center; vertical-align: top; }
table.excel tbody td { vertical-align:bottom; }
table.excel tbody td
{
padding: 0 3px; border: 1px solid #aaaaaa;
background:#ffffff;
}
</style>
</head>
<body>
<div class="kotakAtas">
<div class="kotakTengah">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="anjung-tab" data-toggle="tab" href="#anjung" role="tab" aria-controls="anjung" aria-selected="true">Anjung</a>
</li>
<li class="nav-item">
<a class="nav-link" id="warna-tab" data-toggle="tab" href="#warna" role="tab" aria-controls="warna" aria-selected="false">Warna</a>
</li>
<li class="nav-item">
<a class="nav-link" id="login-tab" data-toggle="tab" href="#login" role="tab" aria-controls="login" aria-selected="false">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" id="daftar-tab" data-toggle="tab" href="#daftar" role="tab" aria-controls="daftar" aria-selected="false">Daftar</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="anjung" role="tabpanel" aria-labelledby="anjung-tab">
<!-- ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
<br><form class="bg-light">
<div class="form-group">
<label for="a" class="text-info">Selamat datang ke halaman kami</label>
</div>
<div class="form-group">
<label for="b" class="text-dark">Macam mana kehidupan anda pada hari ini</label>
</div>
<div class="form-group">
<label for="c" class="text-success">Semoga anda ceria sepanjang masa</label>
</div>
</form><!-- ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
</div>
<div class="tab-pane fade" id="warna" role="tabpanel" aria-labelledby="warna-tab">
<!-- ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
<br> <div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div><!-- ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
</div>
<div class="tab-pane fade" id="login" role="tabpanel" aria-labelledby="login-tab">
<!-- ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
<br><form>
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="email" class="form-control form-control-lg" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Masukkan Email">
<small id="emailHelp" class="form-text text-muted">Kita berjanji tidak akan berkongsi kasih<br>
eh salah berkongsi email dengan orang lain.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Rahsia Antara Kita</label>
<input type="password" class="form-control form-control-lg" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Kenang daku dalam doamu</label>
</div>
<input type="submit" class="btn btn-primary btn-block" value="Hantar">
</form><!-- ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
</div>
<div class="tab-pane fade" id="daftar" role="tabpanel" aria-labelledby="daftar-tab">
<!-- ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
<br><form>
<div class="form-group">
<div class="bg-secondary text-white"><label for="contohNama">Nama</label></div>
<input type="email" class="form-control" placeholder="Masukkan Nama Gelaran">
<div class="bg-secondary text-white"><label for="contohEmail">Email</label></div>
<input type="email" class="form-control" placeholder="Masukkan Email">
<div class="bg-secondary text-white"><label for="contohPassword">Rahsia Antara Kita</label></div>
<input type="password" class="form-control" placeholder="Password">
<input type="submit" class="btn btn-primary btn-block" value="Simpan">
</div><!-- / class="form-group" -->
</form><!-- ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
</div>
</div>
</div><!-- / class="kotakTengah" -->
</div><!-- / class="kotakAtas" -->
<!-- Footer
================================================== -->
<!-- footer class="footer">
<div class="container">
<span class="label label-info">
&copy; Hak Cipta Terperihara 2019. Theme Asal Bootstrap Twitter
</span>
</div>
</footer -->
<!-- khas untuk jquery dan js2 lain
================================================== -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment