JoLynneMartinez/index.html

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

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Bangers|Yanone+Kaffeesatz&display=swap" rel="stylesheet">
</head>

<body>
    <header>
      <h1 id="title">Survey Form</h1>
    </header>

    <main>
      <p id="description">Because I'm psychic, I already know what you think about mentalism.<br> But I'm supposed to demonstrate my skill designing forms -- not reading minds -- so here we go:</p>

      <form action="" method="get" id="survey-form">
        <label for="name" id="name-label">Enter your name: </label>
        <input type="text" name="name" id="name" required placeholder="Name"><br>
        <label for="email" id="email-label">Enter your email: </label>
        <input type="email" name="email" id="email" required placeholder="Email"><br>
  <p id="dropdown-p">In your opinion, who was the most skilled mentalist of all time?:</p>
        <select name="mentalists" id="dropdown">
          <option value="kreskin">The Amazing Kreskin</option>
          <option value="mysterion">Mysterion the Mind Reader</option>
          <option value="cagliostro">Count Alessandro di Cagliostro</option>
        </select><br>
      <p id="radio-p">Do you believe in telepathy?</p>
        <input type="radio" name="opinion" value="yes"> Yes
        <input type="radio" name="opinion" value="No"> No <br>
      <p id="checkbox-p">Which of these classic mind-reading tricks do you know how to perform?:</p>
        <input type="checkbox" name="tricks" value="elephant"> Classic Elephant Trick<br>
        <input type="checkbox" name="tricks" value="hammer"> Red Hammer Trick<br>
        <input type="checkbox" name="tricks" value="head" checked> Touch Head Read Mind Trick<br>
        <input type="checkbox" name="tricks" value="crystal" checked> Crystal Ball Trick<br>
        <div id="num_section">
        <label for="number" id="number-label">Guess the number I'm thinking of (1-100):</label>
        <input type="number" id="number" name="number" min="1" max="100" placeholder="Guess">
        </div>
        <p id="telepathy">Make a prediction about the future:</p>
        <textarea rows="4" cols="50" name="prediction" form="survey-form">Demonstrate your precognitive skills here ...</textarea><br>
        <input type="submit" value="Submit" id="submit">
      </form>
    </main>
    <footer>
    <p> &copy; 2019 JoLynne Walz Martinez </p>
  </footer>
</body>

## style.css
body {
  color: black;
  background-image: url("https://drive.google.com/uc?id=1NKwJ-GRLmVcWF1Br06ecgfGOkdpT9jZq");
  background-color: white;
  background-repeat: no-repeat;
  background-size: 50% 100%;
  background-position: center;
  text-align: center;
}

header {
  font-family: 'Bangers', cursive;
}

body {
  font-family: 'Yanone Kaffeesatz', sans-serif;
}

#dropdown-p, #radio-p, #checkbox-p, #telepathy {
  margin-bottom: 0.5px;
}

#num_section {
  margin-top: 15px;
}

#submit {
  margin-top: 10px;
}

footer {
  font-size: smaller;
  opacity: 0.75;
  margin-top: 25px;
}

## survey-form.markdown

      
    Raw
  

              survey-form.markdown
            
          
    Survey Form

A Pen by JoLynne Walz Martinez on CodePen.
License.
	<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://fonts.googleapis.com/css?family=Bangers\|Yanone+Kaffeesatz&display=swap" rel="stylesheet">
	</head>

	<body>
	<header>
	<h1 id="title">Survey Form</h1>
	</header>

	<main>
	<p id="description">Because I'm psychic, I already know what you think about mentalism.<br> But I'm supposed to demonstrate my skill designing forms -- not reading minds -- so here we go:</p>

	<form action="" method="get" id="survey-form">
	<label for="name" id="name-label">Enter your name: </label>
	<input type="text" name="name" id="name" required placeholder="Name"><br>
	<label for="email" id="email-label">Enter your email: </label>
	<input type="email" name="email" id="email" required placeholder="Email"><br>
	<p id="dropdown-p">In your opinion, who was the most skilled mentalist of all time?:</p>
	<select name="mentalists" id="dropdown">
	<option value="kreskin">The Amazing Kreskin</option>
	<option value="mysterion">Mysterion the Mind Reader</option>
	<option value="cagliostro">Count Alessandro di Cagliostro</option>
	</select><br>
	<p id="radio-p">Do you believe in telepathy?</p>
	<input type="radio" name="opinion" value="yes"> Yes
	<input type="radio" name="opinion" value="No"> No <br>
	<p id="checkbox-p">Which of these classic mind-reading tricks do you know how to perform?:</p>
	<input type="checkbox" name="tricks" value="elephant"> Classic Elephant Trick<br>
	<input type="checkbox" name="tricks" value="hammer"> Red Hammer Trick<br>
	<input type="checkbox" name="tricks" value="head" checked> Touch Head Read Mind Trick<br>
	<input type="checkbox" name="tricks" value="crystal" checked> Crystal Ball Trick<br>
	<div id="num_section">
	<label for="number" id="number-label">Guess the number I'm thinking of (1-100):</label>
	<input type="number" id="number" name="number" min="1" max="100" placeholder="Guess">
	</div>
	<p id="telepathy">Make a prediction about the future:</p>
	<textarea rows="4" cols="50" name="prediction" form="survey-form">Demonstrate your precognitive skills here ...</textarea><br>
	<input type="submit" value="Submit" id="submit">
	</form>
	</main>
	<footer>
	<p> © 2019 JoLynne Walz Martinez </p>
	</footer>
	</body>
	body {
	color: black;
	background-image: url("https://drive.google.com/uc?id=1NKwJ-GRLmVcWF1Br06ecgfGOkdpT9jZq");
	background-color: white;
	background-repeat: no-repeat;
	background-size: 50% 100%;
	background-position: center;
	text-align: center;
	}

	header {
	font-family: 'Bangers', cursive;
	}

	body {
	font-family: 'Yanone Kaffeesatz', sans-serif;
	}

	#dropdown-p, #radio-p, #checkbox-p, #telepathy {
	margin-bottom: 0.5px;
	}

	#num_section {
	margin-top: 15px;
	}

	#submit {
	margin-top: 10px;
	}

	footer {
	font-size: smaller;
	opacity: 0.75;
	margin-top: 25px;
	}