Survey Form - Build a Survey Form

Tell us what’s happening:

Hello Good day,
I clicked on “Run the Test” button after I finished the HTML codes but not included the CSS. MY progress was saved as my final answer for the certificate project. Is there a way I can upload the CSS codes to my project so it will be displayed in my certificate when clicked on view project.?

Your code so far

<!-- file: index.html -->
<link rel="stylesheet" href="styles.css">
<body>

<h1 id=title>Welcome to COlab</h1>
<p id=description>Survey Form</p>
<form id=survey-form>

<label id="name-label">Enter Your Name:
   <input id=name type="text" required placeholder="Name"></input>
</label>

<label id="email-label">Enter Your Email: 
  <input id="email" type="email" required placeholder="example@domain.com">
  </input>
</label>

<label id="number-label">Enter Phone Number:
  <input id="number" type="number" required min="11"    placeholder="+234" ></input>
</label>


<select id="dropdown">
  <option value="""">(District)</option>
  <option value="LN">Barnawa</option>
  <option value="MCH">NDA</option>
  <option value="NY">Narayi</option>
  <option value="Sdy">Karji</option>
  <option value="Cai">Sabo</option>
  <option value="Lg">Goringora</option>

   <legend>LGA of resident(required) </legend>
  <input type="radio" value="MALE" name="mark" ><span class="sex">MALE</span></input>
  <input type="radio" value="FEMALE" name="mark" ><span class="sex">FEMALE</span></input>
</select>
<label for="what you want" id="programm-choice">I want to learn:<br>

<ol>
<li>
  <input type="checkbox" value="S-E">Software Programming</input>
  </li>

  <li>
    <input type="checkbox" Value="S-D">Software Design</input>
  </li>

<li>
  <input type="checkbox" Value="S-T">Software Testing</input>
</li>

<li>
<input type="checkbox" Value="D-A">Data Analysis</input>
</li>
</ol>

<label>

<label for="bio">Provide a bio:
<textarea id="textarea" rows="10" cols="50" placeholder="start typing..."></textarea>
</label>

<input id="submit" type="submit"></input>
  </form>
  </body>
  


/* file: styles.css */
body{
    width: 100%;
    height: 100vh;
    margin: 0;
    background-color: #1b1b32;
    color: #f5f6f7;
    font-family: Tahoma, poppins;
    font-size: 16px;
    
  }
  #name, #email, #number, #password{
    display:block;

  }

   h1, p {
    margin: 1em auto;
    text-align: center;
  }

  #survey-form{
    width: 60vw;
    max-width: 500px;
    min-width: 300px;
    margin: 0 auto;
    padding-bottom: 2em;
    background: rgb(255,255,0);
background: linear-gradient(160deg, rgba(255,255,0,1) 50%, rgba(128,128,128,1) 80%);
  }

  label{
    padding:5px;
    border:none;
    border-radius:5px;
    display: block;
    margin: 0.5rem 0;
    color:#5b5353;
    
  }
  #dropdown{
    display:block;
    margin: 0.5rem 0.5rem;
    width: 25%;
    min-height: 2em;
    color:white;
    background-color:#5b5353;;
    border:2px solid white;
  }

  input[type="radio"], [type="checkbox"] {
    display:inline-block;
    width:unset;
    min-height: unset;
    margin-left: 25px;
    margin-top:2rem;
    margin: 0.5rem ;
    color:#5b5353;;
  }
  
  textarea{
    display:block;
    margin: 0.5rem 0;
    width: 100%;
    min-height: 2em;
  }
  
  input{
    margin: 10px 0 0 0;
    width: 80%;
    min-height: 2em;
    
    
  }
#submit{
    display: block;
    width: 20%;
    margin: 1em auto;
    height: 2em;
    font-size: 1.1rem;
    background-color: transparent;
    border-color: white;
    min-width: 280px;
    color:white

}
#submit:hover{
  background-color:white;
  color:black;
}
#submit:active{
  opacity:0.5;
}

#programm-choice{
  display:block;
  color:#5b5353;;
  

}
 
 ul{
  text-decoration:none;
 }

.sex{
  color:#5b5353;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Challenge Information:

Survey Form - Build a Survey Form

Hello, I did this project without CSS and don`t think it was needed, thats the reason there is not any code.

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