FreeCodeCamp - Build A Product Landing Page
After nearly 6 hours of work, I have finally finished this project. Thank goodness we are no longer making websites and apps with raw HTML/CSS. Website and app builders save us a lot of work. Nevertheless, for me this project was a wonderful learning opportunity and brought me one step closer to finishing the Responsive Web Design course!
The most challenging part was setting up the @media on the nav-bar. I made it so that when the viewport goes under a certain pixel number, the background behind the navbar will expand.
Two additional challenging parts were configuring the tier-prices flex-boxes to adjust with the viewport and styling the form just right. Both required a ludicrous amount of finagling to get them looking halfway decent.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport">
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<header id="header">
<img id="header-img" height="415" src="https://jessekramer.org/content/images/size/w1000/2025/07/jk-high-resolution-logo-transparent.png"></img>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#about-instructor">About the Instructor</a></li>
<li><a class="nav-link" href="#method">Method</a></li>
<li><a class="nav-link" href="#pricing">Pricing</a></li>
</ul>
</nav>
</header>
<main id="main-doc">
<section class="main-section" id="about-instructor">
<br><header>About the Instructor</header>
<article>
<img id="profile-pic" height="415" src="https://jessekramer.org/content/images/size/w1600/2024/12/NextAVL-Images-39-Edited.jpg"></img>
<p>Hello! I'm Jesse Kramer: lover of juggling, cybersecurity, and my Catholic faith. I've been jugglingfor nearly 5 years and love sharing my tricks, methods, and the overall confidence that juggling brings. If you want to learn how to juggle, please reach out! You are never too young or old! </p>
</article>
</section>
<section class="main-section" id="method">
<header>Method</header>
<article>
<p>I use the time tested EDGE technique for teaching my students how to juggle. EDGE stands for:
<ul>
<li>Educate - I explain the concepts and process for what I am about to teach</li>
<li>Demonstrate - I demonstrate how to do it. Breaking down each compenent of what I am doing so it is visually easy to follow.</li>
<li>Guide - The student practices it by him/herself, making adjustments where needed.</li>
<li>Enable - By the end of it, the student is able to juggle!</li>
<p>While he doesn't teach it in exactly the same way I would, this juggle is a good demonstration of how I would teach it.</p>
<iframe id="video" width="420" height="315"
src="https://www.youtube.com/embed/p4_IUMS4yc8">
</iframe>
</p>
</article>
</section>
<section class="main-section" id="pricing">
<header>Pricing</header>
<p>I try to keep my pricing to a mimimum, but at the end of the day the bills need to be paid :)</p>
<div class="tier-flex">
<div class="tier-price">
<header class="tier-price-label">The beginner</header>
<p class="tier-price-price">$60</p>
<p class="tier-price-description">
This is a hour long class where I will teach you the basics of juggling. It should be enough to get you started and practice on you your.
</p>
</div>
<div class="tier-price">
<header class="tier-price-label">The Juggler</header>
<p class="tier-price-price">$200</p>
<p class="tier-price-description">We will meet for an hour each week for four weeks. In between each meeting you will be given assignments. This class should take you all the way from no juggling to a full on juggler. </p>
</div>
<div class="tier-price">
<header class="tier-price-label">The Pro</header>
<p class="tier-price-price">$350</p>
<p class="tier-price-description">
This class will take you zero to hero. We will meet an hour each week for eight weeks. By the end of this, you will be able to juggle circles around amatuers.
</p>
</div>
</div>
</section>
<section id="newsletter-form">
<header>Newsletter</header>
<p>Subscribe to my newsletter for more info about deals and a monthly tips & tricks guide!</p>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<label for="first-name">First Name: </label>
<input id="first-name" type="text"></input><br>
<label for="email">Email: </label>
<input name="email" id="email" placeholder="johndoe@example.com" type="email"></input><br>
<input id="submit" type="submit">
</form
</main>
</body>
</html>CSS Code
body {
font-family: lato;
background:#FAFBFAff;
color:#3A3237ff;
font-size:1.3rem;
max-width: 100%;
overflow-x: hidden;
}
@media only screen and (min-width:498px) {
#header {
clear:both;
overflow:visible; background-color:#C6D4D4ff;
height:80px;
width:100%;
position: fixed;
top:0px;
left:0px;
right:0px;
}}
@media only screen and (max-width:498px) {
#header {
clear:both;
overflow:visible;
position: fixed;
top:0px;
left:0px;
right:0px;
background-color:#C6D4D4ff;
height:115px;
width:100%;
}}
/* This used to be here for the h1 element. It used to be called "Juggling with Jesse" but having to put the navbar at the top messed it up a bit.
#header h1 {
display: inline-block;
font-size:1.2rem;
margin-left:25px;
margin-bottom:0px;
margin-top:30px;
padding:0;
}
*/
nav {
float:right;
position: fixed;
top: 0px;
margin-left:20px;
}
#header ul li{
display: inline-block;
font-size:1.2rem;
font-family:Lato;
margin-right:5px;
margin-top:10px;
padding:0px;
}
#header ul li a {
color: black;
}
#header-img {
float:left;
max-width: 65px;
height: 65px;
border-radius: 50px;
margin-left:8px;
margin-top:7px;
margin-bottom:7px;
}
#profile-pic {
float:center;
max-width: 50vw;
height: 50vw;
border-radius: 20px;
border: solid #94ADC4ff 5px;
margin-left:25%;
margin-right:25%;
margin-top:10px;
margin-bottom:10px;
}
#about-instructor header {
margin-top:70px;
}
section header {
font-size:2rem;
padding:0;
margin-top:30px;
margin-bottom:8px;
text-align:center;
}
p {
padding:0;
margin-left: 30px;
margin-right: 30px;
}
ul li {
margin-left: 40px;
}
iframe {
display: block;
margin: 0 auto;
}
.tier-flex {
display: flex;
width:100%;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.tier-price {
margin: 10px;
border: 3px solid #3A3237ff;
max-width: 400px;
height: 300px;
width: 350px;
border-radius:8px;
background-color:#94ADC4ff;
}
.tier-price .tier-price-label {
font-size:1.75rem;
text-decoration:underline;
}
.tier-price .tier-price-price {
text-align:center;
font-weight:bold;
}
#newsletter-form {
border:3px solid black;
height:300px;
margin-top:30px;
margin-bottom:50px;
margin-right: 20px;
margin-left: 20px;
border-radius:8px;
background-color:#C6D4D4ff;
}
#form {
display:block;
padding:0;
margin:4px;
margin-right:auto;
margin-left:auto;
width:70%;
}
#newsletter-form p {
width:60%;
margin:auto;
text-align:center;
margin-bottom:10px;
}
input {
display:inline-block;
width: 60%;
margin-right:auto;
margin-left:auto;
height: 30px;
margin-top:8px;
font-size:1em;
text-align:center;
}
label {
display: inline-block;
width: 150px;
text-align: right;
}
#submit {
display:block;
margin-right:auto;
margin-left:auto;
width:30%;
margin-top:20px;
}Finished Product
0:00
/1:11
AI Usage
The usage of AI & ML technologies are always kept to a minimum in order to maximize deep learning. I do not consider tools like search engines and "AI Summaries" in search engines to be notable AI assistance.
Member discussion