diff --git a/WV6/speaker-submission.html b/WV6/speaker-submission.html
new file mode 100644
index 0000000000000000000000000000000000000000..4284904d6e10938e30ce77bd99fa3b0b0afb26e8
--- /dev/null
+++ b/WV6/speaker-submission.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang='en'>
+ <head>
+ <meta charset='UTF-8'/>
+ <title>Speaker Submission</title>
+ <link rel='stylesheet' href='styles.css'/>
+ </head>
+ <body>
+ <header class='speaker-form-header'>
+ <h1>Speaker Submission</h1>
+ <p><em>Want to speak at our fake conference? Fill out
+ this form.</em></p>
+ </header>
+
+ <form action='' method='get' class='speaker-form'>
+ <div class='form-row'>
+ <label for='full-name'>Name</label>
+ <input id='full-name' name='full-name' type='text'/>
+ </div>
+ <div class='form-row'>
+ <label for='email'>Email</label>
+ <input id='email'
+ name='email'
+ type='email'
+ placeholder='joe@example.com'/>
+ </div>
+ <fieldset class='legacy-form-row'>
+ <legend>Type of Talk</legend>
+ <input id='talk-type-1'
+ name='talk-type'
+ type='radio'
+ value='main-stage' />
+ <label for='talk-type-1' class='radio-label'>Main Stage</label>
+ <input id='talk-type-2'
+ name='talk-type'
+ type='radio'
+ value='workshop'
+ checked />
+ <label for='talk-type-2' class='radio-label'>Workshop</label>
+ </fieldset>
+ <div class='form-row'>
+ <label for='t-shirt'>T-Shirt Size</label>
+ <select id='t-shirt' name='t-shirt'>
+ <option value='xs'>Extra Small</option>
+ <option value='s'>Small</option>
+ <option value='m'>Medium</option>
+ <option value='l'>Large</option>
+ </select>
+ </div>
+ <div class='form-row'>
+ <label for='abstract'>Abstract</label>
+ <textarea id='abstract' name='abstract'></textarea>
+ <div class='instructions'>Describe your talk in 500 words or less</div>
+ </div>
+ <div class='form-row'>
+ <label class='checkbox-label' for='available'>
+ <input id='available'
+ name='available'
+ type='checkbox'
+ value='is-available'/>
+ <span>I’m actually available the date of the talk</span>
+ </label>
+ </div>
+ <div class='form-row'>
+ <button>Submit</button>
+ </div>
+ </form>
+ </body>
+</html>
\ No newline at end of file
diff --git a/WV6/styles.css b/WV6/styles.css
new file mode 100644
index 0000000000000000000000000000000000000000..95bce84968ae9248c1f5a56fc52688aff91cffab
--- /dev/null
+++ b/WV6/styles.css
@@ -0,0 +1,193 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ color: #5D6063;
+ background-color: #EAEDF0;
+ font-family: "Helvetica", "Arial", sans-serif;
+ font-size: 16px;
+ line-height: 1.3;
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .speaker-form-header {
+ text-align: center;
+ background-color: #F6F7F8;
+ border: 1px solid #D6D9DC;
+ border-radius: 3px;
+
+ width: 80%;
+ margin: 40px 0;
+ padding: 50px;
+ }
+
+ .speaker-form-header h1 {
+ font-size: 30px;
+ margin-bottom: 20px;
+ }
+
+ .speaker-form {
+ background-color: #F6F7F8;
+ border: 1px solid #D6D9DC;
+ border-radius: 3px;
+
+ width: 80%;
+ padding: 50px;
+ margin: 0 0 40px 0;
+ }
+
+ .form-row {
+ margin-bottom: 40px;
+ display: flex;
+ justify-content: flex-start;
+ flex-direction: column;
+ flex-wrap: wrap;
+ }
+
+ .form-row input[type='text'], .form-row input[type='email'] {
+ background-color: #FFFFFF;
+ border: 1px solid #D6D9DC;
+ border-radius: 3px;
+ width: 100%;
+ padding: 7px;
+ font-size: 14px;
+ }
+
+ .form-row label {
+ margin-bottom: 15px;
+ }
+
+ .form-row input[type='text']:invalid,
+ .form-row input[type='email']:invalid {
+ border: 1px solid #D55C5F;
+ color: #D55C5F;
+ box-shadow: none; /* Remove default red glow in Firefox */
+}
+
+.legacy-form-row {
+ border: none;
+ margin-bottom: 40px;
+ }
+
+ .legacy-form-row legend {
+ margin-bottom: 15px;
+ }
+
+ .legacy-form-row .radio-label {
+ display: block;
+ font-size: 14px;
+ padding: 0 20px 0 10px;
+ }
+
+ .legacy-form-row input[type='radio'] {
+ margin-top: 2px;
+ }
+
+ .legacy-form-row .radio-label,
+ .legacy-form-row input[type='radio'] {
+ float: left;
+ }
+
+ .form-row select {
+ width: 100%;
+ padding: 5px;
+ font-size: 14px; /* This won't work in Chrome or Safari */
+ -webkit-appearance: none; /* This will make it work */
+ }
+
+ .form-row textarea {
+ font-family: "Helvetica", "Arial", sans-serif;
+ font-size: 14px;
+
+ border: 1px solid #D6D9DC;
+ border-radius: 3px;
+
+ min-height: 200px;
+ margin-bottom: 10px;
+ padding: 7px;
+ resize: none;
+ }
+
+ .form-row .instructions {
+ color: #999999;
+ font-size: 14px;
+ margin-bottom: 30px;
+ }
+
+ .form-row .checkbox-label {
+ margin-bottom: 0;
+ }
+
+ .form-row button {
+ font-size: 16px;
+ font-weight: bold;
+
+ color: #FFFFFF;
+ background-color: #5995DA;
+
+ border: none;
+ border-radius: 3px;
+
+ padding: 10px 40px;
+ cursor: pointer;
+ }
+
+ .form-row button:hover {
+ background-color: #76AEED;
+ }
+
+ .form-row button:active {
+ background-color: #407FC7;
+ }
+
+ @media only screen and (min-width: 700px) {
+ .speaker-form-header,
+ .speaker-form {
+ width: 600px;
+ }
+ .legacy-form-row {
+ margin-bottom: 10px;
+ }
+ .legacy-form-row legend {
+ width: 120px;
+ text-align: right;
+ padding-right: 20px;
+ }
+ .legacy-form-row legend {
+ float: left;
+ }
+ .form-row .instructions {
+ margin-left: 120px;
+ }
+ .form-row .checkbox-label {
+ margin-left: 120px;
+ width: auto;
+ }
+ .form-row button {
+ margin-left: 120px;
+ }
+ }
+ .form-row {
+ flex-direction: row;
+ align-items: flex-start; /* To avoid stretching */
+ margin-bottom: 20px;
+ }
+ .form-row input[type='text'],
+ .form-row input[type='email'], /* Add */
+ .form-row select, /* These */
+ .form-row textarea {
+ width: 250px;
+ height: initial;
+ }
+ .form-row label {
+ text-align: right;
+ width: 120px;
+ margin-top: 7px;
+ padding-right: 20px;
+ }
\ No newline at end of file