Social Media Footer

Added a social media footer to the page that has links to Facebook, Twitter, LinkedIn and a contact form.

I decided to upload the PDF (WordPress hates AI) file so people could edit it.

The fonts required to get the same result are : Aller Display and ChopinScripts Medium

Download the file here
A picture (in case I later delete it)

HTML

1
2
3
4
5
6
7
8
9
10
11
12
<div id="beFriends">
        <div id="beFriends">
            <div id="line"></div>
            <div id="lets"></div>
            <div class="centered" style="position:relative; overflow:hidden; margin:0 auto; width:677px;">
                <a id="twitter" rel="external nofollow" target="_blank" href="http://twitter.com/#!/HostGrenade"></a>
                <a id="facebook" rel="external nofollow" target="_blank" href="http://www.facebook.com/pages/HostGrenade/207246349306653?sk=wall"></a>
                <a id="linkedIn" rel="external nofollow" target="_blank" href="http://ca.linkedin.com/pub/mike-didomizio/32/408/367"></a>
                <a id="email" href="/quote?title=Contact"></a>
            </div>
        </div>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
#beFriends{
    position:relative;
    margin-top:50px;
    border-bottom:1px solid #555;
    padding-bottom:10px;
    overflow:hidden
}

#beFriends div#line{
    position:absolute;
    background-color:#555;
    height:1px;
    top:32.5px;
    width:100%;
}

#beFriends #lets{
    position:relative;
    background:url('images/beFriends.png') no-repeat;
    background-position:-190px 0px;
    width:600px;
    margin:0 auto;
    height:65px;
}

#beFriends a{
    display:block;
    background:url('images/beFriends.png') no-repeat;
    height:40px;
    float:left;
    margin:10px;
    padding:0;
    color:#555;
    text-decoration:none
}

#beFriends a#linkedIn{background-position:-426px -68px; width:177px;}
#beFriends a#twitter{background-position:-28px -68px; width:165px}
#beFriends a#facebook{background-position:-227px -68px; width:150px}
#beFriends a#email{background-position:-625px -68px; width:105px}

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>