CSS Header

LoginSign In

John Doe

Kaynak Kodu:
<div dir="ltr" style="text-align: left;" trbidi="on">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6dxf50fSZQNYJwFS_tbqS-7AJpgvZNHulPbRbJORIzv0OJTgWNNuteviqbmPpTcuLwUz26PnZBjGEZYjgMKzIOlHwlAR2f7qilqhTGqJNXz1nWMCiC-WP9UlIFgFiESdMbLot2xcTNbU/s1600/chevrolet_camaro_muscle.jpg" style="width:50%;height:auto;" /><div style="width:100%;height:120px;position:relative;border:solid 1px #e1e1e1;background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6dxf50fSZQNYJwFS_tbqS-7AJpgvZNHulPbRbJORIzv0OJTgWNNuteviqbmPpTcuLwUz26PnZBjGEZYjgMKzIOlHwlAR2f7qilqhTGqJNXz1nWMCiC-WP9UlIFgFiESdMbLot2xcTNbU/s1600/chevrolet_camaro_muscle.jpg&#39;);background-position:50% 50%;font-family:arial;">
<div style="width:100%;height:120px;background:rgba(0,0,0,0.4);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);color:white;">
    <a href="http://arslanturgut.blogspot.com.tr" style="display:block;color:#fff;float:right;width:auto;height:14px;margin-right:15px;text-decoration:none;">Login</a><a href="http://arslanturgut.blogspot.com.tr" style="display:block;color:#fff;float:right;width:auto;height:14px;margin-right:15px;text-decoration:none;">Sign In</a>
    <div style="float:left;display:block;position:absolute;bottom:10px;left:150px;">John Doe </div>
    </div>
<div style="width:110px;height:110px;position:absolute;bottom:-35%;left:3%;border:solid 1px #e1e1e1;background-color:white;box-shadow:1px 1px 20px #eee;border:solid 2px #e1e1e1;background-color:white;z-index:100"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX-4uyI8n5IneZfBcLCz_1OfpKBzl4MemMh-B5puT9KCnj7I7FbVIe60BxLqY1aPT7V-H6ZwELj51NhjBDWfhoU7qGqQ8IpiqmBZnTXf-DqKLc4BibgQDH4E5tXJ0njh1Ft6htdl0vjeg/s1600/profil-fotosu-erkek.png" style="width:100%;height:auto;" /></div>

</div>

</div>

Saygılarımla...
Turgut Arslan