HTML KISMI
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<title>Untitled Document</title>
<link href="stil.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="genel">
<header>BURASI HEADER</header>
<div class="orta ">
<div class="sol ">
<div class="kutu">
<h3>Ürün1</h3>
<p>Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacı, sürekli 'buraya metin gelecek, buraya metin gelecek' yazmaya kıyasla daha dengeli bir harf dağılımı sağlayarak okunurluğu artırmasıdır. Şu anda birçok masaüstü yayıncılık paketi ve</p>
<a href="#">Detaya git</a>
</div>
<div class="kutu">
<h3>Ürün1</h3>
<p>Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacı, sürekli 'buraya metin gelecek, buraya metin gelecek' yazmaya kıyasla daha dengeli bir harf dağılımı sağlayarak okunurluğu artırmasıdır. Şu anda birçok masaüstü yayıncılık paketi ve</p>
<a href="#">Detaya git</a>
</div>
<div class="kutu">
<h3>Ürün1</h3>
<p>Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacı, sürekli 'buraya metin gelecek, buraya metin gelecek' yazmaya kıyasla daha dengeli bir harf dağılımı sağlayarak okunurluğu artırmasıdır. Şu anda birçok masaüstü yayıncılık paketi ve</p>
<a href="#">Detaya git</a>
</div>
<div class="kutu">
<h3>Ürün1</h3>
<p>Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacı, sürekli 'buraya metin gelecek, buraya metin gelecek' yazmaya kıyasla daha dengeli bir harf dağılımı sağlayarak okunurluğu artırmasıdır. Şu anda birçok masaüstü yayıncılık paketi ve</p>
<a href="#">Detaya git</a>
</div>
<div class="kutu">
<h3>Ürün1</h3>
<p>Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacı, sürekli 'buraya metin gelecek, buraya metin gelecek' yazmaya kıyasla daha dengeli bir harf dağılımı sağlayarak okunurluğu artırmasıdır. Şu anda birçok masaüstü yayıncılık paketi ve</p>
<a href="#">Detaya git</a>
</div>
<div class="kutu">
<h3>Ürün1</h3>
<p>Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacı, sürekli 'buraya metin gelecek, buraya metin gelecek' yazmaya kıyasla daha dengeli bir harf dağılımı sağlayarak okunurluğu artırmasıdır. Şu anda birçok masaüstü yayıncılık paketi ve</p>
<a href="#">Detaya git</a>
</div>
<div class="kutu">
<h3>Ürün1</h3>
<p>Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacı, sürekli 'buraya metin gelecek, buraya metin gelecek' yazmaya kıyasla daha dengeli bir harf dağılımı sağlayarak okunurluğu artırmasıdır. Şu anda birçok masaüstü yayıncılık paketi ve</p>
<a href="#">Detaya git</a>
</div>
<div class="kutu">
<h3>Ürün1</h3>
<p>Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacı, sürekli 'buraya metin gelecek, buraya metin gelecek' yazmaya kıyasla daha dengeli bir harf dağılımı sağlayarak okunurluğu artırmasıdır. Şu anda birçok masaüstü yayıncılık paketi ve</p>
<a href="#">Detaya git</a>
</div>
<div class="kutu">
<h3>Ürün1</h3>
<p>Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacı, sürekli 'buraya metin gelecek, buraya metin gelecek' yazmaya kıyasla daha dengeli bir harf dağılımı sağlayarak okunurluğu artırmasıdır. Şu anda birçok masaüstü yayıncılık paketi ve</p>
<a href="#">Detaya git</a>
</div>
<div class="kutu">
<h3>Ürün1</h3>
<p>Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacı, sürekli 'buraya metin gelecek, buraya metin gelecek' yazmaya kıyasla daha dengeli bir harf dağılımı sağlayarak okunurluğu artırmasıdır. Şu anda birçok masaüstü yayıncılık paketi ve</p>
<a href="#">Detaya git</a>
</div>
</div>
<div class="sag ">
<ul>
<li><a href="#">Liste1</a></li>
<li><a href="#">Liste1</a></li>
<li><a href="#">Liste1</a></li>
</ul>
</div>
<div class="temizle"></div>
</div>
<footer>BURASI FOOTER</footer>
</div>
</body>
</html>
CSS KISMI
#genel header{
border-width:1px ;
border-style:solid;
border-color:red;
padding:50px;
}
#genel div.orta{
border:1px solid red;
padding:10px;
}
#genel footer{
border:1px solid blue;
padding:20px;
}
div .orta div.sol{
background-color: yellow;
float:left;
width: 900px;
}
div .orta div.sag{
border:1px solid green;
float:right;
width:300px;
}
div .temizle{
clear:both;
}
div .orta .kutu{
background-color: pink;
width:200px;
float:left;
margin:10px;
}
Hiç yorum yok:
Yorum Gönder