<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Vimotech</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Righteous&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap" rel="stylesheet">
<link href="http://yoursite.com/favicon.ico" rel="shortcut icon" >
<style type="text/css" media="screen">
body{
background: url(file:///C:/Users/DELL/Downloads/about_us.jpg);
background-size: cover;
background-repeat: no-repeat;
margin: 0;
padding: 0;
font-family: 'Indie Flower', cursive;
}
.login{
margin: auto;
width: 450px;
height: 250px;
box-shadow: 7px 9px 16px 0px rgba(0,0,0, 0.81);
padding: 80px 40px;
margin-top: 80px;
border-radius: 20px;
color: #e0f681;
}
img{
margin-bottom: -30px
}
h1{
margin: 0 0 40px 0;
padding: 10px;
text-align: center;
margin-bottom: -30px;
}
input{
width: 50%;
margin-bottom: 30px;
text-align: center;
font-family: 'Righteous', cursive;
border-radius: 50px;
border-color: #ffffff;
background: transparent;
color: #ffffff;
padding: 10px;
}
input[type=password]{
margin-top: -40px;
}
.fas{
color: #ffffff;
}
button[type=submit]{
font-family: 'Permanent Marker', cursive;
border-radius: 5px;
margin-left: 20px;
background: rgb(34,193,195);
background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(158,253,45,0.9559174011401436) 100%);
}
.icon{
float: left;
border-radius: 5px;
color: #ffffff;
background: rgb(34,193,195);
background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(158,253,45,0.9559174011401436) 100%);
margin-left: 20px;
width: 50px;
}
.master{
margin-top: -30px;
}
</style>
<script type="text/javascript">
function myfunction(){
document.getElementBybutton("Login").innerHTML = "Mời Nhập Lại";
}
</script>
</head>
<body>
<div class="login">
<center><img src="https://i.imgur.com/Z2QYxkE.png" width="100" height="100"></center>
<h1>Vimotech</h1>
<h2><u><i>Đăng Nhập</i></u></h2>
<form>
<input type="text" name="Username" placeholder="Username"><i class="fas fa-user-alt"></i>
<input type="password" name="Password" placeholder="Password"><i class="fas fa-key"></i>
<button type="submit">Login <i class="fas fa-sign-in-alt"></i></button>
<button type="submit">Đăng Ký</button>
</form>
<div class="master">
<center><div class="icon"><i class="fab fa-facebook-f"></i></div></center>
<center><div class="icon"><i class="fab fa-google-plus-g"></i></div></center>
<center><div class="icon"><i class="fab fa-twitter"></i></div></center>
</div>
</div>
</body>
</html>