Advertisement
Sebuahhobi98

contact_us

Dec 10th, 2020
1,175
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.40 KB | None | 0 0
  1. <div id="form">
  2.     <div class="row" style="padding: 20px;">
  3.         <div class="col-lg-2" id ="mainform">
  4.             <form>
  5.                 <label><h4>Name:</h4> </label><input type="text" name="name" size="20"  class=" form-control" placeholder="User name" required />
  6.                 <label><h4>Email:</h4></label> <input type="email" name="email" size="20"  class=" form-control" placeholder="User Email" required/>
  7.                 <h4>Comments:</h4><textarea class="form-control" rows="6"  placeholder="Message" required></textarea>
  8.                 <br>
  9.                 <button type="submit" class="btn btn-info" id="btn" style="text-shadow:0 0 3px #000000; font-size:24px;">Kirim Saran</button>
  10.             </form>
  11.         </div>
  12.     </div>
  13. </div>
  14.  
  15.  
  16. CSS:
  17. /*=========================================================Navber================================================*/
  18. #navbar{
  19.     width:100%;
  20.     background-color:#fff;
  21.     opacity:1;
  22.  
  23. }
  24. #tab{
  25.     color:#283747;
  26.     font-size:18px;
  27.     font-family:sans-serif;
  28.     text-align:center;
  29.     background-color:#fff;
  30. }
  31. #tab:hover{
  32.     color:dodgerblue;
  33.     transition:all 0.15s ease-in-out;
  34.    
  35. }
  36. #logo{
  37.     margin-top:-10px;
  38.     height:80px;
  39.     width:240px;
  40.     overflow: visible;
  41.     background-color:#fff;
  42.     padding:10px;
  43.     border:1.5px solid dodgerblue;
  44. }
  45. /*=========================================================Header Animation=====================================*/
  46.  
  47. /*=========================================================Contact us page======================================*/ 
  48.  
  49. #mainform{
  50.     background-color:#fff;
  51.     border:px solid #f1f1f1;
  52.     padding:20px;
  53.     height:auto;
  54.     opacity:.7;
  55.     animation-name:form;
  56.     animation-duration:1s;
  57.     transition:ease-in-out .3s;
  58.  
  59.     position: fixed;
  60.     left: 50%;
  61.     top: 50%;
  62.     transform: translate(-50%, -50%);
  63. }
  64. @keyframes form{
  65.     0%{ opacity:0;}
  66.     100%{}
  67. }
  68.  
  69. #mainform:hover{
  70.     box-shadow:0 0 20px #CCCCCC;
  71.     opacity:1;
  72. }
  73.  
  74. #btn{
  75.     width:100%;}
  76. }
  77.  
  78. #mail{
  79.     border-radius:50%;
  80.     height:40px;
  81.     width:40px;
  82. }
  83. #mail:hover{
  84.     box-shadow:0 0 2px #000000;
  85. }
  86. #phone{
  87.     border-radius:50%;
  88.     height:40px;
  89.     width:40px;
  90. }
  91. #phone:hover{
  92.     box-shadow:0 0 2px #000000;
  93. }
  94. #map{
  95.     border-radius:50%;
  96.     height:40px;
  97.     width:40px;
  98. }
  99. #map:hover{
  100.     box-shadow:0 0 2px #000000;
  101. }
  102.  
  103.  
  104. .contact-us{
  105.     animation-name:contact-us;
  106.     animation-duration:1s;
  107.     margin-left:x;
  108. }
  109. @keyframes contact-us{
  110.     0%{ margin-left:-400px;}
  111.     100%{}}
  112.    
  113.     /*=========================================================Home page======================================*/   
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement