Tell us what’s happening:
-
From [div class=“checkbox”] down to the break before [label>Option 2</label] – this entire header and first option don’t appear properly (missing) on the browser page/in the preview; can’t figure out why.
-
Code is somehow not meeting requirements for the following:
Any assistance would be much appreciated.
Your code so far
/* file: index.html */
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Quicksand&family=Roboto+Flex:opsz,wght@8..144,500&family=Space+Mono&display=swap"
rel="stylesheet">
</head>
<html>
<body>
<div class="survey">
<form id="survey-form">
<h1 id="title">SURVEY</h1>
<h4>This is a subtitle</h4>
<p id="description">This is a description</p>
<label id="name-label">Name:</lable>
<input type="text" id="name" required placeholder="Jane Doe">
<div class="p-info">
<label id="email-label">Email:</label>
<input type="email" id="email" required placeholder="jdoe@gmail.com">
<br>
<label id="number-label">Number:</label>
<input type="number" id="number" required min="1" max="50" placeholder="7">
</div>
<div class="radio">
<h4>These are the radio buttons</h4>
<label id="radio"> Option 1</label>
<input type="radio" name="radio-option" value="1">
<label id="radio"> Option 2</label>
<input type="radio" name="radio-option" value="2">
</div>
<br>
<div class="dropdown">
<h4>This is a dropdown</h4>
<label>This is a dropdown</label>
<select id="dropdown">
<option value="">(select one)</option>
<option value="1">Option 1</option>
<option>Option 2</option>
<option value="3">Option 3</option>
<option value="4">Other</option>
</div>
<br>
<div class="checkbox">
<h4>This is a checkbox</h4>
<label>Option 1</label>
<input type="checkbox" name="check" value="1">
<br>
<label>Option 2</label>
<input type="checkbox" name="check" value="2">
</div>
<div id="textbox">
<h4>This is a textbox<h4>
<br>
<label>Text box:</label>
<br>
<textarea name="bio" rows="3" cols="30" placeholder="Goes here"></textarea>
</div>
<div id="submit">
<input type="submit" value="Submit" id="submit" />
</div>
</form>
</div>
</body>
</html>
/* file: styles.css */
label {
font-weight: normal;
}
**Your browser information:**
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.5112.81 Safari/537.36 Edg/104.0.1293.54
Challenge: Survey Form - Build a Survey Form
Link to the challenge: