Skip to content

Instantly share code, notes, and snippets.

@joseph45666

joseph45666/index.html

Forked from anonymous/index.html
Created December 15, 2015 22:06
Show Gist options
  • Save joseph45666/f8f348d591605bd69025 to your computer and use it in GitHub Desktop.
Save joseph45666/f8f348d591605bd69025 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<html>
<head>
<H1>Destiny The Taken King Ps4 Edition </H1>
<style id="jsbin-css">
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body {
/* fallback rainbow image */
background: #F66 url(rainbow-gradient.jpg);
/*mozilla rainbow gradient*/
background-image: -moz-linear-gradient( left top, right bottom ,
from(red),
color-stop(0%, orange),
color-stop(0%, yellow),
color-stop(0%, green),
color-stop(50%, blue),
color-stop(50%, indigo),
to(violet));
/*webkit rainbow gradient*/
background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0.00, red),
color-stop(0%, orange),
color-stop(0%, yellow),
color-stop(0%, green),
color-stop(50%, blue),
color-stop(50%, indigo),
color-stop(1.00, violet));
}
background: #;
}
.pic {
border: 10px solid #fff;
float: left;
height: 50px;
width: 50px;
margin: 20px;
overflow: hidden;
-webkit-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
}
/*MORPH*/
.morph {
-webkit-transition: all 5s ease;
-moz-transition: all 5s ease;
-o-transition: all 5s ease;
-ms-transition: all 5s ease;
transition: all 5s ease;
}
.Dew {
padding-top: 50px;
padding-right: 50px;
padding-bottom: 50px;
padding-left: 80px;
}
.morph:hover {
border-radius: 50%;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
/* -webkit-transform: rotate(-360deg); */
figure
{
display: block;
}
and
.blink {
animation-duration: 0.5s;
animation-name: blink;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: steps(5, start);
}
@keyframes blink {
80% {
visibility: hidden;
}
}
</style>
</head>
<p> Destiny Is one of the best games so far in my opinion becuase it is a open world where you get to explore new planets and fight aliens.</p>
<body>
<div class="morph pic">
<img class= "Dew" src=https://www.jbhifi.com.au/Global/images/2015/games/games-showcase/destiny/20150625/20150629-DestinyTTK-Header-980.jpg>
</div>
<audio src="https://0.s3.envato.com/files/1613161/preview.mp3" autoplay loop>
<div id="content">
<figure id="suv">
<img src="https://www.jbhifi.com.au/Global/images/2015/games/games-showcase/destiny/20150625/20150629-DestinyTTK-Header-980.jpg>" alt="SUV" style="float: right" width="210" height="155">
</figure>
<figure id="car">
<img src="./ICAR.png" alt="Car" style="float: left" width="220" height="135">
</figure>
<script id="jsbin-source-html" type="text/html">
<html>
<head>
<H1>Destiny The Taken King Ps4 Edition </H1>
</head>
<p> Destiny Is one of the best games so far in my opinion becuase it is a open world where you get to explore new planets and fight aliens.</p>
<body>
<div class="morph pic">
<img class= "Dew" src=https://www.jbhifi.com.au/Global/images/2015/games/games-showcase/destiny/20150625/20150629-DestinyTTK-Header-980.jpg>
</div>
<audio src="https://0.s3.envato.com/files/1613161/preview.mp3" autoplay loop>
<div id="content">
<figure id="suv">
<img src="https://www.jbhifi.com.au/Global/images/2015/games/games-showcase/destiny/20150625/20150629-DestinyTTK-Header-980.jpg>" alt="SUV" style="float: right" width="210" height="155">
</figure>
<figure id="car">
<img src="./ICAR.png" alt="Car" style="float: left" width="220" height="135">
</figure>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css"> * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body {
/* fallback rainbow image */
background: #F66 url(rainbow-gradient.jpg);
/*mozilla rainbow gradient*/
background-image: -moz-linear-gradient( left top, right bottom ,
from(red),
color-stop(0%, orange),
color-stop(0%, yellow),
color-stop(0%, green),
color-stop(50%, blue),
color-stop(50%, indigo),
to(violet));
/*webkit rainbow gradient*/
background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0.00, red),
color-stop(0%, orange),
color-stop(0%, yellow),
color-stop(0%, green),
color-stop(50%, blue),
color-stop(50%, indigo),
color-stop(1.00, violet));
}
background: #;
}
.pic {
border: 10px solid #fff;
float: left;
height: 50px;
width: 50px;
margin: 20px;
overflow: hidden;
-webkit-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
}
/*MORPH*/
.morph {
-webkit-transition: all 5s ease;
-moz-transition: all 5s ease;
-o-transition: all 5s ease;
-ms-transition: all 5s ease;
transition: all 5s ease;
}
.Dew {
padding-top: 50px;
padding-right: 50px;
padding-bottom: 50px;
padding-left: 80px;
}
.morph:hover {
border-radius: 50%;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
/* -webkit-transform: rotate(-360deg); */
figure
{
display: block;
}
and
.blink {
animation-duration: 0.5s;
animation-name: blink;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: steps(5, start);
}
@keyframes blink {
80% {
visibility: hidden;
}
}
</script>
</body>
</html>
Raw
jsbin.lesoji.css
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body {
/* fallback rainbow image */
background: #F66 url(rainbow-gradient.jpg);
/*mozilla rainbow gradient*/
background-image: -moz-linear-gradient( left top, right bottom ,
from(red),
color-stop(0%, orange),
color-stop(0%, yellow),
color-stop(0%, green),
color-stop(50%, blue),
color-stop(50%, indigo),
to(violet));
/*webkit rainbow gradient*/
background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0.00, red),
color-stop(0%, orange),
color-stop(0%, yellow),
color-stop(0%, green),
color-stop(50%, blue),
color-stop(50%, indigo),
color-stop(1.00, violet));
}
background: #;
}
.pic {
border: 10px solid #fff;
float: left;
height: 50px;
width: 50px;
margin: 20px;
overflow: hidden;
-webkit-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
}
/*MORPH*/
.morph {
-webkit-transition: all 5s ease;
-moz-transition: all 5s ease;
-o-transition: all 5s ease;
-ms-transition: all 5s ease;
transition: all 5s ease;
}
.Dew {
padding-top: 50px;
padding-right: 50px;
padding-bottom: 50px;
padding-left: 80px;
}
.morph:hover {
border-radius: 50%;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
/* -webkit-transform: rotate(-360deg); */
figure
{
display: block;
}
and
.blink {
animation-duration: 0.5s;
animation-name: blink;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: steps(5, start);
}
@keyframes blink {
80% {
visibility: hidden;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment