Simple Game Info

by Kevin Pliester

HTML

<div class="container">

  <div class="rl--game-shortcode">

    <div class="rl--game-shortcode-left">
      <div class="rl--game-shortcode-background"></div>
      <div class="rl--game-shortcode-cover"></div>
    </div>

    <div class="rl--game-shortcode-right">
      <div class="rl--game-shortcode-heading">
        <h1>Diablo 3</h1>
      </div>
      <div class="rl--game-shortcode-informations">
        <div class="rl--game-shortcode-publisher">
          <span>Publisher:</span> Blizzard Entertainment
        </div>
        <div class="rl--game-shortcode-developer">
          <span>Entwickler:</span> Blizzard Entertainment
        </div>
        <div class="rl--game-shortcode-publisher">
          <span>Website:</span> <a href="#">Website aufrufen</a>
        </div>
        <div class="rl--game-shortcode-publish-date">
          <span>Veröffentlichung:</span> 01.12.2014
        </div>
        <div class="rl--game-shortcode-button">
          <a href="#">Jetzt kaufen</a>
        </div>
      </div>
    </div>
  </div>
  <div class="rl--game-shortcode-tabs">
    <div class="rl--game-shortcode-tab-nav">
      <a href="#rl--game-shortcode-tab-1">Beiträge</a>
      <a href="#rl--game-shortcode-tab-2">Screenshots</a>
    </div>
    <div class="rl--game-shortcode-tab-content">
      <div id="rl--game-shortcode-tab-1" class="rl--game-shortcode-tab-active">
        <a href="#">
          <h2>
            Beitrag 1
          </h2>
        </a>
        <a href="#">
          <h2>
          Beitrag 1
          </h2>
        </a>
      </div>
      <div id="rl--game-shortcode-tab-2">
      </div>
    </div>
  </div>

</div>

CSS

body {
  font-size: 12px;
  font-family: arial, tahoma, verdana;
  background-color: #0C0C0D
}

a {
  color: #BBAD51;
  text-decoration: none;
}

.container {
  font-family: arial;
  max-width: 700px;
  margin: 5% auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, .2);
  padding: 25px;
  position: relative;
  background: #222223;
}

.rl--game-shortcode {
  position: relative;
  background: #222223;
  color: #9A9A9A;
  display: flex;
  border: 1px solid #2D2D2E;
}

.rl--game-shortcode .rl--game-shortcode-left {
  flex: 1 40%;
  position: relative;
  text-align: center;
  min-height: 250px;
  border-right: 1px solid #2D2D2E;
}

@media(max-width: 678px) {
  .rl--game-shortcode .rl--game-shortcode-left {
    display: none;
  }
}

.rl--game-shortcode .rl--game-shortcode-left .rl--game-shortcode-background {
  background-image: url(https://randlocher.de/wp-content/uploads/2017/06/Diablo-3-Artwork.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  box-shadow: inset 0 0 1000px 0 #222223;
}

.rl--game-shortcode .rl--game-shortcode-left .rl--game-shortcode-cover {
  background-image: url(https://randlocher.de/wp-content/uploads/2017/06/Diablo-3-Artwork.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  width: 125px;
  height: 175px;
  top: 50%;
  left: 50%;
  z-index: 3;
  margin-top: -32%;
  margin-left: -25%;
  box-shadow: 0 0 25px 0 #111;
  border: 1px solid #000;
}

.rl--game-shortcode .rl--game-shortcode-right {
  flex: 1 60%;
  vertical-align: top;
}

.rl--game-shortcode .rl--game-shortcode-right .rl--game-shortcode-heading h1 {
  font-size: 1rem;
  margin: 25px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
}

.rl--game-shortcode .rl--game-shortcode-informations {
  padding: 25px;
  border-top: 1px solid #2D2D2E;
}

.rl--game-shortcode...

JavaScript

jQuery('.rl--game-shortcode-tab-nav a').on('click', function(event) {
    jQuery('.rl--game-shortcode-tab-content div').removeClass('rl--game-shortcode-tab-active');
    var Target = jQuery(this).attr('href');
    jQuery(Target).addClass('rl--game-shortcode-tab-active');
    event.preventDefault();
  });