<nav class="navbar navbar-expand-lg navbar-red navbar-dark">
<div class="wrapper"> </div>
<div class="container-fluid all-show"> <a class="navbar-brand" href="#">Penton <i class="fa fa-codepen"></i></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
<li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">About us</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Products</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Services</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Events</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">contact</a> </li>
<li class="nav-item"> <a class="nav-link" href="#"><i class="fa fa-search"></i></a> </li>
</ul>
<div class="d-flex flex-column sim"> <span>1 item added to your quote</span> <small class="text-primary">view your quote</small> </div>
</div>
</div>
</nav>
<div class="container mt-4 mb-4">
<div class="cart-added mb-5">
<div class="d-flex justify-content-between p-2 align-items-center">
<div class="d-flex flex-row align-items-center"> <img src="https://i.imgur.com/SVe6fhC.png" width="20">
<div class="d-flex flex-column ml-3"> <span class="font-weight-bold">Item added to your quote <i class="fa fa-check-circle text-success"></i></span> <small class="text-muted suction">SC760 [Low Suction]</small> </div>
</div>
<div class="d-flex flex-row align-items-center"> <span class="mr-3">Continue Shopping</span> <button class="btn btn-success">Go to Quote</button> </div>
</div>
</div>
<h5>Related products</h5>
<div class="row g-2">
<div class="col-md-6">
<div class="product-card d-flex flex-row align-items-center">
<div class="text-center"> <img src="https://i.imgur.com/OCd0AVN.png" width="200"> </div>
<div class="">
<h6 class="mb-1">Hopital high suction[760 BHP]</h6> <span>250 NMPA</span>
<div class="buttons mt-3"> <button class="btn btn-outline-danger btn-sm wishlist">Add to wishlist</button>\ <button class="btn btn-success btn-sm">Add to quote</button> </div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="product-card d-flex flex-row align-items-center">
<div class="text-center"> <img src="https://i.imgur.com/j66O7xU.png" width="200"> </div>
<div class="">
<h6 class="mb-1">Hopital high suction[760 BHP]</h6> <span>250 NMPA</span>
<div class="buttons mt-3"> <button class="btn btn-outline-danger btn-sm wishlist">Add to wishlist</button>\ <button class="btn btn-success btn-sm">Add to quote</button> </div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="product-card d-flex flex-row align-items-center">
<div class="text-center"> <img src="https://i.imgur.com/j66O7xU.png" width="200"> </div>
<div class="">
<h6 class="mb-1">Hopital high suction[1060 BHP]</h6> <span>450 NMPA</span>
<div class="buttons mt-3"> <button class="btn btn-outline-danger btn-sm wishlist">Add to wishlist</button>\ <button class="btn btn-success btn-sm">Add to quote</button> </div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="product-card d-flex flex-row align-items-center">
<div class="text-center"> <img src="https://i.imgur.com/OCd0AVN.png" width="200"> </div>
<div class="">
<h6 class="mb-1">Hopital high suction[7260 BHP]</h6> <span>1250 NMPA</span>
<div class="buttons mt-3"> <button class="btn btn-outline-danger btn-sm wishlist">Add to wishlist</button>\ <button class="btn btn-success btn-sm">Add to quote</button> </div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="product-card d-flex flex-row align-items-center">
<div class="text-center"> <img src="https://i.imgur.com/j66O7xU.png" width="200"> </div>
<div class="">
<h6 class="mb-1">Hopital high suction[760 BHP]</h6> <span>250 NMPA</span>
<div class="buttons mt-3"> <button class="btn btn-outline-danger btn-sm wishlist">Add to wishlist</button>\ <button class="btn btn-success btn-sm">Add to quote</button> </div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="product-card d-flex flex-row align-items-center">
<div class="text-center"> <img src="https://i.imgur.com/j66O7xU.png" width="200"> </div>
<div class="">
<h6 class="mb-1">Hopital high suction[1760 BHP]</h6> <span>2150 NMPA</span>
<div class="buttons mt-3"> <button class="btn btn-outline-danger btn-sm wishlist">Add to wishlist</button>\ <button class="btn btn-success btn-sm">Add to quote</button> </div>
</div>
</div>
</div>
</div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Allerta+Stencil&display=swap');
body {
background-color: #fff
}
.navbar-nav>li>a {
text-transform: uppercase;
font-size: 12px;
margin-right: 20px;
color: #fff
}
.navbar-toggler {
padding: .20rem .50rem;
font-size: 1.25rem;
line-height: 1;
background-color: transparent;
border: 1px solid white
}
.nav-link {
color: #fff !important
}
.wrapper {
width: 100%;
position: absolute;
height: 100%;
background-color: #000;
clip-path: polygon(81% 0, 100% 0, 100% 50%, 100% 100%, 71% 100%);
transition: 1s all
}
.navbar-brand {
color: #fff;
font-family: 'Allerta Stencil', sans-serif;
margin-bottom: 4px;
font-size: 27px
}
.navbar-red:hover .wrapper {
clip-path: polygon(81% 0, 100% 0, 100% 50%, 100% 100%, 65% 100%)
}
.navbar-brand:hover {
color: #fff
}
.navbar-red {
background-color: red;
color: #fff
}
.all-show {
z-index: 10
}
.cart-added {
border-left: 4px solid red;
padding: 10px;
background-color: #eee;
border-radius: 2px
}
.suction {
font-size: 12px
}
.btn-success {
border-radius: 4px;
background-color: red;
border-color: red
}
.btn-success:hover {
border-radius: 4px;
background-color: red;
border-color: red
}
.product-card {
background-color: #eee;
height: 200px;
border-radius: 4px
}
.wishlist {
border: 1px solid red;
color: red
}
.wishlist:hover {
background-color: red;
color: #fff;
border: 1px solid red
}