rmcg.dev/freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/index.html

94 lines
5.7 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project 3 - Build A Product Landing Page</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://kit.fontawesome.com/25481ff5bf.js" crossorigin="anonymous"></script>
</head>
<body>
<header id="header">
<nav id="nav-bar">
<img id="header-img" src="fake-logo.png" alt="company logo">
<div class="push" id="nav-links">
<a class="nav-link btn-link" href="#games">Games</a>
<a class="nav-link btn-link" href="#videos">Videos</a>
<a class="nav-link btn-link" href="#features">Features</a>
</div>
</nav>
</header>
<div id="empty-space">
&nbsp
</div>
<section id="formsection">
<h2>Product Blurb</h2>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<div class="form-email">
<label for="email">Enter your email: </label>
<input type="email" name="email" id="email" placeholder="person@example.com" required>
</div>
<div class="form-example">
<input id="submit" type="submit" value="Subscribe!">
</div>
</form>
</section>
<section id="games">
<h2 >games</h2>
<div class="grid">
<div class="icon">
<i class="fab fa-3x fa-acquisitions-incorporated"></i>
</div>
<div class="details">
<h3>Acq Inc</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit illum ipsum blanditiis quam ut quibusdam provident voluptas! Repellendus, adipisci ullam, distinctio, eos perferendis quia voluptatibus architecto ab nulla accusantium corrupti!</p>
</div>
</div>
<div class="grid">
<div class="icon">
<i class="fab fa-3x fa-d-and-d"></i>
</div>
<div class="details">
<h3>D&D</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit illum ipsum blanditiis quam ut quibusdam provident voluptas! Repellendus, adipisci ullam, distinctio, eos perferendis quia voluptatibus architecto ab nulla accusantium corrupti!</p>
</div>
</div>
<div class="grid">
<div class="icon">
<i class="fab fa-3x fa-critical-role"></i>
</div>
<div class="details">
<h3>Critical Role</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit illum ipsum blanditiis quam ut quibusdam provident voluptas! Repellendus, adipisci ullam, distinctio, eos perferendis quia voluptatibus architecto ab nulla accusantium corrupti!</p>
</div>
</div>
<div class="grid">
<div class="icon">
<i class="fab fa-3x fa-fantasy-flight-games"></i>
</div>
<div class="details">
<h3>Star Wars: X-Wing</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit illum ipsum blanditiis quam ut quibusdam provident voluptas! Repellendus, adipisci ullam, distinctio, eos perferendis quia voluptatibus architecto ab nulla accusantium corrupti!</p>
</div>
</div>
</section>
<section id="videos">
<iframe id="video" width="420" height="315" src="https://www.youtube.com/embed/LhFETREAvhc?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</section>
<section id="features">
<h2 >Features</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet voluptatibus nisi maiores quidem quas rem labore explicabo nam quasi, consectetur, soluta error perspiciatis repellendus autem dolores optio? Eaque, quasi magnam?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet voluptatibus nisi maiores quidem quas rem labore explicabo nam quasi, consectetur, soluta error perspiciatis repellendus autem dolores optio? Eaque, quasi magnam?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet voluptatibus nisi maiores quidem quas rem labore explicabo nam quasi, consectetur, soluta error perspiciatis repellendus autem dolores optio? Eaque, quasi magnam?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet voluptatibus nisi maiores quidem quas rem labore explicabo nam quasi, consectetur, soluta error perspiciatis repellendus autem dolores optio? Eaque, quasi magnam?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet voluptatibus nisi maiores quidem quas rem labore explicabo nam quasi, consectetur, soluta error perspiciatis repellendus autem dolores optio? Eaque, quasi magnam?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet voluptatibus nisi maiores quidem quas rem labore explicabo nam quasi, consectetur, soluta error perspiciatis repellendus autem dolores optio? Eaque, quasi magnam?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet voluptatibus nisi maiores quidem quas rem labore explicabo nam quasi, consectetur, soluta error perspiciatis repellendus autem dolores optio? Eaque, quasi magnam?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet voluptatibus nisi maiores quidem quas rem labore explicabo nam quasi, consectetur, soluta error perspiciatis repellendus autem dolores optio? Eaque, quasi magnam?
</p>
</section>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</body>
</html>