<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<title>Apple</title>

<style>
html {
height: 100%;
}

body {
height: 100%;
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans serif;
padding:0;
margin:0;
}

.radial {
	height:100%;
	width:100%;
	background: -moz-radial-gradient(50% 50%, circle , #CD584F, #6D2115);
        background: -webkit-gradient(radial, 50% 50%, 1000, 50% 50%, 40, from(#CD584F), to(#CD584F), color-stop(0,#6D2115));
        display: block;
}
.text {
	color:#7C2319;
	text-align:center;
	padding-top: 30em;
	display:block;
	text-shadow: #AB4B41 0 2px 0;
}
</style>

</head>

<body>
	<div class="radial">
	<span class="text">Wanna have an apple? </span>
</div>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="Layer_2" width="604" height="94.745" viewBox="0 0 604 94.745" overflow="visible" enable-background="new 0 0 604 94.745" xml:space="preserve" style="position: fixed; z-index: 1; top:24.1em;left:47.1%;">
    <defs>
        <radialGradient id="myRadialGradient4"
           fx="50%" fy="60%" r="140%"
           spreadMethod="pad">
          <stop offset="10%"   stop-color="#8C1F1A" stop-opacity="1"/>
          <stop offset="100%" stop-color="#670B07" stop-opacity="1" />
        </radialGradient>
    </defs>
<g>
	<path fill="#B44C3F" d="M36.253,26.119c3.338,0.974,5.556,1.46,6.653,1.46c1.412,0,3.718-0.486,6.919-1.46
		c3.2-0.973,5.978-1.46,8.331-1.46c3.859,0,7.295,1.029,10.308,3.088c1.694,1.186,3.373,2.791,5.036,4.818
		c-2.519,2.129-4.36,4.021-5.524,5.68c-2.109,3.005-3.163,6.322-3.163,9.952c0,3.975,1.117,7.559,3.352,10.75
		c2.234,3.192,4.784,5.211,7.648,6.056c-1.191,3.855-3.167,7.883-5.927,12.082c-4.171,6.3-8.31,9.449-12.417,9.449
		c-1.633,0-3.885-0.544-6.757-1.63s-5.297-1.63-7.274-1.63c-1.979,0-4.278,0.544-6.899,1.63c-2.622,1.086-4.749,1.63-6.382,1.63
		c-4.924,0-9.754-4.178-14.49-12.535c-4.736-8.262-7.104-16.367-7.104-24.316c0-7.383,1.812-13.398,5.436-18.049
		c3.624-4.649,8.197-6.975,13.721-6.975C30.069,24.659,32.914,25.146,36.253,26.119z M57.61,7.182
		c0.031,0.314,0.047,0.628,0.047,0.942c0,2.012-0.471,4.211-1.412,6.6s-2.432,4.604-4.471,6.646
		c-1.757,1.729-3.498,2.892-5.224,3.488c-1.098,0.346-2.761,0.613-4.988,0.802c0.062-4.776,1.31-8.909,3.741-12.397
		s6.455-5.876,12.071-7.165C57.5,6.506,57.579,6.867,57.61,7.182z"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="Layer_2" width="604" height="94.745" viewBox="0 0 604 94.745" overflow="visible" enable-background="new 0 0 604 94.745" xml:space="preserve" style="position: fixed; z-index: 1; top:24em;left:47%;">
<g>
	<path style="fill:url(#myRadialGradient4);" fill="#881F1B" d="M36.253,26.119c3.338,0.974,5.556,1.46,6.653,1.46c1.412,0,3.718-0.486,6.919-1.46
		c3.2-0.973,5.978-1.46,8.331-1.46c3.859,0,7.295,1.029,10.308,3.088c1.694,1.186,3.373,2.791,5.036,4.818
		c-2.519,2.129-4.36,4.021-5.524,5.68c-2.109,3.005-3.163,6.322-3.163,9.952c0,3.975,1.117,7.559,3.352,10.75
		c2.234,3.192,4.784,5.211,7.648,6.056c-1.191,3.855-3.167,7.883-5.927,12.082c-4.171,6.3-8.31,9.449-12.417,9.449
		c-1.633,0-3.885-0.544-6.757-1.63s-5.297-1.63-7.274-1.63c-1.979,0-4.278,0.544-6.899,1.63c-2.622,1.086-4.749,1.63-6.382,1.63
		c-4.924,0-9.754-4.178-14.49-12.535c-4.736-8.262-7.104-16.367-7.104-24.316c0-7.383,1.812-13.398,5.436-18.049
		c3.624-4.649,8.197-6.975,13.721-6.975C30.069,24.659,32.914,25.146,36.253,26.119z M57.61,7.182
		c0.031,0.314,0.047,0.628,0.047,0.942c0,2.012-0.471,4.211-1.412,6.6s-2.432,4.604-4.471,6.646
		c-1.757,1.729-3.498,2.892-5.224,3.488c-1.098,0.346-2.761,0.613-4.988,0.802c0.062-4.776,1.31-8.909,3.741-12.397
		s6.455-5.876,12.071-7.165C57.5,6.506,57.579,6.867,57.61,7.182z"/>
</g>
</svg>
</body>
</html>
