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
Demo
Buradan indire bilirsiniz.
Zip Pass: www.4v5.net
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="https://4v5.net/misc/contact"><li class="menu1-li">Bize Ulaşın</li></a>
<a href="https://4v5.net/help/terms/"><li class="menu1-li">Şartlar ve Kurallar</li></a>
<a href="https://4v5.net/help/privacy-policy/"><li class="menu1-li">Gizlilik Politikası</li></a>
<a href="https://4v5.net/help/"><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>
<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="https://4v5.net/misc/contact"><li class="menu1-li">Bize Ulaşın</li></a>
<a href="https://4v5.net/help/terms/"><li class="menu1-li">Şartlar ve Kurallar</li></a>
<a href="https://4v5.net/help/privacy-policy/"><li class="menu1-li">Gizlilik Politikası</li></a>
<a href="https://4v5.net/help/"><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(https://fonts.googleapis.com/css?family=Palanquin:400,600&subset=latin,latin-ext);
.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{
}
.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{
}
Demo
Buradan indire bilirsiniz.
Zip Pass: www.4v5.net