Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                     <!-- Here is the header and the beginning of the form -->
<div class="container">
  <header class="header">
 <h1 id="title">Financial Freedom Survey Form</h1>
  <p id="description">Thank you for taking the time to help us improve your life</p>
  </header>
   <form id="survey-form">
     <!-- Above is the header and the beginning of the form -->
     
     <!-- Below are the first 3 fields, Name, Email and the Age -->
    <div class="form-group">
     <label id="name-label" for="name">Name</label>
      <input 
       type="text"
       name="name"
       id="name"
       class="form-control"
       placeholder="What's your name?"
       required>
    </div>
    
    <div class="form-group">
     <label id="email-label" for="email">Email</label>
      <input
       type="email"
       name="email"
       id="email"
       class="form-control"
       placeholder="Enter your email"
       required>
    </div>
    
    <div class="form-group">
     <label id="number-label" for="number">Age<span class="clue"> (if you want)</span></label>
      <input
       type="number"
       name="age"
       id="number"
       class="form-control"
       min="7"
       max="99"
       placeholder="How old are you?"> 
    </div>
     <!-- Above are the first 3 fields, Name, Email and the Age -->
     
     <!-- Here is the first dropdown, the dream job selection -->
    <div class="form-group">
     <p>What is your dream job?</p> 
      <select id="dropdown" class="form-group" name="dream-job">
       <option disabled selected value>Select one</option>
       <option value="wage">Wage worker</option>
       <option value="secure">Secure position at a good company</option> 
       <option value="competitive">Competitive job with the greatest hierarchy</option>
       <option value="owner">Bussiness owner</option>
       <option value="investor">Long term investor (rental properties, stocks, crypto etc.)</option>
       <option value="prefnotsay">I prefer not to say</option> 
       <option value="other">Other</option>
      </select> 
    </div>
     <!-- Above is the first dropdown, the dream job selection -->
     
     <!-- Here is the 3 radio selctions, Money, Time, Energy -->
    <div class="form-group">
     <p>What of the 3 do you have the most?</p>
     <label> 
      <input
       name="mon-tim-ener"
       value="money"
       type="radio"
       class="input-radio"
       checked>Money</label>
     <label> 
      <input
       name="mon-tim-ener"
       value="time"
       type="radio"
       class="input-radio"
       checked>Time</label>
     <label> 
      <input
       name="mon-tim-ener"
       value="energy"
       type="radio"
       class="input-radio"
       checked>Energy</label>
    </div>
     <!-- Above is the 3 radio selctions, Money, Time, Energy -->
     
     <!-- Below is the second dropdown, what do you like most about being financially free? -->
    <div class="form-group">
     <p>What do you like most about being financially free?</p>
      <select name="finan-free" id="finan-free" class="form-group">
       <option disabled selected value>Select one</option>
       <option value="travel">Travelling all over the world</option>
       <option value="security">Financial security</option>
       <option value="family">Have quality time with family</option>
       <option value="hobbies">Trying new and exciting hobbies</option>
       <option value="donate">Having the pleasure to donate</option>
      </select>
    </div>
     <!-- Below is the second dropdown, what do you like most about being financially free? -->
     
     <!-- Here is the group of checkboxes at the end -->
    <div class="form-group">
     <p>
      What would you like to improve in yourself?
       <span class="clue">(Select all that apply)</span>
     </p>
     <label>
      <input
       name="prefer"
       value="big-goals"
       type="checkbox"
       class="input-checkbox">Working towards big goals</label>
     <label>
      <input
       name="prefer"
       value="self-esteem"
       type="checkbox"
       class="input-checkbox">Increasing your self-esteem</label>
     <label>
      <input
       name="prefer"
       value="pos-affirm"
       type="checkbox"
       class="input-checkbox">Making positive affirmations everyday</label>
     <label>
      <input
       name="prefer"
       value="willpower"
       type="checkbox"
       class="input-checkbox">Increasing your willpower</label>
     <label>
      <input
       name="prefer"
       value="passion"
       type="checkbox"
       class="input-checkbox">Search and find your passion</label>
     <label>
      <input
       name="prefer"
       value="care-less"
       type="checkbox"
       class="input-checkbox">Carring less about others think</label>
     <label>
      <input
       name="prefer"
       value="safety"
       type="checkbox"
       class="input-checkbox">Creating margins of financial safety</label>
     <label>
      <input
       name="prefer"
       value="comp-advant"
       type="checkbox"
       class="input-checkbox">Having or learning a competitive advantage</label>
     <label>
      <input
       name="prefer"
       value="overthink"
       type="checkbox"
       class="input-checkbox">Learn to limit overthinking</label>
     <label>
      <input
       name="prefer"
       value="self-love"
       type="checkbox"
       class="input-checkbox">Learn to love yourself more</label>
     <label>
      <input
       name="prefer"
       value="consist"
       type="checkbox"
       class="input-checkbox">Be consistent with big tasks and even small tasks</label>
    </div>
     <!-- Above is the group of checkboxes at the end -->
         
     <!-- Here is the textarea for the comments-->
    <div class="form-group">
     <p>Any thoughts or suggestions?</p>
      <textarea
       id="comments"
       class="input-textarea"
       name="comment"
       placeholder="Enter your comment here...">
      </textarea>
    </div>
     <!-- Above is the textarea for the comments-->
        
     <!-- This is the last element, the submit button and end of the form -->
    <div class="form-group">
     <button id="submit" class="submit" type="submit">
       Submit
     </button>
    </div>
   </form>
</div>

              
            
!

CSS

              
                @import url("https://fonts.googleapis.com/css?family=Poppins:200i,400&display=swap");

/* we imported in a global scope this palette of colors OoO noice */
:root {
  --color-white: #f3f3f3;
  --color-darkblue: #1b1b32;
  --color-darkblue-alpha: rgba(27, 27, 50, 0.8);
  --color-green: #37af65;
}

* *::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-white);
  margin: 0;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  background: var(--color-darkblue);
  background-image: linear-gradient(
      115deg,
      rgba(0, 190, 200, 0.8),
      rgba(130, 136, 170, 0.7)
    ),
    url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

h1 {
  font-weight: 400;
  line-height: 1.2;
}

p {
  font-size: 1.1rem;
}

h1,
p {
  margin-top: 0;
  margin-bottom: 0.5;
}

label {
  display: flex;
  align-items: center;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

input,
button,
select,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button {
  border: none;
}

.container {
  width: 100%;
  margin: 3rem auto 0 auto;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

.header {
  padding: 0 0.7rem;
  margin-bottom: 1.8rem;
  justify-content: center;
  text-align: center;
}

.description {
  font-style: italic;
  font-weight: 200;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}

.clue {
  margin-left: 0.25rem;
  font-size: 0.9rem;
  color: #e4e4e4;
}

.text-center {
  text-align: center;
}

/* OoO the form boiii */

form {
  background: var(--color-darkblue-alpha);
  padding: 2.5rem 0.7rem;
  border-radius: 1.2rem;
}

@media (min-width: 480px) {
  form {
    padding: 2.5rem;
  }
}

.form-group {
  margin: 0 auto 1.2rem auto;
  padding: 0.25rem;
}

.form-control {
  display: block;
  width: 100%;
  height: 2.3rem;
  padding: 0.3rem 0.7rem;
  color: #495057;
  background-color: #f2feff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.7rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus {
  border-color: #80bdff;
  outline: 5;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.input-radio,
.input-checkbox {
  display: inline-block;
  margin-right: 0.6rem;
  min-height: 1.2rem;
  min-width: 1.2rem;
}

.input-textarea {
  min-height: 120px;
  width: 100%;
  resize: vertical;
}

.submit {
  display: block;
  width: 100%;
  padding: 0.75rem;
  background: var(--color-green);
  color: inherit;
  border-radius: 6px;
  cursor: pointer;
}

              
            
!

JS

              
                
              
            
!
999px

Console