Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!--
- All-in-one Page #1 by Vanne @ vitanica.tumblr.com
- .Do NOT remove the credits
- .Do NOT steal my codes
- .Do NOT use as base code
- .Do NOT claim as your own
- For any questions visit my ask and faq page.
- -->
- <!DOCTYPE html>
- <head>
- <!-- Replace {Title} with anything you want-->
- <title>{Title}</title>
- <link rel="shortcut icon" href="{Favicon}">
- <link rel="alternate" type="application/rss+xml" href="{RSS}">
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
- <script src="http://static.tumblr.com/747hq6z/UECmpnu4l/jquery.scrollto-1.4.3.1-min.js" type="text/javascript"></script>
- <script src="http://static.tumblr.com/747hq6z/58Qmpnv3a/jquery.localscroll-1.2.7-min.js" type="text/javascript"></script>
- <script type="text/javascript">
- $(document).ready(function () {
- $.localScroll();
- });
- </script>
- <script language="JavaScript" src="http://dl.dropbox.com/u/3173073/GothicDarkness/qTip.js" type="text/JavaScript"></script>
- <style>
- div#qTip { margin-top: 3px; padding: 4px 8px 4px 8px; z-index: 99999; display: none; text-align: center; font-family: Consolas; position: absolute; font-style: italic; font-size: 9px; background: #93CDEE; color: #fff; border-radius: 4px; letter-spacing: 1px; }
- </style>
- <style type="text/css">
- @import url(http://weloveiconfonts.com/api/?family=entypo);
- /* entypo */
- [class*="entypo-"]:before {
- font-family: 'entypo', sans-serif;
- }
- body {
- font-family: consolas;
- font-size: 11px;
- color: #454545;
- overflow: hidden;
- background: #A5C9DE;
- }
- a { color: #6B80A9; text-decoration: none; }
- a:hover { color: #ACD6EE; text-decoration: none; }
- b, strong { color: #6DB4DE; }
- i, em { color: #93CDEE; }
- strike { color: #93CDEE; }
- u { color: #6DB4DE; }
- ::-webkit-scrollbar-thumb:vertical {
- background: #ABC0E0;
- border-radius: 5px;
- height: auto;}
- ::-webkit-scrollbar-thumb:horizontal {
- background: #ABC0E0;
- border-radius: 5px;
- height: auto;}
- ::-webkit-scrollbar {
- height: 4px;
- width: 4px;
- background: #fff;}
- ::selection {
- background: #D7F0F0;
- }
- /* - - - - - - - - title, holder and links section - - - - - - - - */
- #titlea, #titlem, #titlet, #titleb {
- width: 500px;
- height: 30px;
- position: absolute;
- margin-top: 40px;
- color: #fff;
- text-align: center;
- font-family: arial;
- font-weight: bold;
- letter-spacing: -2px;
- border-radius: 30px;
- word-spacing: 6px;
- font-size: 22px;
- line-height: 30px;
- text-transform: lowercase;
- }
- #titlea { background: #6DB4DE; }
- #titlem { background: #93CDEE; }
- #titlet { background: #98B6F0; }
- #titleb { background: #6DB4DE; }
- #holdera, #holderm, #holdert, #holderb {
- position: absolute;
- width: 460px;
- padding: 20px;
- background: #fff;
- border-radius: 20px;
- }
- #holdera { margin-top: 230px; text-align: center; max-height: 400px; overflow: auto; }
- #holderm { margin-top: 90px; height: 600px; overflow: auto; padding: 0px 20px 0px 20px;}
- #holdert { margin-top: 90px; }
- #holderb { margin-top: 90px; text-align: left; max-height: 500px; overflow: auto; }
- /* songs cover */
- #holderm img {
- width: 80px;
- margin: 0px 20px 0px 0px;
- border: 5px solid #93C2DE;
- border-radius: 15px;
- }
- /* blogroll images */
- #holderb img {
- width: 54px;
- margin: 10px;
- border: 5px solid #9FDBDB;
- border-radius: 40px;
- opacity: .8;
- }
- #nav {
- position: fixed;
- top: 10px;
- right: 10px;
- z-index: 9;
- width: 80px;}
- .navi {
- position: fixed;
- margin-left: 27px;
- margin-top: 0px;
- text-align: center;
- width: 100px;
- height: 100%;}
- .navi a {
- z-index: 1;
- margin: 15px 0px 15px 0px;
- display: block;
- border-radius: 30px;
- padding-top: 4px;
- width: 20px;
- height: 16px;
- color: #fff;
- background: #93CDEE;
- border: 2px solid #fff;
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- -ms-transition: all 0.5s ease-in-out;
- transition: all 0.5s ease-in-out;}
- .navi a:hover {
- background: #7398E1;}
- .navti {
- z-index: -1;
- position: absolute;
- opacity: 0;
- margin-top: -19px;
- margin-left: 6px;
- padding: 4px;
- width: 0px;
- overflow: hidden;
- height: 16px;
- line-height: 16px;
- font-size: 11px;
- letter-spacing: 2px;
- font-family: consolas;
- font-style: italic;
- text-transform: lowercase;
- background: #fff;
- border-top-left-radius: 30px;
- border-bottom-left-radius: 30px;
- color: #d2d2d2;
- -webkit-transition: all .4s ease;
- -moz-transition: all .4s ease;
- -o-transition: all .4s ease;
- transition: all .4s ease;}
- .navi a:hover .navti {
- opacity: 1;
- width: 90px;
- margin-left: -90px;
- }
- /* - - - - - - - - - - - about section - - - - - - - - - - - */
- .about {
- top: -10px;
- left: -10px;
- width: 100%;
- height: 910px;
- background: url('https://24.media.tumblr.com/47aa932e6a76f98857f69d05e2f27bda/tumblr_n1odeovR551t0v4cmo5_250.png'); /*about background*/
- }
- #about {
- width:500px;
- margin:0 auto 0 auto;
- color:#a8a8a8;
- }
- #icon { position: absolute; margin-top: 90px; background: #fff; width: 120px; border-radius: 20px; } #icon img{ width: 100px; border-radius: 20px; padding: 10px 10px 7px 10px; }
- #line1, #line2, #line3 { position: absolute; margin-left: 120px; background: #fff; width: 370px; padding: 4px; border-top-right-radius: 20px; border-bottom-right-radius: 20px; }
- #line1 { margin-top: 110px; }
- #line2 { margin-top: 140px; }
- #line3 { margin-top: 170px; }
- /* - - - - - - - - - - - music section - - - - - - - - - - - */
- .music{
- width: 100%;
- height: 900px;
- background: url('https://24.media.tumblr.com/8939bf293e12aa837a2b92645724f327/tumblr_n1odeovR551t0v4cmo4_250.png'); /*music background*/
- }
- #music {
- width:500px;
- min-height:600px;
- margin:0 auto 0 auto;
- }
- #song {
- margin-top: 15px;
- margin-bottom: 15px;
- width:460px;
- }
- #musicpp {
- position: absolute;
- margin-top: -65px;
- margin-left: 90px;
- overflow: hidden;
- text-align: center;
- font-size: 12px;
- letter-spacing: 1px;
- padding: 2px;
- width: 25px;
- height: 25px;
- border-top-right-radius: 4px;
- border-bottom-right-radius: 4px;
- background: #A7CADE;
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- -ms-transition: all 0.5s ease-in-out;
- transition: all 0.5s ease-in-out;
- }
- #musicpp:hover {
- width: 40px;
- }
- .iconn { margin-top: -24px; font-size: 13px; padding: 4px; color: #fff; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; }
- .playerr { margin-left: -50px; width: 26px; opacity: 0; padding: 1px 9px 10px 9px; overflow: hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
- #musicpp:hover .iconn {margin-left: 19px;}
- #musicpp:hover .playerr {margin-left: -28px; opacity: 1;}
- #songname {
- margin-left: 140px;
- margin-top: -90px;
- position: absolute;
- width: 140px;
- color: #fff;
- background: #97B5E0;
- padding: 5px;
- text-transform: uppercase;
- text-align: center;
- border-radius: 6px;
- }
- #artist {
- margin-left: 300px;
- margin-top: -90px;
- position: absolute;
- width: 140px;
- color: #fff;
- background: #8DDBDB;
- padding: 5px;
- text-transform: uppercase;
- text-align: center;
- border-radius: 6px;
- }
- #songdescription {
- margin-left: 140px;
- margin-top: -60px;
- position: absolute;
- width: 300px;
- height: 45px;
- overflow: auto;
- background: #fafafa;
- padding: 5px;
- border-radius: 6px;
- }
- /* - - - - - - - - - - - tags section - - - - - - - - - - - */
- .tags {
- width: 100%;
- height: 900px;
- background: url('https://31.media.tumblr.com/a26a4b1f798342b3bae12f50ef0d5c01/tumblr_n1odeovR551t0v4cmo6_250.png'); /*tags background*/
- }
- #tags {
- width:500px;
- min-height:600px;
- margin:0 auto 0 auto;
- }
- #tagsection {
- width: 200px;
- float: left;
- margin: 10px;
- padding: 5px;
- height: 200px;
- overflow: auto;
- }
- #tagsection a {
- display: block;
- width: 180px;
- margin-bottom: 6px;
- padding: 5px;
- background: #B6D1F9;
- color: #fff;
- border-radius: 30px;
- }
- #tagsection a:hover {
- background: #99DEDE;
- }
- #tagstitle {
- font-family: arial;
- font-weight: bold;
- font-size: 20px;
- text-align: center;
- letter-spacing: -2px;
- width:180px;
- padding: 5px;
- color: #fff;
- margin-bottom: 6px;
- background: #B4DFF8;
- border-radius: 30px;
- }
- /* - - - - - - - - - - - blogroll section - - - - - - - - - - - */
- .blogroll {
- width: 100%;
- height: 900px;
- background: url('https://31.media.tumblr.com/1f4bd6fd3df0398907c97664f8d27533/tumblr_n1odeovR551t0v4cmo1_100.png'); /*blogroll background*/
- }
- #blogroll {
- width:500px;
- min-height:600px;
- margin:0 auto 0 auto;
- }
- #pancake {
- z-index: 999999999;
- position: fixed;
- bottom: 10px;
- left: 20px;
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- -ms-transition: all 0.5s ease-in-out;
- transition: all 0.5s ease-in-out;
- }
- #pancake a {
- display: inline-block;
- text-align: center;
- font-size: 15px;
- font-family: arial;
- letter-spacing: -1px;
- padding: 2px 4px 4px 3px;
- font-weight: bold;
- width: 14px;
- height: 15px;
- line-height: 15px;
- overflow: hidden;
- background: #B4DFF8;
- color: #fff;
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- -ms-transition: all 0.5s ease-in-out;
- transition: all 0.5s ease-in-out;
- }
- #cupcake {
- z-index: -1;
- position: fixed;
- margin-top: -25px;
- margin-left: 0px;
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- -ms-transition: all 0.5s ease-in-out;
- transition: all 0.5s ease-in-out;
- }
- #cupcake a {
- display: inline-block;
- font-size: 15px;
- font-family: arial;
- letter-spacing: -1px;
- padding: 4px 4px 4px 0px;
- font-weight: bold;
- width: 10px;
- height: 13px;
- line-height: 13px;
- overflow: hidden;
- background: #fff;
- color: #B4DFF8;
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- -ms-transition: all 0.5s ease-in-out;
- transition: all 0.5s ease-in-out;
- }
- #pancake:hover #cupcake a {
- width: 70px;
- margin-left: 21px;
- }
- </style>
- </head>
- <body>
- <div id="nav">
- <div class="navi">
- <a href="/"><span class="entypo-home"></span>
- <div class="navti">home</div>
- </a>
- <a href="/ask"><span class="entypo-mail"></span>
- <div class="navti">message</div>
- </a>
- <a href="#about"><span class="entypo-book"></span>
- <div class="navti">about me</div>
- </a>
- <a href="#music"><span class="entypo-note"></span>
- <div class="navti">music</div>
- </a>
- <a href="#tags"><span class="entypo-tag"></span>
- <div class="navti">tags</div>
- </a>
- <a href="#blogroll"><span class="entypo-star"></span>
- <div class="navti">blogroll</div>
- </a>
- </div>
- </div>
- <!--!!!!!!!!!!!!!!!!!!!!!!!!! STARTS "ABOUT" !!!!!!!!!!!!!!!!!!!!!!!!!-->
- <div class="about">
- <div id="about">
- <div id="titlea">about me</div>
- <!--Replace the following url with the url of the image you want to put in the "About" section -->
- <div id="icon"><img src="https://31.media.tumblr.com/cf62bda11b5d638925fd0a1ac9dd2f42/tumblr_n39esgwPFH1t0v4cmo6_250.png"></div>
- <div id="line1"><b>NAME:</b> Your name goes here</div>
- <div id="line2"><b>AGE:</b> Your age goes here</div>
- <div id="line3"><b>COUNTRY:</b> Your country goes here</div>
- <div id="holdera">
- <!--This is your description. Delete this line and write anything you want. -->
- </div>
- </div>
- </div>
- <!--!!!!!!!!!!!!!!!!!!!!!!!!! STARTS "MUSIC" !!!!!!!!!!!!!!!!!!!!!!!!!-->
- <div class="music">
- <div id="music">
- <div id="titlem">music</div>
- <div id="holderm">
- <!-- Starts song #1-->
- <div id="song">
- <!-- Song #1 Cover Image: Replace the URL with the URL of the cover image of the song -->
- <img src="http://static.tumblr.com/n9vj50j/ZjIn3h4wr/captura_de_pantalla_2014-04-03_a_las_15.26.33.png">
- <div id="musicpp">
- <div class="playerr">
- <!-- Song #1 Code: Delete this line and paste the code of the song from Billy Music Player (there's a tutorial in my tutorials page) -->
- <embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=false&f0=http://www.sheepproductions.com/sammy.mp3&t0=Sammy&total=1" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" />
- </div>
- <div class="iconn">
- <span class="entypo-note-beamed"></span>
- </div>
- </div>
- <div id="songname">Song #1 Name</div>
- <div id="artist">Song #1 Artist</div>
- <div id="songdescription">Here goes the description of the song</div>
- </div>
- <!-- End of song #1 -->
- <!-- Starts song #2 -->
- <div id="song">
- <!-- Song #2 Cover Image: Replace the URL with the URL of the cover image of the song -->
- <img src="http://static.tumblr.com/n9vj50j/ZjIn3h4wr/captura_de_pantalla_2014-04-03_a_las_15.26.33.png">
- <div id="musicpp">
- <div class="playerr">
- <!-- Song #2 Code: Delete this line and paste the code of the song from Billy Music Player (there's a tutorial in my tutorials page) -->
- <embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=false&f0=http://www.sheepproductions.com/sammy.mp3&t0=Sammy&total=1" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" />
- </div>
- <div class="iconn">
- <span class="entypo-note-beamed"></span>
- </div>
- </div>
- <div id="songname">Song #2 Name</div>
- <div id="artist">Song #2 Artist</div>
- <div id="songdescription">Here goes the description of the song</div>
- </div>
- <!-- End of song #2 -->
- <!-- Starts song #3 -->
- <div id="song">
- <!-- Song #3 Cover Image: Replace the URL with the URL of the cover image of the song -->
- <img src="http://static.tumblr.com/n9vj50j/ZjIn3h4wr/captura_de_pantalla_2014-04-03_a_las_15.26.33.png">
- <div id="musicpp">
- <div class="playerr">
- <!-- Song #3 Code: Delete this line and paste the code of the song from Billy Music Player (there's a tutorial in my tutorials page) -->
- <embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=false&f0=http://www.sheepproductions.com/sammy.mp3&t0=Sammy&total=1" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" />
- </div>
- <div class="iconn">
- <span class="entypo-note-beamed"></span>
- </div>
- </div>
- <div id="songname">Song #3 Name</div>
- <div id="artist">Song #3 Artist</div>
- <div id="songdescription">Here goes the description of the song</div>
- </div>
- <!-- End of song #3 -->
- <!-- Starts song #4 -->
- <div id="song">
- <!-- Song #4 Cover Image: Replace the URL with the URL of the cover image of the song -->
- <img src="http://static.tumblr.com/n9vj50j/ZjIn3h4wr/captura_de_pantalla_2014-04-03_a_las_15.26.33.png">
- <div id="musicpp">
- <div class="playerr">
- <!-- Song #4 Code: Delete this line and paste the code of the song from Billy Music Player (there's a tutorial in my tutorials page) -->
- <embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=false&f0=http://www.sheepproductions.com/sammy.mp3&t0=Sammy&total=1" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" />
- </div>
- <div class="iconn">
- <span class="entypo-note-beamed"></span>
- </div>
- </div>
- <div id="songname">Song #4 Name</div>
- <div id="artist">Song #4 Artist</div>
- <div id="songdescription">Here goes the description of the song</div>
- </div>
- <!-- End of song #4 -->
- <!-- Starts song #5 -->
- <div id="song">
- <!-- Song #5 Cover Image: Replace the URL with the URL of the cover image of the song -->
- <img src="http://static.tumblr.com/n9vj50j/ZjIn3h4wr/captura_de_pantalla_2014-04-03_a_las_15.26.33.png">
- <div id="musicpp">
- <div class="playerr">
- <!-- Song #5 Code: Delete this line and paste the code of the song from Billy Music Player (there's a tutorial in my tutorials page) -->
- <embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=false&f0=http://www.sheepproductions.com/sammy.mp3&t0=Sammy&total=1" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" />
- </div>
- <div class="iconn">
- <span class="entypo-note-beamed"></span>
- </div>
- </div>
- <div id="songname">Song #5 Name</div>
- <div id="artist">Song #5 Artist</div>
- <div id="songdescription">Here goes the description of the song</div>
- </div>
- <!-- End of song #5 -->
- <!-- Starts song #6 -->
- <div id="song">
- <!-- Song #6 Cover Image: Replace the URL with the URL of the cover image of the song -->
- <img src="http://static.tumblr.com/n9vj50j/ZjIn3h4wr/captura_de_pantalla_2014-04-03_a_las_15.26.33.png">
- <div id="musicpp">
- <div class="playerr">
- <!-- Song #6 Code: Delete this line and paste the code of the song from Billy Music Player (there's a tutorial in my tutorials page) -->
- <embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=false&f0=http://www.sheepproductions.com/sammy.mp3&t0=Sammy&total=1" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" />
- </div>
- <div class="iconn">
- <span class="entypo-note-beamed"></span>
- </div>
- </div>
- <div id="songname">Song #6 Name</div>
- <div id="artist">Song #6 Artist</div>
- <div id="songdescription">Here goes the description of the song</div>
- </div>
- <!-- End of song #6 -->
- </div>
- </div>
- </div>
- <!--!!!!!!!!!!!!!!!!!!!!!!!!! STARTS "TAGS" !!!!!!!!!!!!!!!!!!!!!!!!!-->
- <div class="tags">
- <div id="tags">
- <div id="titlet">tags</div>
- <!-- Replace "#" with the link of the tag; and "tag" with the name of the tag. -->
- <div id="holdert">
- <div id="tagsection">
- <div id="tagstitle">title</div>
- <a href="#">tag</a>
- <a href="#">tag</a>
- <a href="#">tag</a>
- <a href="#">tag</a>
- <a href="#">tag</a>
- <a href="#">tag</a>
- <a href="#">tag</a>
- <a href="#">tag</a>
- <a href="#">tag</a>
- <a href="#">tag</a>
- </div>
- <div id="tagsection">
- <div id="tagstitle">title</div>
- <a href="#">tag</a>
- <a href="#">tag</a>
- <a href="#">tag</a>
- <a href="#">tag</a>
- <a href="#">tag</a>
- <a href="#">tag</a>
- <a href="#">tag</a>
- <a href="#">tag</a>
- <a href="#">tag</a>
- <a href="#">tag</a>
- </div>
- <div id="tagsection">
- <div id="tagstitle">title</div>
- <a href="#">tag</a>
- <a href="#">tag</a>
- <a href="#">tag</a>
- <a href="#">tag</a>
- <a href="#">tag</a>
- <a href="#">tag</a>
- <a href="#">tag</a>
- <a href="#">tag</a>
- <a href="#">tag</a>
- <a href="#">tag</a>
- </div>
- <div id="tagsection">
- <div id="tagstitle">title</div>
- <a href="#">tag</a>
- <a href="#">tag</a>
- <a href="#">tag</a>
- <a href="#">tag</a>
- <a href="#">tag</a>
- <a href="#">tag</a>
- <a href="#">tag</a>
- <a href="#">tag</a>
- <a href="#">tag</a>
- <a href="#">tag</a>
- </div>
- </div>
- </div>
- </div>
- <!--!!!!!!!!!!!!!!!!!!!!!!!!! STARTS "BLOGROLL" !!!!!!!!!!!!!!!!!!!!!!!!!-->
- <div class="blogroll">
- <div id="blogroll">
- <div id="titleb">blogroll</div>
- <div id="holderb">
- {block:Following}{block:Followed}
- <a target='_blank' href='{FollowedURL}' title="{FollowedName}"><img src='{FollowedPortraitURL-64}' /></a>
- {/block:Followed}{/block:Following}
- </div>
- </div>
- </div>
- <div id="pancake">
- <a href="http://vitanica.tumblr.com/">v</a>
- <div id="cupcake"><a href="http://vitanica.tumblr.com">vitanica</a></div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement