Luka's Site

It's never going to be beautiful

by blue1086

HTML

<div id="head">
    <span class="link" href="index.html">
        Home
    </span>
    <span class="link" href="BLANK.html">
        About Me
    </span href="">
    <span class="link" href="BLANK.html">
        Blah
    </span>
    <span class="link" href="BLANK.html">
        Blah
    </span>
    <img src="http://lukav2.x10host.com/Logo%20Modern.png"/>
</div>
<div id="content">
    
</div>
<div id="social">
    <img class="social-circle link" style="back" href="LINK" src="http://lukav2.x10host.com/google-plus-icon.png"/>
    <img class="social-circle link" style="back" href="LINK" src="http://lukav2.x10host.com/google-plus-icon.png"/>
</div>

CSS

html,body{
    width: 100%;
    height:100%;
    margin:0;
    padding:0;
}
#head{
    text-align:center;
    width: 100%;
    height: 5em;
    background-color:black;
    line-height:5em;
    border-bottom: 0.8em solid gray;
    position:relative;
}
#head>span{
    color:white;
    font-weight: 600;
    margin: 0.8em;
    cursor:pointer;
    font-size: 1.5em;
}
#head>img{
    width: 5em;
    position:absolute;
    left:50%;
    left:calc(50%-5em);
    top: 3.5em;
}
#content {
    width:100%;
    height:100%;
    background-image: url(http://lukav2.x10host.com/minecraftguy.jpg);
    background-size:cover;
}
#social {
    width:100%;
    height: 8em;
    line-height: 8em;
    background-color: black;
    text-align:center;
}
.social-circle {
    height:5.5em;
    width: 5.5em;
    display: inline;
    margin: 1em;
    cursor: pointer;
    transition: width 0.2s ease, height 0.2s ease,margin 0.2s ease;
}
.social-circle:hover {
    height: 6em;
    width: 6em;
    margin: 0.5em;
}

JavaScript

window.onload=function(){
(function () {
    var luka = {};
    
    luka.links = document.getElementsByClassName("link")||[];
    
    for (luka.i=0;luka.i<luka.links.length;luka.i+=1) {
        luka.links[luka.i].onclick=function(){
            window.location.href=this.getAttribute('href');
        }
    }
    
}());
};