<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>CSS Manipulate</h2> <div style="position:relative;height:220px;margin-top:50px;background-color:green"> <div style="opacity:0.5;position:absolute;left:100px;top:-30px;width:300px;height:150px;background-color:red;color:red"></div> <div class="w3-theme" style="opacity:0.3;position:absolute;left:120px;top:20px;width:100px;height:170px;"></div> <div style="margin-top:30px;width:360px;height:130px;padding:20px;border-radius:10px;border:10px solid #EE872A;font-size:120%;"> <h1>CSS = Styles and Colors</h1> <div style="letter-spacing:12px;font-size:15px;position:relative;left:25px;top:10px;color:white">Manipulate Text</div> <div style="color:#40B3DF;letter-spacing:12px;font-size:15px;position:relative;left:25px;top:20px;">Colors, <span style="background-color:#B4009E;color:#ffffff;"> Boxes</span></div> </div> </div> </div> </div>