jumbotron.html

<!DOCTYPE html>
<!--[if IE 9]>
<html lang="en-us" class="ie9"><![endif]-->
<!--[if gt IE 9]><!-->
<html lang="en-us">
<!--<![endif]-->
<head>
  <title>Jumbotron - PatternFly</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link href="css/patternfly-web.css" rel="stylesheet" media="screen, print">
</head>

<body>
<div class="container">
  <div class="page-header">
    <h1>Jumbotron</h1>
  </div>
  <div class="alert alert-warning">
    <span class="pficon pficon-warning-triangle-o"></span>
    This is an example jumbotron.
  </div>

  <h3>Text with color background (default)</h3>
  <div class="jumbotron jumbotron-pf">
    <h1 class="display-3">Headline</h1>
    <p class="lead">Lead text torquent turpis, ut volutpat integer, imperdiet sodales. Venenatis turpis libero placerat
      tellus mi donec, duis sed tortor. Euismod consectetuer ut wisi semper leo, tellus magna quis wisi nec, odio sunt
      in vel, facilisi orci volutpat dolor. At donec ipsum quam id pellentesque.
    <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
    <p class="lead">
      <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
    </p>
  </div>

  <h3>Hero image with text overlay</h3>
  <div class="jumbotron jumbotron-pf jumbotron-pf-hero">
    <img src="dist/img/iceland-images-18.jpg">
    <div class="overlay">
      <div class="center">
        <h1 class="display-3">Headline</h1>
        <p class="lead">Lead text torquent turpis, ut volutpat integer, imperdiet sodales. Venenatis turpis libero
          placerat tellus mi donec, duis sed tortor. Euismod consectetuer ut wisi semper leo, tellus magna quis wisi
          nec, odio sunt in vel, facilisi orci volutpat dolor. At donec ipsum quam id pellentesque.
        <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
        <p class="lead">
          <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
        </p>
      </div>
    </div>
  </div>


</div><!-- /container -->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="dist/js/patternfly.min.js"></script>


</body>
</html>