<body id="body">
<div class="formCard">
<img src="https://vectorspedia.com/images/6df0Go-Green-Grunge-Concept1.jpg" alt="logo" id="logo">
<h1 id="title">GoGreen Survey Form</h1>
<p id="description">A survey form on the health of the environment</p>
<form action="https://formspree.io/f/xaylrvva" method='POST' id="survey-form">
<label for="name" id="name-label">Name:<br>
<input type="text" id="name" placeholder="Enter your name e.g John Doe" required></label>
<label for="email" id="email-label">Email:
<input type="email" id="email" placeholder="xyz@someplace.com" required></label>
<label for="number" id="number-label">Age(Optional):
<input type="number" id="number" placeholder="Enter your age" max="80" min="10"></label>
<p>Select continent of residence</p>
<select name="continent" id="dropdown">
<option value="africa">Africa</option>
<option value="asia">Asia</option>
<option value="australia">Australia</option>
<option value="europe">Europe</option>
<option value="north-america">North America</option>
<option value="south-america">South America</option>
</select><br><br>
<p class='sub-title'>Choose your prefered gender
<p>
<div id='radios'>
<label for='female'> <input type="radio" name="gender" value="female" id='female'> Female </label>
<label for='male'> <input type="radio" name="gender" value="male" id='male'>Male</label>
<label for='other'> <input type="radio" name="gender" value="other" id='other'>Other</label>
</div>
<p class='sub-title'>Please select atleast one of the options below:</p>
<div id='checkboxes'>
<label for="opt1"><input type="checkbox" name="opt1" value='planted' id='opt1'>
I have planted a tree or any other plant</label>
<label for="opt2"> <input type="checkbox" name="opt2" value="employee" id='opt2'>
I belong to a GoGreen group</label>
<label for="opt3"><input type="checkbox" name="opt3" value='community service' id='opt3'>
I take part in community service for the environment</label>
<label for="opt4"><input type="checkbox" name="opt4" value='promise' id='opt4'>
I promise to plant more from now on</label>
</div>
<p class='sub-title'>Any comments or suggestions</p>
<textarea name="suggestions" id="suggestions" cols="50" rows="30" placeholder="Comments/Suggestions..."></textarea>
<button id="submit">Submit</button>
</form>
</div>
</body>body {
box-sizing: border-box;
margin: 0;
padding: 0;
background-image: url("https://www.wallpapertip.com/wmimgs/166-1668509_summer-forest.jpg");
background-size: cover;
background-repeat: no-repeat;
line-height: 40px;
}
h1,
p {
color: white;
line-height: 10px;
text-align: center;
}
p {
font-size: 20px;
}
.sub-title{
color:white;
font-size:28px;
font-weight:bold;
}
#logo {
height: 70px;
width: 75px;
}
.formCard {
position: relative;
background-image: linear-gradient(
to bottom,
rgba(2, 27, 5, 0.73),
rgba(0, 8, 1, 0.73)
);
color: rgb(1, 2, 0);
padding: 15px;
margin: auto;
border-radius: 10px;
width: 60%;
}
#radios,
#checkboxes {
display: flex;
flex-direction: column;
}
label {
color: white;
}
label,
#suggestions {
font-size: 23px;
padding: 5px;
margin: 5px;
text-align: left;
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}
[type="text"],
[type="email"],
[type="number"],
textarea,
select {
border-radius: 5px;
width: 90%;
height: 30px;
outline: none;
font-size: 15px;
font-family: sans-serif;
}
[type="text"],
[type="email"],
[type="number"],
select {
position: relative;
left: 1.5%;
width: 95%;
}
button#submit {
position: relative;
left: 10%;
background-color: rgb(5, 58, 5);
color: white;
font-size: 20px;
font-weight: bold;
width: 80%;
height: 40px;
outline: none;
border-radius: 5px;
border-color: rgb(5, 58, 5);
}
[type="submit"]:hover {
background-color: rgb(5, 71, 5);
border-color: rgb(5, 71, 5);
cursor: pointer;
}
textarea {
text-align: left;
height: 300px;
font-size: 20px;
margin: 0;
}
@media only screen and (max-width: 675px) {
h1,
p {
line-height: 30px;
text-align: center;
}
p {
font-size: 20px;
}
#logo {
height: 50px;
width: 55px;
}
label,
#suggestions {
font-size: 19px;
}
[type="text"],
[type="email"],
[type="number"],
textarea,
select {
font-size: 13px;
}
[type="submit"] {
position: relative;
left: 10%;
background-color: rgb(5, 58, 5);
color: white;
font-size: 20px;
font-weight: bold;
width: 80%;
height: 40px;
outline: none;
border-radius: 5px;
border-color: rgb(5, 58, 5);
}
.formCard {
width:80%;
}
}
External CSS
This Pen doesn't use any external CSS resources.