• Merhaba arkadaşlar, Sizlere daha iyi hizmet verebilmek için forumdaki değişiklikler hızla devam ediyor. İstek ve önerilerinizi Bize Ulaşın kısmından gönderebilirsiniz. Bizi bu yolda yanlız bırakmadığınız için teşekkür ederiz.

Html 5 Tek Sayfa Güzel Görünüm

bursa kiralık vinç

DesignerAtakan

Grafik Designer
Katılım
27 Eki 2020
Mesajlar
63
Tepki puanı
22
Puanları
18
Konum
istanbul
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


<!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>



@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{

}


Demo


Buradan indire bilirsiniz.
Zip Pass: www.4v5.net
 
Şu an forumumuzda
11 Kullanıcı Aktif
Konu 3,039
Cevaplar 4,359
Kullanıcılar 1,189
Son Üye FarukSoft
Webdebul.net; 5651 Sayılı Kanun kapsamında BTK tarafından onaylı Yer Sağlayıcı'dır.

Bu sebeple içerikleri kontrol etme ya da araştırma yükümlülüğü yoktur.
Hukuka ve mevzuata aykırı olduğunu düşündüğünüz içeriği. BURADAN bildirebilirsiniz.
Kısa sürede dönüş yapmaya çalışacağız.
Webmaster Forumu ® Güvenli Alışverişin Yeni Adresi Webdebul.net altyapı gücünü Netwebo'dan alır.
Reklam vermek için: reklam@webdebul.net
Ban sorunları için: ban@webdebul.net
Hukuksal sorunlar için: hukuk@webdebul.net
Diğer sorunlar için: bilgi@webdebul.net
Üst Alt