My first self-coded site!

[Conspi]

Hi, I decided that I am done with modifying this Photoshop generated code! So I started to look at Chris’s videos about coding it myself.

My job was to design the site and make it work as far as HTML and CSS goes. Then the server owner would make it actually work with the server etc.

My goal was to make the site lightweight, but still make it look decent. So the final thing uses only 2 images that are worth mentioning size-wise. The first one is header, which is the biggest image. And the second one is background which is 4pixels wide thin strip behind there. Everything else is just.. not worth mentioning.

Anyway here’s the outcome:
http://codeforums.org//website/Home

And here’s the code:
HTML:

Code:

Server Status: Online
Players Online: 1337

• Home
• Info
• Forums
• Account Creation
• Revision Logs

Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Sed porta consequat felis. Quisque vel nulla et
enim ultricies placerat. Sed pellentesque odio vitae quam
ullamcorper ullamcorper. Etiam ultrices, nisi ut sagittis
commodo, mauris justo adipiscing nulla, in aliquam urna leo vitae
quam. Phasellus ante. Donec nec velit. Integer quis augue. Fusce
quis sem ac turpis vehicula fringilla. Donec vulputate est at
felis. Nunc consequat, urna sit amet volutpat vestibulum, erat
eros ultrices purus, vitae semper est nunc id nibh. Nam volutpat
bibendum velit. Praesent massa libero, egestas eu, rhoncus eu,
scelerisque sit amet, quam. Suspendisse eros lorem, semper et,
sollicitudin vel, pulvinar eu, nisl. Donec tempus, nibh non
suscipit ultrices, orci ipsum placerat ligula, vitae scelerisque
nisl ante a sapien. Nam sodales eleifend leo. Praesent venenatis
egestas metus. Ut sit amet mauris aliquet sem
bibendum fermentum. Vivamus egestas, est vel sollicitudin
pharetra, augue magna pharetra diam, quis adipiscing neque diam
nec turpis. Curabitur porta, purus a euismod adipiscing, elit dui
dignissim libero, nec dignissim tortor mi quis risus. Phasellus
faucibus urna at mi. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. In ut nulla ac diam imperdiet adipiscing.
Praesent dictum nisi et risus. Aenean ultrices iaculis lorem.
Morbi nulla eros, suscipit ac, dignissim at, feugiat in, justo.
Praesent purus. Suspendisse sollicitudin urna at elit. Donec ac
arcu. Vestibulum vel est et dolor tincidunt ultricies. Vestibulum
sit amet sapien tincidunt diam sodales pulvinar. Phasellus sit
amet magna. Donec augue ligula, gravida ut, venenatis sed,
hendrerit ut, augue. Nam dui risus, pellentesque a, euismod
non, egestas a, enim. Pellentesque tempor, est id accumsan
molestie, libero risus scelerisque eros, sit amet blandit risus
arcu et est. Nulla facilisi. Suspendisse ullamcorper blandit
neque. Duis lectus. Donec et mauris vel nisi ultricies aliquam.
Morbi consequat scelerisque mi. Mauris sagittis tortor non
libero. Sed molestie tincidunt mauris. Maecenas elementum, odio
vel ullamcorper vulputate, nisi dolor vulputate nisi, vitae
cursus risus massa feugiat massa. Nullam placerat volutpat metus.
Aenean fringilla velit sit amet nisi. Vestibulum vulputate
turpis. Cras nibh velit, commodo vel, molestie quis, interdum
feugiat, ipsum. Nullam in quam. Morbi nisl libero, facilisis id,
scelerisque quis, mattis id, enim. Praesent dapibus libero vel
purus. Duis nunc justo, dapibus et, placerat ut, fermentum eget,
erat. Suspendisse odio ipsum, tristique ac, varius vel, auctor
lobortis, elit. Aenean non nibh. In hac habitasse platea
dictumst. Pellentesque tincidunt. Aliquam vitae arcu. Fusce purus
nisi, gravida ac, suscipit eu, auctor non, diam. Etiam et lacus.
Nunc at eros nec arcu accumsan ullamcorper. Proin orci quam,
bibendum et, placerat et, aliquet a, magna. Donec purus massa,
scelerisque non, volutpat sit amet, vulputate at, odio. Donec et
lectus vel erat dignissim porta. Duis pellentesque dolor eget mi
rutrum condimentum. In est. Nam odio orci, varius ut,
consectetuer ut, egestas ac, diam. Nunc a odio. Aliquam vel
lectus. Vivamus eros turpis, porta tincidunt, ullamcorper et,
ultricies in, tellus. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Sed sapien pede, mollis quis, consectetuer
vitae, ullamcorper molestie, urna. Ut imperdiet quam non libero.
Cras hendrerit enim non justo. Nam mi. Donec elit orci, dictum
id, consectetuer nec, cursus interdum, sapien. Nulla elementum
leo sit amet nisi. Nam lectus purus, adipiscing at, placerat sit
amet, luctus et, velit. Nullam quam nunc, condimentum iaculis,
tempor et, tristique nec, risus. Nullam et orci ut turpis
consectetuer interdum. In hac habitasse platea dictumst. Quisque
risus sapien, viverra et, pellentesque et, malesuada fringilla,
quam. Aliquam auctor. Donec nisi. Nunc adipiscing placerat diam.
Proin pede lacus, gravida at, pulvinar at, imperdiet in, nunc. Ut
tempus cursus ligula.

Site useable only with Internet Explorer 6 or newer | 2008, CodeServer ©

CSS:

Code:

a:link {color: #e7a7e8; text-decoration:none;}
a:visited {color: #e7a7e8; text-decoration:none;}
a:hover {color:#bf59c1; text-decoration:none;}
a:active {color: #bf59c1; text-decoration:none;}

body{
background: URL(Images/bg.jpg) repeat-x #101010;
font-family:Georgia, “Times New Roman”, Times, serif;
font-size:12px;
color:#FFFFFF;
text-align:center;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
div#page-wrap {
margin: 0 auto;
padding: 0px 0px 0px 0px;
margin: 0px auto 0px auto;
width: 691px;
text-align:left;
}
div#header {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
height: 341px;
background: url(Images/header.png);
}
div#server-stats{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
font-size: 12px;
color:#c71200;
position:relative;
top:150px;
left:400px;
}
div#menu-div{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
position:relative;
top: 259px;
}
ul#menu li{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
display: inline;
}
ul#menu li a{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
display: block;
height: 24px;
float: left;
position:relative;
left: 100px;
margin: 0px 5px 0px 5px;
padding: 0px 5px 0px 5px;
background:url(Images/menu-bg.png) repeat-x;
color:#e7a7e8;
text-decoration:none;
font-weight:bold;
font-size:15px;
}
ul#menu li a:hover, a:active, a:focus{
background-position:bottom center;
color:#bf59c1;
outline:none;
}
div#content{
position:relative;
width: 606px;
left: 57px;
background:url(Images/50trans-bg.png) repeat;
}
div#content-text{
padding: 0px 50px 20px 50px;
}
div#footer{
position:relative;
width: 606px;
left: 57px;
background:url(Images/50trans-bg.png) repeat;
color: #393939;
text-align:right;
border-top:#393939 solid 1px;
}
div#footer-text{
padding: 2px 50px 2px 50px;
}

Although my part is done with this it is still not completely ready. There will also be 10 of these designs. Each of them which have different race in header, but overall it stays the same.

[Author]

Posts