<!--
I was focusing on making the page responsive without using bootstrap.
Quotes Source: https://www.entrepreneur.com/article/240047
-->
<div class="background">
<div class="quotebox">
<div class="centerer">
<div class="quote">
<h2 class="quoteText"> Entrepreneurs need motivation from time to time. Click on the New Quote button to generate a new Quote.</h2>
<em class="quoteAuthor"> <!-- Author name goes here --> </em>
</div>
<button class="tweet">
<p>Tweet</p>
</button>
<button class="newQuote">
<p>New Quote</p>
</button>
</div>
</div>
</div>
*{
margin:0;
border:0;
padding:0;
}
.quotebox {
position: relative;
border-radius: 5px;
background-color: black;
height: 300px;
width: 80%;
max-width: 700px;
margin: 10% auto;
}
.centerer {
position: absolute;
background-color:black;
height: 230px;
width: 85%;
margin: 30px 7.5%;
}
.quote {
position: absolute;
background-color: black;
height: 160px;
width: 100%;
text-align: center;
color: white;
}
.tweet {
position: absolute;
border-radius: 5px;
background-color:black;
height: 50px;
width: 40%;
bottom: 0px;
left: 0px;
color: white;
border-width: 3px;
border-color: white;
border-style: solid;
}
.newQuote{
position: absolute;
border-radius: 5px;
background-color:black;
height: 50px;
width: 40%;
bottom: 0px;
right: 0px;
color: white;
border-width: 3px;
border-color: white;
border-style: solid;
}
$(document).ready(function(){
runapp();
})
function runapp() {
// Changes the quote displayed when New Quote button is clicked.
$(".newQuote").on("click", function(){
var randomKey = Object.keys(quoteDic)[Math.floor(Math.random()*Object.keys(quoteDic).length)];
$(".quoteText").text(randomKey);
$(".quoteAuthor").text("- " + quoteDic[randomKey]);
})
// Brings up Twitter with the current quote
$(".tweet").on("click", function(){
var twitterURL = "https://twitter.com/intent/tweet?text=";
var extensionURL = $(".quoteText").text() + " " + $(".quoteAuthor").text();
window.open(twitterURL + extensionURL);
})
}
// Dictionary of all the quotes
var quoteDic = {
"The critical ingredient is getting off your butt and doing something. It’s as simple as that. A lot of people have ideas, but there are few who decide to do something about them now. Not tomorrow. Not next week. But today. The true entrepreneur is a doer, not a dreamer.":"Nolan Bushnell",
"Do. Or do not. There is no try":"Yoda, Jedi Master",
"To any entrepreneur: if you want to do it, do it now. If you don’t, you’re going to regret it.":"Catherine Cook, co-founder of MyYearbook",
"It’s not about ideas. It’s about making ideas happen.":"Scott Belsky, co-founder of Behance",
"I’ve missed more than 9,000 shots in my career. I’ve lost almost 300 games. 26 times I’ve been trusted to take the game's winning shot and missed. I’ve failed over and over and over again in my life and that's why I succeed.":"Michael Jordan, NBA Hall of Famer",
"There’s nothing wrong with staying small. You can do big things with a small team.":"Jason Fried, founder of 37signal",
"Ideas are easy. Implementation is hard":"Guy Kawasaki, founder of AllTop",
"If you just work on stuff that you like and you’re passionate about, you don’t have to have a master plan with how things will play out.":"Mark Zuckerberg, founder of Facebook.",
"The best time to plant a tree was 20 years ago. The second best time is now.":"Chinese proverb",
"There’s lots of bad reasons to start a company. But there’s only one good, legitimate reason, and I think you know what it is: it’s to change the world.":"Phil Libin, CEO of Evernote",
"When everything seems to be going against you, remember that the airplane takes off against the wind, not with it.":"Henry Ford, founder of Ford Motor Company",
"Always deliver more than expected":"Larry Page, co-founder of Google",
"Twenty years from now, you will be more disappointed by the things that you didn't do than by the ones you did do, so throw off the bowlines, sail away from safe harbor, catch the trade winds in your sails. Explore, Dream, Discover.":"Mark Twain, author",
"You shouldn’t focus on why you can’t do something, which is what most people do. You should focus on why perhaps you can, and be one of the exceptions.":"Steve Case, co-founder of AOL",
"Risk more than others think is safe. Dream more than others think is practical.":"Howard Schultz, CEO of Starbucks",
"I’m convinced that about half of what separates the successful entrepreneurs from the non-successful ones is pure perseverance.":"Steve Jobs, co-founder and CEO of Apple",
"Be undeniably good. No marketing effort or social media buzzword can be a substitute for that.":"Anthony Volodkin, founder of HypeMachine.",
"The way to get started is to quit talking and begin doing.":"Walt Disney, co-founder of the Walt Disney Company",
"Do not be embarrassed by your failures, learn from them and start again.":"Richard Branson, founder of the Virgin Group",
"Timing, perseverance, and ten years of trying will eventually make you look like an overnight success.":"Biz Stone, co-founder of Twitter",
"When you cease to dream you cease to live.":"Malcolm Forbes, chairman and editor in chief of Forbes Magazine.",
"Don’t worry about funding if you don’t need it. Today it’s cheaper to start a business than ever.":"Noah Everett, founder Twitpic",
"Your most unhappy customers are your greatest source of learning.":"Bill Gates, co-founder of Microsoft",
"Entrepreneurship is neither a science nor an art. It is a practice.":"Peter Drucker, management consultant, educator, and author",
"In the modern world of business, it is useless to be a creative, original thinker unless you can also sell what you create.":"David Ogilvy, co-founder of Ogilvy & Mather",
"No one is going to know or care about your failures, and neither should you. All you have to do is learn from them and those around you because all that matters in business is that you get it right once. Then everyone can tell you how lucky you are":"Chairman of AXS TV, Owner of Landmark Theaters",
"If you’re not embarrassed by the first version of your product, you’ve launched too late.":"Reid Hoffman, co-founder of LinkedIn",
"Don’t try to be original, just try to be good":"Paul Rand, graphic designer",
"Success is how high you bounce after you hit bottom.":"General George Patton"
};
This Pen doesn't use any external CSS resources.