cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

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.

Quick-add: + add another resource

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.

Quick-add: + add another resource

Code Indentation

     

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.

            
              
	<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
	<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

<div class="pageOne">
	<div class="container">
		
	<div class="page-header text-center">
		<h1 class="magicheader" style="font-family: Lobster" id="hdhd">Magic Quote Book</h1>
	</div>
		
		<h1 class="about text-center">I was lucky enough to find this magic item on my adventure! <br>
While visiting bazaar I saw this book next to Laruaa the vendor and bought it for just 1 gold! It appears, judging by the writing, that this book is written by elves!<br>It sure got magic feel to it...</h1>
		<div class="container-fluid">
			<p class="quotes text-center"><br>
				<span class="mainQuote"></span><br><br>
				<span class="quoteAuthor"></span><br><br>
				</p>
				<!--Twitter Button-->
			<div class="text-center">
			<a href="" target="_blank" class="tweet">
				<img src="https://2.bp.blogspot.com/--Y4Yfby9lAM/UccBt9U1NuI/AAAAAAAAAHw/VXlcG4a6-DE/s300/t_logo-a.png"/>
			</a>
		</div>
				<!--Twitter Button-->
				
			
		
		
		<div class="text-center">
		<button type="button" class="btn btn-success" id="btnn">Another Quote!</button>
		</div>
			
			<div class="text-center">
			<a href="www.olegito.com" target="_blank" class="glyphicon glyphicon-home home"><br>olegito.com</a>
			</div>
		
		<div class="row">
			<div class="col-lg-12">
		<img src="http://www.olegito.com/images/cateyes.jpg" class="cateyes hidden-xs hidden-sm hidden-md"/>
			</div>
		</div>
		
		<div class="row">
			<div class="col-xs-2">
		<img src="http://www.olegito.com/images/cuteelf.jpg" class="cuteelf img-responsive"/>
				</div>
		</div>
			
	
	</div><!--container-->
	
</div><!--pageOne-->


<!---->
            
          
!
            
              body {
	font-family: Open Sans;
	background:url("http://www.olegito.com/images/magicbookbg.jpg") no-repeat bottom right fixed;
  background-color: black;
  background-size: ;
  margin:0;
  padding: 10;
}

.magicheader {
	font-size: 3.7em;
	color: 	#FFFFFF;
	text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;  
}

.about {
	word-spacing: 3px;
	color: 	#FFFFFF;
	font-size: 2.1em;
	font-weight: bold;
  	text-shadow:
    -1px -1px 5px #000,
    6px -1px 5px #000,
    -1px 1px 0 #000,
    1px 1px 0 #000; 
}

.quotes {
	margin: 40px;
	background-color: white;
	font-size:1.8em;
  	color: #505050;
  	border: 1px solid black;
	border-radius: 12px;
  	box-shadow: 4px 4px 1px rgba(0,0,0,0.6);

}


.btn {
	margin-top: 40px;
	border: 1.5px solid black;
}

.home {
	text-decoration: none;
	margin-top: 40px;
	padding: 6px;
	border-radius: 10%;
	background-color: white;
	border: 1px solid black;
}
.home:hover {
	text-decoration: none;
	background-color: #e6e6e6;
}


.cateyes {
	width: 200px;
	
}

.cuteelf {
	position: 
}


            
          
!
            
              $(".cateyes").hide();
$(".cuteelf").hide();
$( document ).ready(function() {
	var lastOne=""; //checks for last quote
	quotebag(); //runs quote function
	
	//create array of quotes
	function quotebag(){
    var quotes = ["Get your facts first, then you can distort them as you please.@Unknown","Never run away from danger! It cant be that bad.. @Úhaelil The Unwise","Home is behind, the world ahead.@Elwel The Adventurer","A day without sunshine is like, you know, night.@Goeoldir The Young","From the ashes a fire shall be woken.@Laerguldir The Sorcerer","During the day i don't believe in ghosts but at night, I'm a little more open-minded...@Bordir The Afraid","Do you ever feel like someone is watching you?@Fuithor The Dark","Happiness is a dream, misfortune is real.@Brethilben The unfortunate","Maybe you should not keep reading through this book...@Mallos The Mysterious","Never cry for that person who doesn't know the value of your tears@Naud The Broken Heart","We are all here on earth to help others; what on earth the others are here for I don't know.@Echaben The Wise","To the world you may be one person but to one person you may be the world!@Langien The Cute"
];
	//takes random quote from array
    quote = quotes[Math.floor(Math.random() * quotes.length)];
	finalQuote = quote.split("@"); //splits author and quote
	$(".mainQuote").text(finalQuote[0]); //quote
	$(".quoteAuthor").text(finalQuote[1]); //author
		
		//set twitter share text
	$(".tweet").attr("href", "https://twitter.com/intent/tweet/?text=" + finalQuote[0] + " --" +finalQuote[1]);
		
		
	};
	//clicking ANOTHER ONE!
	$(".btn").click(function(){
		$(".twitter-share-button").empty();
		$(".mainQuote").finish(); //finish running animations
		$(".mainQuote").show(); //shows quote if hidden
		$(".cateyes").fadeOut(2000);
		$(".cuteelf").fadeOut(2000);
		lastOne = finalQuote[0]; //saves current quote before changing
		quotebag();
		
		if(finalQuote[0] == lastOne){ //change quote if its the same
			quotebag(); 
		}else if(finalQuote[1] == "Mallos The Mysterious"){
			$(".mainQuote").fadeOut(3800);
		}else if(finalQuote[1] == "Fuithor The Dark"){
			$(".cateyes").fadeIn(1000);
		}else if(finalQuote[1] == "Langien The Cute"){
			$(".cuteelf").fadeIn(1000);
		} 
		
	});
	
});
            
          
!
999px
Loading ..................

Console