0% found this document useful (0 votes)
28 views3 pages

!DOCTYPE HTML

Mở đầu

Uploaded by

khoiphamvk123
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
28 views3 pages

!DOCTYPE HTML

Mở đầu

Uploaded by

khoiphamvk123
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>
<html>
<head>
<title>Pokemon Dictionary</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->


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

<!-- Latest compiled JavaScript -->


<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="welcome">
<p>Welcome to Pokemon Dictionary</p>
</div>
<div class="container">
<div class="bg-image"
style="background-image: url('Image/background_account.jpg');
height: 100vh">
</div>
<img src="Image/avatar_account.jpg" class="avatar_account" alt="Avatar
Account">
<div class="account">
<form method="post" action="login">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon
glyphicon-user"></i></span>
<input id="account" type="text" class="form-control"
name="account" placeholder="Tài khoản">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon
glyphicon-lock"></i></span>
<input id="password" type="password" class="form-control"
name="password" placeholder="Mật khẩu">
</div>
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox"> Lưu mật khẩu</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn
btn-success">Submit</button>
</div>
</div>
</form>
<form method="get" action="taotaikhoanmoi">
<div class="create_account">
<input type="submit" value="Tạo Tài Khoản"/>
</div>
</form>
</div>
</div>
</body>
</html>

.welcome{
text-align: center;
font-family: cursive;
font-size: 80px;
font-weight: bold;
margin-top: 50px;
color: black;
z-index: 2;
}
.bg-image {
background-size: cover;
background-position: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.account{
position: relative;
padding: 30px;
width: 40%;
left: 330px;
top: 50px;
}
.input-group{
padding: 10px;

}
.avatar_account{
display: inline;
height: 300px;
position: relative;
top: 40px;
left: 460px;
border-radius: 30px;
}
.btn-success{
font-weight: bold;
padding: 10px 15px;
font-size: 14px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: #04AA6D;
border: none;
border-radius: 12px;
box-shadow: 0 7px #999;
}
.btn-success:hover {
background-color: #3e8e41
}
.create_account a:link,
.create_account a:visited {
background-color: white;
color: black;
border: 2px solid green;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
}
.create_account a:hover,
.create_account a:active {
background-color: green;
color: white;
}
.create_account{
font-size: 15px;
font-weight: bold;
position: relative;
left: 250px;
bottom: 50px;
}

You might also like