Html form design model

July 07, 2024 0

 








Html Code

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Form</title>
  7. <link rel="stylesheet" href="css/style.css">
  8. </head>
  9. <body>

  11. <div class="form_main">
  12. <form action="">

  14. <label for="">1.Name</label><br>
  15. <input type="text" placeholder="Input your name"><br><br>

  17. <label for="">2.Phone</label><br>
  18. <input type="text" placeholder="Input your Phone"><br><br>

  20. <label for="">3.Email</label><br>
  21. <input type="email" placeholder="Input your Email"><br><br>

  23. <label for="">4.Password</label><br>
  24. <input type="text" placeholder="Input your Password"><br><br>
  25. <button type="link"><a href="#">Submite</a></button>

  27. </form>




  32. </div>
  33. </body>
  34. </html>

Style.css

  1. .form_main {
  2.     height: 700px;
  3.     width: 400px;
  4.     background:linear-gradient(teal,red,green);
  5.     margin: 70px auto;
  6.     display: flex;
  7.     justify-content: center;
  8.     align-items: center;
  9.     border-radius: 50px;
  10.     transition: all linear .3s;
  11. }
  12. .form_main:hover{
  13.     box-shadow: 1px 1px 20px black;
  14.     transition: all linear .3s;
  15. }
  16. .form_main form input{
  17.     padding: 10px 50px 10px 10px;
  18.     background: transparent;
  19.     border:none;
  20.     border: 2px solid white;
  21.     border-radius: 30px;

  23. }
  24. .form_main form label{
  25.     color: white;
  26. }
  27. .form_main form input::placeholder{
  28.     color: darkgrey;
  29. }
  30. .form_main form button{
  31.     margin-left: 57px;
  32.     background:linear-gradient(magenta,orange);
  33.     padding: 10px 30px;
  34.     border-radius: 30px;
  35.     border: none;
  36.     margin-top: 30px;
  37.     transition: all linear .3s;

  39. }
  40. .form_main form button:hover{
  41.     box-shadow: 1px 1px 15px white;
  42.     color: white;
  43.     transition: all linear .3s;

  45. }
  46. .form_main form button a{
  47.     color: black;
  48.     font-size:18px;
  49. }

  51. /*form part css end*/
CLASS 05 NOTE


Html CSS Note

About Background:

1.background=url(../image/name.png) 2.background position=center 3.background repeat=no repeat 4.background size=cover 5.background attachment=fixed About Menu: 1.Class Name text-align=center background color=teal 2.Class Name ul display=inline flex 3.ul list style=none 4.Class Name ul li height=50px width=100px 5.Class Name ul li a color=black 6. * padding=0
margin=0

Tags:

No comments

Post a Comment

Subscribe to: Post Comments ( Atom )
Powered by Blogger.
Youtube Channel Image
ABS EMON Subscribe To watch more video Tutorials
Subscribe