diff --git a/examples/cover/cover.css b/examples/cover/cover.css new file mode 100644 index 0000000000..177ce03bf0 --- /dev/null +++ b/examples/cover/cover.css @@ -0,0 +1,160 @@ +/* + * Globals + */ + +/* Links */ +a, +a:focus, +a:hover { + color: #fff; +} + +/* Custom default button */ +.btn-default, +.btn-default:hover, +.btn-default:focus { + color: #333; + text-shadow: none; /* Prevent inheritence from `body` */ + background-color: #fff; + border: 1px solid #fff; +} + + +/* + * Base structure + */ + +html, +body { + height: 100%; + background-color: #333; +} +body { + color: #fff; + text-align: center; + text-shadow: 0 1px 3px rgba(0,0,0,.5); + box-shadow: inset 0 0 100px rgba(0,0,0,.5); +} + +/* Extra markup and styles for table-esque vertical and horizontal centering */ +.site-wrapper { + display: table; + width: 100%; + min-height: 100%; +} +.site-wrapper-inner { + display: table-cell; + vertical-align: top; +} +.cover-container { + margin-left: auto; + margin-right: auto; +} + +/* Padding for spacing */ +.inner { + padding: 30px; +} + + +/* + * Header + */ +.masthead-brand { + margin-top: 10px; + margin-bottom: 10px; +} + +.masthead-nav > li { + display: inline-block; +} +.masthead-nav > li + li { + margin-left: 20px; +} +.masthead-nav > li > a { + padding-left: 0; + padding-right: 0; + font-size: 16px; + font-weight: bold; + color: #fff; /* IE8 proofing */ + color: rgba(255,255,255,.75); + border-bottom: 2px solid transparent; +} +.masthead-nav > li > a:hover, +.masthead-nav > li > a:focus { + background-color: transparent; + border-bottom-color: rgba(255,255,255,.25); +} +.masthead-nav > .active > a, +.masthead-nav > .active > a:hover, +.masthead-nav > .active > a:focus { + color: #fff; + border-bottom-color: #fff; +} + +@media (min-width: 768px) { + .masthead-brand { + float: left; + } + .masthead-nav { + float: right; + } +} + + +/* + * Cover + */ + +.cover { + padding: 0 20px; +} +.cover .btn-lg { + padding: 10px 20px; + font-weight: bold; +} + + +/* + * Footer + */ + +.mastfoot { + color: #999; /* IE8 proofing */ + color: rgba(255,255,255,.5); +} + + +/* + * Affix and center + */ + +@media (min-width: 768px) { + /* Pull out the header and footer */ + .masthead { + position: fixed; + top: 0; + } + .mastfoot { + position: fixed; + bottom: 0; + } + /* Start the vertical centering */ + .site-wrapper-inner { + vertical-align: middle; + } + /* Handle the widths */ + .masthead, + .mastfoot, + .cover-container { + width: 100%; /* Must be percentage or pixels for horizontal alignment */ + } +} + +@media (min-width: 992px) { + .masthead, + .mastfoot, + .cover-container { + width: 700px; + } +} diff --git a/examples/cover/index.html b/examples/cover/index.html new file mode 100644 index 0000000000..ae9ca1829f --- /dev/null +++ b/examples/cover/index.html @@ -0,0 +1,75 @@ + + + + + + + + + + + Cover Template for Bootstrap + + + + + + + + + + + + + + + + +
+ +
+ +
+ +
+
+

Cover

+ +
+
+ +
+

Cover your page.

+

Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.

+

+ Learn more +

+
+ +
+
+

Cover template for Bootstrap, by @mdo.

+
+
+ +
+ +
+ +
+ + + + + + + + diff --git a/examples/screenshots/cover.jpg b/examples/screenshots/cover.jpg new file mode 100644 index 0000000000..d627519b6d Binary files /dev/null and b/examples/screenshots/cover.jpg differ diff --git a/getting-started.html b/getting-started.html index 15d415bac5..ba4735a31b 100644 --- a/getting-started.html +++ b/getting-started.html @@ -261,6 +261,15 @@ bootstrap/

Carousel

Customize the navbar and carousel, then add some new components.

+
+ + + +

Cover

+

A one-page template for building simple and beautiful home pages.

+
+
+
@@ -268,8 +277,6 @@ bootstrap/

Dashboard

Basic structure for a admin dashboard with fixed sidebar and navbar.

-
-
@@ -277,6 +284,8 @@ bootstrap/

Non-responsive Bootstrap

Easily disable the responsiveness of Bootstrap per our docs.

+
+