Karima Aaota

<style type="text/css">

@import url(https://fonts.googleapis.com/css?family=Calligraffitti);

.pfor { display: none; }
#profile { background-color: transparent; border: none; }
</style>

<style type="text/css">

body {

background-color: #fff;
background-image: url(http://www.snazzyspace.com/defaultimages/000000_grey-vintage-wall.gif);
background-attachment: fixed;
background-position: center center;
background-repeat: repeat;
background-size: auto;
font-family: Times New Roman;
font-variant: normal;
font-size: 70%;
color: #666666;}

::-webkit-scrollbar {
	width: 3px;
	height: 0px;
	background: ;
	}

	::-webkit-scrollbar-thumb {
	background-color: white;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	}

a {color: #ff0000;
	text-decoration: none;
	}

	a:hover {color: white;
	text-decoration: none;
	cursor:
url('http://media.tumblr.com/e7f72e808c4dbe5006b9c3a30dbc9b79/tumblr_inline_mh67vhwGnR1rdqsqf.png');
	}

	*{cursor: url('http://media.tumblr.com/7c3edb626c8cf9435c5c0b2d6acceffd/tumblr_inline_mh67v6xNXM1rdqsqf.png'), default;
	}

b {
color: #8A0808; }

.abox {background-color:#000; color: #fff; font-size: 14px; font-family: Calibri; font-variant: small-caps; text-align: justify; position: absolute; width: 370; height: 200; top: 420px; left: 70px; letter-spacing:0px; line-height: 12px; padding: 10px; margin: 1px; overflow:auto; border:4px solid #780002;}
.aimg { position: absolute; width:390; height:230; left: 71; top:170; overflow:auto; border:4px solid #780002;}

.bbox {background-color:#000; color: #fff; font-size: 14px; font-family: Calibri; font-variant: small-caps; text-align: justify; position: absolute; width: 370; height: 200; top: 420px; left: 829px; letter-spacing:0px; line-height: 12px; padding: 10px; margin: 1px; overflow:auto; border:4px solid #780002;}
.bimg { position: absolute; width:390; height:230; left: 829; top:170; overflow:auto; border:4px solid #780002;}

.navbar {Background-color: ; Position: absolute; Height: 16px; Width: 325px; left: 483; Top: 99.5px; padding: 4px; z-index: 100;}

.link1 {Position: absolute; Left: 40px; Border: solid 3px #fff; Height: 8px; Width: 45px; background-color: #780002; }

.link2 {Position: absolute; Left: 105px; Border: solid 3px #fff; Height: 8px; Width: 45px; background-color: #780002; }

.link3 {Position: absolute; Left: 170px; Border: solid 3px #fff; Height: 8px; Width: 45px; background-color: #780002; }

.link4 {Position: absolute; Left: 235px; Border: solid 3px #fff; Height: 8px; Width: 45px; background-color: #780002; }

.link1:hover {Background-color: #fff; border: solid 3px #780002;}
.link2:hover {Background-color: #fff; border: solid 3px #780002;}
.link3:hover {Background-color: #fff; border: solid 3px #780002;}
.link4:hover {Background-color: #fff; border: solid 3px #780002;}

.slide {Position: fixed; Height: 555555; Width: 555555; Top: -200px; Left: 0; Z-index: -1; Opacity: 0; transition: 0.8s; -moz-transition: 0.8s; webkit-transition: 0.8s; -o-transition: 0.8s;}

.slide:target {Top: 0; Opacity: 1; Z-index: 1; transition: 1s; -moz-transition: 1s; webkit-transition: 1s; -o-transition: 1s;}
 #title {position:absolute;
 color: black;
 font-size:70;
 font-family:tunga;
 left:230;
 top:140;
 }

#bar { position: fixed; top: 80px; left:-10px; height: 20px; width: 2000px; border: 1px #000 solid; background-color: #780002; overflow: auto; opacity: 0.9; z-index: -3; }
#bartwo { position: fixed; top: 120px; left:-10px; height: 20px; width: 2000px; border: 1px #000 solid; background-color: #780002; overflow: auto; opacity: 0.9; z-index: -3; }


#mainfuckinimage { position:fixed; left: 480px; top: 170px; border: 5px solid black;}

</style>

<div class="navbar">
<a class="link1" href="#1"></a>
<a class="link2" href="#2"></a>
<a class="link3" href="#3"></a>
<a class="link4" href="#4"></a>
</div></div>

<div id="bar">
</div>
<div id="bartwo">
</div>

<div id="mainfuckinimage">
<img src="YOUR MAIN IMG HERE" class="image" height="470px;" width="330px;">
</div>

<div id="1" class="slide">
<div class="abox">

First box. Congrats and shit I guess. Uhm... fill this space up with info and all that jazz. If you want to change the way the font looks in the boxes just go up to '.abox' and remove the 'font-variant: smallcaps' and it'll turn into regular text again. But make sure to change the size of the text from 11. Make sure you do the same thing for the '.bbox'

</div>
<div class="aimg"><img src="IMG HERE" Height="100%" Width="100%"></div>

<div class="bbox">

Second box, cmon, fill the rest of ths code out.

</div>
<div class="bimg"><img src="IMG HERE" Height="100%" Width="100%"></div>
</div>

<div id="2" class="slide">
<div class="abox">

BLEH I don't know what to write here

</div>
<div class="aimg"><img src="IMG HERE" Height="100%" Width="100%"></div>

<div class="bbox">

You have more boxes to fill in

</div>
<div class="bimg"><img src="IMG HERE" Height="100%" Width="100%"></div>
</div>

<div id="3" class="slide">
<div class="abox">

Box info here 'nd shit

</center></div>
<div class="aimg"><img src="IMG HERE" Height="100%" Width="100%"></div>

<div class="bbox">

Last Box make it count

</div>
<div class="bimg"><img src="IMG HERE" Height="100%" Width="100%"></div>
</div>