Skip to content

Commit

Permalink
Energy
Browse files Browse the repository at this point in the history
  • Loading branch information
gargshruti30 committed Jan 12, 2019
1 parent a854220 commit 9f9af05
Showing 4 changed files with 333 additions and 1 deletion.
Binary file added energy/images/energy.mp4
Binary file not shown.
107 changes: 107 additions & 0 deletions energy/index.html
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>
219 changes: 219 additions & 0 deletions energy/styles/screen.css
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;
}
8 changes: 7 additions & 1 deletion index.html
Original file line number Diff line number Diff line change
@@ -209,11 +209,17 @@ <h1>States of matter</h1>
</div>
</div>
<div class="row">
<div class="col-md-12 portfolio-item sound">
<div class="col-md-4 portfolio-item sound">
<a href="groups_periods/index.html">
<h1>Groups And Periods</h1>
</a>
</div>
<div class="col-md-4 portfolio-item energy">
<a href="energy/index.html">
<h1>Energy</h1>
</a>
</div>

</div>
<div class="row">
<br/>

0 comments on commit 9f9af05

Please sign in to comment.