This content originally appeared on DEV Community and was authored by ofameh
After 5 days of progressive HTML learning, I'm very happy that we are in the final phase of this all, the project-based section of this course, where I just build websites and challenge myself...
A simple user-login & Signup page
Link to project User Page
HTMl for Sign up page-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Signup Page</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<h2>User Login Page</h2>
</header>
<section>
<main style="text-align: center;">
<br/>
<br/>
<b> <h3> Enter Login Details </h3> <br/>
</main>
<article class="container">
<br/>
<form>
<b> <label for="email"> Email </label> <b> <br/>
<input type="email" id="email" name="email"> <br/>
<br/>
<b> <label for="password"> Password </label> </b> <br/>
<input type="password" id="password" name="password"> <br/>
<br/>
<button>Submit</button> <br/>
</form>
<br/>
<p>
Don't Have An Account? <a href="signup.html">Sign Up</a>
</p>
</article>
</section>
<section>
</section>
</body>
</html>
HTML for Sign Up page-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Signup Page</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<h2>User Signup Page</h2>
</header>
<section>
<main style="text-align: center;">
<br/>
<br/>
<b> <h3> Enter Signup Details </h3> <br/>
</main>
<article class="container">
<br/>
<form>
<b> <label for="fname"> First Name </label><br/>
<input type="text" id="fname" name="fname"><br/>
<br/>
<b> <label for="lname"> Last Name </label> <br/>
<input type="text" id="lname" name="lname"> <br/>
<br/>
<b> <label for="email"> Email </label> <b> <br/>
<input type="email" id="email" name="email"> <br/>
<br/>
<b> <label for="password"> Password </label> </b> <br/>
<input type="password" id="password" name="password"> <br/>
<br/>
<button>Submit</button> <br/>
</form>
<br/>
<p>
Already Have An Account? <a href="index.html">Sign In</a>
</p>
</article>
</section>
<section>
</section>
</body>
</html>
CSS styles-
/* Basic reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
/* Body styles */
body {
background-color: antiquewhite;
display: flex;
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
flex-direction: column;
}
/* Header styles */
header {
text-align: center;
margin-bottom: 20px; /* Add some space between the header and the content */
}
/* Article styles */
article {
border: 1px solid black;
padding: 20px; /* Add some padding inside the border */
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-family: Tahoma, sans-serif;
background-color: antiquewhite; /* Add background color for better visibility */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Optional: Add some shadow for better look */
}
/* h3 styles */
h3 {
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
"Lucida Sans", Arial, sans-serif;
}
button {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
color: black;
border: none;
border-radius: 5px;
text-align: center;
text-decoration: none;
cursor: pointer;
background-color: #ccc;
transition: background-color 0.3s ease, transform 0.3s ease;
}
button:hover {
background-color: black;
transform: translateY(-2px);
color: white;
}
Simple interactive user login & signup website...
This content originally appeared on DEV Community and was authored by ofameh
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
ofameh | Sciencx (2024-08-07T23:37:12+00:00) Day 6/10- Websites for Days. Retrieved from https://www.scien.cx/2024/08/07/day-6-10-websites-for-days/
" » Day 6/10- Websites for Days." ofameh | Sciencx - Wednesday August 7, 2024, https://www.scien.cx/2024/08/07/day-6-10-websites-for-days/
HARVARDofameh | Sciencx Wednesday August 7, 2024 » Day 6/10- Websites for Days., viewed ,<https://www.scien.cx/2024/08/07/day-6-10-websites-for-days/>
VANCOUVERofameh | Sciencx - » Day 6/10- Websites for Days. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/08/07/day-6-10-websites-for-days/
CHICAGO" » Day 6/10- Websites for Days." ofameh | Sciencx - Accessed . https://www.scien.cx/2024/08/07/day-6-10-websites-for-days/
IEEE" » Day 6/10- Websites for Days." ofameh | Sciencx [Online]. Available: https://www.scien.cx/2024/08/07/day-6-10-websites-for-days/. [Accessed: ]
rf:citation » Day 6/10- Websites for Days | ofameh | Sciencx | https://www.scien.cx/2024/08/07/day-6-10-websites-for-days/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.