"Semi Transparent Highlight Box"
Bootstrap 3.3.0 Snippet by bindassanant

<div class ="main-container"> <div class=" highlight" style="margin-left:0;"> <h2>Super Product Highlight</h2> <div class="row"> <img src ="http://davidnaylor.org/temp/thunderbird-logo-200x200.png" /> <ul> <li>Integer et malesuada turpis. Proin urna felis.</li> <li>Integer et malesuada turpis. Proin urna felis.</li> <li>Integer et malesuada turpis. Proin urna felis.</li> <li>Integer et malesuada turpis. Proin urna felis.</li> <li>Integer et malesuada turpis. Proin urna felis.</li> </ul> </div> <div class="row"> <p>Morbi laoreet ipsum sem, eu condimentum ante efficitur vel. Donec at nibh risus. Nam mollis nulla eget scelerisque facilisis. Suspendisse sit amet condimentum dolor. Vestibulum euismod congue mi pulvinar dignissim. </p> <button class = "btn btn-primary">Buy Now</button> <button class = "btn btn-warning" >Read More</button> </div> </div> </div> </div> </div>
.main-container{ background: #d53369; /* fallback for old browsers */ background: -webkit-linear-gradient(to left, #d53369 , #cbad6d); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to left, #d53369 , #cbad6d); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } .highlight { width: 600px; color: white; background: rgba(0, 0, 0, 0.26); border-radius: 10px; padding: 3%; } .highlight img { float: left; width: 100px; height: 100px; margin: 10px; } .highlight ul { list-style-image: url('http://icons.iconarchive.com/icons/yusuke-kamiyamane/fugue/16/tick-small-icon.png'); margin-left: 1%; float: left; clear: right } .highlight button { margin-left: 1%; float: right; } .highlight h1,h2,h3,h4,h5,h6 { padding-bottom: 2%; border-bottom: 2px dashed rgba(255, 255, 255, 0.41); font-size:20px; text-align : center; text-transform: uppercase; } .highlight p { text-align: justify; }

Similar snippets: See More


Comments:

comments powered by Disqus