Skip to content
GitLab
Commit fa0f58be authored by Prasanth yendluru's avatar Prasanth yendluru
Browse files

updated project

parent 646e1ecf
Hide whitespace changes
Inline Side-by-side
.DS_Store 0 → 100644
View file @ fa0f58be
File added
animation1.html 0 → 100644
View file @ fa0f58be
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>WORK AND ENERGY</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04AA6D;
color: white;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
h1 {text-align: center;}
body {
background-image: url('images/sample.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.button-17:hover {
background: #F6F9FE;
color: #174ea6;
}
.button-17:active {
box-shadow: 0 4px 4px 0 rgb(60 64 67 / 30%), 0 8px 12px 6px rgb(60 64 67 / 15%);
outline: none;
}
.button-17:focus {
outline: none;
border: 2px solid #4285f4;
}
</style>
</head>
<body>
<h2 style="color:rgb(253, 250, 250);">ANIMATION 1</h2>
<div style="padding-left:16px">
<a href="animations.html" class="active"><button class="button-17">BACK</button></a>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</head>
</body>
</html>
animation2.html 0 → 100644
View file @ fa0f58be
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>WORK AND ENERGY</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04AA6D;
color: white;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
h1 {text-align: center;}
h2 {text-align: center;}
body {
background-image: url('https://img.freepik.com/free-vector/smooth-white-wave-background_52683-55288.jpg?w=2000');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.button-17:hover {
background: #F6F9FE;
color: #174ea6;
}
.button-17:active {
box-shadow: 0 4px 4px 0 rgb(60 64 67 / 30%), 0 8px 12px 6px rgb(60 64 67 / 15%);
outline: none;
}
.button-17:focus {
outline: none;
border: 2px solid #4285f4;
}
.button-17:not(:disabled) {
box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
}
.button-17:not(:disabled):hover {
box-shadow: rgba(60, 64, 67, .3) 0 2px 3px 0, rgba(60, 64, 67, .15) 0 6px 10px 4px;
}
.button-17:not(:disabled):focus {
box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
}
.button-17:not(:disabled):active {
box-shadow: rgba(60, 64, 67, .3) 0 4px 4px 0, rgba(60, 64, 67, .15) 0 8px 12px 6px;
}
.button-17:disabled {
box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
}
</style>
</head>
<body>
<h2 style="color:rgb(10, 10, 6);">ANIMATION 2</h2>
<div style="padding-left:16px">
<a href="animations.html" class="active"><button class="button-17">BACK</button></a>
</div>
<div style="padding-left:16px">
<h2>FORMS OF ENERGY</h2>
<img src="images/energy.gif" alt="Girl in a jacket" width="420" height="400">
<img src="images/energy1.gif" alt="Girl in a jacket" width="420" height="400">
<img src="images/energy2.gif" alt="Girl in a jacket" width="420" height="400">
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</head>
</body>
</html>
animations.html 0 → 100644
View file @ fa0f58be
<html>
<head>
<title>Work And Energy</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#title{
height: 30%;
width: 99%;
text-align: center;
font-size: 50px;
padding: 10px ;
color: white;
}
#topics{
height: 20%;
width: 20%;
float: left;
text-align: center;
margin: 2px;
padding: 5px ;
}
body
{
display : flex ;
justify-content : center ;
align-items : center ;
min-height : 100vh ;
}
a
{
position : relative ;
justify-content : center ;
height: 80%;
width: 100%;
padding: 5px;
display : inline-block ;
padding : 2px;
border : 2px solid #111 ;
text-transform : uppercase ;
color : #fff ;
text-decoration : none ;
font-weight : 600 ;
font-size : 20px ;
}
a:before
{
content :'';
position : absolute ;
top : 6px ;
left : -2px ;
width : calc(100% + 20%) ;
height : calc(100% - 60%) ;
transition : 0.5s ease-in-out ;
transform : scaleY(1) ;
transition-delay: 0.5s;
}
a:hover:before
{
transform : scaleY(0) ;
}
a:after
{
content : '';
position : absolute ;
top : -2px ;
left : 6px ;
height : calc(100% + 20% ) ;
width: calc(100% - 60% ) ;
transition : 0.5s ease-in-out ;
transform : scaleX(1) ;
}
a:hover:after
{
transform : scaleX(0) ;
}
a span
{
position : relative ;
z-index : 3 ;
}
.background {
background-image: url(images/background.jpeg);
background-size: 100%100%;
width: 100%;
height: 100%;
}
.home{
background-color: gold;
height: 40px;
width: 10%;
margin: 20px 45% 10px 45%;
padding: 10px 5px 10px 3%;
}
#back{
color: skyblue;
font-weight: 600;
font-size: 20px;
}
#close{
width: 100%;
height: 60px;
}
</style>
<script src="script.js"></script>
</head>
<body>
<div class="background">
<div id="title">
<p><b>ANIMATIONS</b></p>
</div>
<div class="division" id="topics">
<a href="animation1.html"> <span> Animation 1 </span> </a>
</div>
<div class="division" id="topics">
<a href="animation2.html"> <span> Animation 2 </span> </a>
</div>
<div class="division1" id="topics" >
<a href="index.html" style="background-color: gold;"> <span style="color: skyblue;">BACK</span> </a>
</div>
</div>
</body>
</html>
\ No newline at end of file
commercial_unit.html 0 → 100644
View file @ fa0f58be
<html>
<head>
<title>Work And Energy</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style> body {
background-image: url('images/summary.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-opacity:0.3;}
.button {
background-color: #1c87c9;
box-shadow: 0 5px 0 #105cad;
color: white;
padding: 1em 1.5em;
position: relative;
text-decoration: none;
display: inline-block;
}
a {
text-decoration: none;
display: inline-block;
padding: 8px 16px;
}
a:hover {
background-color: #ddd;
color: black;
}
.previous {
background-color: #f1f1f1;
color: black;
}
.next {
background-color: #04AA6D;
color: white;
}
.round {
border-radius: 50%;
}
</style>
</head>
<body>
<div class="background">
<div class="division" id="title">
<p>COMMERCIAL UNIT OF POWER</p>
</div>
<div class="division" id="content">
<!--Type your code-->
<div class="points">
<ul>
<li>unit joule is too small and hence is inconvenient to express large quantities of energy. We use a bigger unit of energy called kilowatt hour (kW h). </li>
<li>1kWh =1kW*1h<br>= 1000W×3600s <br> = 1000W×3600s <br>= 3600000 J </li>
<li>1kWh = 3.6× 106J.</li>
<li>energy used in households, industries and commercial establishments are usually expressed in kilowatt hour. </li>
<li>For example, electrical energy used during a month is expressed in terms of ‘units’. Here, 1 ‘unit’ means 1 kilowatt hour. </li>
</ul>
</div>
<div class="video1">
<iframe width="560" height="315" src="https://www.youtube.com/embed/Q_Q2T2ZuPKw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<img src="images/comm1.jpeg" alt="My2 pic" style="float:left;padding:5px;"width=34% height=65%>
<img src="images/comm2.jpeg" alt="My2 pic" style="padding:5px;"width=29% height=65%>
<img src="images/comm3.png" alt="My2 pic" style="float:right;padding:5px;"width=34% height=65%>
<br><br><br>
<a href="power.html" class="previous">&laquo; Previous</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="index.html" class="button">HOME</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;
<a href="animations.html" class="next">Next &raquo;</a>
</body>
</html>
</html>
\ No newline at end of file
energy.html 0 → 100644
View file @ fa0f58be
<html>
<head>
<title>Work And Energy</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style> body {
background-image: url('images/summary.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-opacity:0.3;
}
.button {
background-color: #1c87c9;
box-shadow: 0 5px 0 #105cad;
color: white;
padding: 1em 1.5em;
position: relative;
text-decoration: none;
display: inline-block;
}a {
text-decoration: none;
display: inline-block;
padding: 8px 16px;
}
a:hover {
background-color: #ddd;
color: black;
}
.previous {
background-color: #f1f1f1;
color: black;
}
.next {
background-color: #04AA6D;
color: white;
}
.round {
border-radius: 50%;}
</style>
</head>
<body>
<div class="background">
<div class="division" id="title">
<p>ENERGY</p>
</div>
<div class="division" id="content">
<!--Type your code-->
<div class="points">
<ul>
<li>An object having a capability to do work is said to possess energy. The object which does the work loses energy and the object on which the work is done gains energy. </li>
<li>The unit of energy is, therefore, the same as that of work, that is, joule (J).</li>
<li>we live in provides energy in many different forms. The various forms include mechanical energy (potential energy + kinetic energy), heat energy, chemical energy, electrical energy and light energy.</li>
<li>Life is impossible without energy.</li>
<li>The Sun is the biggest natural source of energy to us.</li>
<li>We can also get energy from the nuclei of atoms, the interior of the earth, and the tides.</li>
<li>Examples: when a fast moving cricket ball hits a stationary wicket, the wicket is thrown away</li>
<li>An object having a capability to do work is said to possess energy. The object which does the work loses energy and the object on which the work is done gains energy.</li>
<li>An object that possesses energy can exert a force on another object.</li>
<li>The energy possessed by an object is thus measured in terms of its capacity of doing work. </li>
<li>The unit of energy is, therefore, the same as that of work, that is, joule (J). /li>
<li>1 J is the energy required to do 1 joule of work. Sometimes a larger unit of energy called kilo joule (kJ) is used. 1 kJ equals 1000 J.
</li>
</ul>
</div>
<div class="video2">
<iframe width="560" height="315" src="https://www.youtube.com/embed/4HdxQhBRDUI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/u36H4Uo3rPM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br>
<br>
<a href="work.html" class="previous">&laquo; Previous</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="index.html" class="button">HOME</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;
<a href="kinetic_energy.html" class="next">Next &raquo;</a>
</body>
</html>
\ No newline at end of file
index.html 0 → 100644
View file @ fa0f58be
<html>
<head>
<title>Work And Energy</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#title{
height: 30%;
width: 99%;
text-align: center;
font-size: 50px;
padding: 10px ;
color: white;
}
#topics{
height: 20%;
width: 20%;
float: left;
text-align: center;
margin: 2px;
padding: 5px ;
}
body
{
display : flex ;
justify-content : center ;
align-items : center ;
min-height : 100vh ;
}
a
{
position : relative ;
justify-content : center ;
height: 80%;
width: 100%;
padding: 5px;
display : inline-block ;
padding : 2px;
border : 2px solid #111 ;
text-transform : uppercase ;
color : #fff ;