css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              canvas#canvas

header
  #intro
    h1 An Evil Hangs Over Your Town.
    p.
      A rash of organized crime has the citizens in a paranoid frenzy. Victims are being found dead in their beds every morning. It's up to the council, meeting in the mayor's lounge each day, to execute justice upon the mafia... but it seems the nefarious mobsters have infiltrated your ranks.
    p.
      Nobody knows who to trust. Your neighbor may claim to be the ever-important doctor, performing life-saving surgery after a botched mob hit, but perhaps he is actually the godfather himself, pulling the strings in this town of puppets!
    p.
      <span>The Lounge</span> is a guided narration game by Alexander Gregory, based on the classic social deduction game Mafia, and featuring mechanics similar to games such as Ultimate Werewolf. As one of over 80 unique roles, each with its own abilities and goals, you will need to use your deductive powers and charisma to convince others of your innocence (or hide your guilt!) and determine who amongst you is lying.
    a.more(href="#gameplay") Learn More

#content

  #gameplay
    h2 Gameplay is Based on Day and Night Rounds
    .left
      p Each night, players will perform secret actions to further their agendas, such as:
      ul
        li Calling a mob hit on a villager.
        li Holding a stakeout to confirm a suspicious player's guilt.
        li Performing a violent act of vigilante justice.
        li Paying off another player to sway the vote.
        li Baptising a neighbor into the Cult of Cthulhu.
        li Crafting a Voodoo doll to hex an innocent victim.
    .right
      p During the day all players debate freely with each other, making claims or sharing information at will, to determine who amongst them must be put on trial for murder. Tensions will mount as the council decides who is lying. The increasingly desperate town may then pass a death sentence by majority vote, and repeat this each day until the town has eradicated the evil that plagues them or has become torn apart by the deception and corruption.

  #card_samples
    .title
      svg
        linearGradient#textgrad(x1="0%" x2="0%" y1="0%" y2="100%")
          stop(stop-color="#ffbf6a" offset="50%")
          stop(stop-color="#D07700" offset="70%")
          stop(stop-color="#ffbf6a" offset="80%")
        text(y=32 fill="url(#textgrad)" stroke="#915700" stroke-width="0.5") Sample Cards
    img(src="http://www4.ncsu.edu/~wjbarlow/lounge/images/mafioso_card.png" alt="Mafioso")
    img(src="http://www4.ncsu.edu/~wjbarlow/lounge/images/citizen_card.png" alt="Citizen")
    img(src="http://www4.ncsu.edu/~wjbarlow/lounge/images/jester_card.png" alt="Jester")
    img(src="http://www4.ncsu.edu/~wjbarlow/lounge/images/officer_card.png" alt="Officer Blake")
    img(src="http://www4.ncsu.edu/~wjbarlow/lounge/images/cult_card.png" alt="Cult Leader")

    span.caption Each card clearly states your title, allegiance, special abilities, and goal, and features unique, easily recognizeable card art.

  #closing
    p.
      The Lounge is a unique game well-suited to party atmospheres. With simple rules, a mechanic that encourages discussion, and support for between 8 and 50 players, it is sure to be a hit at your next get-together. The base set comes with over 100 self-explanatory role cards belonging to a myriad of factions, so each game you play will be a new, hand-crafted experience with unique interactions!
    p.
      The Lounge truly stands out in a class of games that is only beginning to be explored. By providing unrivaled gameplay diversity and infinite replayability, Crimson Games delivers an experience like no other.
            
          
!
            
              $titles_font: 'Alegreya', 'Times', serif;
$body_font: 'Lora', 'Times', serif;

html, body, div, p, h1, h2, h3 {
  margin: 0;
  padding: 0;
}

html, body {
  background: #000;
  min-width: 900px;
  font-family: $body_font;
}

canvas { position: fixed; }

h1, h2, h3 {
  font-family: $titles_font;
}
h1 { letter-spacing: 0.07em; }

header {
  padding: 50px;
  height: 100vh;
  color: #FFECC3;
  background: url('http://www4.ncsu.edu/~wjbarlow/lounge/images/mafioso.png') no-repeat bottom right fixed, #000;
  background-size: contain;
  #intro {
    position: fixed;
    width: 600px;
    left: 50%;
    margin-left: -400px;
    h1 {
      margin-bottom: 15px;
      border-bottom: 2px solid #FFECC3;
      color: #D07700;
      text-shadow: 1px 1px 0px #FFECC3;
      font-size: 28px;
    }
    p {
      padding: 10px 0;
      text-align: justify;
      font-size: 17px;
      text-shadow: 0 0 2px #000;
      line-height: 25px;
      span {
        color: lighten(#FFECC3, 30%);
      }
    }
    a.more {
      font-family: $titles_font;
      display: inline-block;
      float: right;
      margin-top: 10px;
      margin-right: 2px;
      border-radius: 10px;
      width: 150px;
      height: 35px;
      background: linear-gradient(to top, #D07700, darken(#D07700, 10%));
      color: #FFECC3;
      line-height: 35px;
      vertical-align: middle;
      text-align: center;
      text-decoration: none;
      font-weight: bold;
      box-shadow: 2px 2px 0px #915700;
      transition: all 0.25s ease;
    }
    a.more:hover {
      background: linear-gradient(to top, #FFECC3, darken(#FFECC3, 10%));
      color: #D07700;
    }
    a.more:active {
      box-shadow: none;
      margin-left: 0px;
      margin-top: 12px;
    }
  }
}

#content {
  position: relative;
  background: #fff;
  box-shadow: 0 -50px 50px #000;
}

#gameplay {
  background-color: #770003;
  color: #FFECC3;
  padding: 50px;
  h2 {
    color: #FFECC3;
    font-size: 24px;
    text-shadow: 1px 1px 0px rgba(0,0,0,0.75);
    margin-bottom: 15px;
    border-bottom: 2px solid #D07700;
  }
}

#card_samples {
  margin-top: 50px;
}

#closing {
  padding: 50px;
}
            
          
!
            
              /*
 * http://www.colourlovers.com/palette/2014914/Morrocan_Spice
 * http://jsfiddle.net/jonnyc/Ujz4P/5/
 * The first three paragraphs will fill the first screenfull. This screen will heavily showcase the game's art -- it will have a more "cinematic" feel (like a movie poster rather than like a typical website). It will probably be a re-factored layout of the box art, with the big intimidating mafioso standing to the right and the text filling the left half. His cigar will occasionally glow (with a few sparks falling), illuminating his face and the face of the jester standing in the shadows behind him. I would like to have some fog rolling across the page in the background (this should be doable with some svg filters and textures). At the bottom some text will fade in that says "Read More..." with a downward arrow or something. Clicking this will automatically scroll you to the second screenful.
 * Everything else will more or less fit in the second screenful. This will be more fluid and less cinematic, with actual content boxes for the text, rather than wrapping text around images. At the top will be a sillouette of a town, it will have an animated skybox. When you scroll to this second screenful, and quick animation of a moon coming up will happen right away, while a left box over top of the town's sillouette simultaneously fades in. This is a description of the night round, it will have a bullet list of some of the actions that might happen at night. After that fades in, the moon will drop down and a sun will rise, illuminating the town. Then a box will fade in on the right side, briefly describing the day round.
 * After the day/night description but before the last little bit of text will be a wide-format image of the card samples fanned out. This will animate, and the animation will trigger soon after the day/night animation is done. They will fade in as a pile of cards and fan themselves out. Hovering over a particular one will bring it to the front and straighten its orientation for easy reading and inspection.
 * Haven't yet thought of anything especially creative for the last little bit of text.
 * Maybe it would also be appropriate to add a few quotes to this page.
 */

/* 
 * idea: a custom card generator webapp. photoshop the card template clean, find the fonts used, imitate the effects, and allow the text to be changed and the page printed. The picture would have to be "choose from one of these five pictures we already have".
*/

var cardsHaveSpread = false;

$('a.more').click(function() {
  if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
    var target = $(this.hash);
    target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
    if (target.length) {
      $('html,body').animate({
        scrollTop: target.offset().top
      }, 1000);
      return false;
    }
  }
});

$(window).on('scroll', function() {
  var y_scroll_pos = window.pageYOffset;
  var scroll_pos_test = 500;
  if(!cardsHaveSpread && y_scroll_pos > scroll_pos_test) {
    $('#card_samples').addClass('spread');
    $('#card_samples .caption').fadeIn(1000);
    cardsHaveSpread = true;
  }
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console