Tugas 6 PWEB D

Login page dan Contact Me

    Pada kesempatan kali ini saya akan membagikan artikel mengenai pembuatan login page dan contact me dengan menggunakan bantuan bootsrap.

    login page dan contact me menggunakan bahasa pemrograman html dan css dan js. berikut adalah tampilannya.

 

 

 

 

 

 

 

 

 

 

 

Login page & Contact Me

Berikut adalah link aksesnya : https://ianm27.github.io/login-contact_me/

Source Code

Berikut adalah source code dari login page dan contact me

HTML

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1" />

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />

<link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css" />

<link rel="stylesheet" href="./style.css" />

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js"></script>

<title>Landing Pages</title>

</head>

<body>

<div class="text-light" id="homepg">

<div class="buttons" data-aos="fade-in" data-aos-delay="300" data-aos-duration="1000">

<h1 class="font-weight-bold">Hello everyone !!!</h1>

<div data-aos="zoom-in-up" data-aos-delay="300" data-aos-duration="1000">

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#ModalSignin" id="btn-login">Login</button>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#ModalContact" id="btn-contact">Contact Me</button>

</div>

</div>

</div>

<div class="modal fade" data-backdrop="static" id="ModalContact">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

<h4 class="modal-title font-weight-bold">Contact Me</h4>

<button type="button" class="close" data-dismiss="modal" aria-label="Close">

<span aria-hidden="true">&times;</span>

</button>

</div>

<form id="msgsend">

<div class="modal-body">

<div class="form-group">

<label for="EmailInput">Your Email Address :</label>

<input type="email" class="form-control" id="EmailInput" placeholder="example@email.com" required />

</div>

<div class="form-group">

<label for="MessageInput">Your Message :</label>

<textarea class="form-control" id="MessageInput" rows="3" required></textarea>

</div>

</div>

</form>

<div class="modal-footer">

<a href="./index.html" class="btn btn-primary disabled" role="button" type="submit" id="SendButton"> Send </a>

</div>

</div>

</div>

</div>

<div class="modal fade" data-backdrop="static" id="ModalSignin">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

<h4 class="modal-title font-weight-bold">Login</h4>

<button type="button" class="close" data-dismiss="modal" aria-label="Close">

<span aria-hidden="true">&times;</span>

</button>

</div>

<form id="msgsend">

<div class="modal-body">

<div class="form-group">

<label for="EmailInput2">Email Address :</label>

<input type="email" class="form-control" id="EmailInput2" placeholder="example@email.com" required />

</div>

<div class="form-group">

<label for="PassInput">Password :</label>

<input type="password" class="form-control" id="PassInput" placeholder="***********" required />

</div>

</div>

</form>

<div class="modal-footer">

<a href="./index.html" class="btn btn-primary disabled" role="button" type="submit" id="SendButton2"> Login </a>

</div>

</div>

</div>

</div>

<script>

$(document).ready(function () {

$("#EmailInput, #MessageInput").on("input change", function () {

if ($("#EmailInput").valid() && $("#MessageInput").valid()) {

$("#SendButton").removeClass("disabled");

} else {

$("#SendButton").addClass("disabled");

}

});

$("#EmailInput2, #PassInput").on("input change", function () {

if ($("#EmailInput2").valid() && $("#PassInput").valid()) {

$("#SendButton2").removeClass("disabled");

} else {

$("#SendButton2").addClass("disabled");

}

});

});

AOS.init();

</script>

</body>

</html>

 

CSS

body {

background: rgb(219, 219, 219);

}

#homepg {

width: 100vw;

height: 100vh;

position: relative;

}

h1 {

color: black;

}

#homepg .buttons {

position: absolute;

bottom: 0;

top: 0;

left: 0;

right: 0;

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

text-align: center;

}

#homepg .btn-primary {

margin-top: 10px;

margin-left: 10px;

margin-right: 10px;

}

#homepg .btn-primary:hover {

background: rgb(131, 131, 131);

}

label.error {

color: red;

font-size: 0.7rem;

display: block;

margin-top: 5px;

}

 

    Sekian artikel pada kesempatan kali sampai jumpa di artikel selanjutnya, terimakasih.