JoLynneMartinez/index.html

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

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://fonts.googleapis.com/css?family=Nanum+Gothic&display=swap" rel="stylesheet">
	<link rel="stylesheet"
</head>

<div class="grid-container">
	<header id="header">
		<nav class="topnav" id="nav-bar">
			<ul class="topnav">
				<li><a href="#home" class="nav-link">Welcome</a></li>
				<li><a href="#products" class="nav-link">Go Shopping</a></li>
				<li><a href="#video" class="nav-link">Watch a Video</a></li>
				<li><a href="#contact" class="nav-link">Receive Newsletter</a></li>
			</ul>
		</nav>
		<div class="logo">
			<img
			  id="header-img"
			  src="https://drive.google.com/uc?id=1T6TBCOXMaDMCNx3gMlRSDva4CJ0e7ECU">
		 </div>
	</header>

	<body>
		<div class="item2" id="buy">
				<h1 id="home">Priceless Products</h1>
			<h3>Because everything we sell is priceless, we give it away for free!</h3>
			<h3>Why don't you purchase enough for everyone and share it all?</h3>
		</div>
		<div class="item3 flex-container" id="products">
			<div id="Product1" class="container">
				Rich Earth
				<img src="https://drive.google.com/uc?id=10YFoP-f03Tsd3Padl3M-BI522JYEMXkB" alt="Rich Earth"><button class="button">Buy</button></img>
			</div>
			<div id="Product2" class="container">Clean Air<img src="https://drive.google.com/uc?id=1wMhs-amdTK_tEC4piTcBflroU9beoljn" alt="Clean Air"><button class="button" class="container">Buy</button></div>
			<div id="Product3" class="container">Warm Fire<img src="https://drive.google.com/uc?id=1iQH7nErFXUSVrHKYrx3OD5UwwiuCM3h7" alt="Controlled Fire"><button class="button">Buy</button></div>
			<div id="Product3" class="container">Pure Water<img src="https://drive.google.com/uc?id=1vc_u8HpifNKgMPtB-qT-tICW2RCH1A4E" alt="Pure Water"><button class="button">Buy</button></div>
  </div>
		<div class="item4">
			<h3>With rich earth, clearn air, controlled fire and pure water ... What a Wonderful World it Would Be</h3>
			<iframe width="560" height="315" src="https://www.youtube.com/embed/21LGv8Cf0us" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen id="video" alt="Louis Armstrong singing It's a Wonderul World"></iframe>
		</div>

	<footer class="item5" id="contact">
		<form action="https://www.freecodecamp.com/email-submit" method="get" id="form">
			<p>Want to receive our award-winning newsletter?</p>
			<label for="email" id="email-label">Send us your email: </label>
			<input type="email" name="email" id="email" required placeholder="Email"><br>
    <input type="submit" value="Submit" id="submit">
  		</form>
	</footer>

</div>

## product-landing-page.markdown

      
    Raw
  

              product-landing-page.markdown
            
          
    Product Landing Page

A Pen by JoLynne Walz Martinez on CodePen.
License.

  
## style.css
* {
  box-sizing: border-box;
}

.item1 { grid-area: header; }
.item2 { grid-area: buy; }
.item3 { grid-area: products; }
.item4 { grid-area: video; }
.item5 { grid-area: footer; }

.grid-container {
	display: grid;
  	grid-template-areas:
		'header header header header'
    	'buy buy buy buy'
    	'products products products products'
		'video video video video'
		'footer footer footer footer';
	grid-gap: 5px;
	background-color: #f9fefc;
	padding: 10px;
	font-family: 'Nanum Gothic', sans-serif;
	color: #4a6738;
}

.grid-container > div {
	background-color: #f9fefc;
  	text-align: center;
  	padding: 20px 0;
}

header {
	font-family: 'Gayathri', sans-serif;
	background-color: #f9fefc;
	color: #4a6738;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 2;
	min-height: 75px;
	display: flex;
	justify-content: space-around;
	align-items: center;
}

ul.topnav {
	list-style-type: none;
  	overflow: hidden;
}

ul.topnav li {float: left;}

ul.topnav li a {
	display: block;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
}

li {
	border-right: 1px solid #eaebd8;
}

li:first-child {
	border-left: 1px solid #eaebd8;
}

/* Change color on hover */
#nav-bar a:hover {
	color: #e6a400;
	background-color: #eaebd8;
	text-decoration: none;
}

a:link, a:visited {
	color: #4a6738;
	text-decoration: none;
}

@media screen and (max-width: 600px) {
	ul.topnav li {float: none;}
}

.logo > img {
	width: 55%;
  	height: auto;
  	max-width: 300px;
  	display: flex;
}

body {
	background-color: #f9fefc;
	background-image: url("https://drive.google.com/uc?id=1Sb_2QOL-R4bYvTbpBnu6dSTzgupLUbYh");
}

#buy {
	margin: 50px;
	padding: 25px 25px 10px 25px;
	background-image: url("https://drive.google.com/uc?id=1Sb_2QOL-R4bYvTbpBnu6dSTzgupLUbYh");
}

#products {
	background-image: url("https://drive.google.com/uc?id=1Sb_2QOL-R4bYvTbpBnu6dSTzgupLUbYh");
}

.flex-container {
	display: flex;
	flex-direction: row;
  	flex-wrap: wrap;
}

.flex-container > div {
	padding-top: 10px;
	width: 23%;
  	margin: 10px;
  	text-align: center;
  	line-height: 50px;
  	font-size: 25px;
	font-weight: bold;
	overflow: hidden;
	background-color: transparent;
}

.container {
	position: relative;
  	width: 100%;
}

.container img {
	width: 100%;
  	height: auto;
	z-index: 1;
}

.container .button {
	position: absolute;
	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
  	-ms-transform: translate(-50%, -50%);
  	color: #f9fefc;
	background-color: #4a6738;
	border: 5px solid #4a6738;
	border-radius: 25px;
	border-style: outset;
	border-width: 5px;
  	padding: 15px 32px;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	font-size: 16px;
  	margin: 4px 2px;
  	cursor: pointer;
}

.container .button:focus { outline: none !important; box-shadow: none !important; }

.item4 {
	background-image: url("https://drive.google.com/uc?id=1Sb_2QOL-R4bYvTbpBnu6dSTzgupLUbYh");
}

#contact {
	justify-content: right;
	padding-right: 25px;
}

footer {
	display: block;
	text-align: right;
	background-image: url("https://drive.google.com/uc?id=1Sb_2QOL-R4bYvTbpBnu6dSTzgupLUbYh");
}

p {
	font-weight: bold;
}

#email-label {
	font-weight: bold;
}

#email {
	background-color: #f9fefc;
}
	<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://fonts.googleapis.com/css?family=Nanum+Gothic&display=swap" rel="stylesheet">
	<link rel="stylesheet"
	</head>

	<div class="grid-container">
	<header id="header">
	<nav class="topnav" id="nav-bar">
	<ul class="topnav">
	<li><a href="#home" class="nav-link">Welcome</a></li>
	<li><a href="#products" class="nav-link">Go Shopping</a></li>
	<li><a href="#video" class="nav-link">Watch a Video</a></li>
	<li><a href="#contact" class="nav-link">Receive Newsletter</a></li>
	</ul>
	</nav>
	<div class="logo">
	<img
	id="header-img"
	src="https://drive.google.com/uc?id=1T6TBCOXMaDMCNx3gMlRSDva4CJ0e7ECU">
	</div>
	</header>

	<body>
	<div class="item2" id="buy">
	<h1 id="home">Priceless Products</h1>
	<h3>Because everything we sell is priceless, we give it away for free!</h3>
	<h3>Why don't you purchase enough for everyone and share it all?</h3>
	</div>
	<div class="item3 flex-container" id="products">
	<div id="Product1" class="container">
	Rich Earth
	<img src="https://drive.google.com/uc?id=10YFoP-f03Tsd3Padl3M-BI522JYEMXkB" alt="Rich Earth"><button class="button">Buy</button></img>
	</div>
	<div id="Product2" class="container">Clean Air<img src="https://drive.google.com/uc?id=1wMhs-amdTK_tEC4piTcBflroU9beoljn" alt="Clean Air"><button class="button" class="container">Buy</button></div>
	<div id="Product3" class="container">Warm Fire<img src="https://drive.google.com/uc?id=1iQH7nErFXUSVrHKYrx3OD5UwwiuCM3h7" alt="Controlled Fire"><button class="button">Buy</button></div>
	<div id="Product3" class="container">Pure Water<img src="https://drive.google.com/uc?id=1vc_u8HpifNKgMPtB-qT-tICW2RCH1A4E" alt="Pure Water"><button class="button">Buy</button></div>
	</div>
	<div class="item4">
	<h3>With rich earth, clearn air, controlled fire and pure water ... What a Wonderful World it Would Be</h3>
	<iframe width="560" height="315" src="https://www.youtube.com/embed/21LGv8Cf0us" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen id="video" alt="Louis Armstrong singing It's a Wonderul World"></iframe>
	</div>

	<footer class="item5" id="contact">
	<form action="https://www.freecodecamp.com/email-submit" method="get" id="form">
	<p>Want to receive our award-winning newsletter?</p>
	<label for="email" id="email-label">Send us your email: </label>
	<input type="email" name="email" id="email" required placeholder="Email"><br>
	<input type="submit" value="Submit" id="submit">
	</form>
	</footer>

	</div>
	* {
	box-sizing: border-box;
	}

	.item1 { grid-area: header; }
	.item2 { grid-area: buy; }
	.item3 { grid-area: products; }
	.item4 { grid-area: video; }
	.item5 { grid-area: footer; }

	.grid-container {
	display: grid;
	grid-template-areas:
	'header header header header'
	'buy buy buy buy'
	'products products products products'
	'video video video video'
	'footer footer footer footer';
	grid-gap: 5px;
	background-color: #f9fefc;
	padding: 10px;
	font-family: 'Nanum Gothic', sans-serif;
	color: #4a6738;
	}

	.grid-container > div {
	background-color: #f9fefc;
	text-align: center;
	padding: 20px 0;
	}

	header {
	font-family: 'Gayathri', sans-serif;
	background-color: #f9fefc;
	color: #4a6738;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 2;
	min-height: 75px;
	display: flex;
	justify-content: space-around;
	align-items: center;
	}

	ul.topnav {
	list-style-type: none;
	overflow: hidden;
	}

	ul.topnav li {float: left;}

	ul.topnav li a {
	display: block;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	}

	li {
	border-right: 1px solid #eaebd8;
	}

	li:first-child {
	border-left: 1px solid #eaebd8;
	}

	/* Change color on hover */
	#nav-bar a:hover {
	color: #e6a400;
	background-color: #eaebd8;
	text-decoration: none;
	}

	a:link, a:visited {
	color: #4a6738;
	text-decoration: none;
	}

	@media screen and (max-width: 600px) {
	ul.topnav li {float: none;}
	}

	.logo > img {
	width: 55%;
	height: auto;
	max-width: 300px;
	display: flex;
	}

	body {
	background-color: #f9fefc;
	background-image: url("https://drive.google.com/uc?id=1Sb_2QOL-R4bYvTbpBnu6dSTzgupLUbYh");
	}

	#buy {
	margin: 50px;
	padding: 25px 25px 10px 25px;
	background-image: url("https://drive.google.com/uc?id=1Sb_2QOL-R4bYvTbpBnu6dSTzgupLUbYh");
	}

	#products {
	background-image: url("https://drive.google.com/uc?id=1Sb_2QOL-R4bYvTbpBnu6dSTzgupLUbYh");
	}

	.flex-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	}

	.flex-container > div {
	padding-top: 10px;
	width: 23%;
	margin: 10px;
	text-align: center;
	line-height: 50px;
	font-size: 25px;
	font-weight: bold;
	overflow: hidden;
	background-color: transparent;
	}

	.container {
	position: relative;
	width: 100%;
	}

	.container img {
	width: 100%;
	height: auto;
	z-index: 1;
	}

	.container .button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	color: #f9fefc;
	background-color: #4a6738;
	border: 5px solid #4a6738;
	border-radius: 25px;
	border-style: outset;
	border-width: 5px;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	cursor: pointer;
	}

	.container .button:focus { outline: none !important; box-shadow: none !important; }

	.item4 {
	background-image: url("https://drive.google.com/uc?id=1Sb_2QOL-R4bYvTbpBnu6dSTzgupLUbYh");
	}

	#contact {
	justify-content: right;
	padding-right: 25px;
	}

	footer {
	display: block;
	text-align: right;
	background-image: url("https://drive.google.com/uc?id=1Sb_2QOL-R4bYvTbpBnu6dSTzgupLUbYh");
	}

	p {
	font-weight: bold;
	}

	#email-label {
	font-weight: bold;
	}

	#email {
	background-color: #f9fefc;
	}