Programming Language
Hectopat
- Katılım
- 3 Haziran 2019
- Mesajlar
- 1.812
- Makaleler
- 3
- Çözümler
- 6
Tamam hocam.
<!DOCTYPE html>
<head>
<title>Anasayfa</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="ana">
<div class="ust-bolum">
<img src="logo.jpg">
</div>
<div class="menu">
<ul>
<li> <a href="index.html">Anasayfa</a></li>
<li> <a href="bilgiler.html">Bilgiler</a></li>
<li> <a href="hakkimizda.html">Hakkımızda</a></li>
<li> <a href="iletisim.html">İletişim</a></li>
</ul>
</div>
<div class="icerikler">
<div class="icerikler-sag">
</div>
<div class="icerikler-sol">
<div class="icerikler_bilgi_1"><h3>Merak ediyor musun?</h3></div>
<div class="icerikler_bilgi_2"><h3>Merak ediyor musun?</h3></div>
<div class="icerikler_bilgi_3"><h3>Merak ediyor musun?</h3></div>
<div class="icerikler_bilgi_4"><h3>Merak ediyor musun?</h3></div>
<div class="icerikler_bilgi_5"><h3>Merak ediyor musun?</h3></div>
</div>
</div>
<div class="alt-bolum">
</div>
</div>
</body>
</html>
#ana{
width:1000px;
height: auto; /* auto içerik eklendiğinde kendisi otomatik boyutlandırır.*/
margin: auto;
}
.ust-bolum{
width:1000px;
height:150px;
}
.menu{
margin-top:30px; /* üstten boşuk bırakma kodu */
margin-bottom:30px; /* alttan boşuk bırakma kodu */
width:1000px;
height:70px;
background-color:#ff4e28;
}
.menu ul li{
width:160px;
list-style:none;
float:left;
padding:30px; /* aralara boşluk ekler */
margin:5px;
}
.menu ul li:hover{
background-color:#f73c13;
}
.menu ul li a{
text-decoration:none; /* yazı altındaki çizgileri siler */
font:bold 20px verdana;
color:black;
}
.icerikler{
width:1000px;
height: auto;
}
.icerikler-sol{
width:650px;
min-height:450px;
max-height:auto;
float:right;
margin-right:15px;
}
.icerikler_bilgi_1{
width:650px;
min-height:300px;
max-height:500px;
background-color:#ff6e4f;
border:1px;
margin-bottom:30px;
border-radius:10px;
box-shadow:8px 8px 8px;
}
.icerikler_bilgi_2{
width:650px;
min-height:300px;
max-height:500px;
background-color:#ff6e4f;
border:1px;
margin-bottom:30px;
border-radius:10px;
box-shadow:8px 8px 8px;
}
.icerikler_bilgi_3{
width:650px;
min-height:300px;
max-height:500px;
background-color:#ff6e4f;
border:1px;
margin-bottom:30px;
border-radius:10px;
box-shadow:8px 8px 8px;
}
.icerikler_bilgi_4{
width:650px;
min-height:300px;
max-height:500px;
background-color:#ff6e4f;
border:1px;
margin-bottom:30px;
border-radius:10px;
box-shadow:8px 8px 8px;
}
.icerikler_bilgi_5{
width:650px;
min-height:300px;
max-height:500px;
background-color:#ff6e4f;
border:1px;
margin-bottom:30px;
border-radius:10px;
box-shadow:8px 8px 8px;
}
.icerikler-sag{
width:335px;
min-height:450px;
max-height:auto;
float:right;
background-color:#e3d9d6;
}
.alt-bolum{
width:1000px;
height:60px;
background-color:black;
float:right;
margin-top:30px;
margin-bottom:20px;
}
/* İLETİŞİM BÖLÜMÜ */
.iletisim{
width:500px;
height:500px;
margin:auto;
background-color:#ff4e28;
}
.yazi{
width:130px;
height:80px;
margin:auto;
margin-bottom:50px;
font:bold 30px vardane;
}
