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.

            
              <body>
    <nav class="menu">
  <a href="#">LOOK</a><a href="#">STORE</a><a href="#">MUSIC</a><a href="#">VIDEOS</a><a href="#">MAIL</a>  
</nav>
<div id="quoteContainer"></div>

<!-- <a href="#" id="refresh" value="#" onClick="history.go();"><img src = "https://s21.postimg.org/5disd5co7/reversepill.gif" width="10%" height="10%"></a> -->
  

</body>
            
          
!
            
              #quoteContainer div {
  padding-top: 25%;
  padding-bottom: 0%;
  text-align: center;
  color: #ffffff;
  font-weight: bold;
  font-size: xx-large;
  font-family: 'Arial Bold', sans-serif;
}

#refresh {
  text-align: center;
  padding-left: 45%;
}

.menu {
  display: flex;
  padding-left: 10%;
  padding-right: 10%;
  padding-top:2%;
	bottom:0;
  @media (max-width: 40em) {
    flex-direction: column;
  }
  a {
    flex-grow: 3;
    color: white;
    font-family: 'Arial Bold', sans-serif;
    font-weight: LIGHT;
    font-size: large;
    text-decoration: none;
    text-align: center;
  }
}
            
          
!
            
              var quotes = ['MY FACE SAYS IT ALL', 
              'I HOPE EVERYTHING WORKS OUT ',
              'I REALLY SUCK AT THIS INTERNET SHIT', 
              'OKAY I’M LOST',
              'I HATE LEAVING VOICEMAILS', 
              'YOU’RE SO FUCKING ANNOYING', 
              'I CAN’T FUCKING STAND YOU', 
              'MAYBE THIS JUST ISN’T FOR ME',
              'I DON’T KNOW ANYMORE', 
              'FUCK MAN', 
              'LOVE IS SIMPLE BUT WE FUCK IT UP WITH EXPECTATIONS', 
              'FUCK DOUBTS',
              'EVERYTHING IS GOING TO BE OKAY',
              'TAKE YOUR BULLSHIT SOMEWHERE ELSE PLEASE',
              'FEELING OVERWHELMED',
              'KISS MY ASS',
              'I LOVE YOU SO MUCH',
              'THERE YOU GO FUCKING UP MY DAY AGAIN',
              'WHAT DO YOU WANT?',
              'I WANNA SCREAM RIGHT NOW',
              'OKAY, I FINISHED THE BOTTLE',
              'LIFE IS STRANGE',
              'WHERE DID MY HEART GO?',
              "I'M NOT PERFECT",
              'I HATE THINKING ABOUT THE INTERNET',
              'AM I REALLY HAPPY?',
              'FUCK KYLIE JENNER',
              'I LOVE KYLIE JENNER',
              'FUCK I’M BROKE',
              'I CAN’T FEEL ANYTHING',
              'I HATE THE INTERNET',
              'I’M NEVER EXCITED',
              'WILL I EVER BE HAPPY?',
              'I FEEL LOST SOMETIMES',
              'STILL TRYING TO FIGURE IT OUT',
              'DAMN, I KEEP FUCKING UP',
              'BUTT STUFF',
              'BITCH!',
              'I HAVEN’T BEEN CHASING MY LIQOUR LATELY',
              'THAT BOTTLE ON TOP OF THE FRIDGE IS ALMOST OUT',
              'I HAVEN’T SEEN A BARBER IN MONTHS',
              'NOBODY WANTS TO LOSE',
              'EVERYTHING IS CHANGING',
              'FUCK, THIS IS A LOT',
              'I LOVE SEX',
              'NOTHING EVER GOES AS PLANNED',
              'MORE SEX',
              'FEELING EMPTY INSIDE',
              'WHEN COFFEE DOESN’T WORK',
              'LOSING MY PATIENCE RIGHT NOW',
              'RACISM IS A LIE',
              'STRESS IS TOO MUCH',
              'MY HAIR IS STILL GROWING',
              'SOME HEAD WOULD BE NICE',
              'DRUGS CAN BE GOOD, IF USED RESPONSIBLY',
              'FUCK RENT',
              "I'M IN PAIN BUT, LIFE IS BEAUTIFUL",
              "MOM, DON'T WORRY",
              "I JUST WANNA FUCKING WIN",
              "I DON'T FUCKING CARE",
              "THE INTERNET'S A FUCKING JOKE",
              "I HATE DOUBT",
              "DOUBT KILLS, SO STOP DOING IT"
             ];


function getQuotes() {
    var player1 = new Array();
    quotes.sort(function() {
        return Math.random() - .50
    });
    var quoteContainer= document.getElementById("quoteContainer");
    for (var i = 1; i <= 1; i++) {
        player1.push(quotes[i]);
        var div = document.createElement("div");
        div.innerHTML = (quotes[i]);
        quoteContainer.appendChild(div);
    }
}

getQuotes();

var colors = ['#feafbc', '#f4b3dc','#c19bdf','#70d0ec','#9ae7d9'];

var changeBackground = function() {
    document.body.style.background = colors[Math.floor(Math.random()*colors.length)];
};

changeBackground();

function refresh() {
  history.go();
}

            
          
!
999px
Loading ..................

Console