Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- note: there are a lot of codes.. i'll try to section this off as best as i can! please refer to the tutorial for edits / how to make it look good on mobile! :) [the list of embeds may NOT be as in order as the tutorial, i've put it in order from the top code to the bottom code based off the carrd]
- ---- for header embed ----
- <link rel="stylesheet" href="https://unpkg.com/98.css">
- <div class="window" style="box-shadow:inset -1px -0px #0a0a0a,inset 1px 1px #fff,inset -2px -0px grey,inset 2px 2px #dfdfdf;">
- <div class="title-bar">
- <div class="title-bar-text">
- ruesha's site (o´ω`o)
- </div>
- <div class="title-bar-controls">
- <button aria-label="Minimize">
- </button><button aria-label="Maximize">
- </button><button aria-label="Close">
- </button></div></div></div>
- ---- for the image ----
- border: 2px inset;
- ---- main container ----
- box-shadow: inset -1px -1px #0a0a0a, inset 1px 0px #fff, inset -2px -2px grey, inset 2px 0px #dfdfdf;
- ---- colored scrollbox w/ credits ----
- font-family: pixel;
- height: 75px;
- background: #FFB5D9;
- padding: 5px;
- border: 2px inset;
- border-radius: 6px;
- font-size: 1em;
- overflow-y: scroll;
- ---- for button design ----
- font-family: pixel;
- box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 0px #dfdfdf;
- clicksound.playclip(); in "On Click"
- ---- embed 'buttons' ----
- <style>
- #buttons01 {
- transition: .2s ease;
- }
- a:hover {
- transform: translateY(-20%);
- }
- </style>
- ---- embed 'style' ----
- <style>
- <link rel="stylesheet" href="https://unpkg.com/98.css" >
- </style>
- ---- embed 'sound' ----
- <script>
- // Mouseover/ Click sound effect- by JavaScript Kit (www.javascriptkit.com)
- // Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
- //** Usage: Instantiate script by calling: var uniquevar=createsoundbite("soundfile1", "fallbackfile2", "fallebacksound3", etc)
- //** Call: uniquevar.playclip() to play sound
- var html5_audiotypes={ //define list of audio file extensions and their associated audio types. Add to it if your specified audio file isn't on this list:
- "mp3": "audio/mpeg",
- "mp4": "audio/mp4",
- "ogg": "audio/ogg",
- "wav": "audio/wav"
- }
- function createsoundbite(sound){
- var html5audio=document.createElement('audio')
- if (html5audio.canPlayType){ //check support for HTML5 audio
- for (var i=0; i<arguments.length; i++){
- var sourceel=document.createElement('source')
- sourceel.setAttribute('src', arguments[i])
- if (arguments[i].match(/\.(\w+)$/i))
- sourceel.setAttribute('type', html5_audiotypes[RegExp.$1])
- html5audio.appendChild(sourceel)
- }
- html5audio.load()
- html5audio.playclip=function(){
- html5audio.pause()
- html5audio.currentTime=0
- html5audio.play()
- }
- return html5audio
- }
- else{
- return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}}
- }
- }
- //Initialize two sound clips with 1 fallback file each:
- var mouseoversound=createsoundbite("https://a.tumblr.com/tumblr_ojrn7aGBii1w2e2oyo1.mp3")
- var clicksound=createsoundbite("https://a.tumblr.com/tumblr_ojrmy55yUN1w2e2oyo1.mp3")
- </script>
- ---- for white scrollbox w/ info ----
- (to adjust for mobile, check the tutorial; you might have to adjust it for your carrd!)
- height: 225px;
- background: #fff;
- padding: 5px;
- overflow: auto;
- border: 2px inset;
- border-radius: 6px;
- width: 200px;
- position: absolute;
- left: 14em;
- bottom: 5.5em;
- z-index: 100;
- ---- texts ----
- <style>
- @font-face {
- font-family: emoji;
- src: url(https://dl.dropbox.com/s/cvba4kh6qm23mru/EmojiFont.ttf);
- }
- @font-face {
- font-family: pixel;
- src: url(https://dl.dropbox.com/s/kmhe7d3n18vdz5e/w95fa.woff?dl=0);
- }
- </style>
- ---- embed 'hover' ----
- <style>
- a { transition: .4s; }
- a:hover { letter-spacing: 2px; }
- </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement