Squid Game Invitation Card using HTML5 and CSS3

Salow
January 2, 2022
CSS, Game

Squid Game is a 2021 Korean drama where adults play children games. A special invitation is sent to the players. In this CSS tutorial we will be designing the invitation using CSS.

Following is the CSS Class for implementing Squid Game Invitation card.

.card {
    height: 250px;
    width: 450px;
    color: white;
    background-color: burlywood;
    display: flex;
    justify-content: center;
    align-items: center;
}
.circle {
    width: 75px;
    height: 75px;
    border: 0.4em solid black;
    border-radius: 50%;
}
.triangle {
    margin-right: 10px;
    border-left: 37.5px solid transparent;
    border-right: 37.5px solid transparent;
    border-bottom: 75px solid black;
}
.triangle {
    border-left: 41px solid transparent;
    border-right: 41px solid transparent;
    border-bottom: 82px solid black;
    position: relative;
}
.triangle:after {
    content: "";
    position: absolute;
    top: 9px;
    left: -34px;
    border-left: 34px solid transparent;
    border-right: 34px solid transparent;
    border-bottom: 68px solid burlywood;
}
.square {
    width: 75px;
    height: 75px;
    border: 0.4em solid black;
}

Following is the output.

You can find the complete coding in Visual Studio Code tutorial in the following YouTube Video.

Here is the complete code for creating Squid Game invitation Card using HTML and CSS:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .card {
        height: 250px;
        width: 450px;
        color: white;
        background-color: burlywood;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .circle {
        width: 75px;
        height: 75px;
        border: 0.4em solid black;
        border-radius: 50%;
      }
      .triangle {
        margin-right: 10px;
        border-left: 37.5px solid transparent;
        border-right: 37.5px solid transparent;
        border-bottom: 75px solid black;
      }
      .triangle {
        border-left: 41px solid transparent;
        border-right: 41px solid transparent;
        border-bottom: 82px solid black;
        position: relative;
      }
      .triangle:after {
        content: "";
        position: absolute;
        top: 9px;
        left: -34px;
        border-left: 34px solid transparent;
        border-right: 34px solid transparent;
        border-bottom: 68px solid burlywood;
      }
      .square {
        width: 75px;
        height: 75px;
        border: 0.4em solid black;
      }
    </style>
    <title>Salow Studios</title>
  </head>
  <body>
    <h1>Squid Game Card</h1>
    <div class="card">
      <div class="circle"></div>
      <div class="triangle"></div>
      <div class="square"></div>
    </div>
  </body>
</html>

Thank you for reading. I hope that it has helped you with your project. Good luck and happy coding!

See you in another tutorial!