index.jade

//output:output/index.html
doctype html
html
  head
    link(href='https://fonts.googleapis.com/css?family=Lobster', rel='stylesheet', type='text/css')
    link(href='https://fonts.googleapis.com/css?family=Sigmar+One', rel='stylesheet', type='text/css')
    link(href='https://fonts.googleapis.com/css?family=Montserrat', rel='stylesheet', type='text/css')
    link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css")
    link(rel="stylesheet", href="main.css")
  body
    div(class="container")
      div(class="row")
        div(class="col-md-2" border="1")
        div(class="col-md-8")
          div(class="row")
            center
              h1 No Context
              h3 Beware The Ellipsis...
              p There is nothing more infuriating that being quoted out of context. So, Next time you see these three litte dots remember, the speaker's words may be being taken out of context.
              div(id="button")
                button(type="button" class="btn") New Quote
              div(id="disp")
                
                p(id="quote") "... remember not the words..."
                p(id="speaker") -Martin Luther King Jr. (Sort of)
              div(id="tweet")
                a(id="link" class="btn" target="_blank" href="http://twitter.com/home?status=Put your message here and include your username ala @marketingV2") Tweet this
  script(src="https://code.jquery.com/jquery-2.2.3.min.js")
  script(src="script.js", type="text/javascript")