Website new

New website for me

by jonnyc

HTML

<body>
    <div>
        <h1>JONNY CORNWELL</h1>
    </div>
    <div id="mainContent">
        <div class="find">
            <div class="iconlist">
                <ul>
                    <li><a href="#" title="Things I've done"><img src="https://raw.github.com/danleech/simple-icons/master/icons/wordpress/wordpress-64.png" alt="blog"/></a>
                    </li>
                    <li><a href="#" title="@jonnycornwell"><img src="https://raw.github.com/danleech/simple-icons/master/icons/twitter/twitter-64.png" alt="twitter"/></a>
                    </li>
                    <li><a href="#" title="What I do"><img  src="https://raw.github.com/danleech/simple-icons/master/icons/linkedin/linkedin-64.png" alt="linkedin"/></a>
                    </li>
                    <li><a href="#" title="some stuff"><img src="https://raw.github.com/danleech/simple-icons/master/icons/youtube/youtube-64.png" alt="youtube"/></a>
                    </li>                    
                    <li><a href="#" title="fiddles"><img src="https://raw.github.com/danleech/simple-icons/master/icons/jsfiddle/jsfiddle-64.png" alt="fiddles"/></a>
                    </li>                    
                    <li><a href="#" title="What I've found"><img src="https://raw.github.com/danleech/simple-icons/master/icons/delicious/delicious-64.png" alt="fiddles"/></a>
                    </li>
                    <li><a href="http://open.spotify.com/user/jonnycornwell" target="_blank" title="What I listen to"><img src="https://raw.github.com/danleech/simple-icons/master/icons/spotify/spotify-64.png" alt="fiddles"/></a>
                    </li>
                </ul>
                <div style="clear:both;"></div>
            </div>
        </div>
        
        <!--<div class="about">
            <p>I'm a developer, I like to create stuff</p>
        </div>-->
    </div>
</body>

CSS

html, body {  
    top:0px;
    left:0px;
    bottom:0px;
    right:0px;
    background:Gray;
    font-family:Helvetica, Arial, sans-serif;
}
h1{
    font-weight:normal;
    font-size:14px;
    letter-spacing: 4px;    
    margin:15px;
}

.iconlist {
    max-width: 448px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.iconlist ul {  
    padding:0;
list-style-type: none;
}
.iconlist li {
    float:Left;
}
.iconlist li a {       
      /* First we need to help some browsers along for this to work.
     Just because a vendor prefix is there, doesn't mean it will
     work in a browser made by that vendor either, it's just for
     future-proofing purposes I guess. */
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  /* ...and now for the proper property */
  transition:.5s;
    display:Block;
}

.iconlist li a img {  
    border:0;
}

.iconlist li a:hover{
    background:Black;
}

#mainContent {
}
.find {
    padding:15px;
    margin:10px;
}
.about {
    padding:15px;
    margin:10px;
    background:green;
}