cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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.

Quick-add: + add another resource

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.

Quick-add: + add another resource

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 lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Random Cyberpunk Quote Generator</title>
  
  <link href='https://fonts.googleapis.com/css?family=VT323' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</head>
<body>
  
<div class="container">

  <div class="wrap-top">
    <div id="quote"></div>
    <div id="author-source" class="clearfix">
      <div id="author"></div>
      <div id="source"></div>
    </div>
  </div>
  
  <div class="wrap-mid">
    <i class="tweet fa fa-twitter" aria-hidden="true"></i>
    <button id="new-quote">New Quote</button>
  </div>
  
  <div class="wrap-btm">
    <p>random cyberpunk quote generator by <a href="http://kennyjeurissen.nl">kenny jeurissen</a></p>
  </div>
  
</div>
  
</body>
</html>
            
          
!
            
              * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

body {
  background: linear-gradient(183deg, rgba(141,35,46,0.5) 1%, rgba(141,35,46,0) 60%), 
              linear-gradient(250deg, rgba(141,35,46,0) 21%, rgba(141,35,46,0.2) 20%, rgba(11,35,47,0.2) 50%),
              linear-gradient(250deg, rgba(141,35,46,0) 23%, rgba(141,35,46,0.2) 20%, rgba(11,35,47,0.2) 50%),
              linear-gradient(250deg, rgba(141,35,46,0) 25%, rgba(141,35,46,0.2) 20%, rgba(11,35,47,0.2) 50%),
              repeating-linear-gradient(179deg, rgba(255,255,255,0.1), rgba(255,255,255,0.1) 3px, rgba(0,0,0,0.1) 3px, rgba(0,0,0,0.1) 5px);;
 
  background-color: #0b232f;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

::selection {
    color: #ff1493;
    background: #9932cc;
}

.container {
  max-width: 650px;
  margin: 0 auto;
  padding: 0 40px;
  font-family: 'VT323';
  font-size: 1.3em;
  line-height: 1.3;
}

div, p {
  color: #fff;
  text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;
  text-decoration: none;
	outline: 0 none;
}

.wrap-top {
  position: relative;
  margin-top: 20%;
  padding-bottom: 100px;
  height: 150px;
  
  @media all and (max-width: 620px) {
    height: 275px;
  }
  
   @media all and (max-width: 350px) {
    height: auto;
  }
  
  #quote {
    width: 100%;
    padding-bottom: 30px;
    position: relative;
    
    &:before {
      content: '"';
      font-size: 5em;
      position: absolute;
      left: -50px;
      top: -35px;
    }
  }
  
  
  #author-source {
    float: right;
    
    #author, 
    #source {
      font-size: 0.85em;
    }
  
    #author {
      float: left;
      padding-right: 5px;

      &:before {
        content: '- ';
      }

      &:after {
        content: ',';
      }
    }

    #source {
      font-style: italic;
      float: left;
    }
  }
}

.wrap-mid {
  padding: 25px 0 100px 0;
  
  .tweet {
    cursoir: pointer;
    transition: all 0.1s ease-in-out;
    &:hover {
      text-shadow: 0 0 13px #fff;
      cursoir: hand;
    }
  }

  button {
    border-radius: 3px;
    outline: 0;
    padding: 5px 10px;
    box-shadow: 0 0 25px #fff;
    transition: all 0.5s;
    
    &:hover {
      box-shadow: 0 0 30px #fff;
    }
  }
  
  #new-quote {
    float: right;
  }
}

.wrap-btm {
  padding: 20% 0 10% 0;
  margin: 0 auto;
  text-align: center;
  font-family: Open Sans, Helvetica, sans-serif;
 
  p, a{
    text-transform: uppercase;
    font-size: 0.6em;
    text-shadow: none;
    color: #ccc;
    opacity: 0.4;
  }
  
   a {
    color: #ccc;
    font-size: 1.05em;
     opacity: 1;
  }
}





            
          
!
            
              /*****
DONE: Add author to the tweet
TODO: Fix the 140 character tweet limit
TODO: Random number/quote on click shouldn't sometimes be the same as the previous one, making the quote form look unresponsive/broken
TODO: Rotating phone from landscape to portrait causes height issues
TODO: Give users the ability to add quotes and/or upvote or rate their favorite quotes -- could be abused though.
TODO: More quotes!
TODO: Add more cyberpunk-y effects and animations
*****/

$(document).ready(function() {
  var quoteList = [
    { author: "Jess C. Scott", source: "The Darker Side of Life", quote: "The brightest light casts the darkest shadow." },
    { author: "Neal Stephenson", source: "Snow Crash", quote: "To condense fact from the vapor of nuance." },
    { author: "William Gibson", source: "Neuromancer", quote: "Falling burned and blinded through a Siberian sky." },
    { author: "Anna L. Davis", source: "Open Source", quote: "I’d been an outcast my entire life. Growing up with technophobe parents in the dawn of a Cyborg Age did that to a person." },
    { author: "Eric Schmidth", source: "Dystopian Times", quote: "The Internet is the first thing that humanity has built that humanity doesn’t understand, the largest experiment in anarchy that we have ever had." },
    { author: "Philip K. Dick", source: "Do Androids Dream of Electric Sheep?", quote: "You will be required to do wrong no matter where you go. It is the basic condition of life, to be required to violate your own identity." },
    { author: "William Gibson", source: "Johnny Mnemonic", quote: "It’s impossible to move, to live, to operate at any level without leaving traces, bits, seemingly meaningless fragments of personal information. Fragments that can be retrieved, amplified…" },
    { author: "Lain Iwakura", source: "Serial Experiments: Lain", quote: "No matter where you go, everyone’s connected." },
    { author: "William Gibson", source: "Zero History", quote: "When you want to know how things really work, study them when they’re coming apart." },
    { author: "Jeff Somers", source: "The Electric Church", quote: "Let me show you an endless trail of sunsets." },
    { author: "Roy Batty", source: "Blade Runner", quote: "I've seen things you people wouldn't believe. Attack ships on fire off the shoulder of Orion. I watched c-beams glitter in the dark near the Tannhäuser Gate. All those moments will be lost in time, like tears in rain. Time to die." },
    { author: "Neal Stephenson", source: "Snow Crash", quote: "See, the world is full of things more powerful than us. But if you know how to catch a ride, you can go places." },
    { author: "Neal Stephenson", source: "Snow Crash", quote: "Jack the sound barrier. Bring the noise." },
    { author: "Neal Stephenson", source: "Snow Crash", quote: "Well, all information looks like noise until you break the code." }
  ];

// var quoteRandomize = '';
// var quoteMain = '';
// var quoteAuthor = '';
// var quoteSource = '';
  
  function quoteGenerate() {  
    var quoteRandomize = Math.floor(Math.random() * quoteList.length);
    var quoteMain = quoteList[quoteRandomize].quote;
    var quoteAuthor = quoteList[quoteRandomize].author;
    var quoteSource = quoteList[quoteRandomize].source;
    
    $("#quote").text(quoteMain);
    $("#author").text(quoteAuthor);
    $("#source").text(quoteSource);
  };
  
  /**** Quote Limit Test ****/
  // function quoteTweet() {   
  //   if((quoteMain + quoteAuthor).length > 140 ){
  //     alert("no");
  //   } else {
  //     quoteTweet();
  //   }
  //   window.open("https://twitter.com/home/?status=" + "\"" + $("#quote").text() + "\"" + " - " + $("#author").text(), '_blank');
  // };
  
  $(".tweet").on("click", function() {
    window.open("https://twitter.com/home/?status=" + "\"" + $("#quote").text() + "\"" + " - " + $("#author").text(), '_blank');
    });
  
  // $(".tweet").on("click", function() {
  //  quoteTweet();
  // });

  $("#new-quote").on("click", function() {
    quoteGenerate();
  });
  // quoteTweet();
  quoteGenerate();
});
            
          
!
999px
Loading ..................

Console