Hello, Can I please have some feedback on my Survey form

Code Feedback
1

Hi I am struggling with my survey form. I know what I want to put on it but I’ve made a big mess out of it.
Thank you

<!doctype html>
<head>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="mystyle.css">
  
</head>
   <body>
   <h1 id="title">Survey Form</h1>

<p id="description"><strong>How do you like Free Code Camp</strong></p>

   <form action="#" method="get" id="survey-form"></form>
 
<div id="personal">

  <p> 
 <label for="name" id="name-label">Name</label> 
  <input type="text" placeholder="please enter your full name" required id="name"></p> 

<p>
<label for="email" id="email-label">Email</label> 
  <input type="email" placeholder="please enter your email" required id="email"></p>

<p>
  <label for="number" id="number-label">Age</label>
  <input type="number" min="1" max="125" placeholder="age" required id="number"></p>
   
  <div class="dropdown">    
  <p id="sex">Sex<name="sex" id="dropdown" float="right">
  
    <select> 
    <option value="male">Male</option>
    <option value="female">Female</option>
     <option value="other">Other</option></p></select>
</div>
    
  <h2 id="description2">What do you enjoy the most about Free code camp</h2>
    
  <p
    <label for="the curriculum"
    type="radio" name="like1" value="the curriculum">The curriculum
    </label 
    
  <p2>
    <input type="radio" name="like2" value="the community">The community</p3>
  
  <p4
  
</div>
</>

Css


body {background: #ff0066;}

#description: {font-size:20px;
                margin: 25px;}

font-family: {'raleway', sans-serif;}

h1 {
  text-decoration: underline;
  text-align: center;
  color: black;
  text-transform: uppercase;
  line-height:20px;
  border-radius: 15px;
  text-shadow: 3px;}


#name-label 
{border-radius: 25px 15px 25px 15px;
 border: 2px;}

.dropdown 
{position: absolute;
display: inline-block;}

dropdown-content: 
{display: none;
position: absolute;
min-width: 60px;
box-shadow: 0px 10px 16px 8px; 
background-color: #f9f9f9 rgb (0,0,0,0,0.2);
 

#body
{column-count:2;
column-gap:25px;
column-rule: 6px dashed;
  margin-left: 4em;}

p1 {font-size;15px;
    padding:2em;}
p2 {font-size:15p;}
1 Like
2

Hi,

It would help to have a link to a rendering of the site get a feedback.
Could you share with us the link after you paste your code in codepen?

If need help with this just ask!

3

okay, I’ve just added my codepen link into my message

4

Great it really helps.

I found the issue: in the CSS section line 24 you have a position absolute line. If you remove it, the overlap problem is solved.

5

thank you! My dashed line between columns is gone too.

6

Try removing most of the css and adding back line by line. You should see the effect of each line you add.
If not you need to check if the syntax or the spelling is correct.

CSS does not give errors if it is not correct. It just silently do nothing. So you should check that each line is useful.

As a good practice it is recommended to use classes more often than id selectors. The advantage of classes is that you can use them on multiple elements in the page while id must be unique.

Good work by the way on improving the page :+1: