<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<h1>Wilde's Quotes</h1>
<p>Everyone loves Oscar Wilde!! --- Lian Liu</p>
<div class="div">
<button id="button">Get A Quote</button>
</div>
<div id="result">
<div class="thumbnail">
<img src="https://pbs.twimg.com/profile_images/44488162/oscar-small-sq_400x400.jpg" alt="" />
</div>
<blockquote>
<p id="quote"></p>
</blockquote>
<div class="attribution">
<p id="author">Oscar Wilde</p>
<p id="work"></p>
</div>
</div>
<div class="social">
<a href="https://twitter.com/intent/tweet?button_hashtag=QuotesOfWilde" class="twitter-hashtag-button" data-size="large" id="twitter">Tweet #QuotesOfWilde</a>
</div>
<script>
$(function() {
generate();
$("#button").bind("click", function() {
generate();
});
});
var quotes = ["We are all in the gutter, but some of us are looking at the stars.@Lady Windermere's fan", "The truth is rarely pure and never simple.@The Importance of Being Earnest", "Experience is merely the name men gave to their mistakes.@The Picture of Dorian Gray", "I am so clever that sometimes I don't understand a single word of what I am saying.@The Happy Prince and Other Stories", "Yes: I am a dreamer. For a dreamer is one who can only find his way by moonlight, and his punishment is that he sees the dawn before the rest of the world.@The Critic as Artist", "Women are meant to be loved, not to be understood.@Lord Arthur Savile's Crime and Other Stories", "The very essence of romance is uncertainty.@The Importance of Being Earnest", "If you want to tell people the truth, make them laugh, otherwise they'll kill you.@The Nightingale and Rose", "I don't want to be at the mercy of my emotions. I want to use them, to enjoy them, and to dominate them.@The Picture of Dorian Gray", "All women become like their mothers. That is their tragedy. No man does, and that is his.@The Importance of Being Earnest", "It is absurd to divide people into good and bad. People are either charming or tedious.@Lady Windermere's Fan", "The only way to get rid of temptation is to yield to it.@The Picture of Dorian Gray", "To love oneself is the beginning of a lifelong romance.@An Ideal Husband", "Nowadays people know the price of everything and the value of nothing.@The Picture of Dorian Gray", "There is only one thing in the world worse than being talked about, and that is not being talked about.@The Picture of Dorian Gray", "Life is far too important a thing ever to talk seriously about.@Lady Windermere's Fan","Yes: I am a dreamer. For a dreamer is one who can only find his way by moonlight, and his punishment is that he sees the dawn before the rest of the world.@The Critic as Artist", "There is only one thing in the world worse than being talked about, and that is not being talked about.@The Picture of Dorian Gray", "When one is in love, one always begins by deceiving one's self, and one always ends by deceiving others. That is what the world calls a romance.@The Picture of Dorian Gray", "I like men who have a future and women who have a past@The Picture of Dorian Gray"];
function generate() {
var num = Math.round(Math.random() * (quotes.length - 1));
var arr = quotes[num].split("@");
var quote = arr[0];
var work = arr[1];
$("#quote").animate({
left: "250px",
opacity: 0
}, "slow", "easeInOutCubic", function(){
$("#quote").animate({
left: 0,
opacity: 1
},"slow").html(quote);
});
$("#work").animate({
left: "250px",
opacity: 0
}, "slow", function(){
$("#work").animate({
left: 0,
opacity: 1
},"slow").html("From " + work);
});
tweet();
}
function tweet() {
var txt = $("#quote").html() + " " + $("#work").html();
var link = "https://twitter.com/intent/tweet?button_hashtag=QuotesOfWilde" + "&text=" + txt;
$("#twitter").attr("href", link);
}
</script>
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Cedarville+Cursive);
h1,
p,
.div,
#result {
margin: 0.8em auto;
color: #524f4e;
font-family: 'Open Sans', sans-serif;
}
body {
background-color: rgba(252, 237, 202, 0.4);
text-align: center;
}
h1 {
margin-bottom: 0;
}
p,
#button {
font-weight: bold;
}
#button {
font-size: 0.8em;
padding: 5px;
border-radius: 5px;
background-color: #fff;
border: none;
outline: none;
}
#button:hover {
color: #fff;
background-color: #1B95E0;
}
#result {
margin: 1em auto;
padding: 20px;
height: auto;
width: 500px;
position: relative;
}
#result p,
#result blockquote {
margin: 0;
padding: 0;
}
#result blockquote {
position: relative;
background: #fff;
padding: 30px;
border: 0;
border-radius: 5px;
box-shadow:
inset 0 2px 0 rgba(252, 237, 202, 0.1),
-5px -4px 25px rgba(0, 0, 0, 0.3);
}
/* http://www.cssarrowplease.com/ */
#result blockquote:after,
#result blockquote:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
#result blockquote:after {
border-top-color: #ffffff;
border-width: 10px;
left: 65%;
margin-left: -10px;
}
#result blockquote:before {
border-top-color: rgba(0,0,0,0.01);
border-width: 11px;
left: 65%;
margin-left: -11px;
}
#quote,
#author {
padding: 0;
margin: 0;
font-family: 'Cedarville Cursive', cursive;
}
#result blockquote p {
line-height: 2.5em;
text-align: left;
font-style: italic;
font-size: 1.1em;
font-weight: 600;
text-indent: 100px;
position: relative;
}
#result blockquote p:before{
content: '\201C';
font-family: serif;
font-style: normal;
font-weight: 700;
position: absolute;
font-size: 10em;
top: 0px;
left: -105px;
color: rgba(0, 0, 0, 0.6);
text-shadow: 7px 14px 10px rgba(0, 0, 0, 0.1);
}
#result .attribution {
text-align: right;
padding: 20px 100px 20px 20px;
position: relative;
}
#result .thumbnail {
display: block;
width: 70px;
height: 70px;
border: 5px solid #fff;
border-radius: 50%;
padding: 0;
overflow: hidden;
position: absolute;
right: 10px;
bottom: 5px;
box-shadow:
inset 1px 1px 4px rgba(0,0,0,0.5),
0 2px 3px rgba(0,0,0,0.6);
}
#result .thumbnail img {
height: 100%;
border: 0 solid #fff;
border-radius: 50%;
}
p#author,
p#work {
font-weight: 700;
font-size: 18px;
text-shadow: 0 1px 1px rgba(255,255,255,0.7);
}
p#work {
font-size: 1em;
}
