<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>football pitch</title>
<style>
body{
}
.pitch{
width:600px;
height:325px;
margin:100px auto;
background:
linear-gradient(to bottom,white,white 1%,transparent 1% ,transparent 99%,white 99%,white 100%),
linear-gradient(to right,white,white 1%,transparent 1%,transparent 49%,white 49%,white 50%,transparent 50%,transparent 99%,white 99%, white 100%),
linear-gradient(to right,transparent 11%,white 11%,white 12%,transparent 12%,transparent 88%,white 88%, white 89%,transparent 89%),
linear-gradient(to bottom,transparent 25%,white 25%,white 26%,transparent 26%,transparent 75%,white 75%,white 76%,transparent 76%),
linear-gradient(to bottom,transparent 25%,white 25%,white 26%,transparent 26%,transparent 75%,white 75%,white 76%,transparent 76%),
linear-gradient(to bottom,transparent 38%, 38%,white 39%,transparent 39%),
linear-gradient(to bottom,transparent 58%,white 58%,white 59%,transparent 59%)
,
linear-gradient(to bottom,transparent 38%, white 38%,white 39%,transparent 39%),
linear-gradient(to bottom,transparent 58%,white 58%,white 59%,transparent 59%),
linear-gradient(to right,transparent 3%,white 3%,white 3.5%,transparent 3.5%,transparent 96.5%,white 96.5%,white 97%,transparent 97%),
radial-gradient(25px circle at 1% 0%,transparent 85%,white 85%, white 99%,transparent 99%),
radial-gradient(25px circle at 99% 0%,transparent 85%,white 85%, white 99%,transparent 99%),
radial-gradient(25px circle at 0% 99%,transparent 85%,white 85%, white 99%,transparent 99%),
radial-gradient(25px circle at 99% 100%,transparent 85%,white 85%, white 99%,transparent 99%),
radial-gradient(105px circle at 49.5% 50%,white,white 5%,transparent 5%,transparent 97%,white 97%,white 99%,transparent 99%),
radial-gradient(3px circle at 8% 50%,white,white 99%,transparent 99%),
radial-gradient(3px circle at 92% 50%,white,white 99%,transparent 99%)
;
background-color:rgba(0,255,0,0.7);
background-size:
100% 100%,
100% 100%,
101.5% 50%,
10.5% 100%,
10.5% 100%,
5% 100%,
5% 100%,
5% 100%,
5% 100%,
94% 21%,
100%,
100%,
100%,
100%,
100%,
100%;
background-position:
50%,
50%,
50%,
1%,
99%,
99%,
1%,
1%,
99%,
50% 48.4%,
50%,
50%,
50%,
50%,
50%;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<h2> if you know how to paint half a circle using gradients only!!! tell me please so that we finish the pitch and kick-off the match></h2><div class="pitch"></div>
</body>
</html>
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.