﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Testing gradient</title>
		<style>
			article, aside, figure, footer, header, hgroup, 
			menu, nav, section { display: block; }
			body {
				width: 800px;
				margin: 0 auto;
				font-family: sans-serif;
			}
			
			.top {
				height: 60px;
			}
			
			.gradient {
				background-image: url(gradient_1.svg);
				background-repeat: repeat-x;
			}
			
			h1 {
				margin: 0 0 1.5em 0;
			}
			
			nav ul {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			nav li {
				float: left;
				margin: 0 5px 0 0;
			}
			
			nav li a {
				display: inline-block;
				background-image: url(gradient_2.svg);
				background-repeat: repeat-x;
				padding: 4px 10px;
				text-decoration: none;
				-webkit-border-radius: 6px;
				border-radius: 6px;
				color: white;
			}
			
			.clear {
				clear: both;
			}
			
		</style>
	</head>
	<body>
		<header class="gradient top">
			<h1>Testing gradient</h1>
		</header>
		<nav>
			<ul>
				<li><a href="#home">Home</a></li>
				<li><a href="#about">About</a></li>
			</ul>
		</nav>
		<section class="clear">
			<p>Gradient add to the header element</p>
		</section>
	</body>
</html>