Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

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.

HTML

              
                
<!-- HEADER -->
<header id="mainHeader">
  <div class="container">
    <h1 class="mainTitle">Let Nature Inspire Us.</h1>
</header>
<!-- END/OF HEADER -->

<!-- MAIN CONTENT 'QUOTE MACHINE' -->
<div class="container">
  <p class="quote text-shadow">Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.
  </p>
  <p class="source text-shadow">- Buddha<span class="citation"></span>Pali Canon<span class="year">580bc</span></p>
  <!-- END/OF QUOTE BLOCK -->
  <hr class="hr-style">

  <!-- QUOTE BTN AND TWEET BTN -->
  <button id="getRandomQuote" class="btn btn-quote"><i class="fa fa-plus" aria-hidden="true"> </i>New Quote</button>
  <button id="tweetQuote" class="btn btn-twitter"><i class="fa fa-twitter" aria-hidden="true"> </i>Tweet This</button>
</div>
<!-- END/OF .container -->
<!-- END/OF MAIN CONTENT -->
              
            
!

CSS

              
                /* =================================
Base Styles
==================================== */

*, *:after, *:before {
    box-sizing: border-box;
}

body, html, .container {
    min-height: 100%;
}

body {
    margin: 0;
    padding: 0;
    background: linear-gradient(to left, rgba(90, 63, 55, .6), rgba(44, 119, 68, .6)), url(https://res.cloudinary.com/nic-alan/image/upload/v1475175954/forest-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    font-family: 'Josefin Slab', serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6, hgroup, ul, ol, dd, p, figure, pre, table, fieldset, hr, textarea {
    margin-bottom: 1rem;
}

a {
    display: inline-block;
    text-decoration: none;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

img, embed, object, video, iframe {
    max-width: 100%
}

label, .submit-btn {
    cursor: pointer;
}

label, .contact-info-fset input {
    display: block;
}

input[type="text"] {
    width: 100%;
    padding: 13px 13px 13px 20px;
    color: #2980b9;
    border: 2px solid rgba(0, 0, 0, 0);
    outline: none;
    background-color: #f7f7f7;
    font-size: 18px;
}

input[type="text"]:focus {
    border: 2px solid #2980b9;
    outline: none;
    background: #fff;
    box-shadow: none;
}

.el-block {
    display: block;
}

.test {
    border: 1px solid red;
}

.hide {
    display: none;
    width: 0;
    height: 0;
}

.width-100 {
    width: 100%;
}


/* =================================
Content Layout Styles
==================================== */


/* ---- CONTAINERS ---- */

.container {
    width: 95%;
    margin-right: auto;
    margin-left: auto;
}


#mainHeader {
    margin-top: 1.5em;
    padding: .5em 0;
    background: rgba(255,255,255,.2);
}



/* ---- CUSTOM .CLASSES ---- */

.text-shadow {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
}


/* ---- RANDOM QUOTE STYLES ---- */

.mainTitle {
    color: #132119;
    letter-spacing: 2px;
    font-family: 'Handlee', cursive;
    font-size: 1.75em;  /* 28px / 16px */
    font-weight: 400;
}



.quote {
    position: relative;
    width: 100%;
    margin-top: 1em; /* 32px / 32px */
    color: #fff;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 1);
    font-size: 2em; /* 32px / 16px */
    transition: all .25s ease;
}


.source {
    margin-right: 1em;
    text-align: right;
    letter-spacing: 0.05em;
    color: #70d69e;
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 1.3125rem; /* 21px / 16px */
    font-weight: 300;
    line-height: 1.1;
    transition: font-size .5s ease;
}

.citation {
    font-style: italic;
}

.citation:before {
    content: ", ";
    font-style: normal;
}

.year:before {
    content: ", ";
    font-style: normal;
}


/* ---- HR RULE ---- */

hr.hr-style {
    height: 0;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}


/* ---- Buttons ---- */

.btn {
    font-family: 'Open Sans', sans-serif;
    width: 48%;
    margin-top: 1em;
    padding: 16px 20px;
    cursor: pointer;
    transition: all .25s ease-out;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    outline: none;
    font-weight: 700;
    font-size: .625em; /* 10px / 16px */
}

.btn-quote {
    border: 4px solid #226fbe;
    background: rgba(37, 111, 190, .6);
}

.btn-twitter {
    border: 4px solid rgb(85, 172, 238);
    background: rgba(85, 172, 238, .5);
    float: right;
}

.fa-plus, .fa-twitter {
    font-size: 1.2em;
}

.btn-quote:hover, .btn-twitter:hover {
    margin-top: 8px;
}

.btn-quote:hover {
    background: rgb(37, 111, 190);
}

.btn-twitter:hover {
    background: rgba(85, 172, 238, 1);
}

.btn:active {
    margin-top: 1.2em;
    box-shadow: 0 0 5px #1fddff;
}


/* ---- ClearFix ---- */

.cf:before, .cf:after {
    display: table;
    content: " ";
}

.cf:after {
    clear: both;
}


/* ---- Media Queries ---- */

@media (min-width: 640px), (orientation: landscape) {
    /* ---- CONTAINERS ---- */
    .container {
      max-width: 600px;
      width: 60%;
    }
    #mainHeader {
      margin-top: 1.5em;
      padding: .15em 0;
    }

    /* ---- Header ---- */
    .mainTitle {
      font-size: 2.2em;
      letter-spacing: 2px;
    }

    /* ---- Quote ---- */

    .quote {
      margin-top: 4.5em;
      font-size: 2em; /* 32px / 16px */
    }

    .source {
      font-size: 1.32rem;
    }


    /* ---- BUTTONS ---- */
    .btn {
        width: initial;
        padding: 16px 40px;
    }

    .fa-plus, .fa-twitter {
        font-size: 1.2em;
    }
}

              
            
!

JS

              
                // RANDOM QUOTE MACHINE
// PROJECT 3: FRONT END CERTIFICATION @ FREECODECAMP.COM
// AUTHOR NICHOLAS D'AMICO @ NICHOLASDAMICO.NET
// SEPT 29, 2016

var quotes = [{
  quote: "Wilderness is not a luxury but necessity of the human spirit.",
  source: "Edward Abbey",
  citation: "Desert Solitaire",
  year: 1968,
  tags: ["inspirational", "nature", "wilderness"]
}, {
  quote: "We do not see nature with our eyes, but with our understandings and our hearts.",
  source: "William Hazlett",
  citation: "Thoughts on Taste, Edinburgh Magazine",
  year: 1818,
  tags: ["inspirational", "nature"]
}, {
  quote: "Afoot and lighthearted I take to the open road, healthy, free, the world before me. Henceforth, I ask not good fortune, I myself am good fortune. Henceforth, I whimper no more, postpone no more, need nothing.",
  source: "Walt Whitman",
  citation: "Songs for the Open Road",
  year: 1998,
  tags: ["inspirational", "nature", "adventure", "wise"]
}, {
  quote: 'I felt my lungs inflate with the onrush of scenery - air, mountains, trees, people. I thought, "this is what it is to be happy."',
  source: "Sylvia Plath",
  citation: "The Bell Jar",
  year: 1963,
  tags: ["nature", "outside", "inspirational"]
}, {
  quote: "Not just beautiful, though - the stars are like the trees in the forest, alive and breathing. And they're watching me.",
  source: "Haruki Murakami",
  citation: "Kafka on the Shore",
  year: 2002,
  tags: ["beautiful", "forest", "thoughful", "stars", "nature"]
}, {
  quote: "if we Surrendered to earth's intelligence we could rise up rooted, like trees.",
  source: "Rainer Maria Rilke",
  citation: "Rilke's Book of Hours",
  year: 1905,
  tags: ["thoughful", "stars", "nature"]
}, {
  quote: "Heaven is under our feet as well as over our heads.",
  source: "Henery David Thoreau",
  citation: "Walden",
  year: 1854,
  tags: ["wise", "nature", "thoughful"]
}, {
  quote: "I wonder if the snow loves the trees and fields, that it kisses them so gently? And then it covers them up snug, you know, with a white quilt; and perphaps it says 'Go to sleep, darlings, till the summer comes again.'",
  source: "Lewis Carroll",
  citation: "Alice's Adventures in Wonderland & Through the Looking Glass",
  year: 1865,
  tags: ["beautiful", "forest", "thoughful", "nature", "loving"]
}];

/////////////////////////////////////////////////////////
////////	VARIABLES GLOBAL SCOPE
/////////////////////////////////////////////////////////

var quote = document.querySelector(".quote");
var quoteSource = document.querySelector(".source");
var quoteBtn = document.querySelector("#getRandomQuote");
var tweetBtn = document.querySelector("#tweetQuote");

var viewedQuotes = [];
var currentQuote = quote.textContent;
var currentSource = quoteSource.textContent;

/////////////////////////////////////////////////////////
////////	EVENT LISTENERS
/////////////////////////////////////////////////////////

//	QUOTEBTN CALLS PRINTQUOTE() ON CLICK.
quoteBtn.addEventListener("click", printQuote);

//	TWEETBTN OPENS TWITTER AND INSERTS CURRENT QUOTE AND SOURCE.
tweetBtn.addEventListener("click", function() {
  window.open('https://twitter.com/intent/tweet?text=' + currentQuote + " -" + currentSource);
});

/////////////////////////////////////////////////////////
////////	FUNCTIONS
/////////////////////////////////////////////////////////

// GENERATES RANDOM NUMBER ACCEPTS ARGUMENT.
function randomNumber(highNum) {
  return Math.floor(Math.random() * highNum);
}

// SELECTS A RANDOM QUOTE FROM QUOTES OBJECT ARRAY.
function randomQuote() {
  // SELECTS QUOTE FROM quotes ARRAY.
  // SPLICES/ REMOVES FROM QUOTES ARRAY ONCE SELECTED.
  var spliceQuote = quotes.splice(randomNumber(quotes.length), 1)[0];

  // CHECKS IF QUOTES ARRAY IS EMPTY.
  if (quotes.length === 0) {
    // IF EMPTY, MOVES QUOTE OBJECTS BACK TO QUOTES ARRAY.
    // FROM THE VIEWEDQUOTES ARRAY
    quotes = viewedQuotes;
    // CLEAR ALL QUOTES FROM VIEWEDQUOTES.
    viewedQuotes = [];
  }
  // REMOVE AND PUSH QUOTE TO viewedQuote Array.
  viewedQuotes.push(spliceQuote);

  return spliceQuote;
}

// BUILDS HTML QUOTE BLOCK STRING
function buildQuote(quote) {
  // BUILDS QUOTE BLOCK STRING
  var message = "<p class='source'>- " + quote.source;
  message += "<span class='citation'>" + quote.citation + "</span>";
  message += "<span class='year'>" + quote.year + "</span></p>";
  // RETURN HTML QUOTE BLOCK STRING
  return message;
}

function printQuote() {
  // STORES SELECTED QUOTE.
  var selectedQuote = randomQuote();
  // TWEETS CURRENT QUOTE.
  currentQuote = selectedQuote.quote;
  // TWEETS CURRENT QUOTE SOURCE.
  currentSource = selectedQuote.source;
  // DISPLAYS SELECTED QUOTE ON PAGE.
  quote.textContent = selectedQuote.quote;
  // QUOTE SOURCE BUILDER
  // DISPLAYS SELECTED QUOTE INFO ON PAGE.  
  quoteSource.innerHTML = buildQuote(selectedQuote);
}
              
            
!
999px

Console