<div class="wrap"> <h1>Sample Box</h1> <img src="http://www.wpthemegenerator.com/wp-content/uploads/2012/06/Image.jpg"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus consectetur dolor a porttitor. Curabitur id sem sed ante fringilla pulvinar et id lectus. Nullam justo ipsum, hendrerit ut commodo nec, pellentesque nec erat. Pellentesque pharetra. </p> <br /> <a href="http://www.designshock.com/"> DesignShock.com </a> </div>
body { background: #6F7B8B; /* old browsers */ background: -webkit-linear-gradient(top, #6F7B8B 20%, #8D96A5 58%); background: -moz-linear-gradient(top, #6F7B8B 20%, #8D96A5 58%); background: -o-linear-gradient(top, #6F7B8B 20%, #8D96A5 58%); background: -ms-linear-gradient(top, #6F7B8B 20%, #8D96A5 58%); background: linear-gradient(top, #6F7B8B 20%, #8D96A5 58%); /* firefox */ background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,#6F7B8B), color-stop(58%,#8D96A5)); /* webkit */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6F7B8B', endColorstr='#8D96A5',GradientType=0 ); /* ie */ font-size: 11px; font-family: 'Open Sans', sans-serif; color: #4A4A4A ; text-align: center; } .wrap { display: block; width: 300px; height: 310px; margin: 20px auto; padding: 12px; /*border-radius*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /*box-shadow*/ -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.3); -moz-box-shadow: 0 0 15px rgba(0,0,0,0.3); box-shadow: 0 0 15px rgba(0,0,0,0.3); background-color: #ccc; } .wrap img { width: 100%; margin-top: 15px; } p{ margin-top: 15px; text-align: justify; } h1{ font-size: 20px; font-weight: bold; margin-top: 5px; text-shadow: 1px 1px 3px rgba(0,0,0,0.3); } a{ text-decoration: none; color: #4A4A4A !important; } a:hover{ text-decoration: underline; color: #6B6B6B !important ; }