camera crd tutorial ©️ fyodorcrds

<------------------------ embed01 ------------------------>

<script>
document.getElementById('menu').onclick = function() {
document.getElementById('sound').play();
}

document.getElementById('home').onclick = function() {
document.getElementById('sound').play();
}

document.getElementById('star').onclick = function() {
document.getElementById('sound').play();
}

document.getElementById('heart').onclick = function() {
document.getElementById('sound').play();
}
</script>
<audio id="sound" src="https://cdn.discordapp.com/attachments/916511538410569829/1006909357981712414/mouse_click_fx.mp3" preload="auto"></audio>

<style>
/* width */
::-webkit-scrollbar {
width: 6px;
}
/* track */
::-webkit-scrollbar-track {
background: #FFFFFF;
}
/* handle */
::-webkit-scrollbar-thumb {
background: #BCBEC0;
border-radius: 25px;
}
/* handle hover */
::-webkit-scrollbar-thumb:hover {
background: #999999;
border-radius: 25px;
}
</style>
<style>
@font-face { font-family: PC98; src: url(https://dl.dropbox.com/s/q6te1rmeglfy4bf/pc-9800.ttf); }
</style>
<style>

@font-face {
font-family: romantic;
src: url(https://dl.dropbox.com/s/f9cfrx4wyt13rwv/ROMANTIC.TTF);
}

#fyodor {
background-image: url(https://i.imgur.com/aGyicOn.png);
background-position: center;
background-size: 155px 47px;
background-repeat: no-repeat;
}

</style>
<script type="text/javascript">
// <![CDATA[
var speed=40; // lower number for faster
var warp=3; // from 1 to 10
var stars=100; // number of stars
var colours=new Array("#BCBEC0", "#999999"); // colours of stars
var position=-1; // set to '0' for foreground and '-1' for stars to appear in the background, behind text on the page

/****************************
* Star Warp Effect *
*(c)2005-14 mf2fm web-design *
* http://www.mf2fm.com/rv *
* DON'T EDIT BELOW THIS BOX *
****************************/
var strs=new Array();
var strx=new Array();
var stry=new Array();
var stdx=new Array();
var stdy=new Array();
var strz=new Array();
var swide=800;
var shigh=600;
warp=1+warp/125;

if (typeof('addRVLoadEvent')!='function') function addRVLoadEvent(funky) {
var oldonload=window.onload;
if (typeof(oldonload)!='function') window.onload=funky;
else window.onload=function() {
if (oldonload) oldonload();
funky();
}
}

addRVLoadEvent(initiate_hyperjump);

function initiate_hyperjump() { if (document.getElementById) {
var i, temp;
boddie=document.createElement("div");
boddie.style.position="fixed";
boddie.style.top="0px";
boddie.style.left="0px";
boddie.style.width="1px";
boddie.style.height="1px";
boddie.style.overflow="visible";
boddie.style.backgroundColor="transparent";
boddie.style.zIndex=position;
i=document.body.style.backgroundColor;
if (document.body.parentNode) {
if (i) document.body.parentNode.style.backgroundColor=i;
document.body.style.backgroundColor="transparent";
}
document.body.insertBefore(boddie, document.body.firstChild);
set_width();
for (i=0; i<stars; i++) {
strs[i]=document.createElement("div");
strs[i].style.color=colours[i%colours.length];
strs[i].style.backgroundColor="transparent";
strs[i].style.position="absolute";
strs[i].appendChild(document.createTextNode("*"));
strs[i].style.font="13px monospace";
stdy[i]=Math.random()*6-3;
stdx[i]=Math.random()*8-4;
temp=Math.random()*100;
strx[i]=swide/2+temp*stdx[i];
stry[i]=shigh/2+temp*stdy[i];
if (Math.abs(stdx[i])+Math.abs(stdy[i])>5) strz[i]=13;
else if (Math.abs(stdx[i])+Math.abs(stdy[i])>3) strz[i]=7;
else strz[i]=2;
strs[i].style.fontSize=strz[i]+"px";
boddie.appendChild(strs[i]);
}
setInterval("warp_drive()", speed);
}}

function warp_drive() {
var i;
for (i=0; i<stars; i++) {
stry[i]+=stdy[i];
strx[i]+=stdx[i];
stdx[i]*=warp;
stdy[i]*=warp;
if (stry[i]>0 && stry[i]<shigh && strx[i]>0 && strx[i]<swide) {
if (Math.abs(stdx[i])+Math.abs(stdy[i])>strz[i]) strs[i].style.fontSize=++strz[i]+"px";
strs[i].style.left=strx[i]+"px";
strs[i].style.top=stry[i]+"px"
}
else {
strx[i]=swide/2;
stry[i]=shigh/2;
strx[i]+=3*(stdx[i]=Math.random()*8-4);
stry[i]+=3*(stdy[i]=Math.random()*6-3);
if (Math.abs(stdx[i])+Math.abs(stdy[i])>5) strz[i]=13;
else if (Math.abs(stdx[i])+Math.abs(stdy[i])>3) strz[i]=7;
else strz[i]=2;
strs[i].style.fontSize=strz[i]+"px";
}
}
}

window.onresize=set_width;
function set_width() {
var sw_min=999999;
var sh_min=999999;
if (document.documentElement && document.documentElement.clientWidth) {
if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
}
if (typeof(self.innerWidth)!="undefined" && self.innerWidth) {
if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
}
if (document.body.clientWidth) {
if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
}
if (sw_min==999999 || sh_min==999999) {
sw_min=800;
sh_min=600;
}
swide=sw_min;
shigh=sh_min;
}
// ]]>
</script>

<script language="javascript" type="text/javascript">
alert("click the home icon or heart to return to the menu! ♡")
</script>

<------------------------ container01 ------------------------>

border-radius: 10px 10px 10px 10px;
height: 200px;

<------------------------ container02 ------------------------>

width: 60px;
left: 112px;
border-radius: 10px 10px 0px 0px;

<------------------------ icons01 + icons02 ------------------------>

border: 5px black solid;

<------------------------ container03, container04, container05, container06 ------------------------>

border-radius: 5px 5px 5px 5px;
height: 167px;
width: 192.73px;
bottom: 33px;
left: 18px;
position: absolute;

<------------------------ text01 ------------------------>

font-family: romantic;
-webkit-filter: drop-shadow(0px 0px 4px #ABABAB);
text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000, 0 0;

<------------------------ buttons02, text02 ------------------------>

font-family: PC98;

<------------------------ text03 ------------------------>

border: black 1px solid;
border-radius: 0px 5px 5px 5px;
box-shadow: #bdbdbd 2px 2px;

<------------------------ image01 ------------------------>

box-shadow: #bdbdbd 2px 2px;

<------------------------ text04 ------------------------>

border: black 1px solid;
border-radius: 5px 5px 5px 5px;
width: 175px;
overflow-y: scroll;
height: 84px;
box-shadow: #bdbdbd 2px 2px;
padding: 3px 3px 3px 3px;

MOBILE:
width: 175px;

<------------------------ text05 ------------------------>

border: black 1px solid;
border-radius: 5px 5px 5px 5px;
overflow-y: scroll;
height: 122px;
box-shadow: #bdbdbd 2px 2px;
padding: 3px 3px 3px 3px;

<------------------------ text06 ------------------------>

border: black 1px solid;
border-radius: 5px 5px 5px 5px;
overflow-y: scroll;
height: 149px;
box-shadow: #bdbdbd 2px 2px;
padding: 3px 3px 3px 3px;

<------------------------ icons03 ------------------------>

border: 1px solid #000000;

<------------------------ text07, text08 ------------------------>

border: black 1px solid;
border-radius: 5px 5px 5px 5px;
overflow-y: scroll;
height: 72px;
padding: 3px 3px 3px 3px;
box-shadow: #bdbdbd 2px 2px;

<------------------------ notes ------------------------>

pls dont rmv my credits! this is an original design that took a lot of effort to make and feel free to comm me at https://fyodor.ju.mp :3