HTML CSS examples for CSS Widget:Panel
Create Contact panel with round corner
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .currentJob:link, .currentJob:visited { border: 1px solid #dcd3ce; border-bottom: 0; background: #ffffff url(http://www.java2s.com/style/download.png) right top no-repeat; margin: .5em 1.5em 1.5em 1.5em; display: block; text-decoration: none;<!--from ww w .ja v a2 s . c o m--> color: #000000; border-radius: 10px; } .jobTitle { font-weight: bold; color: #006A8A; margin: .6em 45px .1em .6em; font-size: 1.1em; display: block; } .jobLocation { margin: 0 .7em 1em .7em; display: block; font-size: 0.85em; } .jobCloseDate { text-align: center; color: #ffffff; font-style: italic; padding: .5em; display: block; border-radius:0 0 10px 10px; background-color: #006A8A; position: relative; top: .5em; left: -1px; margin-top: -1px; margin-right: -2px; border: inherit; border-top: 0; } .currentJob:hover, .currentJob:visited:hover { border: 1px solid #006A8A; color: #000000; } </style> </head> <body> <a id="blue" class="currentJob" href=""> <span class="jobTitle"> Tester</span> <span class="jobLocation"> City of Main City, CA</span> <span class="jobCloseDate"> Closes: Friday, May 24, 2019</span> </a> </body> </html>