Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's 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 it's URL and the proper URL extention.

+ 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

Save Automatically?

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

              
                <!-- survey form -->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link rel="preconnect" href="https://fonts.googleapis.com" />
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
	<link href="https://fonts.googleapis.com/css2?family=Crimson+Pro&display=swap" rel="stylesheet" />
	<link rel="preconnect" href="https://fonts.googleapis.com" />
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
	<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300&display=swap" rel="stylesheet" />
	<link rel="stylesheet" href="mystyles.css" />
	<title>Survey Form</title>
	<script src="https://kit.fontawesome.com/41c8573884.js" crossorigin="anonymous"></script>
</head>

<body>
	<!-- back to top button -->
	<button onclick="topFunction()" id="top-button" title="Go to top">
		<i class="fas fa-long-arrow-alt-up"></i></i>
	</button>
	<!-- MAIN -->
	<main class="container">
		<!-- HEADER -->
		<header>
			<h1 id="title" class="center-text">
				Bella&Bailey Dog Academy Survey Form
			</h1>
			<!-- DESCRIPTION -->
			<p id="description" class="center-text">
				Below is a quick survey that will help us understand and learn
				about you and your dog's training experience.
			<p class="center-text">Thank you for helping
				us improve our services.</p>
			</p>
		</header>
		<!-- FORM -->
		<form action="https://www.freecodecamp.com/email-submit" target="_blank" id="survey-form" method="post">
			<!-- REQUIRED INFO -->
			<div class="part">
				<label for="name" id="name-label">What is your name?</label>
				<input type="text" name="name" id="name" class="control" placeholder="First name only" required />
			</div>
			<div class="part">
				<label for="email_address" id="email-label">Email address</label>
				<input aria-label="email" type="email" name="email_address" id="email" class="control" placeholder="Enter your email address" required />
			</div>
			<div class="part">
				<label for="number" id="number-label">What is your age? <span class="notice">(Optional)</span></label>
				<input type="number" name="age" id="number" class="control" min="18" max="100" placeholder="Age" />
			</div>
			<!-- OPTIONS -->
			<div class="part">
				<p class="clear">Which option best describes your dog's specific role?</p>
				<select name="dog_role" id="dropdown" class="control" required>
					<option disabled selected value>Select your dog's role</option>
					<option value="service">Service Dog</option>
					<option value="therapy">Therapy Dog</option>
					<option value="police">Police K9 Dog</option>
					<option value="military">Military Dog</option>
					<option value="family">Family Dog</option>
					<option value="rescue">Search & Rescue Dog</option>
				</select>
			</div>
			<!-- RADIO -->
			<div class="part">
				<p class="clear">What is your initial reaction to the service?</p>
				<label>
					<input aria-label="reaction" type="radio" class="radio-button" name="reaction" value="very_positive" checked />Very positive
				</label>
				<label>
					<input aria-label="reaction" type="radio" class="radio-button" name="reaction" value="somewhat_positive" />Somewhat positive
				</label>
				<label>
					<input aria-label="reaction" type="radio" class="radio-button" name="reaction" value="neutral" />Neutral
				</label>
				<label>
					<input aria-label="reaction" type="radio" class="radio-button" name="reaction" value="somewhat_negative" />Somewhat negative
				</label>
				<label>
					<input aria-label="reaction" type="radio" class="radio-button" name="reaction" value="very_negative" />Very
					negative
				</label>
			</div>
			<div class="part">
				<p class="clear">How would you rate the quality of the service?</p>
				<label>
					<input aria-label="quality" type="radio" class="radio-button" name="quality" value="very_high_quality" checked />Very high quality
				</label>
				<label>
					<input aria-label="quality" type="radio" class="radio-button" name="quality" value="high_quality" />High
					quality
				</label>
				<label>
					<input aria-label="quality" type="radio" class="radio-button" name="quality" value="neither_high_low" />Neither high nor low quality
				</label>
				<label>
					<input aria-label="quality" type="radio" class="radio-button" name="quality" value="low_quality" />Low
					quality
				</label>
				<label>
					<input aria-label="quality" type="radio" class="radio-button" name="quality" value="very_low_quality" />Very low quality
				</label>
			</div>
			<div class="part">
				<p class="clear">
					How likely is it that you would recommend our service to a family
					member, friend or colleague?
				</p>
				<label>
					<input aria-label="recommend" type="radio" class="radio-button" name="recommend" value="extremely_likely" checked />Extremely likely
				</label>
				<label>
					<input aria-label="recommend" type="radio" class="radio-button" name="recommend" value="not_sure" />Not sure
				</label>
				<label>
					<input aria-label="recommend" type="radio" class="radio-button" name="recommend" value="not_likely" />Not
					likely
				</label>
			</div>
			<!-- CHECKBOX -->
			<div class="part">
				<p class="clear">
					What would you like to see improved?
					<span class="notice">(Check all that apply)</span>
				</p>
				<label>
					<input aria-label="improve" type="checkbox" class="checkbox-button" name="improve" value="in_home_training" />In-home Training
				</label>
				<label>
					<input aria-label="improve" type="checkbox" class="checkbox-button" name="improve" value="dog-safety" />Dog
					Safety
				</label>
				<label>
					<input aria-label="improve" type="checkbox" class="checkbox-button" name="improve" value="indoor-kennels" />Climate-controlled kennels
				</label>
				<label>
					<input aria-label="improve" type="checkbox" class="checkbox-button" name="improve" value="trainers" />Training
					Specialists
				</label>
				<label>
					<input aria-label="improve" type="checkbox" class="checkbox-button" name="improve" value="private_lessons" />Private Lessons
				</label>
				<label>
					<input aria-label="improve" type="checkbox" class="checkbox-button" name="improve" value="group-classes" />Group Classes
				</label>
				<label>
					<input aria-label="improve" type="checkbox" class="checkbox-button" name="improve" value="in_home_training" />In-home Dog Training
				</label>
				<label>
					<input aria-label="improve" type="checkbox" class="checkbox-button" name="improve" value="school" />School for
					Dog Trainers
				</label>
				<label>
					<input aria-label="improve" type="checkbox" class="checkbox-button" name="improve" value="behavior_mod" />Behavior Modification
				</label>
				<label>
					<input aria-label="improve" type="checkbox" class="checkbox-button" name="improve" value="police-k9" />Police
					K9 Training
				</label>
				<label>
					<input aria-label="improve" type="checkbox" class="checkbox-button" name="improve" value="service_dog" />Service Dog Training
				</label>
				<label>
					<input aria-label="improve" type="checkbox" class="checkbox-button" name="improve" value="search_rescue" />Search and Rescue Dog Training
				</label>
			</div>
			<!-- TEXTAREA -->
			<div class="part">
				<p class="clear">Comments or suggestions?</p>
				<textarea name="comments" id="comments" class="textarea-box" cols="30" rows="10" placeholder="Please enter your comments or suggestions here..."></textarea>
			</div>
			<!-- SUBMIT -->
			<div class="part">
				<button id="submit" class="submit-button">Submit</button>
			</div>
		</form>
		<footer>
			<p>Raya Bergin LBCC Fall2021 COSW20 &copy; 29|30Oct2021</p>
		</footer>
	</main>
	<script src="myscripts.js"></script>
</body>

</html>
              
            
!

CSS

              
                /* MY TEMPLATE */
* {
	/* Outline to view layout on screen while styling | Remove after styling */
	/* outline: 1px dashed #ff0075; */
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
}
html {
	box-sizing: border-box;
	font-size: 100%;
}
*,
*:before,
*:after {
	box-sizing: inherit;
}

/* My color scheme */
/* #181716 Primary for text, headings, buttons
	#161718 Secondary for text, headings, buttons
	#53575B Tertiary for fill */

/* declaring variables for colors */
:root {
	--first: #181716;
	--second: #161718;
	--third: #53575b;
	--fourth: #fff;
}

/* BASE styles */
body {
	background-color: var(--fourth);
	color: var(--first);
	font-family: "Work Sans", sans-serif;
	font-size: 1rem;
	font-weight: bold;
	line-height: 1.5;
}
/* responsive background image */
body::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: -2;
	background: var(--second);
	background-image: linear-gradient(
			to right,
			rgba(22, 23, 24, 0.8),
			rgba(255, 255, 255, 0.6)
		),
		url(https://us.123rf.com/450wm/artinspiring/artinspiring2003/artinspiring200300219/141833797-set-of-dogs-rescuers-collection-of-the-cadaver-dogs-of-various-breed.jpg?ver=6);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	filter: blur(0.3em);
}
input,
select,
textarea,
button {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

/* BEGIN mobile-first responsive page */
.container {
	width: 100%;
	margin: 3.125em auto 0 auto;
}
/* HEADER */
header {
	padding: 0 0.625em;
	margin-bottom: 1.875rem;
}
h1 {
	font-family: "Crimson Pro", serif;
	margin-bottom: 0.5em;
}
/* DESCRIPTION */
p {
	font-size: 1.125rem;
	margin-bottom: 0.5em;
}
.center-text {
	text-align: center;
}
/* OPTIONS */
.clear {
	color: var(--fourth);
}
/* RADIO */
/* CHECKBOX */
label {
	color: var(--fourth);
	display: flex;
	align-items: center;
	font-size: 1.125rem;
	margin-bottom: 0.5rem;
}
.notice {
	margin-left: 0.5em;
	font-size: 0.95rem;
	color: var(--fourth);
}
/* FORM */
form {
	border-radius: 0.5em;
	background: var(--third);
	padding: 2.5rem 0.625rem;
}
.part {
	margin: 0 auto 1rem auto;
	padding: 0.25rem;
}
.control {
	display: block;
	width: 100%;
	height: 2.5em;
	padding: 0.375em 0.75em;
	color: var(--second);
	background-color: var(--fourth);
	background-clip: padding-box;
	border: 0.0625em solid var(--second);
	border-radius: 0.5em;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.control option {
	font-size: 0.95rem;
}
.control:focus {
	border-color: var(--second);
	outline: 0;
	box-shadow: 0 0 0 0.15em rgba(0, 0, 0, 0.25);
}
.radio-button,
.checkbox-button {
	display: inline-block;
	margin-right: 0.625em;
	min-height: 1.25em;
	min-width: 1.25em;
}
.textarea-box {
	background-color: var(--fourth);
	border-radius: 0.5em;
	min-height: 7.5em;
	width: 100%;
	padding: 0.625em;
	resize: vertical;
}
.submit-button {
	display: block;
	width: 100%;
	padding: 0.75rem;
	border-radius: 0.5em;
	border: 0.125em solid var(--second);
	background-color: var(--first);
	color: var(--fourth);
	text-transform: uppercase;
	box-shadow: 0.0625em 0.125em 0.1875em rgba(0, 0, 0, 0.5);
	cursor: pointer;
}
.submit-button:hover {
	color: var(--fourth);
	background: var(--third);
}
/* BACK TO TOP button */
#top-button {
	display: none;
	position: fixed;
	bottom: 1em;
	right: 1em;
	z-index: 2;
	font-size: 1.5rem;
	border: none;
	outline: none;
	background-color: var(--first);
	color: var(--fourth);
	cursor: pointer;
	padding: 0.5em;
	border-radius: 0.3125em;
}
#top-button:hover {
	background-color: var(--third);
	color: var(--second);
}
/* FOOTER */
footer {
	text-align: center;
}
footer p {
	font-size: 0.75rem;
	padding: 0.75em 0;
}

/* BEGIN tablet styles */
/* min-width 620px */
@media screen and (min-width: 620px) {
	.container {
		max-width: 30em;
	}
	form {
		padding: 2.5rem;
	}
}

/* BEGIN laptop styles to desktop */
/* min-width 1024px */
@media screen and (min-width: 1024px) {
	.container {
		max-width: 40em;
	}
	/* BACK TO TOP button */
	#top-button {
		bottom: 1.5em;
		right: 1.5em;
	}
	/* FOOTER */
	footer p {
		font-size: 1rem;
		padding: 1em 0;
	}
}

              
            
!

JS

              
                //Get the button
var mybutton = document.getElementById("top-button");

// When the user scrolls down 100px from the top of the document, show the button
window.onscroll = function () {
	scrollFunction();
};

function scrollFunction() {
	if (
		document.body.scrollTop > 100 ||
		document.documentElement.scrollTop > 100
	) {
		mybutton.style.display = "block";
	} else {
		mybutton.style.display = "none";
	}
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
	document.body.scrollTop = 0;
	document.documentElement.scrollTop = 0;
}

              
            
!
999px

Console