Signup html and css

HTML CODE

`

Sign Up

Username

Email

Password

 <button class="signup-btn">Sign Up</button> <div class="login"> <p>Already have an account? <a href="#">Login</a></p> </div> </form> </div> <div class="image-section"> <img src="./om.png" alt="Om"> </div>
</div>`

CSS CODE

`
body {
font-family: Arial, Helvetica, sans-serif;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
display: flex;
width: 90%;
border-radius: 10px;
}
.form-section {
box-shadow: 3px 3px 3px 3px #196ac7;
padding: 40px;
border-radius: 20px;
margin-top:20px;
}
img {
height: 80px;
width: 80px;
margin: 15px;

 } .form-section:hover { box-shadow: 8px 8px 8px 8px #196ac7; } h2 { color: white; margin-bottom: 20px; font-size: 25px; } label, .login p { color: #ccc; } input[type="text"], input[type="password"], input[type="email"] { width: 100%; padding: 10px; margin-bottom: 20px; margin-top: 5px; font-size: 16px; border: 1px solid #ccc; border-radius: 5px; background-color: #2c2c2c; color: #fff; } .signup-btn { background-color: #196ac7; padding: 8px; font-size: medium; color: white; border: none; border-radius: 5px; cursor: pointer; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); transition: box-shadow 0.3s ease; margin-bottom: 15px; } .signup-btn:hover { box-shadow: 0 10px 20px rgba(67, 227, 224, 0.4); } .login a { color: #196ac7; text-decoration: none; } .login a:hover { color: #709bcb; }`

Discover more from Coursity

Subscribe to get the latest posts sent to your email.

Leave a Comment

Your email address will not be published. Required fields are marked *

Discover more from Coursity

Subscribe now to keep reading and get access to the full archive.

Continue reading

Scroll to Top
For island lake businesses to thrive, they need to be visible in local search results. Screen reader users also get automatic announcements to turn the screen reader mode on as soon as they enter the website.