Pen Settings

HTML

CSS

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.

+ add another resource

JavaScript

Babel includes JSX processing.

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.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="container">
	
    <div class="pure-g">
        <div class="pure-u-1-5"></div>
        <div class="pure-u-4-5"><span id="ex3"><img src="https://res.cloudinary.com/dp53lsbqb/image/upload/v1459698922/BLeeHeader_ea67ys.jpg" alt="Tribute Image of Bruce Lee"><h1>Bruce Lee</h1></span></div>
    </div>
    
    <div class="pure-g">
        <div class="pure-u-5-5"><a href="#" onmouseover="playclip();"><img class="shadow centered" src="https://res.cloudinary.com/dp53lsbqb/image/upload/v1459699164/BLeeHeader2_sfxcu8.jpg" alt="image of Bruce Lee Jeet Kune Do"></a></div>
        <div class="pure-u-5-5"><h4 class="center">Bruce Lee Founder of Jeet Kune Do.</h4></div><br><br>
    </div>
    
    <div class="pure-g">
        <div class="pure-u-1-5"></div>
        <div class="pure-u-1-5"><img id="phone" src="https://res.cloudinary.com/dp53lsbqb/image/upload/v1459699149/BLeeA_oyarig.jpg" alt="image of Bruce Lee"><img id="firstimage" src="https://res.cloudinary.com/dp53lsbqb/image/upload/v1459699149/BLeeA_oyarig.jpg" alt="image of Bruce Lee" title="Click Me"></div>
        <div class="pure-u-1-5"><img class="moreimages shadow" src="https://res.cloudinary.com/dp53lsbqb/image/upload/v1459699153/BLeeB_eesr3e.jpg" alt="image of Bruce Lee"></div>
        <div class="pure-u-1-5"><img class="moreimages shadow" src="https://res.cloudinary.com/dp53lsbqb/image/upload/v1459699156/BLeeC_hjk8h8.jpg" alt="image of Bruce Lee"></div>
        <div class="pure-u-1-5"><img class="moreimages shadow" src="https://res.cloudinary.com/dp53lsbqb/image/upload/v1459699159/BLeeD_ewejte.jpg" alt="image of Bruce Lee"></div>
    </div><br><br>   
    
    <div class="pure-g">
        <div class="pure-u-lg-3-5">
            <h2 class="center">Bruce Lee Timeline</h2> 
            <i class="fa fa-quote-left fa-2x fa-pull-left fa-border"></i><p>I fear not the man who has practiced 10,000 kicks once, but I fear the man who has practiced one kick 10,000 times.<i class="fa fa-quote-right fa-2x fa-pull-right fa-border"></i></p><h5>Bruce Lee</h5>
            <div class="accordion">
                <div>
                    <input id="ac-1" name="accordion-1" type="checkbox" />
                    <label for="ac-1"><b>1940</b><span class="icon-hover"><i class="icon-nocircle fa fa-arrow-down"></i><i class="icon-circle fa fa-arrow-circle-down"></i></span></label>
                    <div class="article ac-large">
                        <p>Lee Jun Fan otherwise known as Bruce Lee was born in San Francisco, USA.</p>
                    </div>
                </div>
                <div>
                    <input id="ac-2" name="accordion-1" type="checkbox" />
                    <label for="ac-2"><b>1941</b><span class="icon-hover"><i class="icon-nocircle fa fa-arrow-down"></i><i class="icon-circle fa fa-arrow-circle-down"></i></span></label>
                    <div class="article ac-large">
                        <p>Bruce and his family return to Hong Kong.</p>
                    </div>
                </div>
                <div>
                    <input id="ac-3" name="accordion-1" type="checkbox" />
                    <label for="ac-3"><b>1946</b><span class="icon-hover"><i class="icon-nocircle fa fa-arrow-down"></i><i class="icon-circle fa fa-arrow-circle-down"></i></span></label>
                    <div class="article ac-large">
                        <p>Bruce makes his film career at the age of six.</p>
                    </div>
                </div>
                <div>
                    <input id="ac-4" name="accordion-1" type="checkbox" />
                    <label for="ac-4"><b>1953</b><span class="icon-hover"><i class="icon-nocircle fa fa-arrow-down"></i><i class="icon-circle fa fa-arrow-circle-down"></i></span></label>
                    <div class="article ac-large">
                        <p>Bruce begins training under the legendary Yip Man.</p>
                    </div>
                </div>
                 <div>
                    <input id="ac-5" name="accordion-1" type="checkbox" />
                    <label for="ac-5"><b>1958</b><span class="icon-hover"><i class="icon-nocircle fa fa-arrow-down"></i><i class="icon-circle fa fa-arrow-circle-down"></i></span></label>
                    <div class="article ac-large">
                        <p>Bruce wins the British Crown Colony Cha-Cha Championship (a dance contest).</p>
                    </div>
                </div>
                 <div>
                    <input id="ac-6" name="accordion-1" type="checkbox" />
                    <label for="ac-6"><b>1959</b><span class="icon-hover"><i class="icon-nocircle fa fa-arrow-down"></i><i class="icon-circle fa fa-arrow-circle-down"></i></span></label>
                    <div class="article ac-large">
                        <p>After getting into too many street fights in Hong Kong, Bruce's parents send him back to San Francisco.</p>
                    </div>
                </div>
                 <div>
                    <input id="ac-7" name="accordion-1" type="checkbox" />
                    <label for="ac-7"><b>1961</b><span class="icon-hover"><i class="icon-nocircle fa fa-arrow-down"></i><i class="icon-circle fa fa-arrow-circle-down"></i></span></label>
                    <div class="article ac-large">
                        <p>Bruce enrolls at the University of Washington and begins teaching students gung fu.</p>
                    </div>
                </div>
                 <div>
                    <input id="ac-8" name="accordion-1" type="checkbox" />
                    <label for="ac-8"><b>1963</b><span class="icon-hover"><i class="icon-nocircle fa fa-arrow-down"></i><i class="icon-circle fa fa-arrow-circle-down"></i></span></label>
                    <div class="article ac-large">
                        <p>Bruce takes his future wife Linda out on their first date.</p>
                    </div>
                </div>
                 <div>
                    <input id="ac-9" name="accordion-1" type="checkbox" />
                    <label for="ac-9"><b>1964</b><span class="icon-hover"><i class="icon-nocircle fa fa-arrow-down"></i><i class="icon-circle fa fa-arrow-circle-down"></i></span></label>
                    <div class="article ac-large">
                        <p>Bruce marries Linda; he also establishes a second gung fu school in Oakland.</p>
                    </div>
                </div>
                 <div>
                    <input id="ac-10" name="accordion-1" type="checkbox" />
                    <label for="ac-10"><b>1965</b><span class="icon-hover"><i class="icon-nocircle fa fa-arrow-down"></i><i class="icon-circle fa fa-arrow-circle-down"></i></span></label>
                    <div class="article ac-large">
                        <p>Bruce's first son Brandon Bruce Lee is born.</p>
                </div>
                 <div>
                    <input id="ac-11" name="accordion-1" type="checkbox" />
                    <label for="ac-11"><b>1966</b><span class="icon-hover"><i class="icon-nocircle fa fa-arrow-down"></i><i class="icon-circle fa fa-arrow-circle-down"></i></span></label>
                    <div class="article ac-large">
                        <p>Bruce stars in the TV show, "The Green Hornet".  He also opens a third gung fu school in Los Angeles.</p>
                    </div>
                </div>
                 <div>
                    <input id="ac-12" name="accordion-1" type="checkbox" />
                    <label for="ac-12"><b>1969</b><span class="icon-hover"><i class="icon-nocircle fa fa-arrow-down"></i><i class="icon-circle fa fa-arrow-circle-down"></i></span></label>
                    <div class="article ac-large">
                        <p>Bruce's daughter Shannon Lee is born.</p>
                    </div>
                </div>
                 <div>
                    <input id="ac-13" name="accordion-1" type="checkbox" />
                    <label for="ac-13"><b>1971</b><span class="icon-hover"><i class="icon-nocircle fa fa-arrow-down"></i><i class="icon-circle fa fa-arrow-circle-down"></i></span></label>
                    <div class="article ac-large">
                        <p>Stars in his first major motion picture filmed in Hong Kong titled in the USA, "Fists of Fury".</p>
                    </div>
                </div>
                 <div>
                    <input id="ac-14" name="accordion-1" type="checkbox" />
                    <label for="ac-14"><b>1972</b><span class="icon-hover"><i class="icon-nocircle fa fa-arrow-down"></i><i class="icon-circle fa fa-arrow-circle-down"></i></span></label>
                    <div class="article ac-large">
                        <p>Stars in his second major motion picture filmed in Hong Kong titled in the USA, "The Chinese Connection".</p>
                    </div>
                </div>
                 <div>
                    <input id="ac-15" name="accordion-1" type="checkbox" />
                    <label for="ac-15"><b>1972</b><span class="icon-hover"><i class="icon-nocircle fa fa-arrow-down"></i><i class="icon-circle fa fa-arrow-circle-down"></i></span></label>
                    <div class="article ac-large">
                        <p>Stars in his third major motion picture filmed in Italy featuring Chuck Norris titled in the USA, "The Return of the Dragon".</p>
                    </div>
                </div>
                 <div>
                    <input id="ac-16" name="accordion-1" type="checkbox" />
                    <label for="ac-16"><b>1972</b><span class="icon-hover"><i class="icon-nocircle fa fa-arrow-down"></i><i class="icon-circle fa fa-arrow-circle-down"></i></span></label>
                    <div class="article ac-large">
                        <p>Bruce begins work on another major motion picture featuring Kareem Abdul-Jabbar titled, "Game of Death".</p>
                    </div>
                </div>
                 <div>
                    <input id="ac-17" name="accordion-1" type="checkbox" />
                    <label for="ac-17"><b>1973</b><span class="icon-hover"><i class="icon-nocircle fa fa-arrow-down"></i><i class="icon-circle fa fa-arrow-circle-down"></i></span></label>
                    <div class="article ac-large">
                        <p>Bruce completes his most successful major motion picture titled, "Enter the Dragon".</p>
                    </div>
                </div>
                 <div>
                    <input id="ac-18" name="accordion-1" type="checkbox" />
                    <label for="ac-18"><b>1973</b><span class="icon-hover"><i class="icon-nocircle fa fa-arrow-down"></i><i class="icon-circle fa fa-arrow-circle-down"></i></span></label>
                    <div class="article ac-large">
                        <p>Bruce Lee dies in Hong Kong one month before "Enter the Dragon" premieres to the public.</p>
                    </div>
                </div>
                 <div>
                    <input id="ac-19" name="accordion-1" type="checkbox" />
                    <label for="ac-19"><b>1973</b><span class="icon-hover"><i class="icon-nocircle fa fa-arrow-down"></i><i class="icon-circle fa fa-arrow-circle-down"></i></span></label>
                    <div class="article ac-large">
                        <p>Bruce Lee Hong Kong funeral is attended by over 25,000 people.</p>
                    </div>
                </div>
                 <div>
                    <input id="ac-20" name="accordion-1" type="checkbox" />
                    <label for="ac-20"><b>1973</b><span class="icon-hover"><i class="icon-nocircle fa fa-arrow-down"></i><i class="icon-circle fa fa-arrow-circle-down"></i></span></label>
                    <div class="article ac-large">
                        <p>Bruce Lee is finally laid to rest near his family in Seattle, USA.</p>
                    </div>
                </div>
                </div>
            </div><!-- .accordion -->
            <i class="fa fa-quote-left fa-2x fa-pull-left fa-border"></i><p>Knowing is not enough; We must apply. Willing is not enough; We must do.<i class="fa fa-quote-right fa-2x fa-pull-right fa-border"></i></p><h5>Bruce Lee</h5>
        </div><!-- .pure-u-lg-3-5 -->
        <div class="pure-u-lg-2-5">
        	<img class="imggrow" src="https://res.cloudinary.com/dp53lsbqb/image/upload/v1459699132/1_tt2arf.jpg" alt="jigsaw image of Bruce Lee"><br>
            <img class="imggrow" src="https://res.cloudinary.com/dp53lsbqb/image/upload/v1459699137/2_dhz9pz.jpg" alt="jigsaw image of Bruce Lee"><br>
            <img class="imggrow" src="https://res.cloudinary.com/dp53lsbqb/image/upload/v1459699141/3_ljdlkl.jpg" alt="jigsaw image of Bruce Lee"><br>
            <img class="imggrow" src="https://res.cloudinary.com/dp53lsbqb/image/upload/v1459699145/4_xvkqpk.jpg" alt="jigsaw image of Bruce Lee">
        </div>
    </div>   
    
    <br><br>
    
    <div class="pure-g">
        <div class="pure-u-lg-2-5"><h6>Images are from Public Domain sources<br>with this <a href="http://www.deviantart.com/art/Bruce-nuff-said-215802686" target="_blank">one exception</a></h6></div>
        <div class="pure-u-lg-3-5"><p>Go here to find out more about the legend known as <a href="https://en.wikipedia.org/wiki/Bruce_Lee" target="_blank">Bruce Lee</a></div>
    </div>
    

</div><!-- #container -->

<br><br><hr><br><br>

	<div class="pure-g">
        <div class="pure-u-5-5"><h3 class="center"><a href="https://www.twitter.com/clarka77" target="_blank"><i class="fa fa-twitter"></i></a><a href="https://codepen.io/clarka77" target="_blank"><i class="fa fa-codepen"></i></a><a href="https://www.linkedin.com/in/clarka2" target="_blank"><i class="fa fa-linkedin"></i></a></h3></div>
        <div class="pure-u-5-5"><h5 class="center"><a class="pure-button pure-button-primary" href="https://www.facebook.com/sharer.php?u=http%3A%2F%2Fcloudinary.com%2Finvites%2Flpov9zyyucivvxsnalc5%2Fqenr41ritbz9djipj9wq%3Fkind%3Dfacebook" target="_blank"><i class="fa fa-facebook-official"></i>Share</a> Host your images for free with Cloudinary <a class="pure-button pure-button-primary" href="https://cloudinary.com/invites/lpov9zyyucivvxsnalc5/qenr41ritbz9djipj9wq" target="_blank"><i class="fa fa-share-square"></i>Share</a></h5></div>
    </div>

<br><br><hr><br><br>
<h4 class="center">web Design and web Develop by Clark Alford.</h4>
<h5 class="center"><i class="fa fa-copyright"></i> 2016 - <script>document.write(new Date().getFullYear())</script></h5>
<!-- Sound On Mouse Hover -->
<audio>
<source src="https://res.cloudinary.com/dp53lsbqb/video/upload/v1459699532/bruce-lee-scream_h9rwri.mp3" type="audio/mpeg" ></source>
<source src="https://res.cloudinary.com/dp53lsbqb/video/upload/v1459699536/bruce-lee-scream_nprq2u.ogg" type="audio/ogg" ></source>
</audio>
<div id="sounddiv"><bgsound id="sound"></div>

<!-- JavaScript at the bottom for fast page loading -->

<!-- Non Javascript Warning -->
<noscript><div id="noscript-warning">This website works best with JavaScript enabled</div></noscript>
              
            
!

CSS

              
                /**  Table of Contents

 * Ch01 - Resets
 * Ch02 - Typography
 * Ch03 - Page Structure
 * Ch04 - Header & Navigation
 * Ch05 - Content & Media
 * Ch06 - Footer
 * Ch07 - Miscellaneous
 * Ch08 - Print Styles
**/

/* Ch02 Typography  */

html, button, input, select, textarea, label,
.pure-g [class *= "pure-u"] {
    /* Set your content font stack here: */
    font-family: Verdana, Georgia, sans-serif;
}
h1,h2, h3, h4, h5, h6 {
    /* Set your content font stack here: */
    /* example font-family: Georgia, Times, "Times New Roman", serif; */
    font-family: 'Copse', serif;
    letter-spacing: 0;
}
body, h1, h2, h3, h4, h5, h6 {font-size-adjust: 0.5;}
body, p {
    font-size: 1em; /* equivalent to 16px */
    font-family: 'Muli', sans-serif;
    font-kerning: auto;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5em;
	letter-spacing: 0;
}
h1 {
  font-size: 2em; /* 2x body copy size = 32px */
  line-height: 1.25; /* equivalent to 40px */
}
h2 {
  font-size: 1.625em; /* 1.625x body copy size = 26px */
  line-height: 1.15384615; /* 30px / 26px */
}
h3 {
  font-size: 1.375em; /* 1.375x body copy size = 22px */
  line-height: 1.13636364; /* 25px / 22px */
}
h4 {
  font-size: 1.125em; /* 1.125x body copy size = 18px */
  line-height: 1.11111111;
}
blockquote {
  font-size: 1.25em; /* 20px / 16px */
  line-height: 1.25; /* 25px / 20px */
}

@media (min-width: 43.75em) {
body {
  font-size: 1em; /* equivalent to 16px */
  line-height: 1.375; /* equivalent to 22px */
}
h1 {
  font-size: 2.5em; /* 2.5x body copy size = 40px */
  line-height: 1.125; 
}
h2 {
  font-size: 2em; /* 2x body copy size = 32px */
  line-height: 1.25;
}
h3 {
  font-size: 1.5em; /* 1.5x body copy size = 24px */
  line-height: 1.25;
}
h4 {line-height: 1.22222222; /* (22px / 18px */}
blockquote {
  font-size: 1.5em; /* 24px / 16px = */
  line-height: 1.45833333; /* 35px / 24px */
}
p {font-size:112.5%;}
}

@media (min-width: 56.25em) {
h1 {
    font-size: 3em; /* 3x body copy size = 48px */
    line-height: 1.05; /* keep to a multiple of the 20px line height and something more appropriate for display headings */
}
h2 {
    font-size: 2.25em; /* 2.25x body copy size = 36px */
    line-height: 1.25;
}
h3 {
    font-size: 1.75em; /* 1.75x body copy size = 28px */
    line-height: 1.25;
}
p {font-size:125%;}
}

/* Ch03 - Page Structure */

#container {
  margin-top:30px!important;
  margin:auto;
  padding:20px;
  width: 85%;
  background: #eee;
  border-radius: 6px;
}

@media (min-width: 43.75em) {
#container {
  width:90%;
}
}

/* Ch04 Header & Navigation  */

a:link {
  font-family:"Arial Black", Gadget, sans-serif;
  padding: 3px;
}

a:visited {/* visited link */
  color: purple;
}

a:hover, a:focus {
  text-decoration:none;
  text-shadow: 0 0 2px #999;
}

a:active {/* selected link */
   color: red;
   text-decoration:underline;
   position:relative;
   top:1px;
   left:1px;
} 

i.fa-facebook-official, i.fa-share-square {
  padding-right:5px;
}

/* Fade Text In CSS */
#ex3 {
    width: 80%;
	color: transparent;
	text-transform: uppercase;
    -webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#ex3:hover {
	color: black;
}

#ex3 img{
	float: clear;
}

#ex3 img:hover {
  outline: 2px solid black; 
}

@media (min-width: 43.75em) {
/* Fade Text In CSS */    
#ex3 {
	color: transparent;
	font-size: 50px;
	text-transform: uppercase;
    -webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#ex3:hover {
	color: black;
}

#ex3 img{
	float: left;
	margin: 0 15px;
}

#ex3 img:hover {
  outline: 2px solid black; 
}
}

img.centered {
    display:block;
    max-width:100%;
    margin-left: auto;
    margin-right: auto;
}

img.shadow {
  border:2px solid #fff;
  -moz-box-shadow: 10px 10px 5px #ccc;
  -webkit-box-shadow: 10px 10px 5px #ccc;
  -khtml-box-shadow: 10px 10px 5px #ccc;
  box-shadow: 10px 10px 5px #ccc;
}

.center {
  text-align:center;
}

img#firstimage {
	display:none;
}

img.moreimages {
  display:none;
}
 
@media (min-width: 43.75em) {
img.moreimages {
  width:100%;
  max-width:200px;
  display:none;
}

img#phone {
	display:none;
}

img#firstimage {
  width:100%;
  max-width:200px;
  display:block;
}

img#firstimage:hover {
  outline: 2px solid blue; 
}
} 

.imggrow {
  width:80%;
  max-width:300px; 
  margin: 5px 0;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

.imggrow:hover {
  	width:100%;
    max-width:360px;
    margin-left: -50px; 
}

hr {
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

i.fa {
 padding-left:5px; 
}

/* makes font awesome icon change on hover  */
.icon-hover:hover .icon-nocircle,
.icon-hover .icon-circle {
    display: none;
}
.icon-hover:hover .icon-circle {
    display: inline;
}

/* css accordion  */
.accordion {
    width: 95%;
    margin: 10px auto;
    box-shadow:
        0px 0px 0px 1px rgba(155,155,155,0.3),
        0px 2px 2px rgba(0,0,0,0.1);
}
.accordion label {
    letter-spacing: 0;
    padding: 5px 20px;
    position: relative;
    display: block;
    height: 30px;
    cursor: pointer;
    color: #777;
    line-height: 33px;
    font-size: 19px;
    background: #EFEFEF;
    border: 1px solid #CCC;
}
.accordion label:hover {
    background: #F3F3F3;
}
.accordion input + label {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.accordion input:checked + label,
.accordion input:checked + label:hover {
    background: #85a68f;
    color: #3d7489;
    box-shadow:
        0px 0px 0px 1px rgba(155,155,155,0.3),
        0px 2px 2px rgba(0,0,0,0.1);
}
.accordion input {
    display: none;
}
.accordion .article {
    background: rgb(255, 255, 255);
    overflow: hidden;
    height: 0px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.accordion .article p {
    padding: 20px;
}
.accordion input:checked ~ .article {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.accordion input:checked ~ .article.ac-large {
    height: 100%;
    max-height:200px;
}

/* Ch07 Miscellaneous  */

/* No Javascript Warning */
#noscript-warning{
	font-family:sans-serif;
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	z-index:101;
	text-align:center;
	font-weight:bold;
	font-size:120%;
	color:#fff;
	background-color:#ae0000;
	padding:5px 0px 5px 0px;
}

/* Ch08 Print Sytles  */

@media print {
body {
  font-size:12pt;
  line-height:1.25em;
}    
h1 {
  font-size:36pt;
  line-height:1.25em;
}    
h2 {
  font-size:24pt;
  line-height:1.25em;
}  
h3 {
  font-size:18pt;
  line-height:1.25em;
}
h4 {
  font-size:14pt;
  line-height:1.25em;
}
blockquote {
  font-size:24pt;
  line-height:1.45833333em;
}
*,
*:before,
*:after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

a,
a:visited {
    text-decoration: underline;
}

a[href]:after {
    content: " (" attr(href) ")";
}

abbr[title]:after {
    content: " (" attr(title) ")";
}

a[href^="#"]:after,
a[href^="javascript:"]:after {
    content: "";
}

pre,
blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
}

thead {
    display: table-header-group;
}

tr,
img {
    page-break-inside: avoid;
}

img {
    max-width: 100% !important;
}

p,
h2,
h3 {
    orphans: 3;
    widows: 3;
}

h2,
h3 {
    page-break-after: avoid;
}
}
              
            
!

JS

              
                function playclip() {
if (navigator.appName == "Microsoft Internet Explorer" && (navigator.appVersion.indexOf("MSIE 7")!=-1) || (navigator.appVersion.indexOf("MSIE 8")!=-1)) {
if (document.all)
 {
  document.all.sound.src = "https://res.cloudinary.com/dp53lsbqb/video/upload/v1459699532/bruce-lee-scream_h9rwri.mp3";
 }
}

else {
{
var audio = document.getElementsByTagName("audio")[0];
audio.play();
}
}
}

$(document).ready(function(){
if( $(window).width() > 700 ) {	
    $("#firstimage").click(function(){
        $(".moreimages").toggle(500);
    });
}
});

              
            
!
999px

Console