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

Thumbnail
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 Codepen.io
Copyright koheishinta ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <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">

  
</head>

<body>

  <div class="game-card">
  <div class="game-header" style="background-image: url(http://i.imgur.com/NVIVQju.jpg), no-repeat">
    <div class="game-cover">
      <img src="http://cdn1.twinfinite.net/wp-content/uploads/2017/01/IMG_9302.jpg" alt="injustice2">
    </div>
    <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>
      <div class="game-devices">
        <b>Piattaforma:</b>
        <span class="device">PS4</span>
        <span class="device">Xbox One</span>
        <span class="device">Android</span>
        <span class="device">iOS</span>
      </div>
      <div class="game-genre">
        <b>Genere:</b>
        Picchiaduro a incontri
      </div>
      <div class="game-mode">
        <b>Modalità di gioco:</b>
        Singolo giocatore, Multiplayer
      </div>
    </div>
  </div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/koheishinta/game-gard-gamer-space-VzpNRK */
/**
 * CSS Reset
 */
* { margin: 0; padding: 0 }

/**
 * 'Montserrat' - Google Font
 */
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,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}

Comments