Grow your CSS skills. Land your dream job.

My first self-coded site!

  • # August 27, 2008 at 11:26 am

    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:
    < !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">




    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.


    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.

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".