From 0bb8f991a032ff984f45ede26b53643ffa93891b Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Tue, 19 Jan 2021 08:34:18 +0200 Subject: Add v4.6.0 docs --- docs/4.6/examples/product/index.html | 200 ++++++++++++++++++++++++++++++++++ docs/4.6/examples/product/product.css | 74 +++++++++++++ 2 files changed, 274 insertions(+) create mode 100644 docs/4.6/examples/product/index.html create mode 100644 docs/4.6/examples/product/product.css (limited to 'docs/4.6/examples/product') diff --git a/docs/4.6/examples/product/index.html b/docs/4.6/examples/product/index.html new file mode 100644 index 000000000..ee43222d2 --- /dev/null +++ b/docs/4.6/examples/product/index.html @@ -0,0 +1,200 @@ + + + + + + + + + Product example · Bootstrap v4.6 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+

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.6/examples/product/product.css b/docs/4.6/examples/product/product.css new file mode 100644 index 000000000..4db2864fc --- /dev/null +++ b/docs/4.6/examples/product/product.css @@ -0,0 +1,74 @@ +.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 + */ + +.flex-equal > * { + -ms-flex: 1; + flex: 1; +} +@media (min-width: 768px) { + .flex-md-equal > * { + -ms-flex: 1; + flex: 1; + } +} + +.overflow-hidden { overflow: hidden; } -- cgit v1.2.3