Certificate with CSS

image file for border and css alignment change xxx

by Jeff Barclay

HTML

<div class="certificate">

	    <h2 class="certBody">
            John Doe<br><br>
	        Has Successfully Completed The<br>
            <i>CSS Class</i>
            <i>Online Training Example</i>
        </h2>
            
        <h2 class="certDate">September 15, 2015</h2>
            
        </br>
    </div>
    <center> <input type=button onClick="window.print()" value="Print This Page"/> </center>

CSS

TD {
	font-size:10pt;
	font-family:arial;
	text-align: center;
	width: 12.5%;
}

.CORRECT {
	font-size:10pt;
	font-family:arial;
	color: #008800;
}

.INCORRECT {
	font-size:10pt;
	font-family:arial;
	color: #880000;
}

.NEUTRAL {
	font-size:10pt;
	font-family:arial;
	color: #000088;
}

.QUESTION {
	font-size:10pt;
	font-family:arial;
	text-align: left;
	width: 46.25%;	
}

.NUMBER {
	font-size:10pt;
	font-family:arial;
	text-align: center;
	width: 3.75%;
}

.DATE {
	font-size:10pt;
	font-family:arial;
	text-align: center;
	
}

.DATETIME {
	font-size:10pt;
	font-family:arial;
	margin-top: 0;
	margin-bottom: 0;
}

.SUMMARY {
	font-size:10pt;
	font-family:arial;
	text-align: center;
}

H1 {
	font-size:14pt;
	font-family:arial;
	text-align: center;
}

TH {
	font-size:12pt;
	font-family:arial;
}

.image { 
    position: relative; 
    width: 100%; /* for IE 6 */
}

H2 {
    font-size:14pt;
	font-family:arial;
    text-align: center;
}

.certificate {
    background-image: url(http://www.mcxxxit.com/TestCert/quizimages/cert.png);
    background-size: 100% 100%;
    height: 300px;
    width: 800px;
    padding: 50px;
    position: relative;
}

.certDate {
	font-size: 14pt;
	font-family: Trebuchet MS;
	font-weight:normal;
	position: absolute;
	bottom: 50px;
	right: 100px; 
}

.certHead {
	font-size:40pt;
	font-family:Trebuchet MS; 
    position: absolute; 
    top: 130px; 
    left: 0; 
    width: 100%;  
}

.certBody {
	font-size:28pt;
	font-family:Trebuchet MS;
	font-weight:normal;
    width: 100%;  
}