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;
gerekli yerleri düzenleyebilirsiniz.
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>
