Advertisement
Yousuf1791

Simple form

Apr 18th, 2021
530
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 1.72 KB | None | 0 0
  1. /*******HTML*******/
  2.  
  3. <!DOCTYPE html>
  4. <html>
  5. <head>
  6.     <meta charset="utf-8">
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8.     <title></title>
  9.     <link rel="stylesheet" type="text/css" href="style.css">
  10. </head>
  11. <body>
  12.  
  13.     <div class="container">
  14.         <div class="form">
  15.                 <form action="#" method="post">
  16.                         <input type="text" name="name" placeholder="Enter name">
  17.                         <input type="number" name="mobile" placeholder="Enter Mobile">
  18.                         <!-- <input type="text" name="refer" placeholder="Reference"> -->
  19.                         <!-- <input type="text" name="degree" placeholder="Enter Qualification"> -->
  20.                         <input type="email" name="email" placeholder="Enter E-mail">
  21.                         <!-- <input type="text" name="jobpost" value="Web Developer"> -->
  22.                 <div class="btn">
  23.                     <!-- <a href="#">Check Form</a> -->
  24.                     <input type="submit" name="submit">
  25.                 </div>
  26.             </form>
  27.         </div>
  28.     </div>
  29.  
  30. </body>
  31. </html>
  32.  
  33. /*******CSS*******/
  34.  
  35. *{
  36.     margin: 0;
  37.     padding: 0;
  38.     font-family: sans-serif;
  39.     box-sizing: border-box;
  40. }
  41.  
  42. .container{
  43.     width: 100vw;
  44.     height: 100vh;
  45.     display: flex;
  46.     justify-content: center;
  47.     align-items: center;
  48.     background-color: gray;
  49. }
  50.  
  51. .form{
  52.     width: 350px;
  53.     height: 370px;
  54.     background-color: aquamarine;
  55.     display: flex;
  56.     flex-direction: row;
  57.     justify-content: center;
  58.     align-items: center;
  59.     text-align: center;
  60.     overflow: hidden;
  61. }
  62.  
  63. input[type=text],input[type=number],input[type=email]{
  64.     width: 70%;
  65.     height: 30px;
  66.     margin: 10px 0;
  67. }
  68.  
  69. .btn{
  70.     margin-top: 10px;
  71.     text-align: center;
  72.     /* background-color: red; */
  73. }
  74.  
  75. .btn a{
  76.     background-color: blue;
  77.     color: #fff;
  78.     text-decoration: none;
  79.     padding: 10px 30px;
  80. }
  81.  
  82. .btn input[type=submit]{
  83.     height: 30px;
  84.     width: 30%;
  85.     margin: 0 10px;
  86. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement