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

              
                <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Russo+One" rel="stylesheet">

<!DOCTYPE html>
	<html>
		<head>
  <main id="main-doc">
    <header id="header">
			<div class="logo">
      <div>
        <img src="http://ceramic-pro.com/assets/c51a0eb/CERAMICPRO_Facebook_picture.jpg" id="header-img">
			</div>
      	<div id="header-text">
        <h1>Ceramic Pro</h1>
				</div>
			</div>
      <div>
      <nav id="nav-bar">
        <ul>
          <li><a href="#benefits" class="nav-link">
            Features</a></li>
          <li><a href="#prices" class="nav-link">
            Pricing</a></li>
          <li><a href="#inquire" class="nav-link">
            Inquire</a></li>
        </ul>
      </nav>
      </div>
    </header>
    <body>
			<div class="intro-section parallax">
				<h1>Love the way your car looks?</h1>
				<h1>Protect it with ceramic pro</h1>
				<button href="#inquire" class="button"><a href="#inquire"> Inquire</a></button>
			</div>
			<section id="how-it-works">
			<div class="video-div">
				<div class="video-wrapper">
<iframe id="video" width="1663" height="769" src="https://www.youtube.com/embed/FHLONODqE5U" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
        </iframe>
					</div>
				</div>
				</section>
			
			<section id="benefits">
			<div class="narrow-section">
					<h1>What are the benefits of ceramic coating?</h1>
					<div class="grid">
						<div class="benefit">
							<div class="benefit-title">
							<h2>Crisp and Clear Paint</h2>
							</div>
							<div class="description">
							<p>Since a ceramic coating is a permanent chemical bond to the clear coat, the clear coat is never exposed to UV rays and therefore will not fade over time.<p>
							</div>
						</div>
						<div class="benefit">
							<div class="benefit-title">
							<h2>Maintaining Value</h2>
							</div>
							<div class="description">
							<p>If you opt for ceramic paint, rest assured that your vehicle would be able to withstand the effects of weather, bird droppings and other external elements. This helps to maintain the value of your car which otherwise would depreciate in time.</p>
							</div>
						</div>
						<div class="benefit">
							<div class="benefit-title">
							<h2>Easy To Clean</h2>
							</div>
							<div class="description">
							<p>Once the coating is applied to your car it forms an incredibly slick and hydrophobic surface that prevents dirt and other contaminants from sticking. Since the coating is permanent, there's no need to wax your car. Simply wash your car and you're done!</p>
							</div>
						</div>
					<div class="benefit">
							<div class="benefit-title">
							<h2>9h+ Hardness</h2>
							</div>
							<div class="description">
							<p>Most of the automotive coats have a hardness level of 4 – 7h. Ceramic Coatings, however, have a hardness level of over 9h. This is significantly different and any slight abrasion will most likely not affect your car.</p>
							</div>
						</div>
				<div class="benefit">
							<div class="benefit-title">
							<h2>UV Protection</h2>
							</div>
							<div class="description">
							<p>The UV protection factor in Ceramic Coatings minimises the impact of the sun to guard against colour oxidisation of your paint finish.</p>
							</div>
						</div>
			<div class="benefit">
							<div class="benefit-title">
							<h2>Water Repellant</h2>
							</div>
							<div class="description">
							<p>Since the surface of the car remains extremely smooth, water simply runs off the coating. This reduces the chance of rust and mould affecting your car.</p>
							</div>
						</div>
		<div class="benefit">
							<div class="benefit-title">
							<h2>Brake Dust Protection</h2>
							</div>
							<div class="description">
							<p>Quite often, we take brake dust for granted, and a lot of people think there is nothing to prevent it. Ceramic protection will reduce the build-up, so you do not have to keep cleaning your car again and again.</p>
							</div>
						</div>
	<div class="benefit">
							<div class="benefit-title">
							<h2>Hard Water Marks</h2>
							</div>
							<div class="description">
							<p>Using hard water (water with a high mineral content) to clean your vehicle can sometimes leave marks, which are difficult to remove. Since Ceramic Coatings are chemical resistant, hard water is not able to affect the surface.</p>
							</div>
						</div>
					</div>
				</section>
			</div>
				<div class="price-section parallax">
				<section id="prices">
					<div class ="packages" id="bronze">
						<div class="grade">
							<h2>Bronze Package</h2>
						</div>
						<div class="grade-desc">
						<div>
						<p>Limited 2 Year Warranty</p>
						<p>Our Bronze Package offers a great exterior protection on your entire vehicle. This coating is designed for the new every 2 years, or leasing type of customer.</p>
						<ul>
							<li>
		1 layer of Light as a top coat to enhance shine
							</li>
							<li>
							1 layer of Light on exterior plastic
							</li>
							<li>1 layer of Wheel & Caliper on wheel faces
							</li>
							<li>1 layer of Rain on windshield and front side windows
							</li>
						</ul>
						</div>
						<div class="price">
							<p><strong>Starts at $799 + GST + Paint Correction</strong></p>
						</div>
					</div>
					</div>
					<div class ="packages" id="silver">
						<div class="grade">
							<h2>Silver Package</h2>
						</div>
						<div class="grade-desc">
							<div>
						<p>Limited 5 Year Warranty</p>
						<p>The Silver Package offers an excellent permanent exterior protection on your entire vehicle. It shows great scratch resilience and unbeatable water beading properties.</p>
						<ul>
							<li>
		1 layer of 9H paint protection on all painted exterior surfaces
							</li>
							<li>
							1 layer of Light as a top coat to enhance shine
							</li>
							<li>1 layer of 9H on exterior plastic
							</li>
							<li>1 layer of Wheel & Caliper on wheel faces
							</li>
							<li>1 layer of Rain on windshield and front side windows
							</li>
						</ul>
								</div>
						<div class="price">
						<p><strong>Starts at $1099 + GST + Paint Correction</strong></p>
						</div>
					</div>
					</div>
						<div class ="packages" id="gold">
						<div class="grade">
							<h2>Gold Package</h2>
							</div>
							<div class="grade-desc">
								<div>
						<p>Limited Lifetime Warranty</p>
						<p>The Gold Package is designed for someone who is looking for the ultimate in maintenance free permanent protection.</p>
						<ul>
							<li>
		4 layers of 9H paint protection on all painted exterior surfaces
							</li>
							<li>
							1 layer of Light as a top coat to enhance shine
							</li>
							<li>1 layer of 9H on exterior plastic
							</li>
							<li>1 layer of Wheel & Caliper on wheel faces
							</li>
							<li>1 layer of Rain on windshield and front side windows
							</li>
						</ul>
								</div>
							<div class="price">
								<p><strong>Starts at $1699 + GST + Paint Correction</strong></p>
							</div>
					</div>
					</div>
				</section>
				</div>
				<section id="inquire">
					<div id="form-div">
						<h3><strong>Service Inquiry Form</strong></h3> 
						<form id="form" action="https://www.freecodecamp.org/email-submit" method="post">
						<div class="row">
							<label for="name" id="name-label">
								Name:</label>
							<div class="answer">
							<input type="text" placeholder="Name" id="name" name="name" required>
							</div>
							</div>
							
							<div class="row">
							<label for="email" id="email-label">
								Email:</label>
								<div class="answer">
							<input type="email" placeholder="Email" id="email" name="email" required>
								</div>
							</div>
									<div class="row">
							<label for="phone" id="phone-label">
								Telephone:</label>
								<div class="answer">
							<input type="tel" id="phone" name="phone">
							</div>
							</div>
									
									<div class="row">
							<label for="car-make" id="car-make-label">
								Year, Make, and Model:</label>
								<div class="answer">
							<input type="text" id="car-make" name="car-make">
							</div>
							</div>
									<div class="row">
							<label for="comments" id="comments-label">
								Comments:</label>
								<div class="answer">
									<textarea id="comments" name="comments"></textarea>
							</div>
							</div>
							<input class="button" type="submit" id="submit"></input>
						</form>
					</div>
				</section>
<footer>
	<h4>Created by: Jesse Russo for FreeCodeCamp | Product Landing Page</h4>
			</footer>
			</body>
  </main>
		</head>
  </html>
              
            
!

CSS

              
                html{
  text-align: center;
}
header{
  display: flex;
  position: fixed;
  width: 100%;
  flex-direction: row;
  top: 0;
  align-items: center;
  height: 70px;
  background-color: black;
  justify-content: space-between;
	z-index: 2;
}
body{
	margin: 0;
}
.logo{
	display: flex;
	flex-direction: row;
}
#header-text{
  font-family: 'Russo One', sans-serif;
  font-size: 20px;
	color: #d60c99;
}
#header-img{
  width: 90px;
  height: auto;
	margin-top: 10px;
}
nav{
ul{
  width: 25vw;
  display: flex;
  list-style-type:none;
  justify-content:space-around;
  font-family: 'Russo One', sans-serif;
}
	a{
		color: White;
		text-decoration: none;
	}
}
.intro-section{
	margin-top: 70px;
	color: #d60c99;
	text-transform: uppercase;
	padding: 5% 0 5% 0;
	font-family: 'Russo One';
}
	.button{
		width: 140px;
		height: 2em;
		background-color: #D6AE0C;
		border: 0;
		border-radius: 5px;
		text-transform: uppercase;
		font-family: sans-serif;
		font-weight: bold;
		font-size: 1.1em;
		color: black;
		a{
			text-decoration: none;
			color: black;
		}
	}
.button:hover{
	background-color: #fc8014;
}
.parallax{
	height: 100%;
	background-image: url("http://www.porsche-mania.com/wp-content/uploads/2011/05/2010-White-Porsche-911-GT3-R_Wallpaper_002.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
}
#how-it-works{
	padding: 50px 0 50px 0;
}
.video-div{
	width: 40%;
	margin: 0 auto;
}
.video-wrapper{
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 25px;
	height: 0;
}
iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#benefits{
	display: flex;
	flex-flow: column wrap;
	padding-top: 40px;
	background-color: black;
	padding-bottom: 3%;
	color: #d60c99;
}
.narrow-section{
	max-width: 65%;
	margin: 0 auto;
	font-family: 'Russo One', sans-serif;
	font-size: 20px;
	.grid{
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
	}
}
.benefit{
	min-height: 100%;
	max-width: 22%;
	margin: 10px 5px 10px 5px;
	background-color: #535353;
	border-radius: 20px;
	color: white;
	padding: 0 10px 0 10px;
	font-family: sans-serif;
	font-size: 17px;
}
.price-section{
	max-width: 100%;
	margin: 0 auto;

	display: flex;
	justify-content: center;
}
#prices{
	padding: 90px 0 70px 0;
	max-width: 60%;
	margin-top: 1%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	ul{
		text-align: left;
	}
	li{
		margin-bottom: 10px;
	}
	.packages{
		width: 33%;
		border: 1px solid black;
		border-width: 1px;
		border-radius: 4px;
		margin: 0 0.5% 2% 0.5%;
		background-color: white;
	}
	.grade{
		height: 15%;
		text-transform: uppercase;
		padding: 1px 0;
		background-color: black;
		color: magenta;
		font-family: 'Russo One';
	}
}
.grade-desc{
	display: flex;
	height: 85%;
	flex-flow: column;
	justify-content: space-between;
}
#inquire{
	background-color: black;
	padding: 1%;
	margin-bottom: 0;
}
#form-div{
	background-color: #D60C99;
	width: 400px;
	border-radius: 5px;
	margin: 0 auto;
	padding: 1px 0 15px 0;
	color: white;
	.row{
		margin-bottom: 15px;
	}
}

label{
	display: inline-block;
	width: 30%;
	text-align: right;
}
.answer{
	display: inline-block;
	width: 60%;
	text-align: left;
	margin-left: 10px;
	input{
		width: 80%;
	}
}
textarea{
	width: 80%;
	resize: vertical;
}
footer{
	height: 2%;
	background-color: black;
	color: #d60c99;
	font-family: sans-serif;
	h4{
		margin: 0;
	}
}


/* Responsive */
@media (max-width: 1600px){
	
	.benefit{
	max-width: 25%;
	margin: 1% 0%;
	font-size: 14px;
}
	.narrow-section{
	max-width: 70%;
		.grid{
		justify-content: space-around;
	}
	}
	.benefit{
		max-width: 35%;
	}
			#prices{
			max-width: 70%;
}
}

@media (max-width: 1000px){
	header{
  flex-direction: column;
  height: auto;
  justify-content: space-between;
}
	nav{
ul{
  width: 60vw;
  justify-content: space-between;
}
	}
	#prices{
		max-width: 100%;
		flex-flow: row wrap;
		padding: 2% 0;
	}
	.narrow-section{
		max-width: 80%;
	}
	.benefit{
	min-width: 40%;
	max-width: 40%;
	margin: 1% 0%;
	min-height: 100%;
}
	.packages{
	min-width: 45%;
	margin: 15px 0 15px 0; 
}
	.intro-section{
		margin-top: 150px;
	}
}

@media (max-width: 500px){
	#how-it-works{
	width: 90%;
}
	.narrow-section{
	max-width: 100%;
	.grid{
		justify-content: space-around;
}
	}
	.intro-section{
		margin-top: 150px;
	}
	.benefit{
	max-width: 80%;
}
		#prices{
		flex-flow: row wrap;
}
		.packages{
	  min-width: 90%;
}
		#form-div{
		width: 80%;
		padding-right: 20px;
}
	label{
		width: 72%;
		text-align: left;
	}
	.answer{
		width: 100%;
		text-align: center;
	}
}

              
            
!

JS

              
                
              
            
!
999px

Console