Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <style>
- @import url(//fonts.googleapis.com/css?family=Permanent+Marker|Gloria+Hallelujah|Amatic+SC|Chewy|Bangers|Kaushan+Script);
- body {background-color: #5f3e38;
- background-image:url(http://www.transparenttextures.com/patterns/dark-denim-3.png);
- overflow: hidden;}
- #whole{
- position: fixed;
- top: 0px;
- left: 0px;
- right: 0px;
- bottom: 0px;
- overflow: hidden;}
- #middlething{
- position: absolute;
- top: 0px;
- bottom: 0px;
- left: 0px;
- right: 0px;
- margin: auto;
- height: 481px;
- background-color: #716965;
- box-shadow: 1px 1px 11px black;}
- #middleimage{
- position: absolute;
- top: 0px;
- left: 0px;
- right: 0px;
- bottom: 0px;
- background-image: url(http://i65.tinypic.com/2yyt7c4.jpg);
- background-repeat: no-repeat;
- background-size: auto 111%;
- background-position: center bottom;
- -webkit-transition: all 1s 2.5s;
- transition: all 1s 2.5s;
- opacity: 1;}
- #middleimage.b{
- background-image: url(http://i63.tinypic.com/szdiwx.jpg);
- background-position: top center;
- background-size: auto 150%;
- -webkit-transition: all 1s 2s;
- transition: all 1s 2s;
- opacity: 0;
- }
- #whole:hover #middleimage{
- -webkit-transition: all 1s .2s;
- transition: all 1s .2s;
- opacity: 0;}
- #whole:hover #middleimage.b{
- -webkit-transition: all 1s 1.3s;
- transition: all 1s 1.3s;
- opacity: 1;}
- #popsfromtheleft{
- position: absolute;
- height: 520px;
- background-image:url(http://www.transparenttextures.com/patterns/dark-denim-3.png);
- background-color: #5f3e38;
- width: 250px;
- left: -5000px;
- right: 0px;
- top: 0px;
- bottom: 0px;
- margin: auto;
- -webkit-transition: all 2s 2s;
- transition: all 2s 2s;
- opacity: 1;
- overflow: hidden;}
- #insidecontent{
- position: absolute;
- top: 0px;
- left: 0px;
- right: 0px;
- bottom: 0px;
- margin: auto;
- height: 80%;
- width: 200px;
- background: #7d6c69;
- opacity: .6;
- box-shadow: 2px 2px 11px black;}
- #insidecontent2{
- position: absolute;
- top: 0px;
- left: 0px;
- right: 0px;
- bottom: 0px;
- margin: auto;
- height: 80%;
- width: 200px;
- background: transparent;
- color: black;
- font-size: 10pt;
- font-family: Times;
- font-weight: 400;
- font-style:italic;
- box-sizing: border-box;
- padding: 10px;
- text-align: justify;
- text-justify: inter-word;}
- #insidecontent2 u{
- text-decoration: none;
- font-weight: 600;
- font-family: 'Amatic SC', cursive;
- font-size: 25pt;
- letter-spacing: 15px;
- text-shadow: 2px 2px 5px #312c2c;}
- #insidecontent2 b{
- font-weight: 400;
- color: black;
- font-size: 15pt;
- font-style: italic;
- margin-top: -20px;
- font-family: 'Amatic SC', cursive;
- line-height: 16px;}
- #insidecontent2 i{
- font-weight: 400;
- color: black;
- font-family: 'Permanent Marker', cursive;
- font-style: normal;
- letter-spacing: 1px;
- text-align: justify;
- font-size: 9pt;
- opacity: .8;}
- #whole:hover #popsfromtheleft{
- left: -700px;
- opacity: 1;
- -webkit-transition: all 1.2s ease-out, opacity 2s;
- transition: all 1.2s ease-out, opacity 2s;}
- #musicslice{
- position: fixed;
- top: 20px;
- right: 20px;
- height: 50px;
- width: 50px;
- border: 1px solid black;
- overflow: hidden;
- -webkit-transition: all 1s;
- transition: all 0s;
- box-shadow: 1px 1px 3px black;}
- #musicslice:active{
- -webkit-transition: all 0s;
- transition: all 0s;
- box-shadow: 0px 0px 0px black;}
- #musiccover{
- position: absolute;
- left: 0px;
- top: 0px;
- height: 50px;
- width: 50px;
- background-image:url(http://i67.tinypic.com/2hs28ia.jpg);
- background-size: auto 100%;
- background-repeat: no-repeat;
- background-position: bottom right;
- }
- #musichidden{
- position: absolute;
- left: -10px;
- top: 0px;
- height: 50px;
- width: 50px;
- zoom: 180%;
- opacity: 0;
- z-index: 1;
- overflow: hidden;}
- </style>
- <div id="whole">
- <div id="middlething">
- <div id="middleimage">
- </div>
- <div id="middleimage" class="b">
- </div>
- </div>
- <div id="popsfromtheleft">
- <div id="insidecontent">
- </div>
- <div id="insidecontent2">
- <br>
- <u>Taker</u><br>
- <b>"you may say I'm a dreamer,<br>but I'm not the only one"</b><br><br>
- <i>A devil in the literal sense, come to guide the poor souls of the unknowing and unseeing. Where? To their salvation. How? Through music and general kickassery.
- Why? Because he was exiled and there isn't a whole lot better to do. When? Whenever he gets off his ass.</i><br><br><br>
- w.i.p / art is owned / code is <a target="_blank" href="http://roleplay.chat/profile.php?user=Digital" target=_blank style="color:black;">mine</a>
- </div>
- </div>
- <div id="musicslice" title="ratatat - loud pipes">
- <div id="musiccover">
- </div>
- <div id="musichidden">
- <audio controls src="http://puu.sh/qIBIb/8106b125ff.mp3" loop=3></audio>
- </div>
- </div>
- </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement