Issue
hi i have decided to face my fears of frontend development and I am having a little bit of trouble here so I am trying to put a 50 px which is a rough estimate around my login form and I wanna change the color of it so the back ground is #423075 but I want the back of the actual login section tobe #300C94 what is the best way todo this with my code
index.html
<html>
<header>
<title>Login-1</title>
<link rel="stylesheet" href="assets/css/styles.css" >
</header>
<body>
<form class="form" >
<div class="form-back" name="form-back" >
<input name="username" type="text" placeholder="username" required>
<br>
<input name="password" type="password" placeholder="password" required>
<br>
<input name="confirm_password" type="password" placeholder="Confirm Password" required>
<br>
<input name="submit" type="submit">
</div>
</form>
</body>
</html>
styles.css
body{
margin-top: 300px;
text-align: center;
background-color: #423075;
}
form{
display: inline-block;
}
div{
border-radius: 10px;
border-radius: 30px;
background: #300C94;
}
input[type=submit] {
width: 100%;
}
any suggestions would be great
Solution
You can put padding around your <form> tag then add a background-color property to define the color of the form background. You can see here, I just kept your code and just changed a small portion in the form tag css.
form{
display: inline-block;
padding: 50px;
background-color: #300C94;
}
body{
margin-top: 300px;
text-align: center;
background-color: #423075;
}
form{
display: inline-block;
padding: 50px;
background-color: #300C94;
}
div{
border-radius: 10px;
border-radius: 30px;
background: #300C94;
}
input[type=submit] {
width: 100%;
} <form class="form" >
<div class="form-back" name="form-back" >
<input name="username" type="text" placeholder="username" required>
<br>
<input name="password" type="password" placeholder="password" required>
<br>
<input name="confirm_password" type="password" placeholder="Confirm Password" required>
<br>
<input name="submit" type="submit">
</div>
</form>Answered By - Saikat Roy
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.