Build a survery form

Tell us what’s happening:
Describe your issue in detail here.

Your code so far

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="style.css">

    <title>Survey form</title>

</head>

<body>

    <div class="container">

  <header>

      <h1 id="title">Form</h1>

      <p id="description">This is a form.</p>

  </header>

  <!--start of form-->

  <form id="survey-form">

   <div class="form-group-name">

    <label id="name-label" for="name">

     <input   type="text"

        name="name"

        id="name"

        class="form-control"

        placeholder="Enter your name"

        required required>

        Please enter your name</label>

   </div>

   <!--start of email-->

   <div class="form-group">

    <label id="name-label" for="email">

     <input   type="text"

        name="name"

        id="email"

        class="form-control"

        placeholder="Enter your email"

        required required>

        Please enter your email</label>

   </div>

   <!-- start of age -->

   <div class="form-group">

    <label id="age-label" for="number">

     <span class="clue"></span>(optional)</label>

     <input

     type="number"

     name="age"

     id="number-age"

     min="10"

     max="140"

     class="form-control"

     placeholder="age"

     />

   </div>

   <!-- start of option rols -->

   <div class="form-group">

       <p>Which option best describes your current role?</p>

       <select id="dropdown" name="role" class="form-control" required>

           <option disabled selected value>select current role</option>

           <option value="student">student</option>

           <option value="full-time-employe">full time employe</option>

           <option value="part-time-employe">part time employe</option>

           <option value="perfer-not-to-say">perfer not to say</option>

           <option value="other">other</option>

       </select>

   </div>

   <!-- start of radio  -->

   <div class="form-group">

       <p>Would you recommend coding for free camp</p>

       <label>

       <input

        type="radio"

        value="defintely"

        name="user-recommend"

        class="input-radio"

        checked/>Defintely

    </label>

    <label>

     <input

      name="user-recommend"

      value="maybe"

      type="radio"

      class="input-radio"

     />Maybe</label>

     <label>

         <input

         name="user-recommend"

         value="need-to-think-about-it"

         type="radio"

         class="input-radio"

         />Need to think about it</label>

   </div>

   <!-- start of favorite dropdown -->

   <div class="form-group">

       <p>What is your favorite thing about us?</p>

       <select name="dropdown" id="role">

           <option disabled selected value>select an option></option>

        <option value="projects">Projects</option>

        <option value="opensource">Open source</option>

        <option value="challenges">Challenges</option>

        <option value="community">Community</option>

       </select>

   </div>

   <!-- start of checkbox -->

   <div class="form-group">

       <p>What would you like to see improved?(Check all that apply)</p>

       <label>

           <input type="checkbox" name="user-chosen" value="front-end-project"

           class="input-checkbox"/>Front end Projects</label>

        <label><input type="checkbox"

            name="user-chosen"

            value="back-end-project"

            class="input-checkbox">Back end Projects</label>

        <label><input type="checkbox"

                name="user-chosen"

                value="visualization"

                class="input-checkbox">Data Visualization</label>

               

        <label><input type="checkbox"

            name="user-chosen" value="challenges"

            class="input-checkbox"

            >Challenges</label>

            <label><input type="checkbox" name="user-chosen" value="open-source-community"

                class="input-checkbox">Open Source Community</label>

                <label><input type="checkbox"

                    name="user-chosen"

                    value="gitter-help-rooms"

                    class="input-checkbox">Gitter Help Rooms</label>

                    <label><input type="checkbox" name="user-chosen"

                    value="videos"    

                     class="input-checkbox">Videos</label>

                     <label><input type="checkbox" name="user-chosen"

                        value="city-meetups"

                        class="input-checkbox"/>City Meetups</label>

                    <label><input type="checkbox"

                            name="user-chosen"

                            value="wiki"

                            class="input-checkbox"/>Wiki</label>

                           

                    <label><input type="checkbox"

                            name="user-chose"

                            value="forum"

                            class="input-checkbox"/>Forum</label>

                    <label><input type="checkbox"

                            name="user-chosen"

                            value="additional-courses"

                            class="input-checkbox"/>Additional Courses</label>

   </div>

   <!-- start of input textarea -->

   <div class="form-group">

       <p>Any comments or suggestions?</p>

       <textarea

       id="comments"

       class="input-textarea"

       name="comment"

       placeholder="Enter your comment here..."

     ></textarea>

   </div>

   <!-- start of submit button -->

   <div class="form-group">

       <button type="submit" id="submit"

       class="submit-button">Submit

    </button>

   </div>

  </form>

    </div>

</body>

</html>
.container {

    display: grid;

    height: 100%;

    width: 50%;

    grid-template-rows: repeat(8, 1fr);

    grid-template-columns: repeat(5, 1fr);

    grid-gap: 20px;

}

header {

    padding: 2rem 40rem 5rem 26rem

}

p {

    text-align: center;

}

#title {

    text-align: center;

    margin: 0rem 10rem 0rem 27rem;

    /* figure out padding */

    padding: 1rem;

    font-family: 'Raleway', sans-serif;

    min-height: 40px;

    min-width: 50px;

    border: 1px solid;

    border-radius: 1rem;

    background-color:lightblue;

    grid-column: 1 / 3;  

}

#description {

    margin: 1rem 3rem 1rem 20rem;

     padding: 0rem 0rem 0rem 0rem;

    text-align: center;

    border: 1px solid;

    border-radius: .5rem;

    background-color: red;

}

body {

    /* figure out how to use img */

    background-color: teal;

}

.survey-form {

 

}

.form-group-name {

    border: 1px solid;

    background-color: lightblue;

    grid-row: 2;

    grid-column: 2;

}

.form-group {

border: 1px solid ;

margin: 2rem 9rem 1rem 10rem;

padding: 1rem 4rem 2rem 3rem;

background-color: lightblue;

box-shadow: 10px 5px 5px  powderblue;

}

label {

    margin: .2rem .2rem .2rem .2rem;

    padding: .1rem .1rem .1rem .1rem;

}

.form-control {

  margin: .4rem .4rem .4rem .4rem;

   

};

/* .clue {

} */

.input-radio {

}

.input-checkbox {

}

.input-textarea {

}

.submit-button {

   

}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:97.0) Gecko/20100101 Firefox/97.0

Challenge: Build a Survey Form

Link to the challenge:

Hi @sherlockholmes.swiga,

What is your question? Also, it would be better to share the link of your project.

Sorry I was in a hurry the problem I’m having is I can’t get the grid to work, and I thought I would I ask someone to see if anybody with a little more knowledge on the css grid would help me if the have the spare time that is, but on that note I made the form-group-name in html ("the rest is just form-group) today to see if that was the problem with the grid I’m hoping to make them more narrow and maybe make the boxes move like what them to.

The css grid is what my problem I’m just trying to make the boxes not as wide but the grid won’t respond but I know the css is working.

Here is the link to the repo GitHub - Michaelswigart/Build-a-Survey-Form

It would be better if you provide a link to your live code so we don’t have to copy/paste.
When you submit your projects the link must be to your live code so that’s what you can place here.

A lot of the HTML code you’ve supplied looks almost the same as the sample code.
When doing the projects make the project from scratch, with your own code, style and content. Don’t take code from the sample project.
The projects are not just another challenge. Each one is meant to be a significant step in your progress. Every project you do will require research, planning, trial and error, and strengthening your skills beyond what you gained from the incremental challenges.
The hardest part of coding is looking at a problem and coming up with a plan to solve that problem. Starting out by looking at someone else’s code completely bypasses that step.
The sample projects show one way the project can be completed. The instructions say to make yours “functionally similar” and to “give it your own personal style”.

I’m not sure what you want to accomplish by using grid. This is a simple form. As a general rule of thumb, use Flexbox for a single axis (either X or Y) layout, CSS Grid for a 2-axis layout.

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

I was a little forget full when it came to the html form so I used the code to help remind me but your right it looks like a copy I just really wanted to try the css and see what I could do and I didn’t know how to change it to something else so sorry for not being very imaginative, I just wanted to try using css grid instead but I now see that I was wrong to try and sorry for wasting your time thank you for taking time out of your day and thank you for the reply and sorry for not using ` back ticks I was in a hurry and it was my first time posting here.