Interactive Design: Orange Cake Portfolio

http://barberne.co.nf/team/orangecake.html

<!doctype html>

<head>
<style type = “text/css”>
html{
height: 100%;
width: 100%;
padding-top: -8px;
}
body{
height: 100%;
width: 100%;
background-image: url(transparent_bg.png);
background-color: #f3d8c6;
background-size: 100% 105%;
background-attachment: fixed;
-webkit- transition: margin .2s, opacity .3s ease-in, transform .2s ease-in;
transition: margin .2s, background .3s ease-in, transform .2s ease-in;

font-size: 12pt;
font-family: Tahoma, Geneva, sans-serif;
color: #916446;
}
h1{
text-align: center;
font-family: Tahoma, Geneva, sans-serif;
font-size: 25pt;
color: #e08416;
margin: 10px;
margin-bottom: 15px;
}

#header{
background: linear-gradient(rgba(145,100,70,1), rgba(0,0,0,0));
width: 100%;
height: 150px;
margin: -8px;
padding-top: -8px;
display: inline-block;
}
#headerbuttonholder{
height: 100px;
display: inline-block;
}
#headerbuttonholder{
height: auto;
width: auto;
}
.headerbutton{
background-color: #f3d8c6;
opacity: .7;
height: 50px;
width: 50px;
margin: 5px;
margin-top: 27px;
margin-bottom: 25px;
border-style: solid;
border-width: 3px;
border-color: #ffffff;
border-radius: 40px 40px 40px 40px;
display: inline-block;
-webkit- transition: margin .2s, opacity .3s ease-in, transform .2s ease-in;
transition: margin .2s, background .3s ease-in, transform .2s ease-in;
}
.headerbutton:hover{
margin-left: 17px;
margin-right: 17px;
transform: scale(1.5);
opacity: 1;
-webkit- transition: margin-left .2s, margin-right .2s, opacity .3s ease-in, transform .2s ease-in;
transition: margin-left .2s, margin-right .2s, opacity .3s ease-in, transform .2s ease-in;
}
#headergrad{
height: 100px;
background-color: linear-gradient (rgba(0,0,0,1), rgba(0,0,0,0));
}
#logoholder{
height: 110px;
margin-left: 5px;
display: inline-block;
vertical-align: top;
}
#logo{
height:110px;
width: auto;
margin: 5px;
}
#bgholder{
height: 100%;
width: 100%;
position: relative;

}

#content{
width: 100%;
height: 100%;
text-align: center;
margin: -8px;
display: inline-block;
}
#banner{
width: 100%;
background-color: rgba(255,255,255,.8);
padding-top: 10px;
padding-bottom: 35px;
margin-bottom: 75px;
}

.arts{
display: none;
}
#bubblediv{
width: 100%;
height: 100%;
margin-left: -8px;
display: none;
}
.bubble{
height: 150px;
width: 150px;
margin: 50px;
background: #ffffff;
border-style: solid;
border-width: 3px;
border-color: #ffffff;
border-radius: 75px 75px 75px 75px;
display: block;
}
#bub0{
background-image: url(transparent_bg.png);
background-size: contain;
height: 150px;
width: 150px;
background: #ffffff;
border-style: solid;
border-width: 3px;
border-color: #ffffff;
border-radius: 75px 75px 75px 75px;
}
#bub1{
background-image: url(transparent_bg.png);
background-size: contain;
height: 150px;
width: 150px;
background: #ffffff;
border-style: solid;
border-width: 3px;
border-color: #ffffff;
border-radius: 75px 75px 75px 75px;
}
#bub2{
background-image: url(transparent_bg.png);
background-size: contain;
height: 150px;
width: 150px;
background: #ffffff;
border-style: solid;
border-width: 3px;
border-color: #ffffff;
border-radius: 75px 75px 75px 75px;
}

@media only screen and (max-width:500px){
.headerbutton{
opacity: 1;
width: 40px;
height: 40px;

margin-left: 2px;
margin-right: 2px;

}
.headerbutton:hover{
margin-left: 7px;
margin-right: 7px;
transform: scale(1.2);
}
h1{
font-size: 20pt;
}
body{
font-size: 10pt;
}
bub1{

}
}
</style>

function artchange(num){
bgchange(num);
contentchange(num);
bubblechange(num);
bubchange(num);
}

function bgchange(num){
if (num == 0){
artist = “url(nikki_bg.png)”;
}
else if (num == 1){
artist = “url(alexis_bg.jpg)”;
}
else if (num == 2){
artist = “url(skye_bg.png)”;
}
else if (num == 3){
artist = “url(taylor_bg.jpg)”;
}
else{
artist = “url(transparent_bg.png)”
}
document.body.style.backgroundImage = artist;
}

function contentchange(num){
document.getElementById(“cake”).style.display = “none”;
for (i = 1; i
</head>
<body>