<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.84.0">
<title>carousel_bs5.0.2</title>
<!-- Favicons -->
<link rel="apple-touch-icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
<link rel="icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
<!-- GRABBED THIS CODE FORM EXAMPLES (https://getbootstrap.com/docs/5.0/examples/carousel/), NOT DOCS (https://getbootstrap.com/docs/5.0/components/carousel/) -->
<!-- Custom styles for this template, pasted it below, starting in 'GLOBAL STYLES' .. CUSTOM CSS AFTER THIS IS NOT PREPENDED WITH .bs5 BUT IS STILL WORKING, WHY? -->
<!-- <link href="https://getbootstrap.com/docs/5.0/examples/carousel/carousel.css" rel="stylesheet"> -->
<style>
/* came with bs5.0.2 carousel */
.bs5 .bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
/* transition shows 1px or so border that is visible so disable here w/whatever color is present (0px solid #777777, or none), or give bg color to parent div .. update: adding bg to parent div (class carousel-inner) on line 195 fixed it */
border: none !important;
outline: none !important;
}
@media (min-width: 768px) {
.bs5 .bd-placeholder-img-lg {
font-size: 3.5rem;
border: none !important;
outline: none !important;
}
}
/* from https://getbootstrap.com/docs/5.0/examples/carousel/carousel.css */
/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
.bs5 body {
padding-top: 3rem;
padding-bottom: 3rem;
color: #5a5a5a;
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.bs5 .carousel {
margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.bs5 .carousel-caption {
bottom: 3rem;
z-index: 10;
}
/* Declare heights because of positioning of img element */
.bs5 .carousel-item {
height: 32rem;
}
.bs5 .carousel-item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 32rem;
}
/* MARKETING CONTENT
-------------------------------------------------- */
/* Center align the text within the three columns below the carousel */
.bs5 .marketing .col-lg-4 {
margin-bottom: 1.5rem;
text-align: center;
}
.bs5 .marketing h2 {
font-weight: 400;
}
/* rtl:begin:ignore */
.bs5 .marketing .col-lg-4 p {
margin-right: .75rem;
margin-left: .75rem;
}
/* rtl:end:ignore */
/* Featurettes
------------------------- */
.bs5 .featurette-divider {
/* Space out the Bootstrap <hr> more */
/* margin: 5rem 0; */
display: block !important;
width: 100% !important;
height: 70px !important;
}
/* Thin out the marketing headings */
.bs5 .featurette-heading {
font-weight: 300;
line-height: 1;
/* rtl:remove */
letter-spacing: -.05rem;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
@media (min-width: 40em) {
/* Bump up size of carousel content */
.bs5 .carousel-caption p {
margin-bottom: 1.25rem;
font-size: 1.25rem;
line-height: 1.4;
}
.bs5 .featurette-heading {
font-size: 50px;
}
}
@media (min-width: 62em) {
.bs5 .featurette-heading {
margin-top: 7rem;
}
}
/* added, thanks to:https://www.w3schools.com/bootstrap5/bootstrap_carousel.php .. for border can also use bs5 classes border border-dark */
.roundb {
border:1px solid #000 !important;
border-radius:50% !important;
width:20px !important;
height:20px !important;
}
/* added .. using iconfinder previous/next buttons */
.carousel-control-prev-icon {
background-image: url("https://pionezero.com/diageo/icon_finder/chevron_left_dark.png") !important;
min-width: 3em !important;
min-height: 3em !important;
opacity: 0.8;
}
.carousel-control-next-icon {
background-image: url("https://pionezero.com/diageo/icon_finder/chevron_right_dark.png") !important;
min-width: 3em !important;
min-height: 3em !important;
opacity: 0.8;
}
/* footer font colors */
footer {
color: #6C757D !important;
}
footer a {
color: #6C757D !important;
}
/* animated link underline */
/* v1, thanks to: thanks to: https://tobiasahlin.com/blog/css-trick-animating-link-underlines/ */
.anlink1 a {
position: relative;
color: #FF6500;
text-decoration: none;
/* border-bottom:2px solid #FF6500; */
padding-bottom: 3px;
}
.anlink1 a:hover {
color: #FF6500;
}
.anlink1 a::before {
content: "";
position: absolute;
display: block;
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background-color: #FF6500;
transform: scaleX(0);
transform-origin: top left;
transition: transform 0.3s ease;
}
.anlink1 a:hover::before {
transform: scaleX(1);
}
/* v2, thanks to: https://css-tricks.com/css-link-hover-effects/, https://codepen.io/team/css-tricks/pen/gOXMLLY */
.anlink2 a {
box-shadow: inset 0 0 0 0 #FF6500 !important;
color: #FF6500 !important;
padding: 0.25rem .25rem !important;
margin: 0 -.25rem !important;
transition: color .3s ease-in-out, box-shadow .3s ease-in-out !important;
}
.anlink2 a:hover {
color: #fff !important;
box-shadow: inset 200px 0 0 0 #FF6500 !important;
}
/* Presentational styles */
.anlink2 a {
color: #FF6500 !important;
/* font-family: 'Poppins', sans-serif;
font-size: 27px;
font-weight: 700;
line-height: 1.5;
text-decoration: none; */
}
/* TEMPORARY FIX, IMPORTED FROM https://pionezero.com/bs5.0.2_iso/bootstrap-isolated.css .. REASON IS .bs5 CLASS STARTS AFTER <body> AND IS THEREFORE EXCLUDING <body> STYLES */
/* body {
margin: 0;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
background-color: #fff;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} */
/* TOP OF TITLE MARGIN FIX (only when content present) */
.bs5 .featurette-heading {
margin-top: 1rem;
}
/* thanks to: https://www.w3schools.com/cssref/tryit.php?filename=trycss3_background_hero and https://stackoverflow.com/questions/4997493/set-opacity-of-background-image-without-affecting-child-elements */
.bg_1 {
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("https://pionezero.com/diageo/banners/johnniew_banner.jpg");
/* height: 500px; */
background-position: center; /* x% y% */
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.bg_2 {
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("https://pionezero.com/diageo/banners/guinness_banner.jpg");
/* height: 500px; */
background-position: center; /* x% y% */
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.bg_3 {
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("https://pionezero.com/diageo/banners/tanqueray_banner.jpg");
/* height: 500px; */
background-position: center; /* x% y% */
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
/* small text container and styles */
.smtxt {
display: block;
margin: 0px;
font-size: 0.8em;
max-width: 120px !important; /* do media query for mobile at 100px */
height:200px;
/* dev */
/* border:1px solid #000 !important; */
}
@media (max-width: 500px) {
.smtxt {
max-width: 100px !important; /* do media query for mobile at 100px */
}
}
.sku,.price {
background: #F7EADA !important;
padding:3px !important;
}
/* box container */
.bxmar {
display: block;
margin: 0px 0px 0px 0px;
padding: 0px;
min-width: 220px !important;
height: 250px;
/* dev */
/* border:1px solid #000 !important; */
background-image: url("https://pionezero.com/diageo/icon_finder/box.png");
background-position: center; /* x% y% */
background-repeat: no-repeat;
background-size: contain;
position: relative;
opacity:0.3;
}
/* box sixe (original non-bg img) */
.bxmar img {
/* display: block;
max-width: 250px !important;
height:auto;
opacity:0.3; */
}
/* bg for brand img */
.brandbg {
width:100%;
height:auto;
background:#ebebeb;
border-radius:18px;
padding:12px;
}
</style>
<!-- (UPDATE: the following is solved) .. MUST FIX, GET TO WORK WITH bs5.0.2_iso .. CUSTOM CSS ABOVE IS NOT PREPENDED WITH .bs5 (at times have to put class .bs5 in () in codepen bcs error pops up but not in stackblitz) BUT IS STILL WORKING, WHY? .. CODEPEN VERSION IS WITH THE HTML FIX ABOVE, STACKBLITZ IS NOT, IS USING ORIGINAL BS CSS BELOW .. this is a body tag issue basically .. also missing type="text/css" in css call below, ref: https://stackoverflow.com/questions/25006883/css-my-body-tag-is-not-working and https://stackoverflow.com/questions/13193758/body-class-not-working .. examine order too .. error in comment tags too .. also try adding .bs5 to html in bs5.0.2_iso file then add that class to html tag instead of in div tag and see if that nabs body styles -->
<!-- original -->
<link rel="stylesheet" href="https://getbootstrap.com/docs/5.0/dist/css/bootstrap.min.css"/>
<!-- bs5.0.2 iso .. thanks to: https://github.com/franky920920/bootstrap-5-isolated -->
<!-- <link rel="stylesheet" href="https://pionezero.com/bs5.0.2_iso/bootstrap-isolated.css"/> -->
</head>
<body>
<div class="bs5">
<header>
<nav class="navbar navbar-expand-md navbar-light fixed-top bg-light">
<div class="container-fluid">
<!-- <a class="navbar-brand" href="#">Carousel</a> -->
<a class="navbar-brand" href="https://www.diageo.com/en" target="blank"><img src="https://www.diageo.com/images/logo.svg"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="https://pionezero.com/diageo/login/" target="_blank">Login</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link" href="https://www.diageo.com/en" tabindex="-1" aria-disabled="true" target="_blank">Dolore Magna</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.diageo.com/en" tabindex="-1" aria-disabled="true" target="_blank">Ullamco</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.diageo.com/en" tabindex="-1" aria-disabled="true" target="_blank">Irure</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.diageo.com/en" tabindex="-1" aria-disabled="true" target="_blank">Velit Esse</a>
</li> -->
</ul>
<!-- added navbar-nav vertical align classes only for stackblitz issue -->
<form class="d-flex mb-2 mb-md-0">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-dark" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</header>
<main>
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active roundb" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" class="roundb" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" class="roundb" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner" style="background-color:#777777 !important;">
<div class="carousel-item active bg_1">
<!-- <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg> -->
<div class="container">
<div class="carousel-caption text-start">
<h1 style="background:#F3B834;color:#212529;padding:10px;width:300px;text-align:center;">Johnnie Walker</h1>
<p><br /><!-- Some representative placeholder content for the first slide of the carousel. --></p>
<p><a class="btn btn-lg btn-dark" href="#target_1">Buy</a></p>
</div>
</div>
</div>
<div class="carousel-item bg_2">
<!-- <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg> -->
<div class="container">
<div class="carousel-caption text-start">
<h1 style="background:#EBD29F;color:#212529;padding:10px;width:300px;text-align:center;">Guinness</h1>
<p><br /><!-- Some representative placeholder content for the second slide of the carousel. --></p>
<p><a class="btn btn-lg btn-dark" href="#target_2">Buy</a></p>
</div>
</div>
</div>
<div class="carousel-item bg_3">
<!-- <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg> -->
<div class="container">
<div class="carousel-caption text-start">
<h1 style="background:#97DA8C;color:#212529;padding:10px;width:300px;text-align:center;">Tanqueray</h1>
<p><br /><!-- Some representative placeholder content for the third slide of this carousel. --></p>
<p><a class="btn btn-lg btn-dark" href="#target_3">Buy</a></p>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
<div class="container marketing">
<!-- START THE FEATURETTES -->
<div class="featurette-divider" id="target_1"></div>
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">Johnnie Walker</h2>
<p class="lead">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
<div class="container pb-3">
<div class="row">
<div class="col bxmar">
<!-- <a href="https://xd.adobe.com/view/02eedb95-0e76-4ac2-8a96-6c528a752d41-57bd/" target="blank"><img src="https://pionezero.com/diageo/icon_finder/box.png" class="boxsz"></a> -->
</div>
<div class="col smtxt">
<br />
<span class="sku">SKU: JOHN45</span>
</br><br />
<span class="price">PRICE: $250</span>
</br><br />
<a href="https://xd.adobe.com/view/02eedb95-0e76-4ac2-8a96-6c528a752d41-57bd/" target="blank"><button type="button" class="btn btn-dark">Buy</button></a>
</div>
</div>
</div>
</div>
<div class="col-md-5">
<!-- <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false">
<title>Placeholder</title><rect width="100%" height="100%" fill="#eee"/><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg> -->
<a href="https://xd.adobe.com/view/02eedb95-0e76-4ac2-8a96-6c528a752d41-57bd/" target="blank"><img src="https://pionezero.com/diageo/brands/brands__0010_jonniewalker.jpg" class="brandbg"></a>
</div>
</div>
<!-- <hr class="featurette-divider"> -->
<div class="featurette-divider" id="target_2"></div>
<div class="row featurette">
<!-- / / / / / ORDER TOGGLE OF TEXT AND IMG STARTS HERE, order-md-2 and order-md-1 -->
<div class="col-md-7 order-md-2">
<h2 class="featurette-heading">Guinness</h2>
<p class="lead">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
<div class="container pb-3">
<div class="row">
<!-- ALSO TOGGLING THIS ORDER -->
<div class="col bxmar order-md-2">
<!-- <img src="https://pionezero.com/diageo/icon_finder/box.png" class="boxsz"> -->
</div>
<div class="col smtxt order-md-1">
<br />
<span class="sku">SKU: GUIN87</span>
</br><br />
<span class="sku">PRICE: $250</span>
</br><br />
<button type="button" class="btn btn-dark">Buy</button>
</div>
</div>
</div>
</div>
<div class="col-md-5 order-md-1">
<!-- <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false">
<title>Placeholder</title><rect width="100%" height="100%" fill="#eee"/><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg> -->
<img src="https://pionezero.com/diageo/brands/brands__0007_guinness.jpg" class="brandbg">
</div>
</div>
<!-- <hr class="featurette-divider"> -->
<div class="featurette-divider" id="target_3"></div>
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">Tanqueray</h2>
<p class="lead">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
<div class="container pb-3">
<div class="row">
<div class="col bxmar">
<!-- <img src="https://pionezero.com/diageo/icon_finder/box.png" class="boxsz"> -->
</div>
<div class="col smtxt">
<br />
<span class="sku">SKU: TANQ900</span>
</br><br />
<span class="sku">PRICE: $250</span>
</br><br />
<button type="button" class="btn btn-dark">Buy</button>
</div>
</div>
</div>
</div>
<div class="col-md-5">
<!-- <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false">
<title>Placeholder</title><rect width="100%" height="100%" fill="#eee"/><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg> -->
<img src="https://pionezero.com/diageo/brands/brands__0004_tanqueray.jpg" class="brandbg">
</div>
</div>
<!-- <hr class="featurette-divider"> -->
<div class="featurette-divider"></div>
<div class="row featurette">
<div class="col-md-7 order-md-2">
<h2 class="featurette-heading">Baileys</h2>
<p class="lead">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
<div class="container pb-3">
<div class="row">
<!-- ALSO TOGGLING THIS ORDER -->
<div class="col bxmar order-md-2">
<!-- <img src="https://pionezero.com/diageo/icon_finder/box.png" class="boxsz"> -->
</div>
<div class="col smtxt order-md-1">
<br />
<span class="sku">SKU: BAIL17</span>
</br><br />
<span class="sku">PRICE: $250</span>
</br><br />
<button type="button" class="btn btn-dark">Buy</button>
</div>
</div>
</div>
</div>
<div class="col-md-5 order-md-1">
<!-- <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false">
<title>Placeholder</title><rect width="100%" height="100%" fill="#eee"/><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg> -->
<img src="https://pionezero.com/diageo/brands/brands__0000_baileys.jpg" class="brandbg">
</div>
</div>
<!-- <hr class="featurette-divider"> -->
<div class="featurette-divider"></div>
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">Smirnoff</h2>
<p class="lead">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
<div class="container pb-3">
<div class="row">
<div class="col bxmar">
<!-- <img src="https://pionezero.com/diageo/icon_finder/box.png" class="boxsz"> -->
</div>
<div class="col smtxt">
<br />
<span class="sku">SKU: SMIR460</span>
</br><br />
<span class="sku">PRICE: $250</span>
</br><br />
<button type="button" class="btn btn-dark">Buy</button>
</div>
</div>
</div>
</div>
<div class="col-md-5">
<!-- <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false">
<title>Placeholder</title><rect width="100%" height="100%" fill="#eee"/><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg> -->
<img src="https://pionezero.com/diageo/brands/brands__0011_sminoff.jpg" class="brandbg">
</div>
</div>
<!-- <hr class="featurette-divider"> -->
<div class="featurette-divider"></div>
<div class="row featurette">
<div class="col-md-7 order-md-2">
<h2 class="featurette-heading">Captain Morgan</h2>
<p class="lead">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
<div class="container pb-3">
<div class="row">
<!-- ALSO TOGGLING THIS ORDER -->
<div class="col bxmar order-md-2">
<!-- <img src="https://pionezero.com/diageo/icon_finder/box.png" class="boxsz"> -->
</div>
<div class="col smtxt order-md-1">
<br />
<span class="sku">SKU: CAPT681</span>
</br><br />
<span class="sku">PRICE: $250</span>
</br><br />
<button type="button" class="btn btn-dark">Buy</button>
</div>
</div>
</div>
</div>
<div class="col-md-5 order-md-1">
<!-- <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false">
<title>Placeholder</title><rect width="100%" height="100%" fill="#eee"/><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg> -->
<img src="https://pionezero.com/diageo/brands/brands__0002_captainmorgan.jpg" class="brandbg">
</div>
</div>
<!-- <hr class="featurette-divider"> -->
<div class="featurette-divider"></div>
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">Crown Royal</h2>
<p class="lead">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
<div class="container pb-3">
<div class="row">
<div class="col bxmar">
<!-- <img src="https://pionezero.com/diageo/icon_finder/box.png" class="boxsz"> -->
</div>
<div class="col smtxt">
<br />
<span class="sku">SKU: CROW91</span>
</br><br />
<span class="sku">PRICE: $250</span>
</br><br />
<button type="button" class="btn btn-dark">Buy</button>
</div>
</div>
</div>
</div>
<div class="col-md-5">
<!-- <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false">
<title>Placeholder</title><rect width="100%" height="100%" fill="#eee"/><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg> -->
<img src="https://pionezero.com/diageo/brands/brands__0005_crownroyal.jpg" class="brandbg">
</div>
</div>
<!-- <hr class="featurette-divider"> -->
<div class="featurette-divider"></div>
<div class="row featurette">
<div class="col-md-7 order-md-2">
<h2 class="featurette-heading">Don Julio</h2>
<p class="lead">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
<div class="container pb-3">
<div class="row">
<!-- ALSO TOGGLING THIS ORDER -->
<div class="col bxmar order-md-2">
<!-- <img src="https://pionezero.com/diageo/icon_finder/box.png" class="boxsz"> -->
</div>
<div class="col smtxt order-md-1">
<br />
<span class="sku">SKU: DONJ284</span>
</br><br />
<span class="sku">PRICE: $250</span>
</br><br />
<button type="button" class="btn btn-dark">Buy</button>
</div>
</div>
</div>
</div>
<div class="col-md-5 order-md-1">
<!-- <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false">
<title>Placeholder</title><rect width="100%" height="100%" fill="#eee"/><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg> -->
<img src="https://pionezero.com/diageo/brands/brands__0006_donjulio.jpg" class="brandbg">
</div>
</div>
<!-- <hr class="featurette-divider"> -->
<div class="featurette-divider"></div>
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">Ciroc</h2>
<p class="lead">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
<div class="container pb-3">
<div class="row">
<div class="col bxmar">
<!-- <img src="https://pionezero.com/diageo/icon_finder/box.png" class="boxsz"> -->
</div>
<div class="col smtxt">
<br />
<span class="sku">SKU: CIRO28</span>
</br><br />
<span class="sku">PRICE: $250</span>
</br><br />
<button type="button" class="btn btn-dark">Buy</button>
</div>
</div>
</div>
</div>
<div class="col-md-5">
<!-- <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false">
<title>Placeholder</title><rect width="100%" height="100%" fill="#eee"/><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg> -->
<img src="https://pionezero.com/diageo/brands/brands__0003_ciroc.jpg" class="brandbg">
</div>
</div>
<!-- <hr class="featurette-divider"> -->
<div class="featurette-divider"></div>
<div class="row featurette">
<div class="col-md-7 order-md-2">
<h2 class="featurette-heading">Buchanan's</h2>
<p class="lead">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
<div class="container pb-3">
<div class="row">
<!-- ALSO TOGGLING THIS ORDER -->
<div class="col bxmar order-md-2">
<!-- <img src="https://pionezero.com/diageo/icon_finder/box.png" class="boxsz"> -->
</div>
<div class="col smtxt order-md-1">
<br />
<span class="sku">SKU: BUCH271</span>
</br><br />
<span class="sku">PRICE: $250</span>
</br><br />
<button type="button" class="btn btn-dark">Buy</button>
</div>
</div>
</div>
</div>
<div class="col-md-5 order-md-1">
<!-- <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false">
<title>Placeholder</title><rect width="100%" height="100%" fill="#eee"/><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg> -->
<img src="https://pionezero.com/diageo/brands/brands__0001_buchanan.jpg" class="brandbg">
</div>
</div>
<!-- <hr class="featurette-divider"> -->
<div class="featurette-divider"></div>
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">Casamigos</h2>
<p class="lead">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
<div class="container pb-3">
<div class="row">
<div class="col bxmar">
<!-- <img src="https://pionezero.com/diageo/icon_finder/box.png" class="boxsz"> -->
</div>
<div class="col smtxt">
<br />
<span class="sku">SKU: CASA37</span>
</br><br />
<span class="sku">PRICE: $250</span>
</br><br />
<button type="button" class="btn btn-dark">Buy</button>
</div>
</div>
</div>
</div>
<div class="col-md-5">
<!-- <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false">
<title>Placeholder</title><rect width="100%" height="100%" fill="#eee"/><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg> -->
<img src="https://pionezero.com/diageo/brands/brands__0008_casamigos.jpg" class="brandbg">
</div>
</div>
<!-- <hr class="featurette-divider"> -->
<div class="featurette-divider"></div>
<div class="row featurette">
<div class="col-md-7 order-md-2">
<h2 class="featurette-heading">J&B</h2>
<p class="lead">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
<div class="container pb-3">
<div class="row">
<!-- ALSO TOGGLING THIS ORDER -->
<div class="col bxmar order-md-2">
<!-- <img src="https://pionezero.com/diageo/icon_finder/box.png" class="boxsz"> -->
</div>
<div class="col smtxt order-md-1">
<br />
<span class="sku">SKU: JB372</span>
</br><br />
<span class="sku">PRICE: $250</span>
</br><br />
<button type="button" class="btn btn-dark">Buy</button>
</div>
</div>
</div>
</div>
<div class="col-md-5 order-md-1">
<!-- <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false">
<title>Placeholder</title><rect width="100%" height="100%" fill="#eee"/><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg> -->
<img src="https://pionezero.com/diageo/brands/brands__0009_j&b.jpg" class="brandbg">
</div>
</div>
<!-- <hr class="featurette-divider"> -->
<div class="featurette-divider"></div>
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">Ketel One</h2>
<p class="lead">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
<div class="container pb-3">
<div class="row">
<div class="col bxmar">
<!-- <img src="https://pionezero.com/diageo/icon_finder/box.png" class="boxsz"> -->
</div>
<div class="col smtxt">
<br />
<span class="sku">SKU: KETE93</span>
</br><br />
<span class="price">PRICE: $250</span>
</br><br />
<button type="button" class="btn btn-dark">Buy</button>
</div>
</div>
</div>
</div>
<div class="col-md-5">
<!-- <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false">
<title>Placeholder</title><rect width="100%" height="100%" fill="#eee"/><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg> -->
<img src="https://pionezero.com/diageo/brands/brands__0012_ketelone_fix.jpg" class="brandbg">
</div>
</div>
<!-- <hr class="featurette-divider"> -->
<div class="featurette-divider"></div>
<!-- /END THE FEATURETTES -->
</div><!-- /.container -->
<!-- FOOTER -->
<!-- <footer class="container">
<p class="float-end"><a href="#">Back to top</a></p>
<p>© 2017–2021 Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
</footer> -->
<!-- borrowed from view-source:https://getbootstrap.com/docs/5.0/examples/ -->
<footer class="bd-footer py-1 mt-1 bg-light" style="background-color:#F6E8D9 !important;">
<div class="container py-5">
<div class="row">
<div class="col-lg-3 mb-1">
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap"><img src="https://www.diageo.com/images/logo.svg"></a>
<ul class="list-unstyled small text-muted">
<li class="mb-2">We are a global leader in beverage alcohol with an outstanding collection of brands across spirits and beer.</li>
<li class="mb-2 anlink2"><a href="https://www.diageo.com/en/contact-us" target="_blank" style="/* text-decoration:none;border-bottom:2px solid #FF6500;padding-bottom:3px */">Contact Us</a></li>
<li class="mb-2 anlink2"><a href="https://footer.diageohorizon.com/dfs/assets/www.diageo.com/PrivacyPolicy_en.html?locale=en-gb" target="_blank" style="/* text-decoration:none;border-bottom:2px solid #FF6500;padding-bottom:3px */">Privacy and Cookie Notice</a></li>
</ul>
</div>
</div>
</div>
</footer>
</main>
<!-- <script src="https://getbootstrap.com/docs/5.0/dist/js/bootstrap.bundle.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</div>
<!-- / bs5 -->
</body>
</html>
!
