1 module source.uim.bootstrap.bs5.demos.complex.ecommerce.cards; 2 3 import uim.bootstrap; 4 5 static this() { 6 demoBS5.pages("complex/ecommerce/cards", 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": "eCommerce Cards - Bootstrap 5 Demo", 14 ]) 15 .styles(`@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); 16 @import url('https://fonts.googleapis.com/css2?family=Heebo:wght@100;200;300;400;500;600;700;800;900&display=swap'); 17 @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); 18 19 :root { 20 --font1: 'Heebo', sans-serif; 21 --font2: 'Fira Sans Extra Condensed', sans-serif; 22 --font3: 'Roboto', sans-serif 23 } 24 25 body { 26 font-family: var(--font3); 27 background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%) 28 } 29 30 h2 { 31 font-weight: 900 32 } 33 34 .ecom { 35 background: #fff; 36 box-shadow: 0 6px 10px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .05); 37 transition: .3s transform cubic-bezier(.155, 1.105, .295, 1.12), .3s box-shadow, .3s -webkit-transform cubic-bezier(.155, 1.105, .295, 1.12); 38 border: 1; 39 border-radius: 1rem 40 } 41 42 .ecom-img, 43 .ecom-img-top { 44 border-top-left-radius: calc(1rem - 1px); 45 border-top-right-radius: calc(1rem - 1px) 46 } 47 48 .ecom h5 { 49 overflow: hidden; 50 height: 56px; 51 font-weight: 900; 52 font-size: 1rem 53 } 54 55 .ecom-img-top { 56 width: 100%; 57 max-height: 180px; 58 object-fit: contain; 59 padding: 30px 60 } 61 62 .ecom h2 { 63 font-size: 1rem 64 } 65 66 .ecom:hover { 67 transform: scale(1.05); 68 box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06) 69 } 70 71 .label-top { 72 position: absolute; 73 background-color: #8bc34a; 74 color: #fff; 75 top: 8px; 76 right: 8px; 77 padding: 5px 10px 5px 10px; 78 font-size: .7rem; 79 font-weight: 600; 80 border-radius: 3px; 81 text-transform: uppercase 82 } 83 84 .top-right { 85 position: absolute; 86 top: 24px; 87 left: 24px; 88 width: 90px; 89 height: 90px; 90 border-radius: 50%; 91 font-size: 1rem; 92 font-weight: 900; 93 background: #ff5722; 94 line-height: 90px; 95 text-align: center; 96 color: white 97 } 98 99 .top-right span { 100 display: inline-block; 101 vertical-align: middle 102 } 103 104 @media (max-width: 768px) { 105 .ecom-img-top { 106 max-height: 250px 107 } 108 } 109 110 .over-bg { 111 background: rgba(53, 53, 53, 0.85); 112 box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); 113 backdrop-filter: blur(0.0px); 114 -webkit-backdrop-filter: blur(0.0px); 115 border-radius: 10px 116 } 117 118 .btn { 119 font-size: 1rem; 120 font-weight: 500; 121 text-transform: uppercase; 122 padding: 5px 50px 5px 50px 123 } 124 125 .box .btn { 126 font-size: 1.5rem 127 } 128 129 @media (max-width: 1025px) { 130 .btn { 131 padding: 5px 40px 5px 40px 132 } 133 } 134 135 @media (max-width: 250px) { 136 .btn { 137 padding: 5px 30px 5px 30px 138 } 139 } 140 141 .btn-warning { 142 background: none #f7810a; 143 color: #ffffff; 144 fill: #ffffff; 145 border: none; 146 text-decoration: none; 147 outline: 0; 148 box-shadow: -1px 6px 19px rgba(247, 129, 10, 0.25); 149 border-radius: 100px 150 } 151 152 .btn-warning:hover { 153 background: none #ff962b; 154 color: #ffffff; 155 box-shadow: -1px 6px 13px rgba(255, 150, 43, 0.35) 156 } 157 158 .bg-success { 159 font-size: 1rem; 160 background-color: #f7810a !important 161 } 162 163 .bg-danger { 164 font-size: 1rem 165 } 166 167 .price-hp { 168 font-size: 1rem; 169 font-weight: 600; 170 color: darkgray 171 } 172 173 .amz-hp { 174 font-size: .7rem; 175 font-weight: 600; 176 color: darkgray 177 } 178 179 .fa-question-circle:before { 180 color: darkgray 181 } 182 183 .fa-plus:before { 184 color: darkgray 185 } 186 187 .box { 188 border-radius: 1rem; 189 background: #fff; 190 box-shadow: 0 6px 10px rgb(0 0 0 / 8%), 0 0 6px rgb(0 0 0 / 5%); 191 transition: .3s transform cubic-bezier(.155, 1.105, .295, 1.12), .3s box-shadow, .3s -webkit-transform cubic-bezier(.155, 1.105, .295, 1.12) 192 } 193 194 .box-img { 195 max-width: 300px 196 } 197 198 .thumb-sec { 199 max-width: 300px 200 } 201 202 @media (max-width: 576px) { 203 .box-img { 204 max-width: 200px 205 } 206 207 .thumb-sec { 208 max-width: 200px 209 } 210 } 211 212 .inner-gallery { 213 width: 60px; 214 height: 60px; 215 border: 1px solid #ddd; 216 border-radius: 3px; 217 margin: 1px; 218 display: inline-block; 219 overflow: hidden; 220 -o-object-fit: cover; 221 object-fit: cover 222 } 223 224 @media (max-width: 370px) { 225 .box .btn { 226 padding: 5px 40px 5px 40px; 227 font-size: 1rem 228 } 229 } 230 231 .disclaimer { 232 font-size: .9rem; 233 color: darkgray 234 } 235 236 .related h3 { 237 font-weight: 900 238 } 239 240 footer { 241 background: #212529; 242 height: 80px; 243 color: #fff 244 }`); 245 } 246 247 override string content() { 248 249 return 250 H5Main(["style":"margin-top:70px;"], 251 H5Div(["container-fluid", "mt-3", "bg-light"], 252 bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/complex/", "/demos/uim-bootstrap/5/complex/ecommerce/"], 253 ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Complex", "eCommerce"], "Cards")), 254 BS5Container(["mt-3"]).row( 255 H5Div(["col-12", "col-lg-2"], 256 listLevels("complex"), 257 listAreas("complex", "ecommerce"), 258 listSections("complex", "ecommerce", "cards")), 259 H5Div(["col-12", "col-lg-8"], 260 dateInfo(this), 261 H5H2(["display-4"], "eCommerce Cards"), 262 H5Hr, 263 264 demoBs5Example("ecommercecards", "Time for a ride", 265 H5Div(["container-fluid bg-trasparent my-4 p-3"], ["style":"position: relative;"], 266 BS5Row(["row-cols-1 row-cols-xs-2 row-cols-sm-2 row-cols-lg-4 g-3"], 267 BS5Col(["col"], 268 BS5Card(["h-100 shadow-sm ecom"], 269 BS5CardImage(["ecom-img-top"], ["src":"/img/bluebike_200x200.jpg", "alt":"..."]), 270 H5Div(["label-top shadow-sm ecom"], "Superbike"), 271 BS5CardBody( 272 H5Div(["clearfix mb-3"], 273 H5Span(["float-start badge rounded-pill bg-success"], "1354.00€"), 274 H5Span(["float-end"], H5A(["small text-muted"], ["href":"#"], "Reviews"))), 275 H5H5(["card-title"], "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veniam quidem eaque ut eveniet aut quis rerum. Asperiores accusamus harum ducimus velit odit ut. Saepe, iste optio laudantium sed aliquam sequi."), 276 H5Div(["text-center my-4"], 277 BS5ButtonLink(["btn-warning"], ["href":"#"], "Check offer")), 278 H5Div(["clearfix mb-1"], 279 H5Span(["float-start"], H5I(["far fa-question-circle"])), 280 H5Span(["float-end"], H5I(["fas fa-plus"]))) 281 ) 282 ) 283 ), 284 BS5Col(["col"], 285 BS5Card(["h-100 shadow-sm ecom"], 286 BS5CardImage(["ecom-img-top"], ["src":"/img/bmwbike_200x200.jpg", "alt":"..."]), 287 H5Div(["label-top shadow-sm ecom"], "Superbike"), 288 BS5CardBody( 289 H5Div(["clearfix mb-3"], 290 H5Span(["float-start badge rounded-pill bg-success"], "1354.00€"), 291 H5Span(["float-end"], H5A(["small text-muted"], ["href":"#"], "Reviews"))), 292 H5H5(["card-title"], "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veniam quidem eaque ut eveniet aut quis rerum. Asperiores accusamus harum ducimus velit odit ut. Saepe, iste optio laudantium sed aliquam sequi."), 293 H5Div(["text-center my-4"], 294 BS5ButtonLink(["btn-warning"], ["href":"#"], "Check offer")), 295 H5Div(["clearfix mb-1"], 296 H5Span(["float-start"], H5I(["far fa-question-circle"])), 297 H5Span(["float-end"], H5I(["fas fa-plus"]))) 298 ) 299 ) 300 ), 301 BS5Col(["col"], 302 BS5Card(["h-100 shadow-sm ecom"], 303 BS5CardImage(["ecom-img-top"], ["src":"/img/yellowbike_200x200.jpg", "alt":"..."]), 304 H5Div(["label-top shadow-sm ecom"], "Superbike"), 305 BS5CardBody( 306 H5Div(["clearfix mb-3"], 307 H5Span(["float-start badge rounded-pill bg-success"], "1354.00€"), 308 H5Span(["float-end"], H5A(["small text-muted"], ["href":"#"], "Reviews"))), 309 H5H5(["card-title"], "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veniam quidem eaque ut eveniet aut quis rerum. Asperiores accusamus harum ducimus velit odit ut. Saepe, iste optio laudantium sed aliquam sequi."), 310 H5Div(["text-center my-4"], 311 BS5ButtonLink(["btn-warning"], ["href":"#"], "Check offer")), 312 H5Div(["clearfix mb-1"], 313 H5Span(["float-start"], H5I(["far fa-question-circle"])), 314 H5Span(["float-end"], H5I(["fas fa-plus"]))) 315 ) 316 ) 317 ), 318 BS5Col(["col"], 319 BS5Card(["h-100 shadow-sm ecom"], 320 BS5CardImage(["ecom-img-top"], ["src":"/img/hondarebel_200x200.jpg", "alt":"..."]), 321 H5Div(["label-top shadow-sm ecom"], "Superbike"), 322 BS5CardBody( 323 H5Div(["clearfix mb-3"], 324 H5Span(["float-start badge rounded-pill bg-success"], "1354.00€"), 325 H5Span(["float-end"], H5A(["small text-muted"], ["href":"#"], "Reviews"))), 326 H5H5(["card-title"], "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veniam quidem eaque ut eveniet aut quis rerum. Asperiores accusamus harum ducimus velit odit ut. Saepe, iste optio laudantium sed aliquam sequi."), 327 H5Div(["text-center my-4"], 328 BS5ButtonLink(["btn-warning"], ["href":"#"], "Check offer")), 329 H5Div(["clearfix mb-1"], 330 H5Span(["float-start"], H5I(["far fa-question-circle"])), 331 H5Span(["float-end"], H5I(["fas fa-plus"]))) 332 ) 333 ) 334 ) 335 ) 336 ), `H5Div(["container-fluid bg-trasparent my-4 p-3"], ["style":"position: relative;"], 337 BSRow(["row-cols-1 row-cols-xs-2 row-cols-sm-2 row-cols-lg-4 g-3"], 338 BS5Col(["col"], 339 BS5Card(["h-100 shadow-sm ecom"], 340 BS5CardImage(["ecom-img-top"], ["src":"/img/bluebike_200x200.jpg", "alt":"..."]), 341 H5Div(["label-top shadow-sm ecom"], "Superbike"), 342 BS5CardBody( 343 H5Div(["clearfix mb-3"], 344 H5Span(["float-start badge rounded-pill bg-success"], "1354.00€"), 345 H5Span(["float-end"], H5A(["small text-muted"], ["href":"#"], "Reviews"))), 346 H5H5(["card-title"], "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veniam quidem eaque ut eveniet aut quis rerum. Asperiores accusamus harum ducimus velit odit ut. Saepe, iste optio laudantium sed aliquam sequi."), 347 H5Div(["text-center my-4"], 348 BS5ButtonLink(["btn-warning"], ["href":"#"], "Check offer")), 349 H5Div(["clearfix mb-1"], 350 H5Span(["float-start"], H5I(["far fa-question-circle"])), 351 H5Span(["float-end"], H5I(["fas fa-plus"]))) 352 ) 353 ) 354 ), 355 BS5Col(["col"], 356 BS5Card(["h-100 shadow-sm ecom"], 357 BS5CardImage(["ecom-img-top"], ["src":"/img/bmwbike_200x200.jpg", "alt":"..."]), 358 H5Div(["label-top shadow-sm ecom"], "Superbike"), 359 BS5CardBody( 360 H5Div(["clearfix mb-3"], 361 H5Span(["float-start badge rounded-pill bg-success"], "1354.00€"), 362 H5Span(["float-end"], H5A(["small text-muted"], ["href":"#"], "Reviews"))), 363 H5H5(["card-title"], "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veniam quidem eaque ut eveniet aut quis rerum. Asperiores accusamus harum ducimus velit odit ut. Saepe, iste optio laudantium sed aliquam sequi."), 364 H5Div(["text-center my-4"], 365 BS5ButtonLink(["btn-warning"], ["href":"#"], "Check offer")), 366 H5Div(["clearfix mb-1"], 367 H5Span(["float-start"], H5I(["far fa-question-circle"])), 368 H5Span(["float-end"], H5I(["fas fa-plus"]))) 369 ) 370 ) 371 ), 372 BS5Col(["col"], 373 BS5Card(["h-100 shadow-sm ecom"], 374 BS5CardImage(["ecom-img-top"], ["src":"/img/yellowbike_200x200.jpg", "alt":"..."]), 375 H5Div(["label-top shadow-sm ecom"], "Superbike"), 376 BS5CardBody( 377 H5Div(["clearfix mb-3"], 378 H5Span(["float-start badge rounded-pill bg-success"], "1354.00€"), 379 H5Span(["float-end"], H5A(["small text-muted"], ["href":"#"], "Reviews"))), 380 H5H5(["card-title"], "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veniam quidem eaque ut eveniet aut quis rerum. Asperiores accusamus harum ducimus velit odit ut. Saepe, iste optio laudantium sed aliquam sequi."), 381 H5Div(["text-center my-4"], 382 BS5ButtonLink(["btn-warning"], ["href":"#"], "Check offer")), 383 H5Div(["clearfix mb-1"], 384 H5Span(["float-start"], H5I(["far fa-question-circle"])), 385 H5Span(["float-end"], H5I(["fas fa-plus"]))) 386 ) 387 ) 388 ), 389 BS5Col(["col"], 390 BS5Card(["h-100 shadow-sm ecom"], 391 BS5CardImage(["ecom-img-top"], ["src":"/img/hondarebel_200x200.jpg", "alt":"..."]), 392 H5Div(["label-top shadow-sm ecom"], "Superbike"), 393 BS5CardBody( 394 H5Div(["clearfix mb-3"], 395 H5Span(["float-start badge rounded-pill bg-success"], "1354.00€"), 396 H5Span(["float-end"], H5A(["small text-muted"], ["href":"#"], "Reviews"))), 397 H5H5(["card-title"], "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veniam quidem eaque ut eveniet aut quis rerum. Asperiores accusamus harum ducimus velit odit ut. Saepe, iste optio laudantium sed aliquam sequi."), 398 H5Div(["text-center my-4"], 399 BS5ButtonLink(["btn-warning"], ["href":"#"], "Check offer")), 400 H5Div(["clearfix mb-1"], 401 H5Span(["float-start"], H5I(["far fa-question-circle"])), 402 H5Span(["float-end"], H5I(["fas fa-plus"]))) 403 ) 404 ) 405 ) 406 ) 407 )`, `<div class="container-fluid bg-trasparent my-4 p-3" style="position: relative;"> 408 <div class="row row-cols-1 row-cols-xs-2 row-cols-sm-2 row-cols-lg-4 g-3"> 409 <div class="col"> 410 <div class="card h-100 shadow-sm ecom"> 411 <img class="card-img-top ecom-img-top" alt="..." src="/img/bluebike_200x200.jpg"> 412 <div class="label-top shadow-sm ecom">Superbike</div> 413 <div class="card-body"> 414 <div class="clearfix mb-3"> 415 <span class="float-start badge rounded-pill bg-success">1354.00€</span> 416 <span class="float-end"><a class="small text-muted" href="#">Reviews</a></span> 417 </div> 418 <h5 class="card-title">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veniam quidem eaque ut eveniet aut quis rerum. Asperiores accusamus harum ducimus velit odit ut. Saepe, iste optio laudantium sed aliquam sequi.</h5> 419 <div class="text-center my-4"> 420 <a class="btn btn-warning" href="#" role="button" type="button">Check offer</a> 421 </div> 422 <div class="clearfix mb-1"> 423 <span class="float-start"><i class="far fa-question-circle"></i></span> 424 <span class="float-end"><i class="fas fa-plus"></i></span> 425 </div> 426 </div> 427 </div> 428 </div> 429 <div class="col"> 430 <div class="card h-100 shadow-sm ecom"> 431 <img class="card-img-top ecom-img-top" alt="..." src="/img/bmwbike_200x200.jpg"> 432 <div class="label-top shadow-sm ecom">Superbike</div> 433 <div class="card-body"> 434 <div class="clearfix mb-3"> 435 <span class="float-start badge rounded-pill bg-success">1354.00€</span> 436 <span class="float-end"><a class="small text-muted" href="#">Reviews</a></span> 437 </div> 438 <h5 class="card-title">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veniam quidem eaque ut eveniet aut quis rerum. Asperiores accusamus harum ducimus velit odit ut. Saepe, iste optio laudantium sed aliquam sequi.</h5> 439 <div class="text-center my-4"> 440 <a class="btn btn-warning" href="#" role="button" type="button">Check offer</a> 441 </div> 442 <div class="clearfix mb-1"> 443 <span class="float-start"><i class="far fa-question-circle"></i></span> 444 <span class="float-end"><i class="fas fa-plus"></i></span> 445 </div> 446 </div> 447 </div> 448 </div> 449 <div class="col"> 450 <div class="card h-100 shadow-sm ecom"> 451 <img class="card-img-top ecom-img-top" alt="..." src="/img/yellowbike_200x200.jpg"> 452 <div class="label-top shadow-sm ecom">Superbike</div> 453 <div class="card-body"> 454 <div class="clearfix mb-3"> 455 <span class="float-start badge rounded-pill bg-success">1354.00€</span> 456 <span class="float-end"><a class="small text-muted" href="#">Reviews</a></span> 457 </div> 458 <h5 class="card-title">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veniam quidem eaque ut eveniet aut quis rerum. Asperiores accusamus harum ducimus velit odit ut. Saepe, iste optio laudantium sed aliquam sequi.</h5> 459 <div class="text-center my-4"> 460 <a class="btn btn-warning" href="#" role="button" type="button">Check offer</a> 461 </div> 462 <div class="clearfix mb-1"> 463 <span class="float-start"><i class="far fa-question-circle"></i></span> 464 <span class="float-end"><i class="fas fa-plus"></i></span> 465 </div> 466 </div> 467 </div> 468 </div> 469 <div class="col"> 470 <div class="card h-100 shadow-sm ecom"> 471 <img class="card-img-top ecom-img-top" alt="..." src="/img/hondarebel_200x200.jpg"> 472 <div class="label-top shadow-sm ecom">Superbike</div> 473 <div class="card-body"> 474 <div class="clearfix mb-3"> 475 <span class="float-start badge rounded-pill bg-success">1354.00€</span> 476 <span class="float-end"><a class="small text-muted" href="#">Reviews</a></span> 477 </div> 478 <h5 class="card-title">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veniam quidem eaque ut eveniet aut quis rerum. Asperiores accusamus harum ducimus velit odit ut. Saepe, iste optio laudantium sed aliquam sequi.</h5> 479 <div class="text-center my-4"> 480 <a class="btn btn-warning" href="#" role="button" type="button">Check offer</a> 481 </div> 482 <div class="clearfix mb-1"> 483 <span class="float-start"><i class="far fa-question-circle"></i></span> 484 <span class="float-end"><i class="fas fa-plus"></i></span> 485 </div> 486 </div> 487 </div> 488 </div> 489 </div> 490 </div>`) 491 492 ), 493 H5Div(["col-12", "col-lg-2"]))).toString; 494 } 495 }); 496 }