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 CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

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">
  <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'>
<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 class="wrap-mid">
    <i class="tweet fa fa-twitter" aria-hidden="true"></i>
    <button id="new-quote">New Quote</button>
  <div class="wrap-btm">
    <p>random cyberpunk quote generator by <a href="http://kennyjeurissen.nl">kenny jeurissen</a></p>
              * {
  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;
    #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 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() {
  // quoteTweet();

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.


Loading ..................