Item: Game Gard (Gamer Space)
Rating: 3.4
Author: koheishinta

0 Downloads
7 Views
Tweet
Download Now View Demo

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

More from koheishinta

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

Comments

More from koheishinta

Game Gard (Gamer Space)

Game Gard (Gamer Space)

Strong World - Post Form

A Pen by Kohei Shinta

You Might Also Like

AngularJS Form Boilerplate

A Pen by Ryan P. C. McQuen

Flubby navigation 2

Reverse List

Simulate SVG paths are drawn using CSS animation

A Pen by Irakli Tsaishvili

30 Days of Vue - Day 5 -Watching for changes

Color wave