Giriş Yap

~~Hatake~~ · 04-01-2016 Saat: 20:57

Arkadaşlar konuyu açıyorum ama lütfen beni mahcup etmeyin. Dün @bilsoft Bilal abiyle konuşurken ona da söylemiştim. Kendim için yazdım bu tasarımı aslında ama yine de dağıtıyorum. Kullanmanız veya kullanmamanız beni ilgilendirmez. Ama kendiniz yapmış gibi göstermeseniz yeter. Çünkü gerçekten şık bir tasarım ve ondan daha önemli olan ben bu tasarıma emek verdim. Neyse demoya geçelim:

DEMO: http://codepen.io/anon/pen/LGxqvb

index.html dosyasını açıp içine şu kodları yazın;

Kod:

<html>

<head>

<title>Metehan DURMUŞ - Web Developer</title>

<script>

$(function() {

  $('a[href*=#]:not([href=#])').click(function() {

    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

      var target = $(this.hash);

      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');

      if (target.length) {

        $('html,body').animate({

          scrollTop: target.offset().top

        }, 1000);

        return false;

      }

    }

  });

});

</script>

<style>

body {

  margin: 0px;

  padding: 0px;

  background: url(http://i.hizliresim.com/orrAl2.png) repeat;

}

#top {

 position: absolute;

 top: -80px;

}

.ilkmenu {

 list-style-type: none;

 font-family: 'Titillium Web', sans-serif;

 background: #0D64D5;

 padding-top: 7px;

 padding-left: 15%;

 padding-right: 15%;

 border-bottom: 1px solid #00C4FF;

 position: fixed;

 width: 100%;

 margin-top: -150px;

 z-index: 99999;

}

.ilkmenu li {

 display: inline-block;

 padding: 5px;

 border-radius: 4px;

 -webkit-transition: background 350ms;

 overflow: hidden;

}

.ilkmenu li:hover {

 background: rgba(0,0,0,0.5);

 box-shadow: inset 0px 1px 1px black;

}

.ilkmenu li a {

 text-decoration: none;

 color: #fff;

}

.icerik {

  background: #fff;

  position: relative;

  width: 66%;

  margin: auto;

  padding: 2%;

  border: 2px solid #DEDEDE;

  border-radius: 7px;

  margin-top: 150px;

  box-shadow: 0px 0px 3px rgba(0,0,0,0.1);

  overflow: hidden;

  margin-bottom: 110px;

}

.profil {

  border: 4px solid transparent;

  margin-top: 20px;

  width: 160px;

  height: 160px;

  overflow: hidden;

  border-radius: 160px;

  box-shadow: 0px 0px 5px rgba(0,0,0,0.4);

  float: left;

}

.profil img {

  width: 160px;

  height: 160px;

}

.yazi {

  font-family: 'Ubuntu', sans-serif;

  color: gray;

  font-size: 16px;

  float: left;

  width: 70%;

  margin-top: 40px;

  font-weight: bold;

  margin-left: 50px;

  text-align: center;

}

#hakkimda {

  float: right;

  margin-top: -50px;

}

#referans {

  margin-top: -20px;

  float: left;

}

#bilgiler {

  margin-top: -20px;

  float: left;

}

.referanslar {

  list-style-type: none;

  float: left;

  margin: 20px;

  width: 100%;

  text-align: center;

}

.referanslar li {

  display: inline-block;

  width: 120px;

  height: 120px;

  border-radius: 120px;

  border: 5px solid rgba(0,0,0,0.3);

  -webkit-transition: all 350ms;

  overflow: hidden;

  margin-left: 20px;

}

.referanslar li img {border-radius: 120px; width: 120px; height: 120px;}

.referanslar li .isim {

  margin-top: -79px;

  text-align: center;

  font-size: 18px;

  font-family: 'Titillium Web', Sans-Serif;

  color: #fff;

  text-shadow: 0px 2px 3px black;

  opacity: 0;

  -webkit-transition: all 350ms;

  -webkit-transform: scale(0);

  font-weight: bold;

}

.referanslar li:hover {

  border: 5px solid #0D64D5;

  cursor: pointer;

}

.referanslar li:hover .isim {

  opacity: 1;

  -webkit-transform: scale(1);

}

.tumbilgi {

  float: left;

  width: 100%;

  margin-top: 20px;

  list-style-type: none;

  font-family: 'Ubuntu', sans-serif;

  color: #fff;

}

.tumbilgi li {

  border: 1px solid rgb(230, 230, 230);

  padding: 10px;

  border-radius: 4px;

  box-shadow: 0px 3px 0px gainsboro;

  text-align: left;

  margin-bottom: 15px;

}

.tumbilgi li.doksan {

  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0087ff+0,30b6ff+90,ffffff+90,ffffff+100 */

background: #0087ff; /* Old browsers */

background: -moz-linear-gradient(left,  #0087ff 0%, #30b6ff 90%, #ffffff 90%, #ffffff 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(left,  #0087ff 0%,#30b6ff 90%,#ffffff 90%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to right,  #0087ff 0%,#30b6ff 90%,#ffffff 90%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0087ff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */

}

.tumbilgi li.doksanbes {

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff003f+0,ff3064+95,ffffff+95,ffffff+100 */

background: #ff003f; /* Old browsers */

background: -moz-linear-gradient(left,  #ff003f 0%, #ff3064 95%, #ffffff 95%, #ffffff 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(left,  #ff003f 0%,#ff3064 95%,#ffffff 95%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to right,  #ff003f 0%,#ff3064 95%,#ffffff 95%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff003f', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */

}

.tumbilgi li.yetmis {

  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffc300+0,ffd34f+70,ffffff+70,ffffff+100 */

background: #ffc300; /* Old browsers */

background: -moz-linear-gradient(left,  #ffc300 0%, #ffd34f 70%, #ffffff 70%, #ffffff 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(left,  #ffc300 0%,#ffd34f 70%,#ffffff 70%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to right,  #ffc300 0%,#ffd34f 70%,#ffffff 70%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc300', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */

}

.tumbilgi li.kirk {

  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#19bc00+0,63ff4f+40,ffffff+40,ffffff+100 */

background: #19bc00; /* Old browsers */

background: -moz-linear-gradient(left,  #19bc00 0%, #63ff4f 40%, #ffffff 40%, #ffffff 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(left,  #19bc00 0%,#63ff4f 40%,#ffffff 40%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to right,  #19bc00 0%,#63ff4f 40%,#ffffff 40%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#19bc00', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */

}

.tumbilgi li.onbes {

  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00a89d+0,4fffd0+15,ffffff+15,ffffff+100 */

background: #00a89d; /* Old browsers */

background: -moz-linear-gradient(left,  #00a89d 0%, #4fffd0 15%, #ffffff 15%, #ffffff 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(left,  #00a89d 0%,#4fffd0 15%,#ffffff 15%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to right,  #00a89d 0%,#4fffd0 15%,#ffffff 15%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a89d', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */

}

.footer {

  background: #0D64D5;

  color: #fff;

}

.ickalip {

  padding: 10px;

  background: rgba(0,0,0,0.3);

  margin-left: 15%;

  margin-right: 15%;

  font-family: 'Titillium Web', sans-serif;

  font-size: 14px;

  text-shadow: 0px 2px 0px rgba(0,0,0,0.4);

}

</style>

<link href='https://fonts.googleapis.com/css?family=Titillium+Web:600' rel='stylesheet' type='text/css'>

<link href='https://fonts.googleapis.com/css?family=Ubuntu:500' rel='stylesheet' type='text/css'>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

</head>

<body>

<div id="top"></div>

<div class="ilkmenu">

 <li><a href="#hakkimda"><i class="fa fa-graduation-cap"></i> Hakkımda</a></li>

 <li><a href="#referans"><i class="fa fa-code"></i> Referanslarım</a></li>

 <li><a href="#bilgiler"><i class="fa fa-file-archive-o"></i> Bilgilerim</a></li>

 <li><a href="#top"><i class="fa fa-arrow-circle-up"></i> En Yukarı Çık</a></li>

 <div style="

    float: right;

    margin-right: 30%;

    color: #fff;

    background: rgba(0,0,0,0.3);

    padding: 5px;

    border-radius: 4px;

    cursor: pointer;

}

"><i class="fa fa-reddit-alien"></i> Metehan DURMUŞ</div>

</div>

<div class="icerik">

<div id="hakkimda"></div>

<div style="

    font-family: 'Titillium Web', Sans-Serif;

    color: #0D64D5;

    font-size: 28px;

    font-weight: bold;

    border-bottom: 1px dashed;

    text-align: left;

}

">Ben Kimim <i class="fa fa-question-circle"></i><div style="background: #E91E63; padding: 2px; float: right; border-radius: 3px; font-size: 11px; color: #fff;"><i class="fa fa-heart"></i> Sevgi ile kodladım.</div></div>

<div class="profil"><img src="http://i.hizliresim.com/VvvlRV.png" alt="Metehan Durmuş" title="Metehan Durmuş" /></div>

<div class="yazi">

Adım Metehan soyadım Durmus, 1999 Zonguldak dogumluyum. Bos zaman buldukça grafik tasarımı ve web kodlamaya zaman ayırıyorum/ayırabiliyorum. 2016'da bulunduğumuza göre 6 yıldır bu iş

ile uğraşıyorum. MyBB Forum scriptinin uzmanıyım. HTML, Css, JavaScript, PHP, Photoshop, WordPress ve çok az C# bilgim bulunmakta. Bahsettiğim gibi Photoshop bilgimde %90 seviyede. Bir çok site ile çalıştım. Şu an 10TR.Net

ücretsiz forum açma sisteminde gönüllü olarak yardım ediyorum.

</div><br />

<div style="

    width: 100%;

    border-top: 1px solid #0D64D5;

    position: relative;

    float: left;

    margin-top: 20px;

"></div><br />

<div id="referans"></div>

<div style="

    font-family: 'Titillium Web', Sans-Serif;

    color: #0D64D5;

    font-size: 28px;

    font-weight: bold;

    border-bottom: 1px dashed;

    text-align: center;

    float: left;

    width: 100%;

    margin-top: 20px;"><i class="fa fa-cogs"></i> Referanslarım</div>

<div class="referanslar">

  <li><a href="ilkreferans"><img src="http://i.hizliresim.com/nLLAog.png"/></a><div class="isim">Kişisel Blog<br /><span style="font-size: 10px; background: rgba(0,0,0,0.5); padding: 2px;border-radius: 4px;">www.kisiselblog.net</span></div></li>

  <li><a href="ilkreferans"><img src="http://i.hizliresim.com/nLLAog.png"/></a><div class="isim">Kişisel Blog<br /><span style="font-size: 10px; background: rgba(0,0,0,0.5); padding: 2px;border-radius: 4px;">www.kisiselblog.net</span></div></li>

  <li><a href="ilkreferans"><img src="http://i.hizliresim.com/nLLAog.png"/></a><div class="isim">Kişisel Blog<br /><span style="font-size: 10px; background: rgba(0,0,0,0.5); padding: 2px;border-radius: 4px;">www.kisiselblog.net</span></div></li>

  <li><a href="ilkreferans"><img src="http://i.hizliresim.com/nLLAog.png"/></a><div class="isim">Kişisel Blog<br /><span style="font-size: 10px; background: rgba(0,0,0,0.5); padding: 2px;border-radius: 4px;">www.kisiselblog.net</span></div></li>

  <li><a href="ilkreferans"><img src="http://i.hizliresim.com/nLLAog.png"/></a><div class="isim">Kişisel Blog<br /><span style="font-size: 10px; background: rgba(0,0,0,0.5); padding: 2px;border-radius: 4px;">www.kisiselblog.net</span></div></li>

</div><br />

<div style="

    width: 100%;

    border-top: 1px solid #0D64D5;

    position: relative;

    float: left;

    margin-top: 20px;

"></div><br />

<div id="bilgiler"></div>

<div style="

    font-family: 'Titillium Web', Sans-Serif;

    color: #0D64D5;

    font-size: 28px;

    font-weight: bold;

    border-bottom: 1px dashed;

    text-align: right;

    float: left;

    width: 100%;

    margin-top: 20px;">Bilgi <i class="fa fa-pie-chart"></i> Seviyem

</div>

<div class="tumbilgi">

<li class="doksan">MyBB - %90</li>

<li class="doksanbes">HTML - %95</li>

<li class="yetmis">CSS - %70</li>

<li class="kirk">JavaScript - %40</li>

<li class="onbes">PHP - %15</li>

</div><br />

<div style="

    width: 100%;

    border-top: 1px solid #0D64D5;

    position: relative;

    float: left;

    margin-top: 20px;

"></div><br />

</div>

<div class="footer">

<div class="ickalip"><i class="fa fa-exclamation-triangle"></i> Tasarım ve kodlama tamamen şahsıma ait olup bu site dışında başka hiç bir yerde kullanılamaz.</div>

</div>

</body>

</html>

gerekli yerleri düzenleyebilirsiniz.

**leojely** · 04-01-2016 Saat: 20:58

Ellerine Sağlık Kardeşim.Fakat hep aynı font hep aynı renk D:

~~Hatake~~ · (Son Düzenleme: 04-01-2016 Saat: 20:59, Düzenleyen: Hatake.)

(04-01-2016 Saat: 20:58)Sezar38 Nickli Kullanıcıdan Alıntı: Ellerine Sağlık Kardeşim.Fakat hep aynı font hep aynı renk D:

Web fontları arasında en çok sevilen ve en çok kullanılan fontlar bunlar^^ Herkesin zevki farklı iyi kullanımlar.

**Wenchernz** · 04-01-2016 Saat: 21:02

Çok güzel olmuş. Eline sağlık.

**Namikaze** · 04-01-2016 Saat: 21:07

Eline Sağlık güzel olmuş.

~~bilsoft~~ · 04-01-2016 Saat: 21:07

Ben zaten dünde sana söylemiştim gayet güzel olduğunu, bitmiş halinide beğendim eline sağlık Metehan.

**TATAVA** · 04-01-2016 Saat: 21:12

Ellerine sağlık başarılı olmuş.

**Rusveld** · 04-01-2016 Saat: 21:17

Ben pek beğenmedim. Biraz daha güzelleştirilmeli.

~~Hatake~~ · 04-01-2016 Saat: 21:37

(04-01-2016 Saat: 21:17)Rusveld Nickli Kullanıcıdan Alıntı: Ben pek beğenmedim. Biraz daha güzelleştirilmeli.

Herkesin fikri farklı tabii, teşekkürler

**slhsahin1** · 04-01-2016 Saat: 21:44

@Hatake @bilsoft @Corleone bunu siteme nasıl eklerim profile girince bu çıksın yardım ederseniz sevinirim

**Treebzy** · 04-01-2016 Saat: 22:05

eyw adamsın

**Rusveld** · 04-01-2016 Saat: 22:06

Hemşehri çıktık.Bu konuya özelden devam edelim.
Kodlama kötüydü (internetten kaynaklı bütün sayfa yüklenmedi sanırım) Kodlama güzel olmuş. Elinize sağlık.

**Rusveld** · 04-01-2016 Saat: 22:22

(04-01-2016 Saat: 21:44)slhsahin1 Nickli Kullanıcıdan Alıntı: @Hatake @bilsoft @Corleone bunu siteme nasıl eklerim profile girince bu çıksın yardım ederseniz sevinirim

Kullanmak yasak sanırım. Footer'da şu yazıyor ; Tasarım ve kodlama tamamen şahsıma ait olup bu site dışında başka hiç bir yerde kullanılamaz.

~~Hatake~~ · 04-01-2016 Saat: 22:55

(04-01-2016 Saat: 22:22)Rusveld Nickli Kullanıcıdan Alıntı:
(04-01-2016 Saat: 21:44)slhsahin1 Nickli Kullanıcıdan Alıntı: @Hatake @bilsoft @Corleone bunu siteme nasıl eklerim profile girince bu çıksın yardım ederseniz sevinirim

Kullanmak yasak sanırım. Footer'da şu yazıyor ; Tasarım ve kodlama tamamen şahsıma ait olup bu site dışında başka hiç bir yerde kullanılamaz.

Onu oylesine not olarak biraktim. Konusabiliriz evet om yolu ile :)

**SunXDizayn** · 05-01-2016 Saat: 00:22

Metehan süper olmuş eline sağlık

Giriş Yap
Kullanıcı Adı:
Şifreniz:	Şifremi Unuttum?
	Beni Hatırla