HTML CSS examples for CSS Widget:Panel
Create a badge panel
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> * {<!-- w w w. j av a 2 s.c o m--> font-family:Tahoma; } .product-score-cta { right:0; left:0; bottom:6px; font-size:15px; text-decoration:none; color:Chartreuse; } .ourscore { bottom:13px; font-size:19px; font-style:italic; } .totalscore { top:11px; font-size:71px; line-height:71px; width:131px; position:absolute; } .ourscore,.totalscore,.product-score-cta { position:absolute; width:131px; left:0px; } .score { height:116px; color:yellow; background:blue; position:relative; } .product-score-box { display:block; position:absolute; top:21px; right:11px; color:pink; font-family:'DINCond-MediumRegular'; background:black; text-align:center; z-index:21; overflow:hidden; font-size:17px; line-height:100%; width:131px; height:141px; } </style> </head> <body> <div class="product-score-box"> <div class="score"> <span class="totalscore">Lorem</span> <span class="ourscore">Lorem ips</span> </div> <a href="#" class="product-score-cta">Lorem ipsum </a> </div> </body> </html>