From e946348eca928fa1c42dbb92c7a612543832dccc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 14 Jan 2018 16:06:52 -0800 Subject: Examples updates (#24898) * fix cover nav * Improve signin visuals and alignment with that flexbox love * rewrite cover example in flexbox * lighten signin bg * first pass at pricing example * redo examples index with data file * tighten up spacing a bit * update navbar descriptions * link pricing * move that back * property order * Fix test errors. * Compress pricing.png. * add form validation example * remove that * rename that * restyle and space out * fix errors * change order * cleanup album css and styles * tweak examples index * make it a badge * options * improve sticky footer alignment * redesign example index * brand new blog layout * start new screenshots * new product example page a la apple * add email field * fix linter, remove unused blog css * hook up feather icons to start * redo dashboard * fix linting * add floating labels example * formatting * formatting * lint * fix values on select * optional input, plus input group * new dashboard image * start to reboot the offcanvas example * updated images * new offcanvas mostly implemented * linting * edit description * more description changes * - Add vertical margin to album hero buttons for when they're stacked - Adjust font-size and padding for pricing header and hero - Fix checkout's stacked column margins, plus update their check/radio markup - Update product's utilities to be responsive - Made blog cards somewhat responsive (needs a bit more work tbh) * drop leading zero * more linting * swap empty images for holder, fix border * dist the docs * navbars have no margin-bottom to begin * add css var, tweak padding for mobile * comment headers * nix commented out code * nix the navbar structure for a custom one, stack it on mobile * tweak heading button group for mobile * Removed narrow jumbotron and justified nav examples as these are easily accomplished with new components in v4 * improve card sizing on pricing * update and compress --- docs/4.0/examples/product/index.html | 178 ++++++++++++++++++++++++++++++++++ docs/4.0/examples/product/product.css | 81 ++++++++++++++++ 2 files changed, 259 insertions(+) create mode 100644 docs/4.0/examples/product/index.html create mode 100644 docs/4.0/examples/product/product.css (limited to 'docs/4.0/examples/product') diff --git a/docs/4.0/examples/product/index.html b/docs/4.0/examples/product/index.html new file mode 100644 index 000000000..4ea908d41 --- /dev/null +++ b/docs/4.0/examples/product/index.html @@ -0,0 +1,178 @@ + + + + + + + + + + Product example for Bootstrap + + + + + + + + + + + + +
+
+

Punny headline

+

And an even wittier subheading to boot. Jumpstart your marketing efforts with this example based on Apple's marketing pages.

+ Coming soon +
+
+
+
+ +
+
+
+

Another headline

+

And an even wittier subheading.

+
+
+
+
+
+

Another headline

+

And an even wittier subheading.

+
+
+
+
+ +
+
+
+

Another headline

+

And an even wittier subheading.

+
+
+
+
+
+

Another headline

+

And an even wittier subheading.

+
+
+
+
+ +
+
+
+

Another headline

+

And an even wittier subheading.

+
+
+
+
+
+

Another headline

+

And an even wittier subheading.

+
+
+
+
+ +
+
+
+

Another headline

+

And an even wittier subheading.

+
+
+
+
+
+

Another headline

+

And an even wittier subheading.

+
+
+
+
+ + + + + + + + + + + + + + diff --git a/docs/4.0/examples/product/product.css b/docs/4.0/examples/product/product.css new file mode 100644 index 000000000..fdfb63b13 --- /dev/null +++ b/docs/4.0/examples/product/product.css @@ -0,0 +1,81 @@ +.container { + max-width: 960px; +} + +/* + * Custom translucent site header + */ + +.site-header { + background-color: rgba(0, 0, 0, .85); + -webkit-backdrop-filter: saturate(180%) blur(20px); + backdrop-filter: saturate(180%) blur(20px); +} +.site-header a { + color: #999; + transition: ease-in-out color .15s; +} +.site-header a:hover { + color: #fff; + text-decoration: none; +} + +/* + * Dummy devices (replace them with your own or something else entirely!) + */ + +.product-device { + position: absolute; + right: 10%; + bottom: -30%; + width: 300px; + height: 540px; + background-color: #333; + border-radius: 21px; + -webkit-transform: rotate(30deg); + transform: rotate(30deg); +} + +.product-device::before { + position: absolute; + top: 10%; + right: 10px; + bottom: 10%; + left: 10px; + content: ""; + background-color: rgba(255, 255, 255, .1); + border-radius: 5px; +} + +.product-device-2 { + top: -25%; + right: auto; + bottom: 0; + left: 5%; + background-color: #e5e5e5; +} + + +/* + * Extra utilities + */ + +.border-top { border-top: 1px solid #e5e5e5; } +.border-bottom { border-bottom: 1px solid #e5e5e5; } + +.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); } + +.flex-equal > * { + -ms-flex: 1; + -webkit-box-flex: 1; + flex: 1; +} +@media (min-width: 768px) { + .flex-md-equal > * { + -ms-flex: 1; + -webkit-box-flex: 1; + flex: 1; + } +} + +.overflow-hidden { overflow: hidden; } -- cgit v1.2.3