quotes

index.jade

html
  head
    meta(charset="utf-8")
    link(href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet")
  body
    .container-fluid
      .row
        header
          nav
            .col-sm-3
              a(href=""): .glyphicon.glyphicon-plus
            .col-sm-3
              a(href=""):  .glyphicon.glyphicon-qrcode
            .col-sm-3
              a(href=""): .glyphicon.glyphicon-tags
            .col-sm-3
              a(href=""): .glyphicon.glyphicon-remove
      .row
        article
          .col-sm-12
            p#quote Tradition is not the worship of ashes, but the preservation of fire.<br>― Gustav Mahler
      footer
        .row
          .col-sm-4
            a(href="", onclick='changeQuote()'): .glyphicon.glyphicon-chevron-left
          .col-sm-4
            a(href="", onclick='changeQuote()'): .glyphicon.glyphicon-heart
          .col-sm-4
            a(href="", onclick='changeQuote()'): .glyphicon.glyphicon-chevron-right
        .row
           .col-sm-12
             p Made by ME, check me out: <a href="https://twitter.com/defm03">@defm03</a>, <a href="https://github.com/kh0p">@kh0p</a>

quotes.markdown

quotes

random quote of a day

A Pen by 楊文里 on CodePen.

License.

script.js

var quotes = [
  "Tradition is not the worship of ashes, but the preservation of fire.<br>― Gustav Mahler",
  "Modern life is so thin and shallow and fake. I look forward to when developers go bankrupt, Japan gets poorer and wild grasses take over.<br>― Hayao Miyazaki",
  "Do everything by hand, even when using the computer.”<br>― Hayao Miyazaki",
  "Is someone different at age 18 or 60? I believe one stays the same.<br>― Hayao Miyazaki",
]

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function changeQuote(value) {
  var quote = getRandomInt(0, quotes.length-1)
  document.getElementById('quote').innerHTML = quotes[quote];
}

style.sass

*
  font-family: 'Slabo 27px', serif

a
  color: #CFF09E

body
  background-color: #0B486B

header
  nav
    .col-sm-3:nth-child(odd)
      align-items: center
      background-color: #A8DBA8
      color: #CFF09E
      display: flex
      height: 3em
      justify-content: center
      text-align: center
      font-size: 3em
    .col-sm-3:nth-child(even)
      align-items: center
      background-color: #79BD9A
      color: #CFF09E
      display: flex
      height: 3em
      justify-content: center
      text-align: center
      font-size: 3em
      
article
  .col-sm-12
    text-align: center
    background-color: #79BD9A
    font-size: 42px
    height: 10em
    position: relative
    p 
      margin: 0
      position: absolute
      top: 50%
      left: 50%
      margin-right: -50%
      transform: translate(-50%, -50%)

footer
  .col-sm-4:nth-child(odd)
    align-items: center
    background-color: #A8DBA8
    color: #CFF09E
    display: flex
    height: 3em
    justify-content: center
    text-align: center
    font-size: 3em
  .col-sm-4:nth-child(even)
    align-items: center
    background-color: #79BD9A
    color: #CFF09E
    display: flex
    height: 3em
    justify-content: center
    text-align: center
    font-size: 3em
  .col-sm-12
    text-align: center
    background-color: #A8DBA8
    font-size: 2em
    height: 3em
    position: relative
    p 
      #quote
        
      margin: 0
      position: absolute
      top: 50%
      left: 50%
      margin-right: -50%
      transform: translate(-50%, -50%)

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />