So in my websites login page I want the user to be sent to a page named textbox.html after they click login which is an input tag so is there any way i can put an anchor tag inside of a input tag? here is the code. The main thing here is the login.html as i have already finished index.html home page
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Pacific</title>
</head>
<body>
<nav>
<h1>
<ul>
<li class="name2"><strong>Pacific</strong></li>
<li><a href="/index.html"> <strong>Home</strong> </a></li>
<li><a href="/html/about.html"><strong>About</strong></a></li>
<li><a href="/html/contacts.html"><strong>Contact Us</strong></a></li>
</ul>
</h1>
</nav>
<h1 class="name">Pacific</h1>
<h2 class="centre"> <a href="/login.html"><strong>Get Started</strong> </a></h2>
<div>
<p class="description"> <strong>
Get started with pacific and manage <br>
your projects better, Let's say you <br>
are writing an essay for your school <br>
or sending an important email to <br>
your boss.Look up the best <br>
words to use and when to <br>
use, Pacific corrects imperfect grammer and <br>
spelling mistakes has a translation tool,<br>
Paragraph tool,Bold,Italic etc <br>
Get Started with Pacific Right Now! <br> </strong>
</p>
<ul>
<li><a href="/index.html"> <strong>Home</strong> </a></li>
<li><a href="/html/about.html"><strong>About</strong></a></li>
<li><a href="/html/contacts.html"><strong>Contact Us</strong></a></li>
</ul>
</div>
</body>
</html>
Login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css">
<title>Pacific/login</title>
</head>
<body>
<div class="loginbox">
<img src="/img/avatar.png" class="avatar">
<h1 class="H">Login Here</h1>
<form>
<p>Username</p>
<input type="text" name="" placeholder="Enter Username">
<p>Password</p>
<input type="password" name="" placeholder="Enter Password">
<input type="submit" name="" value="Login">
<a href="#">Lost your password?</a><br>
<a href="#">Don't have an account?</a>
</form>
</div>
</div>
</body>
</html>
Style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
@font-face{
src: url(/fonts/Coiny-Regular.ttf);
font-family: Coiny;
}
body, html{
background-image: url(/img/BackGround.png);
background-repeat: no-repeat;
background-size: cover;
font-family: Arial, Helvetica, sans-serif;
}
.name{
text-decoration: none;
font-family: Coiny;
font-size: 60px;
padding-top: 60px;
padding-left: 150px;
color: black;
}
.centre{
position: absolute;
display: flex;
justify-content: center;
text-align: center;
padding-top: 80px;
padding-left: 760px;
}
.center{
position: absolute;
display: flex;
justify-content: center;
text-align: center;
padding-top: 80px;
padding-left: 570px;
}
h2 a{
position: absolute;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
color: black;
font-style: italic;
font-size: 40px;
padding: 20px;
border: solid;
border-width: 5px;
border-color: purple;
background-color: purple;
border-style: solid;
border-radius: 24px;
}
.description{
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
padding-left: 70px;
padding-top: 20px;
font-size: 22.5px;
color: black;
padding-bottom: 20px;
}
li {
display: inline-block;
padding: 20px;
padding-left: 40px;
list-style: none;
text-decoration: none;
}
li a{
display: inline-block;
padding: 10px;
list-style: none;
text-decoration: none;
font-family: Coiny;
font-size: 30px;
color: black;
}
a{
border-color: purple ;
border-width: 3px;
border-style: solid;
border-radius: 12px;
}
nav li a {
border-color: purple;
padding-left: 10px;
padding-right: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
.name2{
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 40px;
padding-left: 20px;
color: black;
}
.loginbox{
width: 320px;
height: 420px;
background: #000;
color: #fff;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%,-50%);
box-sizing: border-box;
padding: 70px 30px;
}
.avatar{
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: -50px;
left: calc(50% - 50px);
}
.H{
margin: 0;
padding: 0 0 20px;
text-align: center;
font-size: 22px;
font-family: Arial, Helvetica, sans-serif;
}
.loginbox p{
margin: 0;
padding: 0;
font-weight: bold;
}
.loginbox input{
width: 100%;
margin-bottom: 20px;
}
.loginbox input[type="text"], input[type="password"]
{
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
}
.loginbox input[type="submit"]
{
border: none;
outline: none;
height: 40px;
background: #fb2525;
color: #fff;
font-size: 18px;
border-radius: 20px;
}
.loginbox input[type="submit"]:hover
{
cursor: pointer;
background: #ffc107;
color: #000;
}
.loginbox a{
text-decoration: none;
font-size: 12px;
line-height: 20px;
color: darkgrey;
border-style: none;
}
.loginbox a:hover
{
color: #ffc107;
}
Aucun commentaire:
Enregistrer un commentaire