HTML - Cake (Template)

An example of a habbo fansite.

Notice

I do not recommend making a login using Javascript because the client can view the Javascript source. Login was only used in a college assignment to demonstrate how functions and variables work.

HTML

<!DOCTYPE html>
 <html>
<head>
<title>Cake - Extended Icing</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
    <div id="login">
        <form name="feedback" method="post"  action="mailto:you@site.com">
        Username: <input type="text" class="textbox" name="username" size="25"> 
        Password: <input type="password" class="textbox" name="password" size="25">
        </form>
    </div>

    <div id="header">
    </div>

    <div class="navigation">
        <ul>
            <li><a href="index.php">Home</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Rares</a></li>
            <li><a href="#">Community</a></li>
            <li><a href="#">Goodies</a></li>
            <li><a href="#">Staff</a></li>
            <li><a href="#">Events</a></li>
        </ul>
    </div>

    <div id="white_content2">
        <table>
            <th>
            <img src="images/newsheader_28.png">
                <h1>Workload</h1>
                Extra! Extra! Read all about it!
            </th>
            <th>
            <img src="images/newsheader_27.png">
                <h1>Bear</h1>
                I'm not the pedo bear, I swear!
            </th>
            <th>
            <img src="images/newsheader_56.gif">
                <h1>Petits Princes</h1>
                Pulling the red carpet late was a bad choice.
            </th>
        </table>
    </div>

    <div id="left">
        <div id="white_content">
            <div class="navigation_side">
                <ul>
                    <li><a href="index.php">Home</a></li>
                    <li><a href="#">Profile</a></li>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Rares</a></li>
                    <li><a href="#">Community</a></li>
                    <li><a href="#">Goodies</a></li>
                    <li><a href="#">Staff</a></li>
                    <li><a href="#">Events</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div id="content">
        <div id="white_content">
            <h1>Welcome</h1>
            Welcome to cake designs. This cake is no lie. Our HTML + CSS layouts are to help people create their own habbo fansite with ease.
        </div>

        <div id="white_content">
            <h1>Multiple</h1>
            You can have mulitple content on one page! It also expands so you don't have to expand it! If you keep reading, you will eventually see what I mean. This is a nice clean template for anyone to use!
        </div>

        <div id="white_content">
            <h1>Active Links</h1>
            On the left side navigation, you can see that the "Administration" link has stayed on a a:active state. This is just a extra feature included in the css. You don't have to use it if you don't want to.
        </div>

        <div id="footer">
            © Fansite • Template by Steven Bartsch
        </div>
    </div>
</div>

CSS

body
{
    font: 11px Verdana;
    background-color:#ffffff;
    background:url("../images/background.png");
    background-repeat:repeat-x;
    background-color:#E3E3DB;
}

#wrapper
{
    margin:auto;
    width:960px;
}

#header
{
    width:960px;
    height:150px;
    margin-bottom:3px;
    padding-left:3px;
    background:url("../images/cake.png");
    background-repeat:no-repeat;
    background-position:center;
}

.navigation
{
    width: 100%;
    overflow: hidden;
    margin-bottom: 8px;
    margin-bottom: 8px;
}

    .navigation ul
    {
        margin: 0px;
        padding: 0px;
        font: 11px Verdana;
        list-style-type: none;
    }

    .navigation li
    {
        display: inline;
        margin: 0;
    }

    .navigation li a
    {
        float: left;
        display: block;
        text-decoration: none;
        margin: 0;
        padding: 10px 9px;
        color: white;
        font-weight:bold;
        background: #ffffff;
        margin-right:5px;
        background:url("../images/nav_background.png");
        background-repeat:repeat-x;
        border:2px solid;
        border-color:#134787;
        border-bottom-color:#000000;
        -moz-border-top-left-radius: 4px;
        -moz-border-top-right-radius: 4px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

    .navigation li a:visited
    {
        color: white;
    }

    .navigation li a:hover, .navigation li.selected a
    {
        color: white;
        background:url("../images/nav_background_hover.png");
        background-repeat:repeat-x;
    }

.navigation_side
{
    overflow: auto;
    margin-bottom: 8px;
    width:180px;
}
    .navigation_side a:link
    {
    text-decoration: none;
    margin-top:3px;
    }

    .navigation_side ul
    {
        margin: 0px;
        padding: 0px;
        font: 11px Verdana;
        list-style-type: none;
    }

    .navigation_side li
    {
        margin: 0px;
    }

    .navigation_side li a
    {
        text-align: left;
        position: relative;
        display: block;
        text-decoration: none;
        padding: 10px 9px;
        color: black;
    }

    .navigation_side li a:visited
    {
        color:#000000;
    }

    .navigation_side li a:hover, .navigation li.selected a
    {
        color:#006699;
        background-color:#eeeeee;
        -moz-border-radius: 4px;
        border-radius: 4px;
}

    .active_side
    {
        color:#006699;
        background-color:#eeeeee;
        -moz-border-radius: 4px;
        border-radius: 4px;
}

#left
{
    float:left;
}

#content
{
    width:766px;
    margin-left:206px;
    margin-bottom:3px;
    margin-top:0px;
}
#white_content
{
    padding-left:7px;
    padding-right:7px;
    padding-top:3px;
    padding-bottom:6px;
    background:white;
    border:1px solid;
    border-bottom:2px solid;
    border-color:#cccccc;
    color:#444444;
    margin-bottom:6px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

#white_content h1
{
    font-size:12px;
    font-weight:bold;
    margin-bottom:2px;
    color:#006699;
    background-color:#eeeeee;
    margin-top:3px;
    padding:3px;
    text-align:center;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

#white_content2
{
    padding-left:7px;
    padding-right:7px;
    padding-top:3px;
    padding-bottom:6px;
    background:white;
    border:1px solid;
    border-bottom:2px solid;
    border-color:#cccccc;
    color:#444444;
    margin-bottom:6px;
    margin-right:-12px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

#white_content2 h1
{
    font-size:12px;
    font-weight:bold;
    margin-bottom:2px;
    color:#006699;
    background-color:#eeeeee;
    margin-top:3px;
    text-align:center;
    padding:3px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

#white_content2 th
{
    text-align:left;
    padding:6.5px;
}

#login
{
    height:20px;
    padding-left:7px;
    padding-right:7px;
    padding-top:6px;
    padding-bottom:6px;
    background:white;
    border-bottom:2px solid;
    border:2px solid;
    border-top:0px;
    border-color:#134787;
    color:#ffffff;
    text-align:center;
    margin-bottom:6px;
    margin-top:-8px;
    margin-right:-12px;
    background:url("../images/nav_background.png");
    -moz-border-bottom-left-radius: 4px;
    -moz-border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.textbox
{
    border:1px solid;
    border-color:#134787;
    color:#134787;
}

#footer
{
    background-color:#eeeeee;
    color:#006699;
    text-align:right;
    padding:1em;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

Results

Quikship