diff options
author | Mark Otto <markd.otto@gmail.com> | 2018-01-15 03:06:52 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-01-15 03:06:52 +0300 |
commit | e946348eca928fa1c42dbb92c7a612543832dccc (patch) | |
tree | 14a87eed8416197c156e9090d02f1de604e6cdab /docs/4.0/examples/product | |
parent | 4a64592dd8b9e97790533d79350d60291a7d8789 (diff) |
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
Diffstat (limited to 'docs/4.0/examples/product')
-rw-r--r-- | docs/4.0/examples/product/index.html | 178 | ||||
-rw-r--r-- | docs/4.0/examples/product/product.css | 81 |
2 files changed, 259 insertions, 0 deletions
diff --git a/docs/4.0/examples/product/index.html b/docs/4.0/examples/product/index.html new file mode 100644 index 0000000000..4ea908d419 --- /dev/null +++ b/docs/4.0/examples/product/index.html @@ -0,0 +1,178 @@ +<!doctype html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> + <meta name="description" content=""> + <meta name="author" content=""> + <link rel="icon" href="../../../../favicon.ico"> + + <title>Product example for Bootstrap</title> + + <!-- Bootstrap core CSS --> + <link href="../../../../dist/css/bootstrap.min.css" rel="stylesheet"> + + <!-- Custom styles for this template --> + <link href="product.css" rel="stylesheet"> + </head> + + <body> + + <nav class="site-header sticky-top py-1"> + <div class="container d-flex flex-column flex-md-row justify-content-between"> + <a class="py-2" href="#"> + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="d-block mx-auto"><circle cx="12" cy="12" r="10"></circle><line x1="14.31" y1="8" x2="20.05" y2="17.94"></line><line x1="9.69" y1="8" x2="21.17" y2="8"></line><line x1="7.38" y1="12" x2="13.12" y2="2.06"></line><line x1="9.69" y1="16" x2="3.95" y2="6.06"></line><line x1="14.31" y1="16" x2="2.83" y2="16"></line><line x1="16.62" y1="12" x2="10.88" y2="21.94"></line></svg> + </a> + <a class="py-2 d-none d-md-inline-block" href="#">Tour</a> + <a class="py-2 d-none d-md-inline-block" href="#">Product</a> + <a class="py-2 d-none d-md-inline-block" href="#">Features</a> + <a class="py-2 d-none d-md-inline-block" href="#">Enterprise</a> + <a class="py-2 d-none d-md-inline-block" href="#">Support</a> + <a class="py-2 d-none d-md-inline-block" href="#">Pricing</a> + <a class="py-2 d-none d-md-inline-block" href="#">Cart</a> + </div> + </nav> + + <div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light"> + <div class="col-md-5 p-lg-5 mx-auto my-5"> + <h1 class="display-4 font-weight-normal">Punny headline</h1> + <p class="lead font-weight-normal">And an even wittier subheading to boot. Jumpstart your marketing efforts with this example based on Apple's marketing pages.</p> + <a class="btn btn-outline-secondary" href="#">Coming soon</a> + </div> + <div class="product-device box-shadow d-none d-md-block"></div> + <div class="product-device product-device-2 box-shadow d-none d-md-block"></div> + </div> + + <div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3"> + <div class="bg-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden"> + <div class="my-3 py-3"> + <h2 class="display-5">Another headline</h2> + <p class="lead">And an even wittier subheading.</p> + </div> + <div class="bg-light box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div> + </div> + <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden"> + <div class="my-3 p-3"> + <h2 class="display-5">Another headline</h2> + <p class="lead">And an even wittier subheading.</p> + </div> + <div class="bg-dark box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div> + </div> + </div> + + <div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3"> + <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden"> + <div class="my-3 p-3"> + <h2 class="display-5">Another headline</h2> + <p class="lead">And an even wittier subheading.</p> + </div> + <div class="bg-dark box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div> + </div> + <div class="bg-primary mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden"> + <div class="my-3 py-3"> + <h2 class="display-5">Another headline</h2> + <p class="lead">And an even wittier subheading.</p> + </div> + <div class="bg-light box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div> + </div> + </div> + + <div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3"> + <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden"> + <div class="my-3 p-3"> + <h2 class="display-5">Another headline</h2> + <p class="lead">And an even wittier subheading.</p> + </div> + <div class="bg-white box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div> + </div> + <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden"> + <div class="my-3 py-3"> + <h2 class="display-5">Another headline</h2> + <p class="lead">And an even wittier subheading.</p> + </div> + <div class="bg-white box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div> + </div> + </div> + + <div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3"> + <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden"> + <div class="my-3 p-3"> + <h2 class="display-5">Another headline</h2> + <p class="lead">And an even wittier subheading.</p> + </div> + <div class="bg-white box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div> + </div> + <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden"> + <div class="my-3 py-3"> + <h2 class="display-5">Another headline</h2> + <p class="lead">And an even wittier subheading.</p> + </div> + <div class="bg-white box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div> + </div> + </div> + + <footer class="container py-5"> + <div class="row"> + <div class="col-12 col-md"> + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="d-block mb-2"><circle cx="12" cy="12" r="10"></circle><line x1="14.31" y1="8" x2="20.05" y2="17.94"></line><line x1="9.69" y1="8" x2="21.17" y2="8"></line><line x1="7.38" y1="12" x2="13.12" y2="2.06"></line><line x1="9.69" y1="16" x2="3.95" y2="6.06"></line><line x1="14.31" y1="16" x2="2.83" y2="16"></line><line x1="16.62" y1="12" x2="10.88" y2="21.94"></line></svg> + <small class="d-block mb-3 text-muted">© 2017</small> + </div> + <div class="col-6 col-md"> + <h5>Features</h5> + <ul class="list-unstyled text-small"> + <li><a class="text-muted" href="#">Cool stuff</a></li> + <li><a class="text-muted" href="#">Random feature</a></li> + <li><a class="text-muted" href="#">Team feature</a></li> + <li><a class="text-muted" href="#">Stuff for developers</a></li> + <li><a class="text-muted" href="#">Another one</a></li> + <li><a class="text-muted" href="#">Last time</a></li> + </ul> + </div> + <div class="col-6 col-md"> + <h5>Resources</h5> + <ul class="list-unstyled text-small"> + <li><a class="text-muted" href="#">Resource</a></li> + <li><a class="text-muted" href="#">Resource name</a></li> + <li><a class="text-muted" href="#">Another resource</a></li> + <li><a class="text-muted" href="#">Final resource</a></li> + </ul> + </div> + <div class="col-6 col-md"> + <h5>Resources</h5> + <ul class="list-unstyled text-small"> + <li><a class="text-muted" href="#">Business</a></li> + <li><a class="text-muted" href="#">Education</a></li> + <li><a class="text-muted" href="#">Government</a></li> + <li><a class="text-muted" href="#">Gaming</a></li> + </ul> + </div> + <div class="col-6 col-md"> + <h5>About</h5> + <ul class="list-unstyled text-small"> + <li><a class="text-muted" href="#">Team</a></li> + <li><a class="text-muted" href="#">Locations</a></li> + <li><a class="text-muted" href="#">Privacy</a></li> + <li><a class="text-muted" href="#">Terms</a></li> + </ul> + </div> + </div> + </footer> + + + <!-- Bootstrap core JavaScript + ================================================== --> + <!-- Placed at the end of the document so the pages load faster --> + <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> + <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script> + <script src="../../../../assets/js/vendor/popper.min.js"></script> + <script src="../../../../dist/js/bootstrap.min.js"></script> + <script src="../../../../assets/js/vendor/holder.min.js"></script> + <script> + Holder.addTheme('thumb', { + bg: '#55595c', + fg: '#eceeef', + text: 'Thumbnail' + }); + </script> + </body> +</html> diff --git a/docs/4.0/examples/product/product.css b/docs/4.0/examples/product/product.css new file mode 100644 index 0000000000..fdfb63b137 --- /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; } |