INTERACTIVE MEDIA DESIGN(Finals): Signup/Log-in
ACTIVITY 3.4
RESULT:
HTML LOGIN:
<!DOCTYPE html>
<head>
<title>LOGIN | SIGNUP FORM</title>
<link rel="stylesheet" href="SL.css" />
</head>
<body>
<div class="login-box">
<h1>LOGIN HERE</h1>
<form>
<label>EMAIL</label>
<input type="email" placeholder="" />
<label>PASSWORD</label>
<input type="password" placeholder="" />
<input type="button" value="SUBMIT" />
</form>
<p class="para-2">
Dont have an account yet? <a href="SIGNUP.html">Sign Up Here</a>
</p>
</div>
</body>
</html>
SIGNUP HTML:
<!DOCTYPE html>
<head>
<title>SIGN UP | LOGIN FORM</title>
<link rel="stylesheet" href="SL.css" />
</head>
<body>
<div class="signup-box">
<h1>SIGN UP NOW</h1>
<h4> This may take a few minutes. </h4>
<form>
<label>FIRST NAME</label>
<input type="text" placeholder="" />
<label>LAST NAME</label>
<input type="text" placeholder="" />
<label>EMAIL</label>
<input type="email" placeholder="" />
<label>PASSWORD</label>
<input type="password" placeholder="" />
<label>CONFIRM PASSWORD</label>
<input type="password" placeholder="" />
<input type="button" value="SUBMIT" />
</form>
<p class="para-2">
Already have an account? <a href="LOGIN.html">Login here</a>
</p>
</div>
</body>
</html>
CSS:
body {
background-image:url('giphy.gif'); background-repeat:repeat;;
font-family: "Century Gothic";
}
.signup-box {
width: 400px;
height: 600px;
margin: auto;
background-color: #FFFFFF40;
border-radius: 3px;
}
.login-box {
width: 390px;
height: 400px;
margin: auto;
border-radius: 3px;
background-color: #FFFFFF40;
}
h1 {
font-family: 'Century Gothic';
text-align: center;
padding-top: 40px;
}
h4 {
font-family: 'Century Gothic';
text-align: center;
}
form {
width: 325px;
margin-left: 25px;
}
form label {
display: flex;
margin-top: 20px;
font-size: 15px;
}
form input {
width: 100%;
padding: 7px;
border: none;
border: 1px solid gray;
border-radius: 6px;
outline: none;
}
input[type="button"] {
width: 340px;
height: 35px;
margin-top: 20px;
border: none;
background-color: #9B96D8;
color: white;
font-size: 18px;
}
p {
text-align: center;
padding-top: 40px;
font-size: 15px;
font-family: 'Century Gothic';
}
.para-2 {
text-align: center;
color: #000000;
font-size: 15px;
margin-top: 5px;
}
.para-2 a {
color: #FCC300;
}
Comments
Post a Comment