Design a Football Ground using HTML and CSS

In simple terms, a football ground is a large, grassy field where soccer matches are played.

Today in this tutorial, we will be designing a basic football ground using HTML and CSS.

Follow this video for complete guidance :

Complete Source Code :

  <style>
  .ground {
    width: 640px;
    height: 380px;
    position: relative;
    margin: 0 auto;
    top: calc(50% - 380px/2);
    overflow: hidden;
  }
  .border {
    background: white;
    position: absolute;
    z-index: 2;
  }
  .outline.border {
    border: 4px solid white;
    width: 100%;
    height: 100%;
    background: transparent;
  }
  .center-line {
    width: 4px;
    height: 100%;
    top: 0;
    left: calc(50% - 4px/2);
  }
  .center-circle {
    width: 120px;
    height: 120px;
    border-radius: 120px;
    border: 4px solid white;
    background: none;
    top: calc(50% - 120px/2);
    left: calc(50% - 120px/2);
  }
  .box {
    top: 25%;
    width: 16%;
    height: 50%;
    background: transparent;
    border: 4px solid white;
  }
  .box.left {
    left: 0;
  }
  .box.right {
    right: 0;
  }
  .box.small {
    top: 36%;
    width: 8%;
    height: 28%;
  }
  .box-d {
    top: 35%;
    width: 15%;
    height: 30%;
    background: transparent;
    border: 4px solid white;
  }
  .box-d.left {
    left: 5%;
    border-left: none;
    border-bottom-right-radius: 1000px;
    border-top-right-radius: 1000px;
    clip-path: inset(0 0 0 70%);
  }
  .box-d.right {
    right: 5%;
    border-right: none;
    border-bottom-left-radius: 1000px;
    border-top-left-radius: 1000px;
    clip-path: inset(0 70% 0 0);
  }
  .spot {
    width: 4px;
    height: 4px;
    border-radius: 4px;
    top: calc(50% - 4px/2);
  }
  .spot.left {
    left: 11%;
  }
  .spot.right {
    right: 11%;
  }
  .spot.center {
    width: 8px;
    height: 8px;
    left: calc(50% - 4px);
  }
  .corner {
    width: 40px;
    height: 40px;
    border-radius: 40px;
    background: none;
    border: 4px solid white;
  }
  .corner.top {
    top: -20px;
  }
  .corner.left {
    left: -20px;
  }
  .corner.bottom {
    bottom: -20px;
  }
  .corner.right {
    right: -20px;
  }
  .grass {
    width: 100%;
    height: 100%;
    background-color: #358626;
  }
  html,body {
    height: 100%;
    margin: 0;
  }
  body {
    background: #333;
  }
  * {
    box-sizing: border-box;
  }
</style>

<div class='ground'>
  <div class='outline border'></div>
  <div class='box left border'></div>
  <div class='box-d left border'></div>
  <div class='box left small border'></div>
  <div class='box right border'></div>
  <div class='box-d right border'></div>
  <div class='box right small border'></div>
  <div class='spot left border'></div>
  <div class='spot right border'></div>
  <div class='spot center border'></div>
  <div class='center-line border'></div>
  <div class='center-circle border'></div>
  <div class='corner top left border'></div>
  <div class='corner top right border'></div>
  <div class='corner bottom left border'></div>
  <div class='corner bottom right border'></div>
  <div class='grass'></div>
</div>

Here’s what we typically find on a football ground:

• Grassy Field: The ground is covered with natural grass or artificial turf. It’s where all the action happens, where players run, pass, and score goals.
• Goalposts: There are two tall posts with a crossbar at the top at each end of the field. Players try to kick the ball into the opponent’s goalpost to score points.
• Lines and Markings: The field has several lines marked on the grass. There’s a halfway line dividing the field into two halves. Around each goalpost, there is a large rectangular area called the penalty box. Inside this box, there is a smaller rectangle called the goal area. These markings help referees make decisions during the game, like awarding penalties.
• Corner Flags: There are small flags at each corner of the field. When the ball goes out of play over the side of the field, it’s put back into play by kicking it from the corner.
• Players and Referees: During a match, there are two teams of players who try to score goals. There’s also a referee who ensures the game is played fairly and according to the rules.
• Spectator Stands: Around the field, there are often seats or stands where fans can sit and watch the game. These areas can be quite large, especially in professional stadiums, accommodating thousands of spectators.