Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!--- cr itzhuo if you used and carrduser (Jake) on insta pls and thankiesss enjoy it--->
- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
- <link href="//fonts.googleapis.com/css?family=Karla" rel="stylesheet">
- <link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
- <head>
- <link rel="preconnect" href="https://fonts.googleapis.com">
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
- <link href="https://fonts.googleapis.com/css2?family=Berkshire+Swash&display=swap" rel="stylesheet">
- <link rel="preconnect" href="https://fonts.googleapis.com">
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
- <link href="https://fonts.googleapis.com/css2?family=Questrial&display=swap" rel="stylesheet">
- <link rel="preconnect" href="https://fonts.googleapis.com">
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
- <link href="https://fonts.googleapis.com/css2?family=Gamja+Flower&display=swap" rel="stylesheet">
- </head>
- <style>
- @font-face {
- font-family: sant joan;
- src: url(https://dl.dropbox.com/s/iwvkrg8ccgd1pf4/SantJoanDespi-Regular.otf);
- }
- @font-face {
- font-family: lovely;
- src: url(https://dl.dropbox.com/s/xde2bkhiie1bm8r/LovelyRegular.ttf);
- }
- #container {
- width: 27em;
- height: 20em;
- background-image: url("https://dl.dropbox.com/s/ha2emf7wraljbg4/britgif.gif"); /* url of the img */
- background-color: #F781BE; /* if the img is unavailable */
- height: 200px; /* you need to set a specified height */
- background-position: center; /* to center the image */
- background-repeat: no-repeat; /* do not repeat the image */
- background-size: cover; /* to resize the background image to cover the entire container */
- transform-style: preserve-3d;
- border-radius: 0.75em;
- border: 4px solid #FE2EC8;
- box-shadow: 0 0 0 1px black, inset 0 0 0 1px black, 0px 0px 8px 0px #000;
- position: relative;
- padding-top:3px;
- padding-bottom: 15px;
- padding-left:10px;
- padding-right:10px;
- overflow: hidden;
- }
- .insides {
- position: relative;
- top: 10em;
- width: 100%;
- height: 0%;
- overflow-y: auto;
- color: black;
- border:4px double black;
- border-radius:10px;
- opacity: 0;
- transition: .4s all;
- }
- #container:hover .insides {
- opacity: 1.9;
- height:80%;
- top: 1em;
- font-family: 'Jost', sans-serif;
- background: rgba(255, 224, 247, 0.78);
- padding:10px;
- font-family: 'Questrial', sans-serif;
- font-size:15px;
- text-align:left;
- line-height: 1.3;
- }
- mark {
- background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(250,88,208,1) 100%);
- border: 1px solid #000;
- border-radius: 15px;
- box-shadow: 0px 0px 2px #000;
- font-family: lovely;
- color: white;
- text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0px 0px 3px #000;
- padding-left: 10px;
- padding-right:10px;
- letter-spacing: 1.5px;
- text-align: center;
- text-decoration: none;
- display: inline-block;
- font-size: 15px;
- margin: 0px 1px;
- cursor: hidden;
- }
- <!--- music player start here--->
- #ongaku {
- position:absolute;
- top:163px;
- left:15px;
- width:30px;
- height:30px;
- z-index:100;
- border:2px solid #000; /*Border Colour*/
- background-color: #fe2ec8; /*Music Tab Background Colour*/
- border-radius:30px;
- opacity:1;
- -webkit-transition: all 0.6s ease-in-out;
- -moz-transition: all 0.6s ease-in-out;
- -ms-transition: all 0.6s ease-in-out;
- -o-transition: all 0.6s ease-in-out;
- transition: all 0.6s ease-in-out;
- }
- a:link {
- text-decoration: none;
- }
- #gaku {
- width:24px;
- height:24px;
- margin-top:1px;
- margin-left:3px;
- overflow:hidden;
- -webkit-transition: all 0.6s ease-in-out;
- -moz-transition: all 0.6s ease-in-out;
- -ms-transition: all 0.6s ease-in-out;
- -o-transition: all 0.6s ease-in-out;
- transition: all 0.6s ease-in-out;
- }
- #kero {
- height:26px;
- }
- #kero img {
- margin-right:3px;
- margin-left:-1px;
- margin-top:3px;
- }
- #kero embed {
- margin-top:0px;
- }
- #kero embed, #kero {
- -webkit-transition: all 0.6s ease-in-out;
- -moz-transition: all 0.6s ease-in-out;
- -ms-transition: all 0.6s ease-in-out;
- -o-transition: all 0.6s ease-in-out;
- transition: all 0.6s ease-in-out;
- }
- #ongaku:hover {
- opacity:1;
- width:80px;
- border:2px solid black;
- background: linear-gradient(270deg, rgba(0,0,0,1) 0%, rgba(254,46,200,1) 100%);
- }
- #ongaku:hover #gaku {
- width:80px;
- }
- #ongaku:hover #kero {
- margin-left:-54px;
- }
- .gst.material-icons {
- margin-left:0px;
- position:relative;
- left:90px;
- top:-7px;
- font-weight:bold;
- font-size:16px;
- color: #fff;/* play & pause buttons color */
- box-shadow:0px 0px 8px 0px #000;
- cursor:pointer;
- text-decoration:none;
- }
- </style>
- <div id="container">
- <div class="insides">
- <center><span style="font-family: 'Berkshire Swash', cursive; font-size:25px; text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff, 0px 0px 6px #DF0174; color:#000;">Basic info</span></center>
- <br>
- <left><p><mark>About me<span style="font-family: 'Gamja Flower', cursive;">♡</span></mark>text text text text text text text text text text text text text text </p>
- <br>
- <p><mark>Things To Know</mark> text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
- <br>
- <p><mark>DNI</mark> text text text text text text text text text text text text text text </p>
- <br>
- </left>
- </div>
- </div>
- <div id="ongaku"><div id="gaku"><div id="kero">
- <table cellspacing"0" cellpadding="0"><tr><td>
- <!-- Music Gif URL Here (Replace the Link)--><img src="https://64.media.tumblr.com/tumblr_lv2uri9kmQ1r1itgh.gif"></td><td>
- <!-- Music Code Here -->
- <a class="fire1" onclick="javascript:fireAudio1();">
- <i class="gst material-icons playy1"> ♪</i>
- <i class="gst material-icons pausee1"> </i>
- </a>
- <audio id="audio1" src="https://dl.dropbox.com/s/mtpj1vo9dkyms17/GO.mp3"></audio>
- </td></tr>
- </table>
- </div></div></div>
- <script src="https://dl.dropbox.com/s/q3g9wib9m3prasf/glenplayer03.js"></script>
- <!--- scrollbar--->
- <style>
- #scroll {
- }
- .scroll {
- }
- /* width */
- ::-webkit-scrollbar {
- width: 7px;
- }
- /* Track */
- ::-webkit-scrollbar-track {
- border-radius: 10px;
- opacity:0.5px;
- }
- /* Handle */
- ::-webkit-scrollbar-thumb {
- background: linear-gradient(270deg, rgba(0,0,0,1) 0%, rgba(254,46,200,1) 100%);
- border-radius: 10px;
- opacity: 0.5;
- }
- /* Handle on hover */
- ::-webkit-scrollbar-thumb:hover {
- background: linear-gradient(270deg, rgba(0,0,0,1) 0%, rgba(254,46,200,1) 100%);
- opacity: 1.0;
- }
- </style>
RAW Paste Data