Day 10 of learning HTML and CSS! Today I have been able to create a Sign-up form after checking an Inspiration from Pinterest. How do you rate my job?
1 Like
if you want to share your code, post your code, do not post a screenshot
Okay here it is
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Project</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<main>
<section class="container">
<h2> Registration Form</h2>
<form>
<input type="text" placeholder="Name" required class="input"> <br>
<input type="email" placeholder="Email" required class="input"><br>
<input type="text" placeholder="Country" required class="input"><br>
<input type="text" placeholder="Phone" required class="input"><br>
<input type="password" placeholder="Password" required class="input"><br>
<input type="checkbox" class="checkbox">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eveniet, sapiente veritatis. Earum, neque? <br>
<button type="submit">CREATE ACCOUNT</button>
</form>
<p>Already have an account? <a href="#">Sign in</a></p>
</section>
</main>
</body>
</html>
CSS:
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
font-size: 1rem;
width: 100%;
background-color: #E0FBE2;
}
.container {
width: 30%;
height:45%;
margin: 3rem auto;
/* border: 2px solid #40A578; */
background-color: white;
padding:40px;
text-align: center;
box-shadow: 1px 5px 10px 1px rgba(0, 0, 0, 0.274);
}
.input {
margin: 0.8rem auto;
width: 100%;
border: none;
border-bottom: 0.1rem solid #40A578;
font-size: 1rem;
padding: 0.1rem;
}
input, button {
font: inherit;
}
.checkbox {
margin-top: 1rem;
}
button {
width: 80%;
margin: 15px;
padding: 10px;
font-weight: 500;
background-color: #40A578;
border: none;
color: white;
}
h2 {
color: #006769;
}
a {
color: #40A578;
text-decoration: none;
}
a:visited {
color: #40A578;
}
a:hover {
text-decoration: underline;
}
button:hover {
box-shadow: 1px 5px 20px 0.5px rgba(0, 0, 0, 0.274);
}
Well done!
Just a quick question - which one of the two images is your Sign-up form? Or did you make both?
Nicolas
Excellent work. Looks professional already. The only thing I can find wrong here is the check input by the Lorem, ipsum… - don’t you think it’s a little close to the text? Try adding a space before the beginning of your text there and that should do the trick.
All in all it’s a minuscule error and it’s looking great. Consider adding a linear-gradient background to make it even better.
Happy coding!
Nicolas
2 Likes
Wow! Thank you for this nice feedback let me try doing that and I will share again. Thank you so much 
2 Likes
Of course! And I’m looking forward to seeing the updated version.
Have fun coding,
Nicolas
1 Like
If you can do that in 10 days, you’re on track. You know what looks good and how to materialise it. Your reproduction of the freepik design is almost spot on. Keep it up and you’ll be a HTML and CSS maestro in no time!
Cheers,
Joseph
3 Likes
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.