Tell us what’s happening:
I’m not necessarily stuck on anything here, but this is the first solo project i’ve done with no guidance, and I am just looking to get some feedback on the code i’ve written to see if anyone can point out anything i’m doing wrong or how I can improve.
Thanks
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>EE Customer Service Survey</title>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<img src="https://iconape.com/wp-content/png_logo_vector/ee-logo.png">
<h1 id="title">EE Customer Service Survey</h1>
<p id="description">Please use this survey form to provide feedback on how you felt your experience was speaking to us today.</p>
<form id="survey-form">
<fieldset>
<label id="name-label">Enter Your Name:<input id="name" name="name" type="text" placeholder="Input full name" class="inline" required></label>
<label id="email-label">Enter Your Email Address:<input id="email" name="email" type="email" placeholder="Ensure email is valid" class="inline" required></label>
</fieldset>
<fieldset>
<label id="number-label">How would you rate the advisor you spoke to out of 10?<input id="number" name="number" type="number" min="0" max="10" class="inline" placeholder="Score between 0-10, with 10 being the best"></label>
<label for="company">How would you rate EE as a company out of 10?<input id="company" name="company" type="number" min="0" max="10" class="inline" placeholder="Score between 0-10, with 10 being the best"></label>
<label for="recommend">Would you recommend EE to a friend or family member?
<select id="dropdown" name="dropdown" class="inline">
<option value="">(Select one)</option>
<option value="1">Yes</option>
<option value="2">No</option>
<option value="3">Unsure</option>
</select>
</label>
<label for="feedback">Additional Feedback:
<textarea id="feedback" name="feedback" rows="5" cols="30" class="inline" placeholder="Please provide any additional feedback about your experience"></textarea> </label>
</fieldset>
<fieldset>
<h2>Marketing Preferences</h2>
<p>How do you wish to receive markerting and offers in the future?</p>
<label for="sms"><input id="sms" type="radio" name="marketing-preference" class="inline" value="1">SMS</label>
<label for="email"><input id="email" type="radio" name="marketing-preference" class="inline" value="2">Email</label>
<label for="telephone"><input id="telephone" type="radio" name="marketing-preference" class="inline" value="3">Telephone</label>
<label for="post"><input id="post" type="radio" name="marketing-preference" class="inline" value="4">Post</label>
<p>Which products do you currently have with EE?</p>
<label for="telephone"><input id="telephone" type="checkbox" class="inline" value="1"> Telephone</label>
<label for="broadband"><input id="broadband" type="checkbox" class="inline" value="2"> Broadband</label>
<label for="mobile-phone"><input id="mobile-phone" type="checkbox" class="inline" value="3"> Mobile Phone</label>
<label for="tv"><input id="tv" type="checkbox" class="inline" value="4">TV</label>
</fieldset>
<input id="submit" type="submit" value="Submit"/>
</form>
</body>
</html>
/* file: styles.css */
body{
width: 100%;
height: 100vh;
margin: 0;
background-color: rgb(51,120,131);
color: rgb(251,227,77);
font-family: Tahoma;
font-size: 16px;
}
h1, p{
text-align: center;
margin: 1em auto;
}
form{
width: 60vw;
max-width: 500px;
min-width: 300px;
margin: 0 auto;
padding-bottom: 2em;
}
fieldset{
border: none;
padding: 2rem 0;
border-bottom: 3px solid rgb(105,207,206);
}
fieldset:last-of-type{
border-bottom: none;
}
label{
display: block;
margin: 0.5rem 0;
}
.inline {
width: unset;
margin: 0 0.5em 0 0;
vertical-align: middle;
}
input[type="submit"] {
display: block;
width: 60%;
margin: 1em auto;
height: 2em;
font-size: 1.1rem;
background-color: rgb(105,207,206);
border-color: white;
min-width: 300px;
padding-bottom: 20px;
}
input[type="file"] {
padding: 1px 2px;}
input, textarea, select{
margin: 10px 0 0 0;
width: 100%;
min-height: 2em;
}
input, textarea {
background-color: #ffffff;
border: 1px solid #0a0a23;
color: #ffffff;
}
img{
width:30%;
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 20px;
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6.1 Safari/605.1.15
Challenge: Survey Form - Build a Survey Form
Link to the challenge: