Invictus

Designer's Comments

Look carefully for specific instructions

I took a picture of that statue in Columbus Circle in Manhattan and decided that it could be a pretty cool layout. I'm rather pleased with the result. I hope you are, too.

Replace all that writing with your own content. The links in the navigation can be removed or replaced, and both of the sections will scroll when they get long enough.

Please don't remove the credit.
Enjoy!

Layout Code

Copy and paste to Template HTML

Help

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Invictus</title>

a img {border:1px solid; border-color:#aaaaaa;}
a img:hover {border:1px solid; border-color:#eeeeee !important;}
img {border:none;}

a, a:link, a:active, a:visited {
 color:#bbbbbb;
 font-family:palatino linotype;
 font-size:9px;
 font-weight:normal;
 line-height:13px;
 letter-spacing:1px;
 text-decoration:none;
 text-transform:uppercase;
 } 
 
a:hover {
 color:#eeeeee;
 font-family:palatino linotype;
 font-size:9px;
 font-weight:normal;
 line-height:13px;
 letter-spacing:1px;
 text-decoration:none;
 text-transform:uppercase;
}

b {
 color:#333333 !important;
 font-family:century !important;
 font-size:11px !important;
 font-weight:bold;
 text-transform:none;
 text-decoration:none !important;
 line-height:13px;
 letter-spacing:-.5px;
}

i {
 color:#333333 !important;
 font-family:century !important;
 font-size:11px !important;
 font-weight:normal;
 text-transform:none;
 text-decoration:none !important;
 line-height:13px;
 letter-spacing:-1px;
}

u {
 color:#333333 !important;
 font-family:century !important;
 font-size:11px !important;
 font-weight:normal;
 text-transform:none;
 text-decoration:underline;
 line-height:13px;
 letter-spacing:-1px;
}

small {
 color:#333333 !important;
 font-family:century !important;
 font-size:9px !important;
 font-weight:normal;
 text-transform:none;
 text-decoration:none !important;
 line-height:13px;
 letter-spacing:-1px;
}

big {
 color:#333333 !important;
 font-family:century !important;
 font-size:13px !important;
 font-weight:normal;
 text-transform:none;
 text-decoration:none !important;
 line-height:13px;
 letter-spacing:-1px;
}

h1 {
 color:#444444 !important;
 font-family:palatino linotype;
 font-size:20px;
 font-weight:normal;
 line-height:25px;
 letter-spacing:-2px;
 margin-bottom:5px;
 margin-top:5px;
 text-align:center;
 text-transform:none !important;
 border:1px solid;
 border-color:#cccccc;
 background-image:url("http://cbimg6.com/layouts/09/01/33487ac.jpg");
 background-repeat:repeat;
 background-atatchment:scroll;
 background-position:center center;
 display:block;
}

blockquote {
 color:#444444 !important;
 font-family:palatino linotype;
 font-size:11px;
 font-weight:normal;
 line-height:13px;
 letter-spacing:-1px;
 margin-bottom:5px;
 margin-top:5px;
 text-align:right;
 text-transform:none !important;
 padding:3px;
 border:1px double;
 border-left:15px double;
 border-color:#aaaaaa;
 background-color:#999999;
 background-image:url("http://cbimg6.com/layouts/09/01/33487ad.jpg");
 background-repeat:repeat;
 background-atatchment:scroll;
 background-position:center center;
 display:block;
}

</style>

.titletext {
 color:#cccccc !important;
 font-family:palatino linotype;
 font-size:30px;
 font-weight:normal;
 line-height:50px;
 letter-spacing:0px;
 text-transform:uppercase;
}

.text {
 color:#cccccc !important;
 font-family:palatino linotype;
 font-size:11px;
 font-weight:normal;
 text-decoration:none;
 line-height:13px;
 letter-spacing:0px;
}

.navilink:link, .navilink:active, .navilink:visited {
 color:#444444 !important;
 font-family:century;
 font-size:15px;
 font-weight:normal;
 font-style:normal !important;
 line-height:15px;
 letter-spacing:-2px;
 margin-bottom:5px;
 margin-top:5px;
 text-align:center;
 text-transform:none !important;
 border:1px solid;
 border-color:#cccccc;
 background-image:url("http://cbimg6.com/layouts/09/01/33487ac.jpg");
 background-repeat:repeat;
 background-atatchment:scroll;
 background-position:center center;
 display:block;
}

.navilink:hover {
 color:#444444 !important;
 font-family:century;
 font-size:15px;
 font-weight:normal;
 font-style:normal !important;
 line-height:15px !important;
 letter-spacing:-2px;
 margin-bottom:5px;
 margin-top:5px;
 text-align:center;
 text-transform:none !important;
 border:1px solid;
 border-color:#cccccc;
 background-image:url("http://cbimg6.com/layouts/09/01/33487ae.jpg");
 background-repeat:repeat;
 background-atatchment:scroll;
 background-position:center center;
 display:block;
}

.creditlink, .creditlink:visited, .creditlink:active {
 color:#cccccc !important;
 font-family:small fonts !important;
 font-size:8px !important;
 font-weight:normal;
 background-color:transparent !important;
 border:none; text-decoration:none;
 text-transform:uppercase !important;
}

.creditlink:hover {
    font-family:small fonts !important;
    font-size:8px !important; color:#ffffff !important;
    font-weight:normal;
    background-color:transparent !important;
    border:none; text-decoration:none;
    text-transform:uppercase !important;
 }
</style>

#bgimg {
position:absolute;
width:600px;
height:1200px;
top:0px;
left:50%;
margin-left:-330px;
border:none;
background-color:transparent;
overflow:hidden;
}

#title {
width:370px;
height:100px;
background-color:transparent;
border:none;
position:absolute;
z-index:2;
top:475px;
left:50%;
margin-left:-210px;
visibility:visible;
overflow:visible;
text-align:center;
}

#leftside {
width:150px;
height:600px;
background-color:transparent;
border:none;
position:absolute;
z-index:2;
top:597px;
left:50%;
margin-left:-210px;
visibility:visible;
overflow:auto;
text-align:center;
}

#rightside {
width:233px;
height:600px;
background-color:transparent;
border:none;
position:absolute;
z-index:2;
top:597px;
left:50%;
margin-left:-49px;
visibility:visible;
overflow:auto;
text-align:center;
}

#creditlink {
position:absolute;
border:none;
width:130px;
height:20px;
z-index:2;
left: 6px !important;
top: 0px;
}
</style>
</head>

<body>

<div id="creditlink"><a href="http://crotchettheleper.createblog.com/" class="creditlink">Crotchet The Leper</a></div>
<div id="bgimg"><img src="http://cbimg6.com/layouts/09/01/33487aa.png" /></div>

Type in your title here, please.

</span>
</div>

<h1>Navigation</h1>
<a href="" class="navilink">Link</a>
<a href="" class="navilink">Link</a>
<a href="" class="navilink">Link</a>
<a href="" class="navilink">Link</a>
<a href="" class="navilink">Link</a>

<br>
<h1>Header Text</h1>
Put whatever you want here. You can even change the headings and what-not.

<h1>Header Text</h1>

Go ahead and replace this with your own text. Here's a slightly larger section for you. Put whatever you'd like in here. It will scroll

when it gets long enough. For now I'm just going to repeat this text so you can see what it looks like with a scrollbar. Here's a slightly

larger section for you. Put whatever you'd like in here. It will scroll when it gets long enough. For now I'm just going to repeat this

text so you can see what it looks like with a scrollbar.

<br>
<br>
<h1>Header Text</h1>
Put whatever you want here. You can even change the headings and what-not.

</span>
</div>

<h1>Header Text</h1>

Here's a slightly larger section for you. Put whatever you'd like in here. It will scroll when it gets long enough. For now I'm just going

to repeat this text so you can see what it looks like with a scrollbar. But first, here's some stuff you might want to know:<br><br>

<blockquote>
Blockquote.
</blockquote>
<a href="">Link</a><br>
<b>Bold</b><br>
<i>Italics</i><br>
<u>Underline</u><br>
<big>Big</big><br>
<small>Small</small>
<br><br>

Here's a slightly larger section for you. Put whatever you'd like in here. It will scroll when it gets long enough. For now I'm just going

to repeat this text so you can see what it looks like with a scrollbar. Here's a slightly larger section for you. Put whatever you'd like

in here. It will scroll when it gets long enough. For now I'm just going to repeat this text so you can see what it looks like with a

scrollbar. Here's a slightly larger section for you. Here's a slightly larger section for you. Put whatever you'd like in here.

<h1>Header Text</h1>

Go ahead and replace this with your own text. Here's a slightly larger section for you. Put whatever you'd like in here. It will scroll

when it gets long enough. For now I'm just going to repeat this text so you can see what it looks like with a scrollbar. Here's a slightly

larger section for you. Put whatever you'd like in here. It will scroll when it gets long enough. For now I'm just going to repeat this

text so you can see what it looks like with a scrollbar.

<h1>Header Text</h1>

Go ahead and replace this with your own text. Here's a slightly larger section for you. Put whatever you'd like in here. It will scroll

when it gets long enough. For now I'm just going to repeat this text so you can see what it looks like with a scrollbar. Here's a slightly

larger section for you. Put whatever you'd like in here. It will scroll when it gets long enough. For now I'm just going to repeat this

text so you can see what it looks like with a scrollbar.

</span>
</div>

</body>
</html>

Layout Comments

Showing latest 10 of 10 comments

>.< lice linkage thing XD

By chyannie on Feb 18, 2009 10:27 am

Thank you so much everyone! :D
Ahh I'm so happy.

By CrotchetTheLeper on Jan 24, 2009 4:46 pm

It's really creative, I LOVE creativity(:

By infamousscribbles on Jan 24, 2009 9:48 am

this is really neat! :)

By diputs on Jan 23, 2009 8:20 pm

I like it (:

By Decode on Jan 23, 2009 6:01 pm

That's a beautiful photo!

By wickedlee on Jan 23, 2009 2:25 pm

i like it alot, it's really, really well done.

By 666777 on Jan 23, 2009 5:51 am

I like the navigation (:

By imperfectionistx on Jan 23, 2009 1:11 am

.. I love it.

By Naekipz on Jan 23, 2009 1:08 am

i've never seen a layout like this, pretty cool. (:

By futura on Jan 23, 2009 12:49 am

Layout Details

Designer	CrotchetTheLeper
Submitted on	Jan 19, 2009
Page views	3,653
Favorites	4
Comments	10
Reviewer	manny-the-dino
Approved on	Jan 23, 2009

Layout Colors

Layout Tags

nature, objects, statue, sky, simple, pretty, new york, columbus circle, manhattan

Layout Tools

Layout Affiliates

Here I Stand Layouts