Survey Form Certification Project Only at 20%

HTML-CSS
1

I got a 20% on this certification project and was just in need of some help on improving my score and the organization of my code. I’ve been doing this with no guidance since I started and this is my first forum post reaching out for help.Any kind of advice or aid would be greatly appreciated. CodePen Link - https://codepen.io/BisratZerefa/pen/WNJEywW

  **Your code so far**

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Survey Form</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <div class="container">
    <header class="header">
  <h1 id="title" class="text-center">Zoologist Intern Regisitration</h1>
  <p id="description" class="encrypt">All information gathered from this form is encrypted and secure</p>
  <form id="survey-form">
    <div class="form-group">
    <label id="name-label" class="personal">Name</label>
      <input id="name" type="text" placeholder="Enter First Name" required>
      </div>
      <div class="form-group">
    <label id="email-label" class="personal">Email</label>
      <input id="email" placeholder="Enter Email" type="email" required>
      </div>
      <div class="form-group">
   <label id="number-label" class="personal">Age</label>
      <input id="number" 
      type="number"
      min="18"
      max="85"
      placeholder="Enter Age"
      class="age"
      required>
      </div>
      <div class="form-group">
      <p>Area of Intrest</p>
     <select id="dropdown" class="intrests">
        <option disabled selected value value="Select An Option">Select An Option</option>
        <option value="Cetology">Cetology</option>
        <option value="Anthrozoology">Anthrozoology</option>
        <option value="Archaeozoology">Archaeozoology</option>
        <option value="Ethology">Ethology</option>
      </select>
      </div>
      <div class="form-group">
      <p>How do you hear about us?</p>
       <label>
         <input
          name="prefer"
          value="Webpage"
          type="checkbox"
        class="input-checkbox"
          />Webpage</label>
        <label>
         <input
          name="prefer"
          value="Radio"
          type="checkbox"
       class="input-checkbox"
            />Radio</label>
        <label>
          <input
          name="prefer"
          value="Local Ad"
          type="checkbox"
        class="input-checkbox"
            />Local Ad</label>
            <div class="form-group">
          <label>
            <input
            name="prefer"
            value="Newspaper"
            type="checkbox"
        class="input-checkbox"
            />Newspaper</label>
            </div>
<p>Would you be intrested in paid position after internship?</p>
<div class="form-group">
<label>
    <input type="radio" id="radio" value="Absolutely" name="radio" class="radio">Absolutley</input>
</label>
</div>
<div class="form-group">
  <label for="radio">
    <input type="radio" id="radio" value="Likely" name="radio" class="radio">Likely</input>
    </label>
    <div class="form-group">
      <label for="radio">
        <input type="radio" name="radio" value="Not Sure" id="radio" class="radio">Not Sure</input>
      </label>
      <p>Questions or Concerns</p>
      <textarea placeholder="Questions about registration......?" class="textarea"></textarea>
    <button class="submit-button" id="submit" type="submit">Submit</button>
  </form>
</body>

body {
  font-family: 'Garamond', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  color: yellow;
  margin: 2;
  text-align: center;
  background: green;
}
h1 {
  text-align: center; 
  font-style: Italic;
  text-shadow: 1px 0px
}
p{
  font-size: 20px;
  width: 100%;
  font-weight: bold;
  
}
.textarea{
  min-height: 50px;
  width: 75%;
  padding: 0.100rem;
  resize: vertical;
  margin-bottom: 20px;
}
.encrypt{
  text-align: center;
  font-style: italic;
}
.container{
  align-text: center;
}
.input-checkbox{
  align-item: center;
}
  h1 {
  font-weight: 400;
  line-height: 1.2;
}
p {
  font-size: 1.225rem;
}
h1,
p {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

label {
  display: flex;
  align-items: center;
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
  margin-right: auto;
  margin-left: auto;
}
.radio{
  border-style: solid;
}
.age{
  width: 205px
}
.intrests{
  margin-bottom: 10px

}
.personal{
  margin-left: 230px;
  text-shadow: 1px 0px;
  padding: 10px;
  font-size: 20px
}
.submit-button {
  display: block;
  width: 50%;
  background:  green;
  padding: 0.100rem;
  color: inherit;
  border: none;
  cursor: pointer;
  margin-right: auto;
  margin-left: auto;
}

  **Your browser information:**

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14816.131.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Challenge: Survey Form

2

The 20% means you are 20% of the way through the Responsive Web Design Certification. Not that your code is “20% good” or whatever.

1 Like
3

Okay thanks that clears a lot up.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.