Neler yeni

Html 5 Tek Sayfa Güzel Görünüm (1 Kişi)

[WebAbisi] Konu Bilgileri

Konu Hakkında Merhaba, tarihinde HTML Temaları & Şablonları kategorisinde DesignerAtakan tarafından oluşturulan Html 5 Tek Sayfa Güzel Görünüm başlıklı konuyu okuyorsunuz. Bu konu şimdiye dek 451 kez görüntülenmiş, 7 yorum ve 1 tepki puanı almıştır...
Kategori Adı HTML Temaları & Şablonları
Konu Başlığı Html 5 Tek Sayfa Güzel Görünüm
Konuyu başlatan DesignerAtakan
Başlangıç tarihi
Cevaplar
Görüntüleme
İlk mesaj tepki puanı
Son Mesaj Yazan emre144

DesignerAtakan

Grafik Designer
Yönetici
grafiktasarimci
Katılım
27 Eki 2020
Mesajlar
88
Tepkime puanı
38
Web sitesi
www.Grafikerler.Web.TR
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=" "><li class="menu1-li">Bize Ulaşın</li></a>
<a href=" "><li class="menu1-li">Şartlar ve Kurallar</li></a>
<a href=" "><li class="menu1-li">Gizlilik Politikası</li></a>
<a href=" "><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{

}






Zip Pass:
 

brokerbey

Girişimci (Startup)
Founder
markayoneticisi
Katılım
26 Eki 2020
Mesajlar
386
Tepkime puanı
138
Eline sağlık dostum.
 

emre144

Kayıtlı Kullanıcı
Katılım
27 Eki 2020
Mesajlar
133
Tepkime puanı
30
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=" "><li class="menu1-li">Bize Ulaşın</li></a>
<a href=" "><li class="menu1-li">Şartlar ve Kurallar</li></a>
<a href=" "><li class="menu1-li">Gizlilik Politikası</li></a>
<a href=" "><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{

}





Zip Pass:
Öok merak ettim bi ara bi php dosyasına kopyalayıp hosta atacağım hattaha guncelbilgileri.com siteme yapıştariyim makale bölümüne şimdi
 

DesignerAtakan

Grafik Designer
Yönetici
grafiktasarimci
Katılım
27 Eki 2020
Mesajlar
88
Tepkime puanı
38
Web sitesi
www.Grafikerler.Web.TR

DesignerAtakan

Grafik Designer
Yönetici
grafiktasarimci
Katılım
27 Eki 2020
Mesajlar
88
Tepkime puanı
38
Web sitesi
www.Grafikerler.Web.TR
Yani ben hostumun içine klasör acdım demo o demo klasörüne ek klasör açdım gereklı dosyaları attım
sende o şekil yapıpda sorunsuz kura bilirsin yada host alanında demo klasörü acarak yada başka isimde klasör o klasöre gerekli dosyaları atarsan sorunsuzca acılır Adsız.png

host alanında public_html/demo klasörü yada kendi isimlendirdigin bir klasör içine resimdeki dosyaları at :D bukadar
 

emre144

Kayıtlı Kullanıcı
Katılım
27 Eki 2020
Mesajlar
133
Tepkime puanı
30
Tamamdır hocam teşekkür ederim.