NeclaGumus/index.html

## index.html
<html>
  <head>
    <link ref="stylesheet" type="text/css" href="/css/custom-style.css">
    <style>
      @media only screen and (max-width: 768px) {
        /* For mobile phones: */
        [class*="col-"] {
          width: 100%;
        }
      }

      .flex-container {
        display: flex;
        justify-content: center;
      }
    </style>

  </head>

  <body>
    <header id="header">
      <center>
    <img id="header-img" src="https://cdn.shopify.com/s/files/1/2699/8854/files/logo.png?height=628&pad_color=ffffff&v=1515059104&width=1200"></img>
     <nav id="nav-bar">
       <a class="nav-link" href="#learn-more">Learn More</a>
       <a class="nav-link" href="#request-coupon">Request Coupon</a>
       <a class="nav-link" href="#buy-on-amazon">Buy on Amazon</a>
    </nav>
      </center>
    </header>
  <section id="learn-more">
    <center>
    <h1>The Veloretti Bicycle</h1>
    <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/DAUa2HLPNfs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </center>

  </section>
  <section id="request-coupon">
    <center>
      <h2>Request a Coupon</h2>
    <form id="form" action="https://www.freecodecamp.com/email-submit">
      <input id="email" type="email" placeholder="abcdef@whatever.com" name="email"></input>
    <input id="submit" type="submit"></input>

    </form>
  </center>
  </section>
  <section id="buy-on-amazon">
    <div class="flex-container">
  <div><a href="amazon-affiliate-link">Buy on Amazon</a></div>
  <div><a href="scpock-affiliate-link">Buy on Scpock</a></div>
  <div><a href="veloretti-affiliate-link">Buy on Veloretti</a></div>
</div>

  </section>
  </body>
  <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<script>
    window.onscroll = function() {myFunction()};

    var header = document.getElementById("header");
    var sticky = header.offsetTop;

    function myFunction() {
      if (window.pageYOffset > sticky) {
        header.classList.add("sticky");
      } else {
        header.classList.remove("sticky");
      }
    }
  </script>
</html>

## product-landing-page.markdown

      
    Raw
  

              product-landing-page.markdown
            
          
    Product Landing Page

A Pen by Necla Gumus on CodePen.
License.

  
## style.css
body {
  font-family: sans-serif;
}

section {
  padding-bottom: 50px;
  padding-top: 50px;
}

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

header {
  position: fixed;
  width: 100%;
}

.nav-link {
  color: gray;

  padding: 20px;
  margin: 20px;
}

.flex-container > div {
  background-color: white;
  width: 200px;
  /* margin: 300px; */
  text-align: center;
  line-height: 400px;
  font-size: 14px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: white;
  padding-bottom: 20px;
}

#header-img {
  top: 0;
  width: 150px;
}

#buy-on-amazon {
  background-color: #ffebcd;
}
	<html>
	<head>
	<link ref="stylesheet" type="text/css" href="/css/custom-style.css">
	<style>
	@media only screen and (max-width: 768px) {
	/* For mobile phones: */
	[class*="col-"] {
	width: 100%;
	}
	}

	.flex-container {
	display: flex;
	justify-content: center;
	}
	</style>

	</head>

	<body>
	<header id="header">
	<center>
	<img id="header-img" src="https://cdn.shopify.com/s/files/1/2699/8854/files/logo.png?height=628&pad_color=ffffff&v=1515059104&width=1200"></img>
	<nav id="nav-bar">
	<a class="nav-link" href="#learn-more">Learn More</a>
	<a class="nav-link" href="#request-coupon">Request Coupon</a>
	<a class="nav-link" href="#buy-on-amazon">Buy on Amazon</a>
	</nav>
	</center>
	</header>
	<section id="learn-more">
	<center>
	<h1>The Veloretti Bicycle</h1>
	<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/DAUa2HLPNfs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
	</center>

	</section>
	<section id="request-coupon">
	<center>
	<h2>Request a Coupon</h2>
	<form id="form" action="https://www.freecodecamp.com/email-submit">
	<input id="email" type="email" placeholder="abcdef@whatever.com" name="email"></input>
	<input id="submit" type="submit"></input>

	</form>
	</center>
	</section>
	<section id="buy-on-amazon">
	<div class="flex-container">
	<div><a href="amazon-affiliate-link">Buy on Amazon</a></div>
	<div><a href="scpock-affiliate-link">Buy on Scpock</a></div>
	<div><a href="veloretti-affiliate-link">Buy on Veloretti</a></div>
	</div>

	</section>
	</body>
	<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
	<script>
	window.onscroll = function() {myFunction()};

	var header = document.getElementById("header");
	var sticky = header.offsetTop;

	function myFunction() {
	if (window.pageYOffset > sticky) {
	header.classList.add("sticky");
	} else {
	header.classList.remove("sticky");
	}
	}
	</script>
	</html>
	body {
	font-family: sans-serif;
	}

	section {
	padding-bottom: 50px;
	padding-top: 50px;
	}

	/* For desktop: */
	.col-1 {width: 8.33%;}
	.col-2 {width: 16.66%;}
	.col-3 {width: 25%;}
	.col-4 {width: 33.33%;}
	.col-5 {width: 41.66%;}
	.col-6 {width: 50%;}
	.col-7 {width: 58.33%;}
	.col-8 {width: 66.66%;}
	.col-9 {width: 75%;}
	.col-10 {width: 83.33%;}
	.col-11 {width: 91.66%;}
	.col-12 {width: 100%;}

	header {
	position: fixed;
	width: 100%;
	}

	.nav-link {
	color: gray;

	padding: 20px;
	margin: 20px;
	}

	.flex-container > div {
	background-color: white;
	width: 200px;
	/* margin: 300px; */
	text-align: center;
	line-height: 400px;
	font-size: 14px;
	}

	.sticky {
	position: fixed;
	top: 0;
	width: 100%;
	background-color: white;
	padding-bottom: 20px;
	}

	#header-img {
	top: 0;
	width: 150px;
	}

	#buy-on-amazon {
	background-color: #ffebcd;
	}