"OUGC-Announcement Bars"
Bootstrap 3.3.0 Snippet by carlvlewis

<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="container"> <div class="row"> <center> <br /> <div class="ougc_annbars_black"><strong>Lorem İmpsum!</strong></div> <br /> <div class="ougc_annbars_white"><strong>Lorem İmpsum!</strong></div> <br /> <div class="ougc_annbars_red"><strong>Lorem İmpsum!</strong></div> <br /> <div class="ougc_annbars_blue"><strong>Lorem İmpsum!</strong></div> <br /> <div class="ougc_annbars_green"><strong>Lorem İmpsum!</strong></div> <br /> <div class="ougc_annbars_brown"><strong>Lorem İmpsum!</strong></div> <br /> <div class="ougc_annbars_pink"><strong>Lorem İmpsum!</strong></div> <br /> <div class="ougc_annbars_orange"><strong>Lorem İmpsum!</strong></div> <br /> </center> </div> </div>
.ougc_annbars_black { border:1px solid #000000; background: #393939; background: -moz-linear-gradient(top, #393939 0%, #000000 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#393939), color-stop(100%,#000000)); background: -webkit-linear-gradient(top, #393939 0%,#000000 100%); background: -o-linear-gradient(top, #393939 0%,#000000 100%); background: -ms-linear-gradient(top, #393939 0%,#000000 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#393939', endColorstr='#000000',GradientType=0 ); background: linear-gradient(top, #393939 0%,#000000 100%); color: white; width: 100%; } .ougc_annbars_white { color:#000; border:1px solid #eeeeee; background: #fcfcfc; background: -moz-linear-gradient(top, #fcfcfc 0%, #eeeeee 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfcfc), color-stop(100%,#eeeeee)); background: -webkit-linear-gradient(top, #fcfcfc 0%,#eeeeee 100%); background: -o-linear-gradient(top, #fcfcfc 0%,#eeeeee 100%); background: -ms-linear-gradient(top, #fcfcfc 0%,#eeeeee 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#eeeeee',GradientType=0 ); background: linear-gradient(top, #fcfcfc 0%,#eeeeee 100%); width: 100%; } .ougc_annbars_red { border:1px solid #ff2929; background: #ff3d3d; background: -moz-linear-gradient(top, #ff3d3d 0%, #ff2929 100%); background: -webk border:1px solid #b00 !important;it-gradient(linear, left top, left bottom, color-stop(0%,#ff3d3d), color-stop(100%,#ff2929)); background: -webkit-linear-gradient(top, #ff3d3d 0%,#ff2929 100%); background: -o-linear-gradient(top, #ff3d3d 0%,#ff2929 100%); background: -ms-linear-gradient(top, #ff3d3d 0%,#ff2929 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3d3d', endColorstr='#ff2929',GradientType=0 ); background: linear-gradient(top, #ff3d3d 0%,#ff2929 100%); color: white; width: 100%; } .ougc_annbars_blue { border:1px solid #2e82d6; background: #448fda; background: -moz-linear-gradient(top, #448fda 0%, #2e82d6 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#448fda), color-stop(100%,#2e82d6)); background: -webkit-linear-gradient(top, #448fda 0%,#2e82d6 100%); background: -o-linear-gradient(top, #448fda 0%,#2e82d6 100%); background: -ms-linear-gradient(top, #448fda 0%,#2e82d6 100%); background: linear-gradient(top, #448fda 0%,#2e82d6 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#448fda', endColorstr='#2e82d6',GradientType=0 ); color: white; width: 100%; } .ougc_annbars_green { border:1px solid #0ac247; background: #0bda51; background: -moz-linear-gradient(top, #0bda51 0%, #0ac247 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0bda51), color-stop(100%,#0ac247)); background: -webkit-linear-gradient(top, #0bda51 0%,#0ac247 100%); background: -o-linear-gradient(top, #0bda51 0%,#0ac247 100%); background: -ms-linear-gradient(top, #0bda51 0%,#0ac247 100%); background: linear-gradient(top, #0bda51 0%,#0ac247 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0bda51', endColorstr='#0ac247',GradientType=0 ); color: white; width: 100%; } .ougc_annbars_brown { border:1px solid #922626; background: #a52a2a; background: -moz-linear-gradient(top, #a52a2a 0%, #922626 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a52a2a), color-stop(100%,#922626)); background: -webkit-linear-gradient(top, #a52a2a 0%,#922626 100%); background: -o-linear-gradient(top, #a52a2a 0%,#922626 100%); background: -ms-linear-gradient(top, #a52a2a 0%,#922626 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a52a2a', endColorstr='#922626',GradientType=0 ); background: linear-gradient(top, #a52a2a 0%,#922626 100%); color: white; width: 100%; } .ougc_annbars_pink { border:1px solid #ff8fbc; background: #ffa6c9; background: -moz-linear-gradient(top, #ffa6c9 0%, #ff8fbc 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffa6c9), color-stop(100%,#ff8fbc)); background: -webkit-linear-gradient(top, #ffa6c9 0%,#ff8fbc 100%); background: -o-linear-gradient(top, #ffa6c9 0%,#ff8fbc 100%); background: -ms-linear-gradient(top, #ffa6c9 0%,#ff8fbc 100%); background: linear-gradient(top, #ffa6c9 0%,#ff8fbc 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa6c9', endColorstr='#ff8fbc',GradientType=0 ); color: white; width: 100%; } .ougc_annbars_orange { border:1px solid #febf04; background: #ffd65e; background: -moz-linear-gradient(top, #ffd65e 0%, #febf04 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd65e), color-stop(100%,#febf04)); background: -webkit-linear-gradient(top, #ffd65e 0%,#febf04 100%); background: -o-linear-gradient(top, #ffd65e 0%,#febf04 100%); background: -ms-linear-gradient(top, #ffd65e 0%,#febf04 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 ); background: linear-gradient(top, #ffd65e 0%,#febf04 100%); color: white; width: 100%; }

Related: See More


Questions / Comments: