Html5 yapılan güzel bir görünüme dayalı sayfa oldu dilerseniz bunu çogaltarak alt sayfalarda yapa bilirsiniz...
Spoiler arasına aldıgın kodları kullana bilirsiniz arşivine alacak lar içinde dosyaları ekliyorum güle güle kullanın
Zip Pass:
Spoiler arasına aldıgın kodları kullana bilirsiniz arşivine alacak lar içinde dosyaları ekliyorum güle güle kullanın
<!DOCTYPE html>
<html lang="tr">
<head>
<title>Logo Tasarımı Görünüm</title>
<meta name="keywords" content="Logo Tasarımı Görünüm">
<meta name="description" content="Logo Tasarımı Görünüm">
<meta name="author" content="Logo Tasarımı Görünüm Atakan ARICI ®">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div class="container">
<div class="logo"><img src="logo.svg"></div>
<div class="search">
<input placeholder="Arama Yap...">
</div>
</div>
</header>
<div class="bolum"></div>
<div class="resim">
<div class="text">
<h1>Designer<span>Atakan.com</span></h1>
<h2>Yapılan Logoyu Test Amaçlı</h2>
</div>
</div>
<div class="menu"><div class="container">
<ul class="menu-ul">
<a href=""><li class="menu-li">Forumlar</li></a>
<a href=""><li class="menu-li">Neler Yeni</li></a>
<a href=""><li class="menu-li">Dizin</li></a>
<a href=""><li class="menu-li">Hakkımızda</li></a>
<a href=""><li class="menu-li">Kullanıcılar</li></a>
</ul>
</div></div>
<div class="container">
<div class="left">
<div class="leftp">
Grafik Tasarım , Logo Tasarımı , Kurumsal Kimlik , Sabit & Haraketli Banner , Haraketli Avatar , Profesyonel Grafik Tasarım Hizmeteri<br><br>
<iframe width="100%" height="480" src="
" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="right">
<div class="rightp">
Bunun videosu şurada: <a href="
">YouTube Grafikerler</a>
</div>
</div>
</div>
<div class="clear"></div>
<footer>
<center><div class="menu1"><div class="container">
<ul class="menu1-ul">
<a href="
<a href="
<a href="
<a href="
<a href="#"><li class="menu1-li">Anasayfa</li></a>
</ul>
</div></div></center>
<div class="clear"></div>
</footer>
</body>
</html>
<html lang="tr">
<head>
<title>Logo Tasarımı Görünüm</title>
<meta name="keywords" content="Logo Tasarımı Görünüm">
<meta name="description" content="Logo Tasarımı Görünüm">
<meta name="author" content="Logo Tasarımı Görünüm Atakan ARICI ®">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div class="container">
<div class="logo"><img src="logo.svg"></div>
<div class="search">
<input placeholder="Arama Yap...">
</div>
</div>
</header>
<div class="bolum"></div>
<div class="resim">
<div class="text">
<h1>Designer<span>Atakan.com</span></h1>
<h2>Yapılan Logoyu Test Amaçlı</h2>
</div>
</div>
<div class="menu"><div class="container">
<ul class="menu-ul">
<a href=""><li class="menu-li">Forumlar</li></a>
<a href=""><li class="menu-li">Neler Yeni</li></a>
<a href=""><li class="menu-li">Dizin</li></a>
<a href=""><li class="menu-li">Hakkımızda</li></a>
<a href=""><li class="menu-li">Kullanıcılar</li></a>
</ul>
</div></div>
<div class="container">
<div class="left">
<div class="leftp">
Grafik Tasarım , Logo Tasarımı , Kurumsal Kimlik , Sabit & Haraketli Banner , Haraketli Avatar , Profesyonel Grafik Tasarım Hizmeteri<br><br>
<iframe width="100%" height="480" src="
</div>
</div>
<div class="right">
<div class="rightp">
Bunun videosu şurada: <a href="
</div>
</div>
</div>
<div class="clear"></div>
<footer>
<center><div class="menu1"><div class="container">
<ul class="menu1-ul">
<a href="
Bu link gizlenmiştir, görmek için
Giriş yap veya üye ol.
"><li class="menu1-li">Bize Ulaşın</li></a><a href="
Bu link gizlenmiştir, görmek için
Giriş yap veya üye ol.
"><li class="menu1-li">Şartlar ve Kurallar</li></a><a href="
Bu link gizlenmiştir, görmek için
Giriş yap veya üye ol.
"><li class="menu1-li">Gizlilik Politikası</li></a><a href="
Bu link gizlenmiştir, görmek için
Giriş yap veya üye ol.
"><li class="menu1-li">Yardım</li></a><a href="#"><li class="menu1-li">Anasayfa</li></a>
</ul>
</div></div></center>
<div class="clear"></div>
</footer>
</body>
</html>
@import url(
.icon-comment {
font-size: 15px;
}
.face {
display: inline-block;
font-size: 16px;
color: #3A5795;
background: #fff;
padding: 10px
}
.face:hover {
display: inline-block;
font-size: 16px;
color: #fff;
background: #3A5795;
}
body {
font-size: 13px;
font-family: Palanquin;
margin: 0;
}
.box {
color: #fff;
padding: 10px;
}
.box:hover {
background: #fff;
color: #26425E;
}
.menu {
background: #fff;
border-bottom: 1px solid #CCC;
}
.menu-ul {
margin: 0;
padding: 0;
}
.menu-ul>a {
color: #000
}
.menu-ul>a:hover {
color: #cc181e
}
.menu-li {
display: inline-block;
list-style-type: none;
padding: 13px 10px 10px 10px;
border-bottom: 3px solid #fff
}
.menu-li:hover {
border-bottom: 3px solid #cc181e
}
.menu1-ul {
margin: 0;
padding: 0;
}
.menu1-ul>a {
color: #fff
}
.menu1-ul>a:hover {
color: #cc181e
}
.menu1-li {
display: inline-block;
list-style-type: none;
padding: 13px 10px 10px 10px;
border-bottom: 3px solid #fff
}
.menu1-li:hover {
border-bottom: 3px solid #cc181e
}
.bolum {
height: 53px;
}
.button {
border-radius: 4px;
background-color: #BFBFBF;
color: #625A5A;
display: inline-block;
font-weight: bold;
padding:3px 9px 5px 9px;
transition: all .3s;
}
.button:hover {
background-color: #6C7A89;
color: #DAE1E7;
}
.leftp {
padding: 10px;
}
.rightp {
padding: 10px;
}
.left {
width: 70%;
float: left;
background-color: #fff;
}
.right {
width: 30%;
float: left;
}
.resim {
background: url(videokod.png);
height: 400px;
background-position: 50%;
background-size: cover;
background-attachment: fixed
}
.text{
text-align: center;
color: #fff;
font-weight: bold;
height: 400px;
padding-top: 100px;
}
h1 {
font-size: 50px;
text-shadow: 0px 4px 2px black;
margin: 0;
}
h4{
margin: 0;
text-shadow: 6px 1px 8px black;
}
header {
position: fixed;
background: #222222;
padding: 5px;
width: 100%;
text-align: justify;
z-index: 5
}
.logo {
display: inline-block;
float: left;
}
.logo img {
height: 50px
}
.search {
display: inline-block;
float: right;
}
h1 span{
color:#2DB200;
}
input {
padding: 8px;
border: 0;
border-bottom: 1px solid #A9A9A9;
background: transparent;
width: 69px;
transition-duration:.3s;
transition-property: width, color;
outline: 0;
font-size: 13px;
font-family: 'Palanquin';
}
input:focus {
width: 300px;
border-bottom: 1px solid #cc181e;
color: #fff;
}
header>.container {}
.container {
width: 80%;
margin: 0 auto;
max-width: 1400px
}
.video {
font-family: 'Open Sans', sans-serif;
background: #000;
color: #fff;
border-radius: 10px;
padding: 5px;
display: inline-block;
opacity: .5
}
a {
color: #645D5A;
text-decoration: none;
}
a:hover {
color: #6C7A89;
text-decoration: underline;
}
.column-25 {
width: 25%;
float: left;
display: inline-block;
text-align: center;
}
footer {
width: 100%;
margin: 20px auto 0 auto;
padding: 25px 0 25px 0;
background: #121212;
color: #fff;
}
.clear {
clear: both;
}
h2.title {
font-size: 18px;
margin: 0;
color: #fff;
text-align: center;
line-height: 1
}
span {
display: inline-block;
position: relative;
}
.line:before,
.line:after {
content: '';
color: #fff;
border: 1px solid;
position: absolute;
right: 100%;
margin-right: 10px;
top: 9px;
width: 20px;
}
.line:before {
left: 100%;
margin-left: 10px;
}
.info{
}
Bu link gizlenmiştir, görmek için
Giriş yap veya üye ol.
.icon-comment {
font-size: 15px;
}
.face {
display: inline-block;
font-size: 16px;
color: #3A5795;
background: #fff;
padding: 10px
}
.face:hover {
display: inline-block;
font-size: 16px;
color: #fff;
background: #3A5795;
}
body {
font-size: 13px;
font-family: Palanquin;
margin: 0;
}
.box {
color: #fff;
padding: 10px;
}
.box:hover {
background: #fff;
color: #26425E;
}
.menu {
background: #fff;
border-bottom: 1px solid #CCC;
}
.menu-ul {
margin: 0;
padding: 0;
}
.menu-ul>a {
color: #000
}
.menu-ul>a:hover {
color: #cc181e
}
.menu-li {
display: inline-block;
list-style-type: none;
padding: 13px 10px 10px 10px;
border-bottom: 3px solid #fff
}
.menu-li:hover {
border-bottom: 3px solid #cc181e
}
.menu1-ul {
margin: 0;
padding: 0;
}
.menu1-ul>a {
color: #fff
}
.menu1-ul>a:hover {
color: #cc181e
}
.menu1-li {
display: inline-block;
list-style-type: none;
padding: 13px 10px 10px 10px;
border-bottom: 3px solid #fff
}
.menu1-li:hover {
border-bottom: 3px solid #cc181e
}
.bolum {
height: 53px;
}
.button {
border-radius: 4px;
background-color: #BFBFBF;
color: #625A5A;
display: inline-block;
font-weight: bold;
padding:3px 9px 5px 9px;
transition: all .3s;
}
.button:hover {
background-color: #6C7A89;
color: #DAE1E7;
}
.leftp {
padding: 10px;
}
.rightp {
padding: 10px;
}
.left {
width: 70%;
float: left;
background-color: #fff;
}
.right {
width: 30%;
float: left;
}
.resim {
background: url(videokod.png);
height: 400px;
background-position: 50%;
background-size: cover;
background-attachment: fixed
}
.text{
text-align: center;
color: #fff;
font-weight: bold;
height: 400px;
padding-top: 100px;
}
h1 {
font-size: 50px;
text-shadow: 0px 4px 2px black;
margin: 0;
}
h4{
margin: 0;
text-shadow: 6px 1px 8px black;
}
header {
position: fixed;
background: #222222;
padding: 5px;
width: 100%;
text-align: justify;
z-index: 5
}
.logo {
display: inline-block;
float: left;
}
.logo img {
height: 50px
}
.search {
display: inline-block;
float: right;
}
h1 span{
color:#2DB200;
}
input {
padding: 8px;
border: 0;
border-bottom: 1px solid #A9A9A9;
background: transparent;
width: 69px;
transition-duration:.3s;
transition-property: width, color;
outline: 0;
font-size: 13px;
font-family: 'Palanquin';
}
input:focus {
width: 300px;
border-bottom: 1px solid #cc181e;
color: #fff;
}
header>.container {}
.container {
width: 80%;
margin: 0 auto;
max-width: 1400px
}
.video {
font-family: 'Open Sans', sans-serif;
background: #000;
color: #fff;
border-radius: 10px;
padding: 5px;
display: inline-block;
opacity: .5
}
a {
color: #645D5A;
text-decoration: none;
}
a:hover {
color: #6C7A89;
text-decoration: underline;
}
.column-25 {
width: 25%;
float: left;
display: inline-block;
text-align: center;
}
footer {
width: 100%;
margin: 20px auto 0 auto;
padding: 25px 0 25px 0;
background: #121212;
color: #fff;
}
.clear {
clear: both;
}
h2.title {
font-size: 18px;
margin: 0;
color: #fff;
text-align: center;
line-height: 1
}
span {
display: inline-block;
position: relative;
}
.line:before,
.line:after {
content: '';
color: #fff;
border: 1px solid;
position: absolute;
right: 100%;
margin-right: 10px;
top: 9px;
width: 20px;
}
.line:before {
left: 100%;
margin-left: 10px;
}
.info{
}
Bu link gizlenmiştir, görmek için
Giriş yap veya üye ol.
Bu link gizlenmiştir, görmek için
Giriş yap veya üye ol.
Zip Pass:
Bu link gizlenmiştir, görmek için
Giriş yap veya üye ol.
bukadar