osamaayub/index.html

## index.html

  <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<body>

<div class="container">
  <form>
<div id="tidal">
  <h1 id="title">Herod Co. Animal Control</h1><strong>Rodent Removal Unit</strong></div></form><br><br><br>

<section id="rru-description">
  <p id="description"><strong>2020 CENSUS</strong></p>
  </section>
  <form id="survey-form">
    <h2 id="title-pad">Sign-up here:</h2>


  <div class="form-group">
      <label id="name-label" for="name">Name</label>
      <input
        type="text"
        name="name"
        id="name"
        class="form-control"
        placeholder="Enter 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">(optional)</span></label
      >
      <input
        type="number"
        name="age"
        id="number"
        min="10"
        max="99"
        class="form-control"
        placeholder="Age"
      />
    </div>
<br>


<fieldset class="form-group">
        <legend>What kind of kitty are you?</legend>
        <input id="liger" type="radio" name="levels" value="liger">
        <label for="liger">Liger Kitten </label><br>
        <input id="intermediate" type="radio" name="levels" value="Not-a-rabbit">
        <label for="intermediate">Not-a-rabbit</label><br>
        <input id="master" type="radio" name="levels" value="master">
        <label for="master">Beast Master</label>
      </fieldset>

  <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="job">Full Time Job</option>
        <option value="learner">Full Time Learner</option>
        <option value="preferNo">Prefer not to say</option>
        <option value="other">Other</option>
    </select></div>
 <br>


<div class="form-group"><br>
 <p>What checkboxes would you like to check?</p><br>
 <section id="grid-container">
  <div "id=item2">
   <label><input class="input-checkbox" type="checkbox" name="likes" value="ice-cream">
 Carrot Ice Cream</label><br>
  <label
        ><input
          name="likes"
          value="Warm Woolen Mittens"
          type="checkbox"
          class="input-checkbox"
                />Warm Woolen Mittens</label><br>
    <label
        ><input
          name="likes"
          value="yarn"
          type="checkbox"
          class="input-checkbox"
                />Yarn</label>
   </div>
  <div id="item3">

       <input
          name="likes"
          value="Brown Paper Package"
          type="checkbox"
          class="input-checkbox">Brown Paper Packages</label>
   <br><br>
  <label><input
          name="likes"
          value="Bright Copper Kettles"
          type="checkbox"
          class="input-checkbox"
         />Bright Copper Kettles</label>
   <br><label><input
                 name="likes"
                 value="easter"
                 type="checkbox"
                 class="input-checkbox">Easter</label>
   </div></section>
    <div class="form-group">
      <p>Please leave any comments or questions below...</p>
      <textarea
        id="comments"
        class="input-textarea"
                type="textarea"
                name="comments"
                placeholder="Leave comments here">
</textarea></div></section>
    <Div>
      <button id="submit" class="submit-button">
        <input type="submit"
               name="submit"

        </button>

## mp-survey.markdown

      
    Raw
  

              mp-survey.markdown
            
          
    MP-survey

A Pen by osama ayub on CodePen.
License.

  
## style.css
@import url('https://fonts.googleapis.com/css?family=Poppins:200i,400&display=swap');
@import url("https://fonts.googleapis.com/css?family=IM+Fell+Great+Primer+SC&display=swap" rel="stylesheet");
:root {
  --color-white: #f2870c;
  --color-darkblue: #234099;
  --color-darkblue-alpha: rgba(27, 27, 50, 0.8);
  --color-green:#35ff23;
}

}
*,
*::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;
}

/* mobile friendly alternative to using background-attachment: fixed */
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(58, 58, 158, 0.8),
      rgba(136, 136, 206, 0.7)
    ),
    url(https://static-assets.tesla.com/share/tesla_design_studio_assets/CYBERTRUCK/NVRP_mx9o6kxjwvf.png?&amp;version=v0027d202001143340>);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

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

p {
  font-size: 1.125rem;
}

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

label {
  display: flex;
  align-items: center;
  font-size: 1.125rem;
  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: 2rem auto 1rem auto;

}

.shade2{background: var(--color-darkblue-alpha);
  padding: 2.5rem 0.625rem;
  border-radius: 0.25rem;
}
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

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

.header {: center;
}
#rru-description{
        background: var(--color-darkblue-alpha);
  font-family: "IM Fell Great Primer SC";
  font-size: 100%;
        color: #f2870c;
        border-radius: 2em;
  border-style: solid;
  border-color: #f2870c;
        padding: .25rem;
        position: relative;
        top: 2rem;
  bottom: 2rem;
        left: 50%;
        margin-right: -50%;
  width: 80%;
        transform: translate(-50%, -50%); }
}
}

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

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

/* form */
form {
  background: var(--color-darkblue-alpha);
  padding: 5rem;
  border-radius: 3.25rem;
  border-radius: 2em;
  border-style: solid;
  border-color: #f2870c;
}

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

.form-group {
  margin: 1.5rem auto 1.5rem auto;
  padding: 0.5rem;

}

.form-control {
  display: flex;
  width: 100%;
  height: 2.375rem;
  padding: 0.375rem 0.75rem;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

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

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

.input-textarea {
  min-height: 100px;
  width: 90%;
  margin: 0 auto 0 auto;
  padding: 0.625rem;
  resize: vertical;
}

.submit-button {
  display: block;
  width: 100%;
  padding: .75rem;
  background: var(--color-green);
  color: green;
  border-radius: .8rem;
  cursor: pointer;
}
#title-pad {color: white;
  height: 1rem;
  width: 100%;
}
#tidal{text-align: center;

}

#description {
font-size: 3rem;
  text-align: center}
#grid-container {
    font-size: inherit;
    min-height: 200px;
    width: 100%;
    background: inherit;
  display: flex;}
#item1 {grid-area: question;
  width: 100%;}
.input-textarea {
  min-height: 120px;
  width: 100%;
  padding: 0.5rem auto 0 0;
  resize: vertical;}
#item2 {grid-area: answer1;}
#item3 {grid-area: answer3;}

	<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
	<body>

	<div class="container">
	<form>
	<div id="tidal">
	<h1 id="title">Herod Co. Animal Control</h1><strong>Rodent Removal Unit</strong></div></form><br><br><br>

	<section id="rru-description">
	<p id="description"><strong>2020 CENSUS</strong></p>
	</section>
	<form id="survey-form">
	<h2 id="title-pad">Sign-up here:</h2>


	<div class="form-group">
	<label id="name-label" for="name">Name</label>
	<input
	type="text"
	name="name"
	id="name"
	class="form-control"
	placeholder="Enter 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">(optional)</span></label
	>
	<input
	type="number"
	name="age"
	id="number"
	min="10"
	max="99"
	class="form-control"
	placeholder="Age"
	/>
	</div>
	<br>


	<fieldset class="form-group">
	<legend>What kind of kitty are you?</legend>
	<input id="liger" type="radio" name="levels" value="liger">
	<label for="liger">Liger Kitten </label><br>
	<input id="intermediate" type="radio" name="levels" value="Not-a-rabbit">
	<label for="intermediate">Not-a-rabbit</label><br>
	<input id="master" type="radio" name="levels" value="master">
	<label for="master">Beast Master</label>
	</fieldset>

	<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="job">Full Time Job</option>
	<option value="learner">Full Time Learner</option>
	<option value="preferNo">Prefer not to say</option>
	<option value="other">Other</option>
	</select></div>
	<br>


	<div class="form-group"><br>
	<p>What checkboxes would you like to check?</p><br>
	<section id="grid-container">
	<div "id=item2">
	<label><input class="input-checkbox" type="checkbox" name="likes" value="ice-cream">
	Carrot Ice Cream</label><br>
	<label
	><input
	name="likes"
	value="Warm Woolen Mittens"
	type="checkbox"
	class="input-checkbox"
	/>Warm Woolen Mittens</label><br>
	<label
	><input
	name="likes"
	value="yarn"
	type="checkbox"
	class="input-checkbox"
	/>Yarn</label>
	</div>
	<div id="item3">

	<input
	name="likes"
	value="Brown Paper Package"
	type="checkbox"
	class="input-checkbox">Brown Paper Packages</label>
	<br><br>
	<label><input
	name="likes"
	value="Bright Copper Kettles"
	type="checkbox"
	class="input-checkbox"
	/>Bright Copper Kettles</label>
	<br><label><input
	name="likes"
	value="easter"
	type="checkbox"
	class="input-checkbox">Easter</label>
	</div></section>
	<div class="form-group">
	<p>Please leave any comments or questions below...</p>
	<textarea
	id="comments"
	class="input-textarea"
	type="textarea"
	name="comments"
	placeholder="Leave comments here">
	</textarea></div></section>
	<Div>
	<button id="submit" class="submit-button">
	<input type="submit"
	name="submit"

	</button>
	@import url('https://fonts.googleapis.com/css?family=Poppins:200i,400&display=swap');
	@import url("https://fonts.googleapis.com/css?family=IM+Fell+Great+Primer+SC&display=swap" rel="stylesheet");
	:root {
	--color-white: #f2870c;
	--color-darkblue: #234099;
	--color-darkblue-alpha: rgba(27, 27, 50, 0.8);
	--color-green:#35ff23;
	}

	}
	*,
	*::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;
	}

	/* mobile friendly alternative to using background-attachment: fixed */
	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(58, 58, 158, 0.8),
	rgba(136, 136, 206, 0.7)
	),
	url(https://static-assets.tesla.com/share/tesla_design_studio_assets/CYBERTRUCK/NVRP_mx9o6kxjwvf.png?&version=v0027d202001143340>);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	}

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

	p {
	font-size: 1.125rem;
	}

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

	label {
	display: flex;
	align-items: center;
	font-size: 1.125rem;
	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: 2rem auto 1rem auto;

	}

	.shade2{background: var(--color-darkblue-alpha);
	padding: 2.5rem 0.625rem;
	border-radius: 0.25rem;
	}
	@media (min-width: 576px) {
	.container {
	max-width: 540px;
	}
	}

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

	.header {: center;
	}
	#rru-description{
	background: var(--color-darkblue-alpha);
	font-family: "IM Fell Great Primer SC";
	font-size: 100%;
	color: #f2870c;
	border-radius: 2em;
	border-style: solid;
	border-color: #f2870c;
	padding: .25rem;
	position: relative;
	top: 2rem;
	bottom: 2rem;
	left: 50%;
	margin-right: -50%;
	width: 80%;
	transform: translate(-50%, -50%); }
	}
	}

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

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

	/* form */
	form {
	background: var(--color-darkblue-alpha);
	padding: 5rem;
	border-radius: 3.25rem;
	border-radius: 2em;
	border-style: solid;
	border-color: #f2870c;
	}

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

	.form-group {
	margin: 1.5rem auto 1.5rem auto;
	padding: 0.5rem;

	}

	.form-control {
	display: flex;
	width: 100%;
	height: 2.375rem;
	padding: 0.375rem 0.75rem;
	color: #495057;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #ced4da;
	border-radius: 0.25rem;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	}

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

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

	.input-textarea {
	min-height: 100px;
	width: 90%;
	margin: 0 auto 0 auto;
	padding: 0.625rem;
	resize: vertical;
	}

	.submit-button {
	display: block;
	width: 100%;
	padding: .75rem;
	background: var(--color-green);
	color: green;
	border-radius: .8rem;
	cursor: pointer;
	}
	#title-pad {color: white;
	height: 1rem;
	width: 100%;
	}
	#tidal{text-align: center;

	}

	#description {
	font-size: 3rem;
	text-align: center}
	#grid-container {
	font-size: inherit;
	min-height: 200px;
	width: 100%;
	background: inherit;
	display: flex;}
	#item1 {grid-area: question;
	width: 100%;}
	.input-textarea {
	min-height: 120px;
	width: 100%;
	padding: 0.5rem auto 0 0;
	resize: vertical;}
	#item2 {grid-area: answer1;}
	#item3 {grid-area: answer3;}