https://instagram.com/alphazzers
   
Konuyu Oyla:
  • Toplam: 1 Oy - Ortalama: 1
  • 1
  • 2
  • 3
  • 4
  • 5
Batuhann İndex V1
#1
20 Dakikada kodladım uğraşmadım basit bir kodlama.

HTML kodu:

Kod:
<html>
<head>
<title>Batuhan İndex</title>
<style type="text/css">@import url("css/reset.css");</style>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>
<body>
<div id="Tümü">
<div id="header"><div class="ikonlar"><div id="kapsa"><a href="#"><img src="http://i.hizliresim.com/ozXzbo.png" width="32px" height="32px" id="ikonlar"></a> <a href="#"><img src="http://i.hizliresim.com/8Ea9nV.png" width="32px" height="32px" id="ikonlar"></a>
<a href="#"><img src="http://i.hizliresim.com/yn6A2y.png" width="32px" height="32px" id="ikonlar"></a>
</div></div>
<div id="headerüst"><div id="kapsa"><ul><li>Bizi Hemen Takip Et</li></ul>
</div>
</div>
<div id="kapsa"><div id="logo"></div>
</div>
<div id="kapsa"><div id="orta"><div id="ic"><span style="color:red;margin-left:270px;border-bottom:1px dotted #fff;">Hangi resime tıklarsan o bölüme gider...</span><ul><li><a href="#"><img src="http://i.hizliresim.com/lzq0Ql.png"</a></br>İzle</li>
<li><a href="#"><img src="http://i.hizliresim.com/lzq0Ql.png"</a></br>İzle</li><li><a href="#"><img src="http://i.hizliresim.com/lzq0Ql.png"</a></br>İzle</li></ul>
</div></div></div></div>
</body>
</html>
CSS kodu:
Kod:
/* Tümü */
#Tümü { margin:0 auto; }

/* Header */

#kapsa { width:1000px; margin:0px auto; }

#header { width:100%; height:150px; background:url(http://i.hizliresim.com/891vBd.png); border-bottom:3px solid #c7c7c7;}

#headerüst { width:100%; height:65px; border-bottom:1px solid #d4d4d4;}

#headerüst ul li { color:#fff; font-family:Utsaah;}

#ikonlar { float:right; }

#logo { margin-top:-1%;; background:url(http://i.hizliresim.com/lzq0Ql.png); width:200px; height:100px; margin-left:40%; }

/* Orta Kısım */

#orta { box-shadow:0 0 8px 2px #000; background-color:#c7c7c7; margin-left:10%; width:800px; height:500px; margin-top:5px; }

#ic ul li{ float:left; width:150px; height:120px; margin-left:55px; text-align:center;}

#ic ul li a img {  width:120px; height:120px; background-color:#fff; border:1px solid #969191; text-align:center;}

#ic ul li a img:hover{  width:120px; height:120px; background-color:#969191; border:1px solid #fff; text-align:center;}

#ic ul li a { color:#fff; text-decoration:none;}

VgYndq.png
--------
rm9kPB.png
Ara
Cevapla PGM
Teşekkür verenler:
#2
Bence iyi de body css'ine ayar verseydin. Font mont ver. Genelde her tasarımcı unutur hiç sevmem :D
Görseller güzel.
Ara
Cevapla PGM
Teşekkür verenler:
#3
Teşekkürler.
Ara
Cevapla PGM
Teşekkür verenler:
#4
Nasil koyacaz
Ara
Cevapla PGM
Teşekkür verenler:


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 1 Ziyaretçi



Reklam yaziniz bostur. ayarlardan duzenleyiniz:medi -

Online Shopping App
Online Shopping - E-Commerce Platform
Online Shopping - E-Commerce Platform
Feinunze Schmuck Jewelery Online Shopping