First, check the code given below
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .profile{ | |
| height:75px; | |
| width:75px; | |
| margin:auto; | |
| margin-top: 8rem; | |
| } | |
| body{ | |
| background:linear-gradient(to right top, #f5556f,#fb7955); | |
| height:100vh; | |
| margin:0; | |
| text-align: center; | |
| } | |
| .input{ | |
| background-color: #febe82; | |
| border:3px solid white; | |
| padding:12px 0; | |
| width:17rem; | |
| border-radius:25px; | |
| text-align: center; | |
| display: block; | |
| font-family: 'Bree Serif', serif; | |
| outline: none; | |
| color:#f5556f; | |
| margin: auto; | |
| margin-top: 5px; | |
| } | |
| ::placeholder{ | |
| color:#f5556f; | |
| } | |
| .login-form{ | |
| text-align: center; | |
| width:22rem; | |
| margin:auto; | |
| } | |
| h4{ | |
| color:#fff; | |
| font-family: 'Bree Serif', serif; | |
| } | |
| .submit-btn{ | |
| background-color: #3d3d59; | |
| padding:14px 0; | |
| width:17rem; | |
| border-radius: 25px; | |
| text-align: center; | |
| display: block; | |
| border: none; | |
| outline:none; | |
| color:#fff; | |
| margin:auto; | |
| margin-top: 18px; | |
| font-family: 'Bree Serif', serif; | |
| } | |
| .icon{ | |
| position:relative; | |
| top:2.55rem; | |
| right:7rem; | |
| color:#f5556f; | |
| } | |
| a{ | |
| color:#fff; | |
| font-size: 4px; | |
| margin-top: 5px; | |
| font-family: 'Bree Serif', serif; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en" dir="ltr"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Login form</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://kit.fontawesome.com/ae96412798.js" crossorigin="anonymous"></script> | |
| <link rel="preconnect" href="https://fonts.gstatic.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div><img src="Images\profile-user.png" alt="profile" class="profile"></div> | |
| <form action="" class="login-form"> | |
| <h4>USER LOGIN</h4> | |
| <i class="far fa-user icon"></i> | |
| <input type="text" class="input" placeholder="Username" name="Username"> | |
| <i class="fas fa-lock icon"></i> | |
| <input type="password" class="input" placeholder="Password" name="Password"> | |
| <input type="submit" value="Log in" class="submit-btn"> | |
| <a href="">Forogt password?</a> | |
| </form> | |
| </body> | |
| </html> |
In the HTML code, you can find that I have added two other links in the head section with the link of the style sheet. I have used fontawesome to use icons of user and lock. To use the icon you have to add the fontawesome CDN in the head section. I have used google fonts link for using some specific font-family to give the texts a great look .
To make the form more attractive, I have used an image in the body section that you can find in the image of the form given at the top. The very first step in creating a form is to use <form> tag which defines the form element. Then, you need to have someplace in the form for the inputs so that a user can fill the details. So, you have to create input elements for taking inputs like username and password. You also need a button to submit the details. To do this you can use an input element of submit type. If you couldn't understand anything in the given code or you need more detailed knowledge of HTML forms, you can refer to the W3schools website. I have also used some fontawesome icons as said before for making the form more attractive. To use the icons, you just need to visit the fontawesome website and copy and paste the line of code and use it in your code.
I want to advise you that don't just copy the code from here. Try to understand why a specific style is given to an element and gain knowledge of the styling properties used in the style sheet from the w3schools website.
Happy coding 😃.
No comments:
Post a Comment