index.html 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. <style type="text/css">
  2. body {
  3. background-image: linear-gradient( rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4) ),url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F03799d65aac74f7a80121246d63d56e.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1624787496&t=c1bdff990bebe93bcafa07d2a1a09fcc);
  4. background-position: center top;
  5. background-size: 100% auto;
  6. color:white;
  7. font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  8. }
  9. #title-div {
  10. width: 800px;
  11. margin: auto;
  12. text-align: center;
  13. }
  14. #form-div {
  15. background-color: hsla(209, 94%, 21%, 0.8);
  16. width: 800px;
  17. margin: 40px auto 40px auto;
  18. padding-top: 40px;
  19. border-radius: 4px;
  20. }
  21. form {
  22. width: 90%;
  23. margin: auto;
  24. }
  25. textarea {
  26. width: 100%;
  27. height: 200px;
  28. }
  29. .input-text {
  30. width: 100%;
  31. height: 32px;
  32. margin: 2px 0 10px 0 ;
  33. border-radius: 2px;
  34. font-size: 18px;
  35. }
  36. .input-radio {
  37. font-size: 18px;
  38. margin-top: 10px;
  39. }
  40. .input-label {
  41. font-size: 20px;
  42. }
  43. .div-margin {
  44. margin-bottom: 20px;
  45. }
  46. button {
  47. background-color: rgb(71, 133, 71);
  48. color: aliceblue;
  49. height: 40px;
  50. width: 90%;
  51. border-radius: 2px;
  52. font-size: 24px;
  53. outline: none;
  54. border:none;
  55. margin: 20px 5% 20px 5%;
  56. }
  57. @media (max-width:1000px) {
  58. body {
  59. background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F03799d65aac74f7a80121246d63d56e.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1624787496&t=c1bdff990bebe93bcafa07d2a1a09fcc);
  60. background-position: center top;
  61. background-size: 100% auto;
  62. color:rgb(255, 255, 255);
  63. font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  64. }
  65. #title-div {
  66. width: 100%;
  67. margin: auto;
  68. text-align: center;
  69. }
  70. #form-div {
  71. background-color: hsla(209, 94%, 21%, 0.8);
  72. width: 100%;
  73. margin: 4px auto 4px auto;
  74. padding-top: 40px;
  75. border-radius: 10px;
  76. }
  77. }
  78. </style>
  79. <main>
  80. <div id="title-div">
  81. <h1 id="title">freeCodeCamp Survey Form</h1>
  82. <p id="description">Thank you for taking the time to help us improve the platform</p>
  83. </div>
  84. <div id="form-div">
  85. <form id="survey-form">
  86. <div class="div-margin">
  87. <label id="name-label" class="input-label" for="name">Name</label><br>
  88. <input id="name" class="input-text" type="text" placeholder="Enter your name" required><br>
  89. </div>
  90. <div class="div-margin">
  91. <label id="email-label" class="input-label" for="email">Email</label><br>
  92. <input id="email" class="input-text" type="email" placeholder="Enter your email" required><br>
  93. </div>
  94. <div class="div-margin">
  95. <label id="number-label" class="input-label" for="number">Age(option)</label><br>
  96. <input id="number" class="input-text" type="number" placeholder="10" min="10" max="100"><br>
  97. </div>
  98. <div class="div-margin">
  99. <label class="input-label" for="dropdown">Which option best describes your current role?</label><br>
  100. <select class="input-text" id="dropdown" >
  101. <optgroup label="can no choose"></optgroup>
  102. <option value="volvo">Volvo</option>
  103. <option value="saab">Saab</option>
  104. <option value="mercedes">Mercedes</option>
  105. <option value="audi">Audi</option>
  106. </select>
  107. </div>
  108. <div class="div-margin">
  109. <label class="input-label"> the radio choose here:</label><br>
  110. <label for="one-radio"><input class="input-radio" id="one-radio" value="one" type="radio" name="radio-select" > radio-choose-one</label><br>
  111. <label for="two-radio"><input class="input-radio" id="two-radio" value="two" type="radio" name="radio-select" > radio-choose-two</label><br>
  112. <label for="three-radio"><input class="input-radio" id="three-radio" value="three" type="radio" name="radio-select" > radio-choose-three</label><br>
  113. </div>
  114. <div class="div-margin">
  115. <label class="input-label"> the radio choose here:</label><br>
  116. <label for="one-checkbox"><input class="input-radio" id="one-checkbox" value="one1" type="checkbox" name="checkbox-select"> checkbox-choose-one</label><br>
  117. <label for="two-checkbox"><input class="input-radio" id="two-checkbox" value="two1" type="checkbox" name="checkbox-select"> checkbox-choose-two</label><br>
  118. <label for="three-checkbox"><input class="input-radio" id="three-checkbox" value="three1" type="checkbox" name="checkbox-select"> checkbox-choose-three</label><br>
  119. </div>
  120. <div class="div-margin">
  121. <label class="input-label">the checkbox choose here:</label><br>
  122. <textarea class="input-label" id="commonts" placeholder="Enter your commonts..."></textarea>
  123. </div>
  124. <button id="submit" type="submit">Submit</button>
  125. </form>
  126. </div>
  127. </main>