|
@@ -1,12 +1,83 @@
|
|
|
<style type="text/css">
|
|
|
body {
|
|
|
- background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg30.51tietu.net%2Fpic%2F2016-090107%2F20160901070215elvhx1yovqm145170.jpg&refer=http%3A%2F%2Fimg30.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1624704316&t=c902e04ad6a4ca7e1a3200c896bf3a04);
|
|
|
- color: white;
|
|
|
+ background-color:rgb(23, 110, 145);
|
|
|
+ color:white;
|
|
|
+ font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
|
}
|
|
|
|
|
|
#title-div {
|
|
|
+ width: 800px;
|
|
|
margin: auto;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
+
|
|
|
+ #form-div {
|
|
|
+ background-color: hsla(276, 31%, 20%, 0.8);
|
|
|
+ width: 800px;
|
|
|
+ margin: 40px auto 40px auto;
|
|
|
+ padding-top: 40px;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ form {
|
|
|
+ width: 90%;
|
|
|
+ margin: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ textarea {
|
|
|
+ width: 100%;
|
|
|
+ height: 200px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .input-text {
|
|
|
+ width: 100%;
|
|
|
+ height: 32px;
|
|
|
+ margin: 2px 0 10px 0 ;
|
|
|
+ border-radius: 2px;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .input-radio {
|
|
|
+ font-size: 18px;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .input-label {
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .div-margin {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ button {
|
|
|
+ background-color: rgb(71, 133, 71);
|
|
|
+ color: aliceblue;
|
|
|
+ height: 40px;
|
|
|
+ width: 90%;
|
|
|
+ border-radius: 2px;
|
|
|
+ font-size: 24px;
|
|
|
+ outline: none;
|
|
|
+ border:none;
|
|
|
+ margin: 5% 20px 5% 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width:900px) {
|
|
|
+ #title-div {
|
|
|
+ width: 98%;
|
|
|
+ margin: auto;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ #form-div {
|
|
|
+ background-color: hsla(276, 31%, 20%, 0.8);
|
|
|
+ width: 98%;
|
|
|
+ margin: 40px auto 40px auto;
|
|
|
+ padding-top: 40px;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
</style>
|
|
|
|
|
|
<main>
|
|
@@ -15,24 +86,52 @@
|
|
|
<p id="description">Thank you for taking the time to help us improve the platform</p>
|
|
|
</div>
|
|
|
|
|
|
- <form id="survey-form">
|
|
|
- <label id="name-label" for="name">Name</label><br>
|
|
|
- <input id="name" type="text" placeholder="Enter your name">
|
|
|
+ <div id="form-div">
|
|
|
+ <form id="survey-form">
|
|
|
+ <div class="div-margin">
|
|
|
+ <label id="name-label" class="input-label" for="name">Name</label><br>
|
|
|
+ <input id="name" class="input-text" type="text" placeholder="Enter your name" required><br>
|
|
|
+ </div>
|
|
|
+ <div class="div-margin">
|
|
|
+ <label id="email-label" class="input-label" for="email">Email</label><br>
|
|
|
+ <input id="email" class="input-text" type="email" placeholder="Enter your email" required><br>
|
|
|
+ </div>
|
|
|
+ <div class="div-margin">
|
|
|
+ <label id="number-label" class="input-label" for="number">Age(option)</label><br>
|
|
|
+ <input id="number" class="input-text" type="number" placeholder="10" min="10" max="100"><br>
|
|
|
+ </div>
|
|
|
|
|
|
- <label id="email-label" for="email">Email</label><br>
|
|
|
- <input id="email" type="text" placeholder="Enter your email"><br>
|
|
|
+ <div class="div-margin">
|
|
|
+ <label class="input-label" for="dropdown">Which option best describes your current role?</label><br>
|
|
|
+ <select class="input-text" id="dropdown" >
|
|
|
+ <optgroup label="can no choose"></optgroup>
|
|
|
+ <option value="volvo">Volvo</option>
|
|
|
+ <option value="saab">Saab</option>
|
|
|
+ <option value="mercedes">Mercedes</option>
|
|
|
+ <option value="audi">Audi</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
|
|
|
- <label id="number-label" for="number">Age(option)</label><br>
|
|
|
- <input id="number" type="number" placeholder="10"><br>
|
|
|
+ <div class="div-margin">
|
|
|
+ <label class="input-label"> the radio choose here:</label><br>
|
|
|
+ <label for="one-radio"><input class="input-radio" id="one-radio" value="one" type="radio" name="radio-select" > radio-choose-one</label><br>
|
|
|
+ <label for="two-radio"><input class="input-radio" id="two-radio" value="two" type="radio" name="radio-select" > radio-choose-two</label><br>
|
|
|
+ <label for="three-radio"><input class="input-radio" id="three-radio" value="three" type="radio" name="radio-select" > radio-choose-three</label><br>
|
|
|
+ </div>
|
|
|
|
|
|
- <label for="describes">Which option best describes your current role?</label><br>
|
|
|
- <input id="dropdown" type="text" list="optionlist" name="describes" placeholder="10"><br>
|
|
|
- <datalist id="optionlist">
|
|
|
- <option>one</option>
|
|
|
- <option>one</option>
|
|
|
- <option>one</option>
|
|
|
- <option>one</option>
|
|
|
- </datalist>
|
|
|
+ <div class="div-margin">
|
|
|
+ <label class="input-label"> the radio choose here:</label><br>
|
|
|
+ <label for="one-checkbox"><input class="input-radio" id="one-checkbox" value="one1" type="checkbox" name="checkbox-select"> checkbox-choose-one</label><br>
|
|
|
+ <label for="two-checkbox"><input class="input-radio" id="two-checkbox" value="two1" type="checkbox" name="checkbox-select"> checkbox-choose-two</label><br>
|
|
|
+ <label for="three-checkbox"><input class="input-radio" id="three-checkbox" value="three1" type="checkbox" name="checkbox-select"> checkbox-choose-three</label><br>
|
|
|
+ </div>
|
|
|
|
|
|
- </form>
|
|
|
+ <div class="div-margin">
|
|
|
+ <label class="input-label">the checkbox choose here:</label><br>
|
|
|
+ <textarea class="input-label" id="commonts" placeholder="Enter your commonts..."></textarea>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <button id="submit" type="submit">Submit</button>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
</main>
|