VishrutAggarwal/fcc-product-landing-page.markdown

## fcc-product-landing-page.markdown

      
    Raw
  

              fcc-product-landing-page.markdown
            
          
    FCC: Product Landing Page

A freeCodeCamp certification project on Responsive Web Design.
A Pen by Vishrut Aggarwal on CodePen.
License.

  
## index.html
<html>
  <body>
    <header id = "header">
      <img src = "https://yt3.ggpht.com/BiDYezdkoZBJ_tvkRzoGHNBM4qX6gfXIavl5lpsEz80FIVUfzRBXdSicBhih6GRcAsJEN0Yi5yM=s176-c-k-c0x00ffffff-no-rj" id = "header-img">
      <nav id = "nav-bar">
        <a href = "#about-section" class = "nav-link">About</a>
        <a href = "#video-section" class = "nav-link">Video Preview</a>
        <a href = "#pricing-section" class = "nav-link">Prices</a>
        <a href = "#form-section" class = "nav-link">Contact us</a>
      </nav>
    </header>
    <main>
      <section id = "about-section">
        <h1>Dreamhop Music</h1>
        <p>Dreamhop Music is a Record Label promoting lofi and chill hiphop beats. But we're a more than that, we're a community of passionate artists working hand in hand to create the best chill vibes. :)</p>
        <dl>
          <div>
            <dt>Soothing Music</dt>
            <dd>The music will calm your nerves</dd>
          </div>
          <div>
            <dt>Chill Music</dt>
            <dd>The music can be used when you're chilling</dd>
          </div>
          <div>
            <dt>New Music</dt>
            <dd>The music list is updated frequently, so do check out more playlists</dd>
        </div>
        </dl>
      </section>
      <section id = "video-section">
        <iframe src="https://www.youtube.com/embed/kuGxRbY_wHs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen id = "video"></iframe>
      </section>
      <section id = "pricing-section">
        <div class = "price-card">
          <p>The Music is actually completely free on Youtube</p>
          <p>So no $ required</p>
          <p> To go to the Youtube Channel, click on this link: <a href = "https://www.youtube.com/channel/UCz9_4daWw-uWuqeB6_IkhMg">DreamHop Music</a></p>
        </div>
      </section>
      <section id = "form-section">
        <h2>Good lo-fi music anywhere you go</h2>
        <form action = "https://www.freecodecamp.com/email-submit" method = "get" id = "form">
          <input type = "email" id = "email" placeholder = "Enter your email" name = "email">
          <input type = "submit" id = "submit" value = "Get Started">
        </form>
      </section>
    </main>
    <footer>
      <p>Disclaimer: This is a fake product landing page for practice</p>
      <hr>
      <p>Copyright 20XX, Not Original Music</p>
    </footer>
  </body>
</html>

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

## style.css
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #272727;
  font-family: sans-serif;
}
header {
  display: flex;
  position: fixed;
  top: 10px;
  align-items: center;
  height: 60px;
  background-color: #D7D7D7;
  width: 100%;
}
header img {
  position: fixed;
  left: 10px;
  height: 50px;
}
header nav {
  display: flex;
  position: fixed;
  right: 30px;
  gap: 20px;
}
.nav-link {
  color: #777;
  text-decoration: none;
}
main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 90px;
}
section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 80vw;
  height: 80vh;
  gap: 30px;
  padding: 50px 30px;
}
#about-section h1, #about-section p, #about-section dl{
  width: 100%;
}
#about-section p {
  color: #D6FFA0;
}
#about-section h1 {
  color: #A0FFC9;
  font-size: 2.5rem;
}
dl {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-left: 50px;
  color: #FFF8A0;
}
dt {
  font-weight: 600;
}
#video-section {
  padding: 30px;
}
iframe {
  width: 100%;
  height: 100%;
}
.price-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: space-around;
  font-size: 2rem;
  height: 90%;
  width: 90%;
  color: #A7FFA0;
  background-color: #424242;
  padding: 30px;
}
.price-card a {
  color: #A7FFA0;
  text-decoration: none;
  font-weight: 600;
}
#form-section {
  color: #A0FFC9;
}
input {
  background-color: #A0FFC9;
  border-radius: 5px;
}
input[type=submit] {
  width: 90px;
}
footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 100px;
  background-color: #D7D7D7;
  color: #777;
  height: 30px;
  font-size: 0.8rem;
}
@media screen and (max-width: 700px) {
  section {
    height: 50vh;
  }
  .price-card {
    font-size: 1.4rem;
    padding: 20px;
  }
  footer {
    gap: 10px;
  }
  hr {
    height: 30px;
    background-color: #636363;
    border: 1px solid #636363;
  }
}
	<html>
	<body>
	<header id = "header">
	<img src = "https://yt3.ggpht.com/BiDYezdkoZBJ_tvkRzoGHNBM4qX6gfXIavl5lpsEz80FIVUfzRBXdSicBhih6GRcAsJEN0Yi5yM=s176-c-k-c0x00ffffff-no-rj" id = "header-img">
	<nav id = "nav-bar">
	<a href = "#about-section" class = "nav-link">About</a>
	<a href = "#video-section" class = "nav-link">Video Preview</a>
	<a href = "#pricing-section" class = "nav-link">Prices</a>
	<a href = "#form-section" class = "nav-link">Contact us</a>
	</nav>
	</header>
	<main>
	<section id = "about-section">
	<h1>Dreamhop Music</h1>
	<p>Dreamhop Music is a Record Label promoting lofi and chill hiphop beats. But we're a more than that, we're a community of passionate artists working hand in hand to create the best chill vibes. :)</p>
	<dl>
	<div>
	<dt>Soothing Music</dt>
	<dd>The music will calm your nerves</dd>
	</div>
	<div>
	<dt>Chill Music</dt>
	<dd>The music can be used when you're chilling</dd>
	</div>
	<div>
	<dt>New Music</dt>
	<dd>The music list is updated frequently, so do check out more playlists</dd>
	</div>
	</dl>
	</section>
	<section id = "video-section">
	<iframe src="https://www.youtube.com/embed/kuGxRbY_wHs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen id = "video"></iframe>
	</section>
	<section id = "pricing-section">
	<div class = "price-card">
	<p>The Music is actually completely free on Youtube</p>
	<p>So no $ required</p>
	<p> To go to the Youtube Channel, click on this link: <a href = "https://www.youtube.com/channel/UCz9_4daWw-uWuqeB6_IkhMg">DreamHop Music</a></p>
	</div>
	</section>
	<section id = "form-section">
	<h2>Good lo-fi music anywhere you go</h2>
	<form action = "https://www.freecodecamp.com/email-submit" method = "get" id = "form">
	<input type = "email" id = "email" placeholder = "Enter your email" name = "email">
	<input type = "submit" id = "submit" value = "Get Started">
	</form>
	</section>
	</main>
	<footer>
	<p>Disclaimer: This is a fake product landing page for practice</p>
	<hr>
	<p>Copyright 20XX, Not Original Music</p>
	</footer>
	</body>
	</html>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}
	body {
	background-color: #272727;
	font-family: sans-serif;
	}
	header {
	display: flex;
	position: fixed;
	top: 10px;
	align-items: center;
	height: 60px;
	background-color: #D7D7D7;
	width: 100%;
	}
	header img {
	position: fixed;
	left: 10px;
	height: 50px;
	}
	header nav {
	display: flex;
	position: fixed;
	right: 30px;
	gap: 20px;
	}
	.nav-link {
	color: #777;
	text-decoration: none;
	}
	main {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-top: 90px;
	}
	section {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 80vw;
	height: 80vh;
	gap: 30px;
	padding: 50px 30px;
	}
	#about-section h1, #about-section p, #about-section dl{
	width: 100%;
	}
	#about-section p {
	color: #D6FFA0;
	}
	#about-section h1 {
	color: #A0FFC9;
	font-size: 2.5rem;
	}
	dl {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-left: 50px;
	color: #FFF8A0;
	}
	dt {
	font-weight: 600;
	}
	#video-section {
	padding: 30px;
	}
	iframe {
	width: 100%;
	height: 100%;
	}
	.price-card {
	display: flex;
	flex-direction: column;
	gap: 20px;
	justify-content: space-around;
	font-size: 2rem;
	height: 90%;
	width: 90%;
	color: #A7FFA0;
	background-color: #424242;
	padding: 30px;
	}
	.price-card a {
	color: #A7FFA0;
	text-decoration: none;
	font-weight: 600;
	}
	#form-section {
	color: #A0FFC9;
	}
	input {
	background-color: #A0FFC9;
	border-radius: 5px;
	}
	input[type=submit] {
	width: 90px;
	}
	footer {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 100px;
	background-color: #D7D7D7;
	color: #777;
	height: 30px;
	font-size: 0.8rem;
	}
	@media screen and (max-width: 700px) {
	section {
	height: 50vh;
	}
	.price-card {
	font-size: 1.4rem;
	padding: 20px;
	}
	footer {
	gap: 10px;
	}
	hr {
	height: 30px;
	background-color: #636363;
	border: 1px solid #636363;
	}
	}