HTML
<style>
#back {
background: url(http://i.imgur.com/qawD9Ra.jpg
) no-repeat;
width: 1100px;
height: 1000px;
}
body {
font: 8pt verdana;
color: #000;
margin: 0;
padding: 0;
background: url("http://i.imgur.com/fVf0XWB.png") repeat;
}
body table {
display: none;
}
img {
border: 0;
}
.wrap table {
display: block;
clear: both !important;
}
.sf {
display: none;
}
table {
font: 8pt verdana;
color: #000;
margin: 0;
}
table td {
vertical-align: top;
}
.wrap {
width: 1100px;
height: auto;
margin: 0 auto;
min-height: 500px;
}
.push {
padding: 20px 80px;
}
h1 {
margin: -30px 0 0 0;
font-size: 8pt;
font-weight: normal;
text-transform: uppercase;
padding: 5px;
color: #fff;
background: #eda652;
display: inline-block;
float: left;
clear: both;
}
h2 {
margin: -30px 0 0 0;
font-size: 8pt;
font-weight: normal;
text-transform: uppercase;
padding: 5px;
color: #fff;
background: #ea777d;
display: inline-block;
float: left;
clear: both;
}
a {
text-decoration: none;
}
a:link, a:active, a:visited {
color: #73aded;
}
a:hover {
color: #ea777d;
}
b {
color: #ea777d;
}
strong {
color: #eda652;
font-weight: normal;
}
.fullwidth {
background: #fff;
padding: 20px;
margin: 30px 0;
}
.clr {
clear: both;
}
#about h1 {
float: left;
}
.thirds {
margin: -20px;
}
.thirds td {
background: #fff;
padding: 20px;
width: 33% !important;
}
#icos img {
width: 50px;
height: 50px;
border: 1px solid #ddd;
margin: 6px;
}
#icos img:hover {
border: 1px solid #cacaca;
}
#bookmarks {
text-align: center;
}
#bookmarks img {
margin: 10px 9px;
border: 1px solid #fff;
}
#bookmarks img:hover {
border: 1px solid #000;
}
.bisou img {
width: 100px;
height: auto;
float: left;
margin-right: 10px;
border: none;
}
.thepets td {
padding-right: 20px;
padding-bottom: 10px;
}
.thepets a.pet {
margin: 10px 0 20px;
display: block;
width: 282px;
height: 152px;
overflow: hidden;
border: 1px solid #fff;
}
.thepets a.pet:hover {
border: 1px solid #000;
}
.thepets img {
margin-top: -50px;
}
.ppp img {
margin: 0;
margin-right: 5px;
width: 50px;
height: auto;
border: 1px solid #ddd;
float: left;
}
.ppp p {
vertical-align: middle;
float: left;
}
.goals img {
margin: 5px !important;
}
.goals a span {
display: none;
float: left;
margin: 0;
padding: 10px;
border: 1px solid #ddd;
background: url("http://i.imgur.com/fVf0XWB.png");
color: #999;
width: 240px;
}
.goals a:hover span {
display: block;
}
#nav {
width: 150px;
top: 7px;
left: 0;
}
#nav b {
padding: 7px;
}
#nav a {
color: #777;
display: block;
padding: 7px;
}
#nav a:hover {
color: #ea777d;
}
#notable img {
margin: 5px;
width: 80px;
height: auto;
}
</style><div id="nav" style="position: fixed;">
<b>LINKS</b>
<a href="/userlookup.phtml?user=flowecalum"> my lookup</a>
<a href="/~link"> link</a>
<a href="/~link"> link</a>
<a href="/~link"> link</a>
<a href="/~link"> link</a>
<a href="/~link"> link</a>
<a href="/~xaia"> css</a>
</div>
<div class="wrap">
<div id="back" style="position: fixed; top: 0; z-index: -1;"></div>
<div class="push">
<div class="fullwidth" id="about">
<h1>Mariah's Portfolio</h1>
<a href="/~Ekieno" class="bisou"><img src="http://i.imgur.com/yeCBVTV.png"></a>
<p><strong>About <b>Me!</b> </strong></p>
<p>My name is Mariah and I'm 21 years old. I used to have an account a long time ago when I was 8 but I stopped playing a few years after that. A few months ago I decided to come back and see how it is, hence this new account! </p>
<br class="clr"></div>
<div class="wrap-table">
<table class="thirds" width="980" cellspacing="20"><tr><td>
<h2>Updates</h2>
<p><b>22.05.2017</b> Today I decided to finally make my portfolio and I am currently working on getting my packrat avatar.</p>
<p><strong>UPDATES CLEARED</strong></p>
</td>
<td id="icos" class="goals">
<h2>goals</h2>
<a href="#no"><img src="http://images.neopets.com/neoboards/avatars/sdb.gif"><span style="position: absolute;">1,000 items in SDB</span>
</a>
<a href="#no"><img src="http://images.neopets.com/neoboards/avatars/avatarcollector.gif"><span style="position: absolute;">200+ avatars</span>
</a>
<a href="#no"><img src="http://images.neopets.com/neoboards/avatars/faeriebubbles.gif"><span style="position: absolute;">score 2,000+</span>
</a>
<a href="#no"><img src="http://images.neopets.com/items/babypaintbrush.gif"><span style="position: absolute;">paint undercover_martyn24</span>
</a>
</td>
<td id="icos" class="goals">
<h2>achievements</h2>
<a href="#no"><img src="http://images.neopets.com/games/trophies/trophy_custompet_2.gif"><span style="position: absolute;">Won Customization Spotlight!</span>
</a>
</td>
</tr></table></div>
<div class="fullwidth" id="bookmarks">
<h2>bookmarks</h2>
<a href="/~Xaia"><img src="http://i.imgur.com/8vYmApM.gif" border="0"></a>
<a href="/~Zizey"><img src="http://i.imgur.com/cT8xVW7.gif" border="0"></a>
<a href="/~srya"><img src="http://i.imgur.com/6nV4bAE.gif" border="0"></a>
<a href="/~Ekieno"><img src="http://i.imgur.com/t9EhuPL.gif" border="0"></a>
<a href="/~Xaia"><img src="http://i.imgur.com/8vYmApM.gif" border="0"></a>
<a href="/~Zizey"><img src="http://i.imgur.com/cT8xVW7.gif" border="0"></a>
<a href="/~srya"><img src="http://i.imgur.com/6nV4bAE.gif" border="0"></a>
<a href="/~Ekieno"><img src="http://i.imgur.com/t9EhuPL.gif" border="0"></a>
</div>
<div class="fullwidth" id="icos">
<h2>Avatars I need</h2>
<p>can make this any thing you want (wishlist, tradelist, whatever!), just have to keep <b>id=icos</b> on the div so images play nice :) </p>
<img src="http://images.neopets.com/neoboards/avatars/kadoatery.gif"><img src="http://images.neopets.com/neoboards/avatars/destructomatch2.gif"><img src="http://images.neopets.com/neoboards/avatars/codestones.gif"><img src="http://images.neopets.com/neoboards/avatars/spacefaerie.gif"><img src="http://images.neopets.com/neoboards/avatars/wheelofexcitement.gif"><img src="http://images.neopets.com/neoboards/avatars/fyora.gif"><img src="http://images.neopets.com/neoboards/avatars/stampsHaunted3192.gif"><img src="http://images.neopets.com/neoboards/avatars/plushieTycoon.gif"><img src="http://images.neopets.com/neoboards/avatars/fuzzleBOO.gif"><img src="http://images.neopets.com/neoboards/avatars/luckyblumaroo.gif"><img src="http://images.neopets.com/neoboards/avatars/snowmuncher.gif"><img src="http://images.neopets.com/neoboards/avatars/mediocrity.gif"><img src="http://images.neopets.com/neoboards/avatars/neomailaddict.gif"><img src="http://images.neopets.com/neoboards/avatars/pwned.gif"><img src="http://images.neopets.com/neoboards/avatars/queenfyora.gif"><img src="http://images.neopets.com/neoboards/avatars/monotony.gif"><img src="http://images.neopets.com/neoboards/avatars/toothfaerie.gif"><img src="http://images.neopets.com/neoboards/avatars/snowager.gif"><img src="http://images.neopets.com/neoboards/avatars/meercachase.gif"><img src="http://images.neopets.com/items/mall_shower_gold.gif"><img src="http://images.neopets.com/items/mall_bg_hauntedgraveyard.gif"><img src="http://images.neopets.com/items/mall_tot_lairofbeastbg.gif"><img src="http://images.neopets.com/items/mall_aging_gravebg.gif"><img src="http://images.neopets.com/items/mall_mme11_springbg.gif"><img src="http://images.neopets.com/items/mall_mme14_coinwig.gif"><img src="http://images.neopets.com/items/mall_mme2s2b_grant.gif"><img src="http://images.neopets.com/items/mall_bck_garden_lights.gif"><img src="http://images.neopets.com/items/mall_minimme13_makeup.gif"></div>
<div class="fullwidth" id="icos">
<h2>dream items</h2>
<p>can make this any thing you want (wishlist, tradelist, whatever!), just have to keep <b>id=icos</b> on the div so images play nice :) </p>
<center>
<img src="http://images.neopets.com/items/pb_stealthy.gif"><img src="http://images.neopets.com/items/mutant_petpetbrush.gif"><img src="http://images.neopets.com/items/mall_mme2s1_grant.gif"><img src="http://images.neopets.com/items/mall_bg_hauntedmansion.gif"><img src="http://images.neopets.com/items/mall_dress_butterfly.gif"><img src="http://images.neopets.com/items/mal_garland_cherryblossom.gif"><img src="http://images.neopets.com/items/mall_flyingnova.gif"></center>
</div>
<div class="fullwidth" id="pets">
<h2>my pets</h2>
<table class="thepets" width="100%"><tr><td>
<a href="/petlookup.phtml?pet=Srya" class="pet"><img src="http://pets.neopets.com/cp/xfjn4fvs/1/4.png"></a>
<p><b>Undercover_martyn24</b> <strong></strong> I created her after going a few months with not checking on this account. I plan on painting her with a baby paint brush. Also she is named after a Twin Peaks song.</p>
<div class="ppp">
<img src="http://images.neopets.com/items/angelpuss.gif"><p><b>Pleo</b><br> the angelpuss, also named after a song</p>
</div>
</td>
<td>
<a href="/petlookup.phtml?pet=Zizey" class="pet"><img src="http://pets.neopets.com/cp/z32tgzbc/1/4.png"></a>
<p><b>Calum20</b> <strong></strong> My first pet I created with this account. Named after Calum Hood lmao.</p>
<div class="ppp">
<img src="http://images.neopets.com/items/petpet_raptor.gif"><p><b>Lillian</b><br> The Niptor who's named after a song too. <br></p>
</div>
</td>
<td>
</td>
</tr></table></div>
© Coding by <a href="/~Xaia">Whitespace</a> | Portfolio of <a href="/userlookup.phtml?user=YOURNAMEHERE">Flowecalum</a>
</div>
</div>