Merhaba değerli mdp ailesi,
Bu gün sizlere kısa süre önce yapmış olduğum index çalışmasını sunacağım.
Not: Tasarım hali olmadan, direk kodladım. O an aklımdan geçenleri döktüm. Tasarımda hiç resim kullanılmadı.
CSS Kodu:
HTML Kodu:
Demo:
Dipnot: Kodlamada hatalar var ise affola, CSS'i unutmuşmuyum diye denemek istedim kendimi. Onun eseridir.
Bu gün sizlere kısa süre önce yapmış olduğum index çalışmasını sunacağım.
Not: Tasarım hali olmadan, direk kodladım. O an aklımdan geçenleri döktüm. Tasarımda hiç resim kullanılmadı.
CSS Kodu:
PHP Kod:
/* Sıfırlamalar */
body {background-color:#f7f7f7; background-repeat:no-repeat; background-attachment:fixed; background-position:center; text-align: center; margin: 0px;}
a,li { text-decoration: none; list-style: none; font-family: Tahoma; color: #fff;}
input:focus { outline: none;}
/* Üst Header */
#arkapln {background-color:#fff; height: 50px; -webkit-box-shadow: -1px 0px 15px 0px rgba(0, 0, 50, 0.42); -moz-box-shadow: -1px 0px 15px 0px rgba(0, 0, 50, 0.42);box-shadow: -1px 0px 15px 0px rgba(0, 0, 50, 0.42);
}
#arkapln a li {font-family:'Corbel'; font-size: 15px; color:#333; float:left; margin-left: 15px; margin-top: 15px; }
/* Menu */
#menu {float:right; margin-left: 3px; float:right; }
#menu li {float:left;}
#menu li a{font-family:'Corbel'; font-size: 12px; color:#333; float:left; margin-left: 15px; margin-top: 15px; float:left;margin:0 15px; margin-top: 15px;}
#menu li a:hover {transition: all 500ms; border-bottom:solid 2px #17d6a0; }
/* Orta Yazı */
#baslik li {font-family:'Corbel'; font-size: 35px; color:#333; float:left; margin-left: 35px; margin-top: 35px; }
#yazi li {font-family:'Corbel'; font-size: 15px; color:#333; float:left; margin-top: 80px; margin-left: -155px;text-align: left; }
/* Orta Yazı */
#baslik2 li {font-family:'Corbel'; font-size: 35px; color:#333; float:right; margin-right: 35px; margin-top: 25px; }
/* Sosyal Medya Facebook */
#sosyal {background-color: #3B5998;}
#sosyal li a {font-family: 'Corbel'; font-size: 15px; color:#fff; line-height: 50px;background-color: #3B5998; margin-right: 3px; }
#yazi2 {float:right; margin-right: -95px; margin-top: 80px; text-align: left; }
/* Sosyal Medya Twitter */
#sosyal1 {background-color: #44CCF6;}
#sosyal1 li a {font-family: 'Corbel'; font-size: 15px; color:#fff; background-color: #44CCF6; margin-right: 10px; }
#yazi3 {float:right; margin-right: -160px; margin-top: 16px; text-align: left; }
HTML Kodu:
PHP Kod:
<html>
<head>
<title>Sayfa Başlığı</title>
</head>
<body>
<div id="arkapln"><a href="#"> <li> <b>GRAFİKBOOK<font color="#17d6a0">.NET</font> </li></a>
<div id="menu">
<li><a href="index.php"><span style="border-bottom:solid 2px #17d6a0;">ANA SAYFA</span></a></li>
<li><a href="portal.php">PORTAL</a></li>
<li><a href="memberlist.php">ÜYE LİSTESİ</a></li>
<li><a href="misc.php?action=help?">YARDIM</a></li>
<li><a href="search.php">ARAMA</a></li>
</div>
</div>
<div id="baslik"><li><span style="border-bottom:solid 2px #17d6a0;"> Hakkımda </span></li> </div>
<br>
<div id="yazi"><li>
But I must explain to you how all this mistaken idea of<br> denouncing pleasure and praising
pain was born and I will<br> give you a complete account of the system, and expound the actual<br> teachings
of the great explorer of the truth, the<br> master-builder of human happiness. No one rejects,<br> dislikes,
or avoids pleasure itself, because it is pleasure, <br>but because those who do not know how to pursue pleasure
rationally encounter consequences<br> that are extremely painful. Nor again is there<br> anyone who loves or pursues
or desires to obtain pain of itself,<br> because it is pain, but because occasionally circumstances <br>occur in which
toil and pain can procure him <br>some great pleasure. To take a trivial example, which of us ever<br> undertakes laborious
physical exercise, except to obtain<br> some advantage from it? But who has any right<br> to find fault with
a man who chooses to enjoy a pleasure<br> that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure? </li></div>
<div id="baslik2"><li><span style="border-bottom:solid 2px #17d6a0;"> Sosyal Medya </span></li> </div>
<div id="yazi2"> <div id="sosyal"><li><span style="float:right;"><a href="#"> Facebook</span></a></li> </div>
<div id="yazi3"> <div id="sosyal1"><li><span style="float:right;"><a href="#"> Twitter</span></a></li> </div>
</body>
</html>
Demo:
Kod:
http://www.grafikbook.net/denemeindex2/
Dipnot: Kodlamada hatalar var ise affola, CSS'i unutmuşmuyum diye denemek istedim kendimi. Onun eseridir.