FreeCodeCamp/SurveyForm/index.html

<style type="text/css">
	body {
		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);
		background-position: center top;
		background-size: 100% auto;
		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(209, 94%, 21%, 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: 20px 5% 20px 5%;
	}

	@media (max-width:1000px) {

		body {
			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);
			background-position: center top;
			background-size: 100% auto;
			color:rgb(255, 255, 255);
			font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		}

		#title-div {
			width: 100%;
			margin: auto;
			text-align: center;
		}

		#form-div {
			background-color: hsla(209, 94%, 21%, 0.8);
			width: 100%;
			margin: 4px auto 4px auto;
			padding-top: 40px;
			border-radius: 10px;
		}
	}

</style>

<main>
	<div id="title-div">
		<h1 id="title">freeCodeCamp Survey Form</h1>
		<p id="description">Thank you for taking the time to help us improve the platform</p>
	</div>

	<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>

			<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>

			<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>

			<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>

			<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>