Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Energy: Kinetic and Potential #52

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Energy: Kinetic and Potential #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9f9af05
Energy
gargshruti30 Jan 12, 2019
29c02e6
Energy correction
gargshruti30 Jan 15, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added energy/images/energy.mp4
View file
Open in desktop
Binary file not shown.
108 changes: 108 additions & 0 deletions energy/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
<!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: 70%; ">
<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>

<div>
<video src="images/energy.mp4" loop autoplay style="width: 100%"></video>
</div>

</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
View file
Open in desktop
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
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/>
Expand Down
16 changes: 10 additions & 6 deletions navigation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,16 +127,20 @@ <h1 style="text-align:left; color:#00ff00;">_Biology</h1>
<ul>
<li class="heading3" style="clear: both;">Classification</li>
<ul>
<li style="list-style-type: none; float: left; padding: 16px;"> _Lesson 1</li>
<li style="list-style-type: none; float: left; padding: 16px;"> _Lesson 2</li>
<li style="list-style-type: none; float: left; padding: 16px;"> _Lesson 3</li>
<li style="list-style-type: none; float: left; padding: 16px;"><a href="Biology/Classification/Lesson1.html"> _Lesson 1</a></li>
<li style="list-style-type: none; float: left; padding: 16px;"><a href="Biology/Classification/Lesson2.html"> _Lesson 2</a></li>
<li style="list-style-type: none; float: left; padding: 16px;"><a href="Biology/Classification/Lesson3.html"> _Lesson 3</a></li>
<li style="list-style-type: none; float: left; padding: 16px;"><a href="Biology/Classification/Lesson4.html"> _Lesson 4</a></li>
<li style="list-style-type: none; float: left; padding: 16px;"><a href="Biology/Classification/Lesson5.html"> _Lesson 5</a></li>
<li style="list-style-type: none; float: left; padding: 16px;"><a href="Biology/Classification/Lesson6.html"> _Lesson 6</a></li>

</ul>
<li class="heading3" style="clear: both;">Variety of living organisms</li>
<ul>
<li style="list-style-type: none; float: left; padding: 16px;"> _Lesson 1</li>
<li style="list-style-type: none; float: left; padding: 16px;"> _Lesson 2</li>
<li style="list-style-type: none; float: left; padding: 16px;"> _Lesson 3</li>
<li style="list-style-type: none; float: left; padding: 16px;"><a href="Biology/Variety/Lesson1.html">_Lesson 1</a></li>
<li style="list-style-type: none; float: left; padding: 16px;"><a href="Biology/Variety/Lesson2.html">_Lesson 2</a></li>
<li style="list-style-type: none; float: left; padding: 16px;"><a href="Biology/Variety/Lesson3.html">_Lesson 3</a></li>
<li style="list-style-type: none; float: left; padding: 16px;"><a href="Biology/Variety/Lesson4.html">_Lesson 4</a></li>
</ul>
<li class="heading3" style="clear: both;">Levels of organisation</li>
<ul>
Expand Down