Game Gard (Gamer Space)

In this example below you will see how to do a Game Gard (Gamer Space) with some HTML / CSS and Javascript

This awesome code was written by koheishinta, you can see more from this user in the personal repository.
You can find the original code on
Copyright koheishinta ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>Game Gard (Gamer Space)</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="css/style.css">



  <div class="game-card">
  <div class="game-header" style="background-image: url(, no-repeat">
    <div class="game-cover">
      <img src="" alt="injustice2">
    <div class="game-info">
      <div class="game-title">Injustice 2</div>
      <div class="game-release-date">
        <b>Data di uscita:</b>
        16/05/2017 (USA) - 18/05/2017 (Europa)
      <div class="game-devices">
        <span class="device">PS4</span>
        <span class="device">Xbox One</span>
        <span class="device">Android</span>
        <span class="device">iOS</span>
      <div class="game-genre">
        Picchiaduro a incontri
      <div class="game-mode">
        <b>Modalità di gioco:</b>
        Singolo giocatore, Multiplayer



/*Downloaded from */
 * CSS Reset
* { margin: 0; padding: 0 }

 * 'Montserrat' - Google Font
@import url(',300i,400,400i,500,500i,600,600i,700,700i');

body {background: #0D0A14; color: #F1E7E3; font-family: 'Montserrat', sans-serif; font-size: 14px}

.game-card {background: #15111c; width: 1030px; margin: 0 auto}
.game-header {background-size: cover; height: 250px}
.game-cover {display: inline-block; height: 100%; width: 200px; margin-right: -4px; overflow: hidden; vertical-align: top}
.game-cover img {height: 100%; width: 100%}
.game-info {display: inline-block; box-sizing: border-box; padding-left: 25px; width: 830px; vertical-align: top; font-weight: 300; line-height: 30px; letter-spacing: 1px}
.game-info b {font-weight: 500}
.game-title {margin-bottom: 18px; font-size: 36px; font-weight: 600; line-height: 72px}
.game-devices .device:after {content: ', '}
.game-devices .device:last-child:after {content: none}