I have created a grid within grid using the grid-area property to assign content to a particular grid. My #main has grid-template-areas of “header”, “content”, and "footer. The grid within the grid, #survey-form has three grid-template-areas as well. “srvyheader”, “srvycontent” and “srvyfooter”. Inside of that grid, I try to assign content to srvycontent but no matter what I do, it does not seem to recognize that grid-area. I know this is something simple but right now it eludes me. Any help would be appreciated.
<!DOCTYPE html>
<html>
<style>
#thebody {
background-color: grey;
}
#title {
text-align: center;
}
#main {
background-color: lightsalmon;
display: grid;
width: 100%;
grid-template-rows: 1fr auto 1fr;
grid-row-gap: 20px;
grid-template-areas:
"header"
"content"
"footer";
}
#headerofthebody {
grid-area: header;
width: 50%;
background-color: blue;
}
#survey-form {
background-color: darkcyan;
display: grid;
width: 100%;
grid-template-rows: 200px 600px 200px;
grid-column-gap: 10px;
grid-area: content;
grid-template-areas:
"srvyheader"
"srvycontent"
"srvyfooter";
}
#theform {
background-color: azure;
width: 100%;
display: grid;
grid-area: srvycontent;
}
#footerofpage {
background-color: greenyellow;
grid-area: footer;
}
</style>
<head>
<h1>The free Code Survey Project</h1>
</head>
<body id="thebody">
<div id="themainbody">
<div>
<h1 id="title"> Free Code Camp Survey</h1>
<P id="description" > This is just placeholder text for the description of survey<P>
</div>
</div>
<div id="bodyofform">
<div id="main">
<div id="headerofthebody" >
<h3> Travel Survey</h3>
<div id="surveyinstructions">
<p> This is the instructions for the survey</p>
</div>
</div>
<div id="survey-form">
<form action="/action_page.php" method="get" id="theform">
<div id="divforname" >
<label for="name" id="name-label">Enter Your Name:</label><br>
<input type="text" id="name" required placeholder="Name" name="name"><br>
</div>
<div id="divforemail" >
<label for="email" id="email-label">Enter Your Email:</label><br>
<input type="email" id="email" required placeholder="Email" name="email"><br>
</div>
<div id="divfornumber">
<label for="number" id="number-label">Enter Your Age (between 18 and 110):</label><br>
<input type="number" id="number" name="number" placeholder="Age" min="18" max="110"> <br>
</div>
<div id="divfordropdown">
<label for="dropdown" id="dropdown-label">Areas Of The World You Have Visited:</label><br>
<select id="dropdown" name="country">
<option value="anartica">Antartica</option>
<option value="artic">Artic</option>
<option value="asia">Asia</option>
<option value="carribbean">Carribbean</option>
<option value="centralamerica">Central America</option>
<option value="easterneurope">Eastern Europe</option>
<option value="euqatorialafrica">Equatorial Africa</option>
<option value="middleeast">Middle East</option>
<option value="northamerica">North America</option>
<option value="northernafrica">Northern Africa</option>
<option value="pacificislands">Argentina</option>
<option value="southamerica">South America</option>
<option value="southernafrica">Argentina</option>
<option value="westerneurope">Western Europe</option>
</select><br>
</div>
<div id="divforcheckbox">
<p>Choose your favorite method of travel:</p>
<input type="checkbox" id="air" name="fav_mode_of_travel" value="Air Travel"
<label for="air">Air</label><br>
<input type="checkbox" id="train" name="fav_mode_of_travel" value="Train"
<label for="train">Train</label><br>
<input type="checkbox" id="automobile" name="fav_mode_of_travel" value="Automobile"
<label for="automobile">Automobile</label><br>
<input type="checkbox" id="cruise" name="fav_mode_of_travel" value="Cruise Ship"
<label for="cruise">Cruise Ship</label><br>
<input type="checkbox" id="safari" name="fav_mode_of_travel" value="Safari"
<label for="safari">Safari</label><br>
<input type="checkbox" id="wilderness" name="fav_mode_of_travel" value="Wilderness"
<label for="wilderness">Wilderness</label><br>
<input type="checkbox" id="spacetourism" name="fav_mode_of_travel" value="Space Tourism"
<label for="spacetourism">Space Tourism</label><br>
<input type="checkbox" id="adventure" name="fav_mode_of_travel" value="Adventure"
<label for="adventure">Adventure</label><br>
</div>
<div id="divforradio">
<p>Number of people with whom you typically travel (including yourself):</p>
<input type="radio" id="single" name="fav_mode_of_travel" value="One"
<label for="single">Just Myself</label><br>
<input type="radio" id="duo" name="fav_mode_of_travel" value="Two"
<label for="duo">Me and a Friend</label><br>
<input type="radio" id="Three_to_Four" name="fav_mode_of_travel" value="Three to Four"
<label for="Three_to_Four">Three to Four</label><br>
<input type="radio" id="Up_to_Ten" name="fav_mode_of_travel" value="Up to Ten"
<label for="Up_to_Ten">Up to Ten</label><br>
<input type="radio" id="tour_groups" name="fav_mode_of_travel" value="Tour Groups"
<label for="tour_groups">Tour Groups</label><br>
</div>
<div id="divfortextarea">
<label for="comments">Comments:</label><br>
<textarea id="comments" name="comments" placeholder="Your comments..."></textarea>
</div>
<div id="submitbutton">
<input type="submit" id="submit" value="Submit">
</div>
</form>
</div>
<div id="footerofpage">
<p>This is where the footer text will be</p>
</div>
</div>
</div>
</div>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</body>
</html>
Your browser information:
User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36
Challenge: Build a Survey Form
Link to the challenge:
