CodePen Embed - BootStrap Product Page

<!DOCTYPE html>
<html lang="en">

<head>
    <title> FCC Product Page </title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/css?family=Anton|Orbitron|Russo+One" rel="stylesheet">

</head>
<!-- NAVIGATION -->
<div id="home" class="container">
    <header id="header">
        <nav id="nav-bar" class="navbar navbar-expand-sm navbar-dark navbar-fixed-top" style="background-color: #821e36">
            <img src="https://i.ibb.co/9sy5Lmx/hexa-logo1.png" width="60" height="55" class="d-inline-block align-top" alt="" id="header-img">
            <a class="navbar-brand" href="#">HEX MEDIA</a>
            <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav navbar-right">
                    <li class="nav-item">
                        <a class="nav-link" href="#home">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#about">About Us</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#pricing">Pricing</a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>
</div>
<!-- END NAVIGATION -->

<body>
    <div class="container banner">
        <div class="jumbotron">
            <h1> Welcome To HEX Media</h1>
            <h2> Lets Get Started</h2>
            <form id="form" action="https://www.freecodecamp.com/email-submit">
                <div class="form-group"><input name="email" id="email" type="email" placeholder="Enter your email address" required />
                    <input id="submit" type="submit" value="Get Started" class="btn btn-warning">
                </div>
            </form>
        </div>
    </div>
    <div id="about">
        <section>
            <div class="vid-desc">
        <h1> What We Offer</h1>
            <p>We are a Web Design firm specializing in Website, Mobile App and E-Commerce Development</p>
          </div>
            <div class="videoWrapper">
                <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/4IXWUK3yELs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
        </section>
    </div>
    <!-- PRICING CARDS -->
    <div>
        <section id="pricing">
            <h1>Professional Packages Available</h1>
            <div class="card-deck mb-3 text-center">
                <div class="card mb-4 shadow-sm">
                    <div class="card-header">
                        <h4 class="my-0 font-weight-normal">Personal</h4>
                    </div>
                    <div class="card-body">
                        <h2 class="card-title pricing-card-title">$99 <small class="text-muted">/ mo</small></h2>
                        <ul class="list-unstyled mt-3 mb-4">
                            <li>Custome Website (4 Pages)</li>
                            <li>Monthly Updates (10 Minutes)</li>
                            <li>Uptime Monitoring</li>
                            <li>Quick & Reliable Support</li>
                        </ul>
                        <button type="button" class="btn btn-lg btn-block btn-warning">Get started</button>
                    </div>
                </div>
                <div class="card mb-4 shadow-sm">
                    <div class="card-header">
                        <h4 class="my-0 font-weight-normal">Business</h4>
                    </div>
                    <div class="card-body">
                        <h2 class="card-title pricing-card-title">$149 <small class="text-muted">/ mo</small></h2>
                        <ul class="list-unstyled mt-3 mb-4">
                            <li>Custom Website (8 Pages)</li>
                            <li>Monthly Updates (30 Minutes)</li>
                            <li>Uptime Monitoring</li>
                            <li>Quick & Reliable Support</li>
                        </ul>
                        <button type="button" class="btn btn-lg btn-block btn-warning">Get started</button>
                    </div>
                </div>
                <div class="card mb-4 shadow-sm">
                    <div class="card-header">
                        <h4 class="my-0 font-weight-normal">Enterprise</h4>
                    </div>
                    <div class="card-body">
                        <h2 class="card-title pricing-card-title">$199 <small class="text-muted">/ mo</small></h2>
                        <ul class="list-unstyled mt-3 mb-4">
                            <li>Custom Website (14 Pages)</li>
                            <li>Monthly Updates (60 Minutes)</li>
                            <li>Uptime Monitoring</li>
                            <li>Quick & Reliable Support</li>
                        </ul>
                        <button type="button" class="btn btn-lg btn-block btn-warning">Get started</button>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <!-- Bootstrap core JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
<!-- END PRICING CARDS -->
<!-- FOOTER -->
<footer id="footer" class="page-footer pt-4">
    <div class="footer-copyright text-center py-3">© 2019 Copyright:
        <a href="https://codepen.io/jimbob6272/">My Codepen</a>
    </div>
</footer>
<!-- END FOOTER -->

html {
  scroll-behavior: smooth;
}
body {
    background-color: #E2E2E2 !important;
}

.banner {
    color: #FEFEFE;
    text-align: center;
    width: 100%;
    margin-top: 100px;

}

.vid-desc{
    width: 90%;
    justify-content: center;
    align-content: center;
    display: inline-block;
    color: #e2e2e2;
    text-align: center;
    border-radius: 5px;
}

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    padding-top: 25px;
    height: 0;
}

.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* --START-- BOOTSTRAP CLASSES */

.container {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 15px;
    text-align: center;
}

.navbar-brand {
    font-family: 'Russo One', sans-serif;
    font-size: 2em !important;
    margin-left: -10px;
}

.nav-item {
    padding-right: 2em;
}

.nav-link {
    font-size: 1.5em;
}

.jumbotron {
    background: url(https://www.kuraldesign.com/wp-content/uploads/2016/10/trianglify-header.jpg);
    background-size: 100% 150%;
    height: 400px;
    margin: 100px -50px;
    display: grid;
    align-content: center;
    justify-content: center;

}

.jumbotron h1 {
    font-size: 4em !important;
}

.form-group {
    padding-top: 25px;
}

.card-deck {
    padding-top: 30px;
}

.card {
    border: 5px solid white;
}

.card ul {
    padding-bottom: 20px;
}

.btn-warning {
    color: #333333 !important;
}

/* --END-- BOOTSTRAP CLASSES */

/* -- START-- FCC REQUIRED ID'S */

#about {
    background: linear-gradient(to bottom, #76001a 0%, #445f77 100%);
    color: #E2E2E2;
    font-size: 20px;
    height: 100%;
    text-align: center;
    align-content: center;
    justify-content: center;
    padding: 20px 0px;
}

#about H1 {
    padding: 0px;
}

#about p {
    padding: 10px 20px;
}

#video {
    padding: 30px;
}

#submit {
    font-weight: bold;
    border-radius: 2px;
    margin-left: 10px;
    color: #333333;
}

#email {
    line-height: 28px;
    text-align: center;
    border-radius: 2px;
    width: 250px;
}

#pricing {
    padding: 30px;
    border-radius: 5px;
    height: 20%;
    text-align: center;
    align-content: center;
    justify-content: center;
}

#pricing h1 {
    padding-bottom: 20px;
}

footer {
    height: 80px;
    background: #821e36;
    color: #E2E2E2;
    font-size: 20px;
    padding-top: 10px;
}

#footer a {
    color: rgb(248, 195, 80);
}

/* --END-- FCC REQUIRED ID'S */

//Part of the Free Code Camp certification program:  Building a product landing page

This Pen is owned by Jim on CodePen.

See more by @jimbob6272 on CodePen

External CSS

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.