Bootstrap Snippet Semi Transparent Highlight Box using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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 {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Semi Transparent Highlight Box"
Bootstrap 3.3.0 Snippet by bindassanant

Related: See More

Questions / Comments:

"Semi Transparent Highlight Box" Bootstrap 3.3.0 Snippet by bindassanant

Related: See More

Questions / Comments:

"Semi Transparent Highlight Box"
Bootstrap 3.3.0 Snippet by bindassanant