Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div id="cov"></div>
- <div id="bubbles">
- <div class="bubble x1"></div><div class="bubble x2"></div><div class="bubble x3"></div><div class="bubble x4"></div><div class="bubble x5"></div><div class="bubble x6"></div><div class="bubble x7"></div>
- </div>
- <div id="story"><h1>Lorem ipsum dolor sit amet,</h1> consectetur adipiscing elit. Nam dictum scelerisque elit. Sed viverra efficitur efficitur. Sed volutpat odio ut risus luctus, eu ullamcorper augue ullamcorper. Quisque lacinia gravida sem a rutrum. Praesent sit amet tristique enim, a dignissim urna. Morbi porttitor augue sed dui viverra hendrerit. Phasellus placerat quam a augue posuere, sed consectetur risus ultrices. Maecenas sed ipsum sapien. Integer viverra turpis at elit faucibus, sit amet tempor sem lobortis.
- [p]
- [b]Pellentesque elementum lacinia tempor. Nullam malesuada pharetra nisl, ut lobortis neque sagittis in. Donec vitae ex nunc. Vestibulum viverra nibh in enim condimentum pulvinar. Duis luctus dui non sagittis blandit. Vivamus a vehicula ipsum, vitae venenatis mi. Aliquam rhoncus elementum consequat. Nulla cursus tincidunt imperdiet. Ut eget lacinia elit, sed gravida risus. Quisque luctus lorem at nibh condimentum vulputate. Aliquam vitae ex ipsum. Sed sed volutpat mauris.[/b]
- [p]
- [i]Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent nec orci quis mi porta lacinia. Suspendisse convallis mattis nibh, vitae sodales dui interdum vel. Sed egestas urna sapien, non tempus ligula posuere non. Sed justo magna, ultricies ac sem vel, congue fringilla leo. Aliquam eu velit sit amet arcu tempus faucibus molestie bibendum nisl. Sed laoreet nulla a justo consequat fringilla.[/i]
- [p]
- [u]Mauris cursus ante eu molestie commodo. In leo odio, vehicula vitae maximus ac, laoreet sed tortor. Quisque a luctus dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean porttitor justo sed magna ullamcorper, in dignissim dui porta. Nam rhoncus suscipit risus vel sollicitudin. Mauris volutpat eros at dignissim volutpat.[/u]
- [p]
- Duis luctus, justo vitae commodo congue, metus orci molestie quam, ut bibendum enim felis id neque. Vestibulum mattis tempor odio ut ultrices. Morbi id viverra metus, id tincidunt odio. Mauris sollicitudin ex in egestas lobortis. Phasellus vel magna eros. Suspendisse tincidunt nunc lacus, quis molestie mi dictum sit amet. Nulla nec dolor blandit, commodo neque eget, fermentum lacus. Donec pulvinar massa nec facilisis tincidunt.
- [p][br]<h1>credits:</h1>
- [center]profile and coding by [userid=526420].
- [br]custom cursors from [url=http://oficinadehtml.tumblr.com/tagged/cursores]oficinadehtml[/url].
- [br]bubble code by [url=https://stackoverflow.com/users/1726343/asad-saeeduddin]asad saeeduddin[/url].
- [br]bubble vector from [url=http://mmls.mmu.edu.my/wordpress/1151102483/wp-content/uploads/sites/30195/2016/02/bubble-300x300.png]mmls[/url].
- [br]background from [url=https://unasd.org/wp-content/uploads/2017/12/ocean-underwater-light-wallpaper-3-1.jpg]here[/url].[/center]
- </div>
- <style>
- @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
- html {background-image:url(BIG BACKGROUND DIRECT IMAGE URL); background-repeat:no-repeat; background-position:center; background-size:cover; background-color:#2a666b;}
- body {background-color:transparent; background-image:url(PROFILE IMG DIRECT IMAGE URL); cursor:url('https://78.media.tumblr.com/51aa4b0cb73356472f4336df13b2fc6b/tumblr_inline_p7nrx1388N1r1shc4_75sq.png'), auto;
- background-repeat:no-repeat; background-position:left top; width:1200px!important; height:700px!important; overflow:hidden;
- position: absolute;}
- html,body,#page,#main-content,#content{position:static!important;}
- .container-fluid {position:absolute;top:0;left:0;right:0;bottom:0;}
- #content {height:auto!important; margin:0; padding:0; background-color:transparent;}
- #pet_info {margin:0; width:auto;}
- #page {margin:0; width:auto; background-color:transparent;}
- #column_1, #column_2, #column_3 {width:auto; padding:0;}
- #postcards, #menu, #sidebar, #rightbg, #bookmarks, #footer, .statbar, #column_1 h2, #column_3 h2, #pet_treasure h2, .pet_wco_info_date, .pet_age_info_date, #header, #stat_books_read, #stat_food_eaten, #pet_employment, #column_3 a, .statbar, .pet_wco_info_date, .pet_age_info_date, #pet_friends, .hustler, #cs_notice, .new-news-announcement-banner, .owner img, #pet_stats, #pet_minion, .pet_name, #pet_image, .pet_spotlight {display: none}
- #page, #header-lrc, #header-ban, #header-ban-main, #header-rrc {background: transparent}
- /* fonts and colors */
- td, p, body, div, a {font-family: 'Roboto Condensed', sans-serif; font-size:12px; color:#E7FFFF;}
- a:link, a:active, a:visited, a h3 {color:#fff; font-size:12px; font-family: 'Roboto Condensed', sans-serif;
- cursor:url('https://78.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_p7nrx1hoRW1r1shc4_75sq.png'), auto;}
- a:hover, .icon.heart:hover, a h3:hover{color: #E7FFFF;; text-decoration:none;}
- .icon.heart, .icon.heart.red {color:#61e8c7; font-size:10px;}
- ::-webkit-scrollbar{width:2px; border-radius:10px;}
- ::-webkit-scrollbar-thumb{background:#98DFEA;}
- ::-webkit-scrollbar-track{background:rgba(0,0,0,0.1);}
- .hr{background: -webkit-linear-gradient(left, transparent, #c1eae5, transparent);}
- h1{font-size:16px!important; text-align:center; font-weight:bold; font-style:italic; font-family:georgia; letter-spacing:-1px; color:#fff; padding-bottom:3px;}
- h2{font-size:14px !important; display:inline-block;
- font-weight: normal}
- h3{font-size: 14px !important}
- /* Pet Info */
- #story {position:absolute; top:254px; left:730px; width:380px; height:80px; overflow:auto; padding-right:5px; text-align:justify;
- text-shadow:1px 1px 1px rgba(0,0,0,0.3);}
- .pet_color_info {position:absolute; top:611px; left:610px; font-size:0px; text-align:left;}
- .pet_color_info img {display:none}
- .pet_color_info:before {font-size:11px; font-family: 'Roboto Condensed', sans-serif; content: 'the male custom hydrus paralix'}
- .owner:before {font-size:11px; content: 'a character by ';}
- .owner a {font-size:11px;}
- .owner {position:absolute; top:611px; left:980px; font-size:0px; text-align:right; font-family: 'Roboto Condensed', sans-serif; text-transform:lowercase;}
- .pet_like {position:absolute; top:601px; left:850px;}
- #pet_treasure {position:absolute; top:368px; left:570px; width:520px; height:210px; overflow:auto; border-radius:8px; border:5px solid #fff;
- background-color:#fff;}
- .treasure_item {margin-bottom:4px;}
- .treasure_item img {opacity:0.4;}
- .treasure_item img:hover {opacity:1;}
- /* transition speeds */
- a, .icon.heart, a:hover, .icon.heart:hover, a h3, a h3:hover, .treasure_item img, .treasure_item img:hover {transition: all .6s ease-in-out}
- /* bubbles */
- #bubbles { height: 100% }
- #bubbles { padding: 100px 0 }
- .bubble {
- width:50px;
- height:50px;
- background:url(BUBBLE DIRECT IMAGE URL);
- border-radius: 200px;
- -moz-border-radius: 200px;
- -webkit-border-radius: 200px;
- position: absolute;
- }
- .x1 {left:600px;
- -webkit-transform: scale(0.7);
- -moz-transform: scale(0.7);
- transform: scale(0.7);
- opacity: 0.2;
- -webkit-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
- -moz-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
- -o-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
- }
- .x2 {
- left: 200px;
- -webkit-transform: scale(0.4);
- -moz-transform: scale(0.4);
- transform: scale(0.4);
- opacity: 0.5;
- -webkit-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
- -moz-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
- -o-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
- }
- .x3 {
- left: 400px;
- -webkit-transform: scale(0.6);
- -moz-transform: scale(0.6);
- transform: scale(0.6);
- opacity: 0.3;
- -webkit-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
- -moz-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
- -o-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
- }
- .x4 {
- left: 900px;
- -webkit-transform: scale(0.55);
- -moz-transform: scale(0.55);
- transform: scale(0.55);
- opacity: 0.35;
- -webkit-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
- -moz-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
- -o-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
- }
- .x5 {
- left: 120px;
- -webkit-transform: scale(0.6);
- -moz-transform: scale(0.6);
- transform: scale(0.6);
- opacity: 0.3;
- -webkit-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate;
- -moz-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate;
- -o-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate;
- }
- .x6 {
- left: 1200px;
- -webkit-transform: scale(0.3);
- -moz-transform: scale(0.3);
- transform: scale(0.3);
- opacity: 0.2;
- -webkit-animation: moveclouds 9s linear infinite, sideWays 2s ease-in-out infinite alternate;
- -moz-animation: moveclouds 9s linear infinite, sideWays 2s ease-in-out infinite alternate;
- -o-animation: moveclouds 9s linear infinite, sideWays 2s ease-in-out infinite alternate;
- }
- .x7 {
- left: 1600px;
- -webkit-transform: scale(0.5);
- -moz-transform: scale(0.5);
- transform: scale(0.5);
- opacity: 0.3;
- -webkit-animation: moveclouds 14s linear infinite, sideWays 2s ease-in-out infinite alternate;
- -moz-animation: moveclouds 14s linear infinite, sideWays 2s ease-in-out infinite alternate;
- -o-animation: moveclouds 14s linear infinite, sideWays 2s ease-in-out infinite alternate;
- }
- @-webkit-keyframes moveclouds {
- 0% {
- top: 1500px;
- }
- 100% {
- top: -500px;
- }
- }
- @-webkit-keyframes sideWays {
- 0% {
- margin-left:0px;
- }
- 100% {
- margin-left:50px;
- }
- }
- @-moz-keyframes moveclouds {
- 0% {
- top: 500px;
- }
- 100% {
- top: -500px;
- }
- }
- @-moz-keyframes sideWays {
- 0% {
- margin-left:0px;
- }
- 100% {
- margin-left:50px;
- }
- }
- @-o-keyframes moveclouds {
- 0% {
- top: 500px;
- }
- 100% {
- top: -500px;
- }
- }
- @-o-keyframes sideWays {
- 0% {
- margin-left:0px;
- }
- 100% {
- margin-left:50px;
- }
- }
- /* profile art */
- #cov {position:absolute; left:120px; top:200px; width:396px; height:396px; background-image:url(FLOATY DIRECT IMAGE URL);
- float: left;
- -webkit-animation-name: floatingx;
- -webkit-animation-duration: 6s;
- -webkit-animation-iteration-count: infinite;
- -webkit-animation-timing-function: ease-in-out;
- -moz-animation-name: floating;
- -moz-animation-duration: 6s;
- -moz-animation-iteration-count: infinite;
- -moz-animation-timing-function: ease-in-out;
- margin-left: 0px;
- margin-top: 0px;
- @-webkit-keyframes floatingx{
- from {-webkit-transform:translate(0, 0px);}
- 50% {-webkit-transform:translate(0, 25px);}
- to {-webkit-transform: translate(0, 0px); }
- }
- @-moz-keyframes floating{
- from {-moz-transform:translate(0, 0px);}
- 50% {-moz-transform:translate(0, 25px);}
- to {-moz-transform: translate(0, 0px);}
- }
- }
- .floating{
- float: left;
- -webkit-animation-name: floatingx;
- -webkit-animation-duration: 6s;
- -webkit-animation-iteration-count: infinite;
- -webkit-animation-timing-function: ease-in-out;
- -moz-animation-name: floating;
- -moz-animation-duration: 6s;
- -moz-animation-iteration-count: infinite;
- -moz-animation-timing-function: ease-in-out;
- margin-left: 0px;
- margin-top: 0px;
- }
- @-webkit-keyframes floatingx{
- from {-webkit-transform:translate(0, 0px);}
- 50% {-webkit-transform:translate(0, 25px);}
- to {-webkit-transform: translate(0, 0px); }
- }
- @-moz-keyframes floating{
- from {-moz-transform:translate(0, 0px);}
- 50% {-moz-transform:translate(0, 25px);}
- to {-moz-transform: translate(0, 0px);}
- }
- </style>
Add Comment
Please, Sign In to add comment