1 module uim.bootstrap.bs5.demos.examples.pricing; 2 3 import uim.bootstrap; 4 5 static this() { 6 demoBS5.pages("examples/pricing", new class DH5AppPage { 7 this() { 8 super(); 9 this 10 .created(DateTime(2020, 12, 20, 10, 10, 0)) 11 .changed(timeLastModified(__FILE_FULL_PATH__)) 12 .parameters([ 13 "pageTitle": "Starter Page - Bootstrap 5 Demo", 14 ]); 15 } 16 17 override string content() { 18 19 return 20 `<style> 21 .container { 22 max-width: 960px; 23 } 24 25 .pricing-header { 26 max-width: 700px; 27 } 28 .bd-placeholder-img { 29 font-size: 1.125rem; 30 text-anchor: middle; 31 -webkit-user-select: none; 32 -moz-user-select: none; 33 user-select: none; 34 } 35 36 @media (min-width: 768px) { 37 .bd-placeholder-img-lg { 38 font-size: 3.5rem; 39 } 40 } 41 </style> 42 43 44 <!-- Custom styles for this template --> 45 <link href="pricing.css" rel="stylesheet"> 46 </head> 47 <body> 48 49 <header class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm"> 50 H5P(["h5 my-0 me-md-auto fw-normal">Company name") 51 H5Nav(["my-2 my-md-0 me-md-3"> 52 H5A(["p-2 text-dark"], ["href":"#"], Features"), 53 H5A(["p-2 text-dark"], ["href":"#"], Enterprise"), 54 H5A(["p-2 text-dark"], ["href":"#"], Support"), 55 H5A(["p-2 text-dark"], ["href":"#"], Pricing"), 56 ), 57 H5A(["btn btn-outline-primary"], ["href":"#"], Sign up"), 58 </header> 59 60 H5Main(["container"], 61 H5Div(["pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center"> 62 H5H1(["display-4">Pricing"), 63 H5P(["lead">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.") 64 ), 65 66 H5Div(["row row-cols-1 row-cols-md-3 mb-3 text-center"> 67 H5Div(["col"> 68 BS5Card(["mb-4 shadow-sm"> 69 H5Div(["card-header"> 70 H5H4(["my-0 fw-normal">Free</h4> 71 ), 72 BS5CardBody( 73 H5H1(["card-title pricing-card-title">$0 <small class="text-muted">/ mo"),"), 74 H5Ul(["list-unstyled mt-3 mb-4"> 75 H5Li("10 users included), 76 H5Li("2 GB of storage), 77 H5Li("Email support), 78 H5Li("Help center access), 79 ), 80 <button "type":"button" class="w-100 btn btn-lg btn-outline-primary">Sign up for free) 81 ), 82 ), 83 ), 84 H5Div(["col"> 85 BS5Card(["mb-4 shadow-sm"> 86 H5Div(["card-header"> 87 H5H4(["my-0 fw-normal">Pro</h4> 88 ), 89 BS5CardBody( 90 H5H1(["card-title pricing-card-title">$15 <small class="text-muted">/ mo"),"), 91 H5Ul(["list-unstyled mt-3 mb-4"> 92 H5Li("20 users included), 93 H5Li("10 GB of storage), 94 H5Li("Priority email support), 95 H5Li("Help center access), 96 ), 97 <button "type":"button" class="w-100 btn btn-lg btn-primary">Get started) 98 ), 99 ), 100 ), 101 H5Div(["col"> 102 BS5Card(["mb-4 shadow-sm"> 103 H5Div(["card-header"> 104 H5H4(["my-0 fw-normal">Enterprise</h4> 105 ), 106 BS5CardBody( 107 H5H1(["card-title pricing-card-title">$29 <small class="text-muted">/ mo"),"), 108 H5Ul(["list-unstyled mt-3 mb-4"> 109 H5Li("30 users included), 110 H5Li("15 GB of storage), 111 H5Li("Phone and email support), 112 H5Li("Help center access), 113 ), 114 <button "type":"button" class="w-100 btn btn-lg btn-primary">Contact us) 115 ), 116 ), 117 ), 118 ), 119 120 H5Footer(["pt-4 my-md-5 pt-md-5 border-top"> 121 H5Div(["row"> 122 H5Div(["col-12 col-md"> 123 H5Img(["mb-2" src="../assets/brand/bootstrap-logo.svg" alt="" "width":"24" "height":"19"> 124 <small class="d-block mb-3 text-muted">© 2017-2020"), 125 ), 126 H5Div(["col-6 col-md"> 127 <h5>Features"), 128 H5Ul(["list-unstyled text-small"> 129 H5Li("H5A(["link-secondary"], ["href":"#"], Cool stuff")), 130 H5Li("H5A(["link-secondary"], ["href":"#"], Random feature")), 131 H5Li("H5A(["link-secondary"], ["href":"#"], Team feature")), 132 H5Li("H5A(["link-secondary"], ["href":"#"], Stuff for developers")), 133 H5Li("H5A(["link-secondary"], ["href":"#"], Another one")), 134 H5Li("H5A(["link-secondary"], ["href":"#"], Last time")), 135 ), 136 ), 137 H5Div(["col-6 col-md"> 138 <h5>Resources"), 139 H5Ul(["list-unstyled text-small"> 140 H5Li("H5A(["link-secondary"], ["href":"#"], Resource")), 141 H5Li("H5A(["link-secondary"], ["href":"#"], Resource name")), 142 H5Li("H5A(["link-secondary"], ["href":"#"], Another resource")), 143 H5Li("H5A(["link-secondary"], ["href":"#"], Final resource")), 144 ), 145 ), 146 H5Div(["col-6 col-md"> 147 <h5>About"), 148 H5Ul(["list-unstyled text-small"> 149 H5Li("H5A(["link-secondary"], ["href":"#"], Team")), 150 H5Li("H5A(["link-secondary"], ["href":"#"], Locations")), 151 H5Li("H5A(["link-secondary"], ["href":"#"], Privacy")), 152 H5Li("H5A(["link-secondary"], ["href":"#"], Terms")), 153 ), 154 ), 155 ), 156 ) 157 ) 158 `; 159 160 } 161 }); 162 } 163