Tell us what’s happening:
Hi, I’ve been trying my best to match the layout of the Survey Form project, but I don’t know what else to do. I’ve been constantly searching for solutions to my problem, but none of them seem to work.
My problem is: I feel good about my layout, and positioning, along with the container and background. Where I am getting stuck is trying to get all the form information aligned properly just like the sample page FreeCodeCamp has for the Survey Form. How the text is perfectly aligned on the left with a small gap in the middle and the fill-out stuff to the right of it. But nothing! I’ve used ‘inline-block’ along with several elements, and still no luck. At this point, I’m convinced I didn’t use the correct Classes for the divs.
Please send help!
Your code so far
<!DOCTYPE html>
<html>
<head>
<title>Survey Form Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Nanum+Gothic" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>
<body>
<div id="container">
<h1 id="title">Survey form</h1>
<div id="description">
<p>We'd like to hear your feedback in your stay!</p>
</div>
<form id="survery-form" action="https://en.wikipedia.org/wiki/Thank_You" method="GET" target="_blank">
<!-- name start-->
<div class="rowTab">
<div class="labels">
<label id="name-label" for="name">Name:</label>
</div>
<div class="rightTab">
<input autofocus type="text" name="name" id="name" class="input-field" placeholder="Enter your name" required>
</div>
</div>
<!-- name end -->
<!-- email start -->
<div class="rowTab">
<div class="labels">
<label id="email-label">Email:</label>
</div>
<div class="righTab">
<input type="text" name="email" id="email" class="input-field" required placeholder="Enter your email" required>
</div>
</div>
<!-- email end -->
<!-- age start -->
<div class="rowTab">
<div class=labels>
<label id="age-label">Age:</label>
</div>
<div class="rightTab">
<input type="text" name="age" id="number" min="1" max="125" class="input-field" required placeholder="Enter your Age">
</div>
</div>
<!-- age end -->
<!-- stay start -->
<div class="rowTab">
<div class="labels">
<label id="stay-label">What option best decribes your stay?</label>
</div>
<div>
<select id="dropdown" class="dropdown" name="stay" size="1" required>
<option>Please select one</option>
<option value="sucked">Our stay here sucked</option>
<option value="alright">Alright for the most part</option>
<option value="great">It was great</option>
<option value="loved">I FREAKIN' LOVED IT!</option>
</select>
</div>
</div>
<!-- stay end -->
<!-- recommendation start -->
<div class="rowTab">
<div class="labels">How likely is that you would recommend Turtle Resort?
</div>
</div>
<div class="rightTab">
<ul>
<li class="radio"><label>Definitely<input name="radio-bottons" value="1" type="radio" class="userRatngs"></label></li>
<li class="radio"><label>Maybe<input name="radio-bottons" value="2" type="radio" class="userRatings"></label></li>
<li class="radio"><label>Not sure<input name="radio-bottons" value="3" type="radio" class="userRatings"></label></li>
</ul>
</div>
<!-- recommendation end -->
<!-- improvements start -->
<div class="rowTab">
<div class="labels">
<label class="preferences">Things that should be improved in the future<br>(Check all that apply):
</label>
</div>
<div>
<ul id="preferences">
<li class="checkbox"><label><input type="checkbox" name="improvements" value="1">Parking</label></li>
<li class="checkbox"><label><input type="checkbox" name="improvements" value="2">Bathrooms</label></li>
<li class="checkbox"><label><input type="checkbox" name="improvements" value="3">Amenities</label></li>
<li class="checkbox"><label><input type="checkbox" name="improvements" value="4">Free Wi-Fi</label></li>
<li class="checkbox"><label><input type="checkbox" name="improvements" value="5">Accommodations</label></li>
<li class="checkbox"><label><input type="checkbox" name="improvements" value="6">Daily Housekeeping</label></li>
<li class="checkbox"><label><input type="checkbox" name="improvements" value="7">Furniture and linens</label></li>
<li class="checkbox"><label><input type="checkbox" name="improvements" value="8">Rolling Check-in/out</label></li>
<li class="checkbox"><label><input type="checkbox" name="improvements" value="9">24/7 Customer Service</label></li>
<li class="checkbox" class="checkbox"><label><input type="checkbox" name="improvements" value="10">Hotel Planning & Bookings</label></li>
</ul>
</div>
</div>
<!-- improvements end -->
<!-- comments starts -->
<div class="rowTab">
<div class="labels">
<label class="comments">Any Comments or Suggestions?
</label>
</div>
<div>
<textarea class="textarea" rows="5" cols="50">Enter your comment here...
</textarea>
</div>
</div>
<!-- comments end -->
<!-- submit button start -->
<div class="submit">
<input type="submit">
</div>
<!-- submit button end -->
</form>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
body {
text-align: center;
background-image: url('https://images.pexels.com/photos/1167021/pexels-photo-1167021.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
background-position: center;
background-repeat: no-repeat;
background-size: auto;
font-family: 'Nanum Gothic', sans-serif;
font-size: 1.2em;
}
#container {
background-color: #fff;
background-position: relative;
border-radius: 5px 5px;
max-width: 100%;
max-height: 1000px;
margin: 2% 20%;
padding: 50px;
opacity: 0.7;
z-index: 1;
}
#title {
font-family: 'Montserrat', sans-serif;
font-size: 2.5em;
padding-top: 3.5px;
padding-bottom: 10px;
}
#description {
padding-bottom: 100px;
}
#description p {
border-bottom: 1px solid #D3D3D3;
padding: 40px;
}
li {
list-style-type: none;
}
.textarea {
width: 100%;
outline: none;
resize: none;
width: 80%;
height: 80%;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36.
Link to the challenge: