-
Notifications
You must be signed in to change notification settings - Fork 1
/
jumbotron.html
66 lines (57 loc) · 2.52 KB
/
jumbotron.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!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>