forked from JessicaML/ScienceMotion-Static
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
a854220
commit 9f9af05
Showing
4 changed files
with
333 additions
and
1 deletion.
There are no files selected for viewing
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,107 @@ | ||
<!DOCTYPE html> | ||
|
||
<body> | ||
<!--[if lt IE 7]> | ||
<![endif]--> | ||
<html> | ||
<title>Energy</title> | ||
|
||
<head> | ||
<link href="css/bootstrap.min.css" rel="stylesheet"> | ||
<!-- Custom CSS --> | ||
<link href="../css/bootstrap.css" rel="stylesheet"> | ||
<link href="../css/lesson_template.css" rel="stylesheet"> | ||
<link rel='apple-touch-icon' sizes='57x57' href='../images/favicons/apple-icon-57x57.png'> | ||
<link rel='icon' type='image/png' , sizes='192x192' , href='../images/favicons/android-icon-192x192.png'> | ||
<link rel='icon' type='image/png' , sizes='96x96' , href='../images/favicons/favicon-96x96.png'> | ||
</head> | ||
|
||
<body> | ||
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> | ||
<!-- Collect the nav links, forms, and other content for toggling --> | ||
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> | ||
<ul class="nav navbar-nav"> | ||
<li> | ||
<a href="../index.html">Home</a> | ||
</li> | ||
<li> | ||
<a href="../navigation.html">All lessons</a> | ||
</li> | ||
</ul> | ||
</div> | ||
</nav> | ||
<div class="fond" id="smoothscroll"> | ||
<div id="forb" style="float:left;" class="style_prevu_kit"> | ||
</div> | ||
<div id="button" style="float:left;" class="button-flip"> | ||
<a id="button" class="active" href="#text"> | ||
<button style="color: #fff; margin-top: 50px;" type="button" class="btn" href="#text">More info</button> | ||
</a> | ||
</div> | ||
<div id="forb" style="float:right;" class="style_prevu_kit"> | ||
</div> | ||
</div> | ||
<br><br><br><br><br> | ||
<section id="top"> | ||
<!-- slower diffusion | ||
--> | ||
<div id="nav-one" class="nav" style="margin: auto; width: 50%;"> | ||
<audio id="beep-one"> | ||
<source src="https://cdn.rawgit.com/JessicaML/ScienceMotion-Static/aa82537e/sound_waves/wouldnt_say.mp3" controls></source> | ||
<source src="https://cdn.rawgit.com/JessicaML/ScienceMotion-Static/aa82537e/sound_waves/wouldnt_say.ogg" controls></source> | ||
Your browser isn't invited for super fun time. | ||
</audio> | ||
|
||
<a href="#" id="miami_1"> | ||
<video src="images/energy.mp4" controls loop autoplay></video> | ||
</a> | ||
</div> | ||
</section> | ||
<br><br><br> | ||
<section id="text"> | ||
<div> | ||
<h1>Kinetic energy vs. Potential energy | ||
</h1> | ||
<p><span id="text-1">Energy</span> is the abilityto do work. Objects can have stored, or potential, | ||
energy when work has been done (such as raising an object in the air) or | ||
by virtue of their position (such as sitting at the top of a hill). | ||
Potential energy changes to kinetic energy when the object moves. | ||
Examples include holding a stretched spring (potential energy) and then | ||
releasing it (kinetic energy) or holding a box above the ground | ||
(potential energy) and then dropping it (kinetic energy).</p> | ||
<p><span id="text-1">Kinetic energy</span> is a form of energy that results from an object's motion. | ||
There are many types of motion that use kinetic energy: translation | ||
(moving from one place to another), rotation, and vibration. The | ||
measurement of kinetic energy in an object is calculated based on the | ||
object's mass and velocity. It is measured in Joules.</p> | ||
|
||
<p><span id="text-1">Potential energy</span>is a form of energy that results from an object's position | ||
or arrangement of parts. It is stored energy that can become kinetic energy. | ||
It includes potential electrical, chemical, and nuclear energy. The | ||
measurement of potential energy in an object is calculated based on the | ||
object's mass and its height or distance. It is measured in Joules.</p> | ||
</div> | ||
</section> | ||
<!-- End Site Content --> | ||
<script type="text/javascript" src="../js/jquery.min.js"></script> | ||
<script> | ||
$("#nav-one a") | ||
.each(function (i) { | ||
if (i != 0) { | ||
$("#beep-one") | ||
.clone() | ||
.attr("id", "beep-one" + i) | ||
.appendTo($(this).parent()); | ||
} | ||
$(this).data("beeper", i); | ||
}) | ||
.mouseenter(function () { | ||
$("#beep-one" + $(this).data("beeper"))[0].play(); | ||
}); | ||
$("#beep-one").attr("id", "beep-one0"); | ||
</script> | ||
<script type="text/javascript" src="../js/smoothscroll.js"></script> | ||
|
||
</body> | ||
|
||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,219 @@ | ||
/* ========================================================================== | ||
HTML5 display definitions | ||
========================================================================== */ | ||
|
||
/** | ||
* Correct `block` display not defined in IE 6/7/8/9 and Firefox 3. | ||
*/ | ||
|
||
|
||
body | ||
{ margin: 0; | ||
padding: 0; | ||
font-family: arial; | ||
font-size: 62.5%; | ||
} | ||
|
||
|
||
article, | ||
aside, | ||
details, | ||
figcaption, | ||
figure, | ||
footer, | ||
header, | ||
hgroup, | ||
main, | ||
nav, | ||
section, | ||
summary { | ||
display: block; | ||
} | ||
|
||
/** | ||
* Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. | ||
*/ | ||
|
||
audio, | ||
canvas, | ||
video { | ||
display: inline-block; | ||
*display: inline; | ||
*zoom: 1; | ||
} | ||
|
||
/** | ||
* Prevent modern browsers from displaying `audio` without controls. | ||
* Remove excess height in iOS 5 devices. | ||
*/ | ||
|
||
audio:not([controls]) { | ||
display: none; | ||
height: 0; | ||
} | ||
|
||
/** | ||
* Address styling not present in IE 7/8/9, Firefox 3, and Safari 4. | ||
* Known issue: no IE 6 support. | ||
*/ | ||
|
||
[hidden] { | ||
display: none; | ||
} | ||
|
||
section#top { | ||
position: relative; | ||
width: 100%; | ||
background: #ffffff; | ||
height: 700px; | ||
overflow: hidden; | ||
|
||
} | ||
|
||
|
||
|
||
|
||
|
||
|
||
section#info { | ||
position: relative; | ||
background: grey; | ||
width: 100%; | ||
height: 100%; | ||
color: #fff; | ||
padding-top: 20px; | ||
padding: 20px; | ||
margin: -20px; | ||
font-size: 1.4em; | ||
|
||
} | ||
section#top h1 { | ||
font-size: 5em; | ||
color: #444444; | ||
text-transform: uppercase; | ||
width: 80%; | ||
text-align: justify; | ||
line-height: 1.8em; | ||
margin: 20px; | ||
padding: 20px; | ||
} | ||
|
||
#homebutton{ | ||
|
||
background-image: url('images/Miami_1.png')no-repeat; | ||
height: 100%; | ||
width: 100%; | ||
vertical-align:center; | ||
|
||
} | ||
s | ||
#homebutton:hover{ | ||
|
||
cursor:normal; | ||
background-image: url('images/Miami_1.gif')no-repeat; | ||
height: 100%; | ||
width: 100%; | ||
margin-left:20px; | ||
padding-left:20px; | ||
vertical-align:center; | ||
} | ||
|
||
|
||
|
||
section#info h1 { | ||
font-size: 2.3em; | ||
width: 80%; | ||
text-transform: uppercase; | ||
|
||
line-height: 1.8em; | ||
margin-left: 20px; | ||
padding-left: 20px; | ||
} | ||
|
||
section#info h2 { | ||
font-size: 1.5em; | ||
width: 80%; | ||
text-align: justify; | ||
line-height: 1.8em; | ||
margin-left: 20px; | ||
padding-left: 20px; | ||
} | ||
|
||
section#info p { | ||
font-size: 1.3em; | ||
width: 80%; | ||
text-align: justify; | ||
margin-left: 20px; | ||
padding-left: 20px; | ||
} | ||
|
||
|
||
|
||
|
||
section#info a { | ||
color: #b5ffda; | ||
text-decoration: none; | ||
} | ||
|
||
|
||
section#info a:hover | ||
{ | ||
color:#fff; | ||
text-decoration:none; | ||
cursor:pointer; | ||
} | ||
|
||
|
||
section#about { | ||
position: relative; | ||
background: #b5ffda; | ||
height: 300px; | ||
width: 100%; | ||
color: #555555; | ||
padding-top: 0px; | ||
|
||
} | ||
section#about h1 { | ||
font-size: 3em; | ||
text-transform: uppercase; | ||
margin: 20px; | ||
padding: 20px; | ||
|
||
} | ||
|
||
|
||
section#about h2 { | ||
font-size: 2.7em; | ||
margin: 20px; | ||
padding: 20px; | ||
text-shadow: 2px 2px 4px #3864ab; | ||
margin: 20px; | ||
padding: 20px; | ||
|
||
} | ||
|
||
section#about p { | ||
font-size: 1.4em; | ||
width: 80%; | ||
color: #3b3b3b; | ||
text-align: justify; | ||
line-height: 1.8em; | ||
margin: 20px; | ||
padding: 20px; | ||
|
||
|
||
} | ||
|
||
|
||
section#about a { | ||
color: #3864ab; | ||
text-decoration: none; | ||
} | ||
|
||
|
||
section#about a:hover | ||
{ | ||
color:#fff; | ||
text-decoration:none; | ||
cursor:pointer; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters