Yeni bir header ile karşınızdayım! | HTML+CSS

Won5 · 14 May 2015

Selam forum halkı...
Bugün sizlere 8 dakika içerisinde kodladığım bu header'i göstereceğim.Eğer beğenirseniz Pukkit Projesi'nde kullanmayı planlıyorum.
Şahsen benim hoşuma gitti.
Buyrun Link: Tıkla!
Kodlar:
index.html:

HTML:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/stil.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <title>Anasayfa</title>
</head>
<body>   
    <header>
        <ul>
            <li>
                <a href="#"><i class="fa fa-home"></i> Anasayfa</a>
            </li>
            <li>
                <a href="#"><i class="fa fa-folder"></i> Eklentiler</a>
            </li>
            <li>
                <a href="#"><i class="fa fa-flag"></i> Güncellemeler</a>
            </li>
            <li>
                <a href="#"><i class="fa fa-envelope"></i> İletişim</a>
            </li>
            <li>
                <a href="#"><i class="fa fa-sign-in"></i> Admin KP Giriş</a>
            </li>
        </ul>
    </header>
</body>
</html>

css/reset.css:
Meyerweb'den bulabilirsiniz.
css/style.css:

Kod:

/* Tüm hakları saklıdır. Pukkit(RanKod) */
body {
    background: #f2f2f2;
}
header {
    background: #525252;
    width: 100%;
    height: 40px;
}
header ul li {
    float: left;
    padding-top: 11.25px;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 11.25px;
    transition: background 600ms;
    -o-transition: background 600ms;
    -ms-transition: background 600ms;
    -webkit-transition: background 600ms;
}
header ul li:hover {
    background: #636363;
    transition: background 600ms;
    -o-transition: background 600ms;
    -ms-transition: background 600ms;
    -webkit-transition: background 600ms;
}
header ul li a {
    color: #fff;
    font-family: 'Verdana';
    font-size: 16px;
    font-weight: normal;
    text-decoration: none;
}
header ul li:last-child {
    float: right;
}

Header Reklam Alanı

Yeni bir header ile karşınızdayım! | HTML+CSS

Won5

Patates Avcısı