Html ve Css Koyu renk web radyo index
Dilediğiniz gibi düzenleyebilirsiniz, bütün alanlar tercihe göre değiştirilebilir. Tema renklerini, butonları, v.s istediğiniz gibi düzenleme yapabilirsiniz.
İndex kodlarını yukarıda bulunan İndir butonuna tıklayarak indirebilirsiniz veya aşağıya eklemiş olduğum kodları kopyalayabilirsiniz.
Ön izleme linki => RADYO CANLI YAYIN | xXx FM
Ekran görüntüsü:

Radyo index kodları:
Dilediğiniz gibi düzenleyebilirsiniz, bütün alanlar tercihe göre değiştirilebilir. Tema renklerini, butonları, v.s istediğiniz gibi düzenleme yapabilirsiniz.
İndex kodlarını yukarıda bulunan İndir butonuna tıklayarak indirebilirsiniz veya aşağıya eklemiş olduğum kodları kopyalayabilirsiniz.
Ön izleme linki => RADYO CANLI YAYIN | xXx FM
Ekran görüntüsü:

Radyo index kodları:
HTML:
<!DOCTYPE html>
<html lang="en" style="height:100%;">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="canonical" href="http://www.canyarfm.com/" />
<title>RADYO CANLI YAYIN | xXx FM</title>
<meta name="description" content="Flatcast' ın En büyük en güzel radyosu. Canyar Fm" />
<meta name="keywords" content="Flatcast, Radyo, sohbet, eğlence, flatcast radyo Canyar Fm" />
<link rel="stylesheet" href="css/style.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="hebele-uye-ol">
<a rel="nofollow" href="https://www.hebele.net/register" title="foruma üye ol">Üye Ol</a>
</div>
<div id="header">
<div class="wrap">
<div class="header-icerik">
<div class="logo">
<a href="index.html" title="radyo logo">
<img src="https://i.hizliresim.com/nhfx03r.png" alt="logo" width="240" height="50" />
</a>
</div>
</div>
</div>
<div id="menu-bg">
<div class="wrap">
<ul>
<li><a href="http://www.agame.com/game/bubble-shooter" target="_blank">Oyun Oyna</a></li>
<li><a href="http://www.gazeteoku.tv/" target="_blank">Gazete Oku</a></li>
<li><a href="https://www.hebele.net" target="_blank">Hebele Forum</a></li>
<li><a href="#" target="_blank">Link Ekle</a></li>
<li><a href="#" target="_blank">Link Ekle</a></li>
<li><a href="#" target="_blank">Link Ekle</a></li>
<li><a href="#" target="_blank">Link Ekle</a></li>
</ul>
</div>
</div>
<div class="banner">
</div>
<div class="wrap">
<div class="yayincilar">
<marquee onmouseover="this.stop()" onmouseout="this.start()" behavior="left">
Radyo Kurucusu: <font color="red">xxx</font>
Gönüllerinize Taht Kuracak Dj Ekibimiz:
<font color="yellow">xxx ~~</font>
<font color="blue">xxx ~~</font>
<font color="green">xxx ~~</font>
Keyifli Dinlemeler Hoş Sohbetler Dileriz..
</marquee>
</div>
<div class="radyo-orta">
<div class="r-icerik">
<h1>xXx Fm / Keyifli Dinmeler Dileriz</h1>
<div class="cizgi"></div>
<iframe src='https://chameleon.chattersnet.nl/chat/8754' allow='camera;microphone' width='100%' height='600' framespacing='0' frameborder='no' scrolling='no' ></iframe>
<div class="cizgi"></div>
<div data-type="newStreamPlayer" data-publicToken="877eabe5-185b-490d-8a02-28e68787810c" data-theme="dark" data-color="e81e4d" data-channelId="" data-rendered="false" class="cstrEmbed"><a href="https://www.caster.fm">Shoutcast Hosting</a> <a href="https://www.caster.fm">Stream Hosting</a> <a href="https://www.caster.fm">Radio Server Hosting</a></div><script src="//cdn.cloud.caster.fm//widgets/embed.js"></script>
</div>
</div>
<div class="footer">
<div class="copyright">
Copyright © 2018 Tüm Hakları xXx FM' e aittir. Design By ADANALI
</div>
</div>
<style type="text/css">
<!-- /css -->
* {
margin: 0 auto;
padding: 0px;
}
body {
font-family: helvetica neue,Helvetica,Arial,sans-serif;
font-size: 14px;
background-color: #383b50;
color: #383b50;
margin: 0 auto;
padding: 0px;
}
#header {
background: #3f4257;
width: 100%;
padding: 0px 0px;
height: 80px;
}
.wrap {
width: 1300px;
margin: 0 auto;
}
.header-icerik {
height: 80px;
}
.logo img {
border: none !important;
line-height: 80px;
margin: 10px auto;
}
.logo {
width: 240px;
height: 50px;
display: inline-block;
}
#menu-bg {
width: 100%;
height: 50px;
background-color: #323448;
}
#menu-bg ul {
list-style: none;
line-height: 50px;
margin: 0px;
display: inline-block;
width: 100%;
cursor: default;
padding: 0;
}
#menu-bg ul li:first-child {
margin-left: 0px;
}
#menu-bg ul li {
position: relative;
display: inline-block;
margin: 0 10px;
}
#menu-bg ul li + li:before, .transfermenu ul li:first-child:before {
content: '.';
background-image: url('https://i.hizliresim.com/b6as0l5.png');
display: block;
width: 2px;
text-indent: -9999px;
height: 50px;
top: 0px;
position: absolute;
left: -13px;
}
#menu-bg ul li a {
color: #d9dae9;
text-decoration: none;
display: block;
text-shadow: 0 0 3px #000000;
}
#menu-bg ul li a:hover {
color: #f15e3a;
}
.banner {
width: 100%;
height: 350px;
background: url('https://i.hizliresim.com/ooukqkk.png') repeat-x top center;
}
.yayincilar {
background: #323448;
margin-top: 25px;
padding: 15px 5px;
}
.yayincilar marquee {
font-size: 17px;
color: #d9dae9;
width: 100%;
}
.radyo-orta {
width: 100%;
margin: 25px auto;
background: #323448;
border-radius: 6px;
}
.cizgi {
width: 100%;
height: 2px;
background: url('https://i.hizliresim.com/2jkc356.png') repeat;
margin: 10px 0px;
}
.r-icerik {
padding: 10px;
margin: 0 auto;
}
.r-icerik h1 {
font-size: 17px;
color: #f15e3a;
font-weight: 400;
}
#hebele-uye-ol a {
position: fixed;
top: 20em;
text-decoration: none;
background: #3f4257;
border: solid 1px #323448;
padding: 15px;
border-left: none;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
color: #d9dae9;
display: block;
text-align: center;
}
#hebele-uye-ol a:hover {
background: #323448;
border: solid 1px #3f4257;
border-left: none;
color: #f15e3a;
}
.footer {
height: 40px;
line-height: 40px;
margin: 0 0px 25px 0px;
background: #323448;
border-radius: 6px;
}
.copyright {
color: #d9dae9;
text-align: right;
margin-right: 5px;
font-size: 12px;
}
a.yukari-git {
display: block;
position: fixed;
bottom: 30px;
right: 30px;
line-height: 0 !important;
text-decoration: none;
background: #3f4257;
border: solid 1px #323448;
padding: 40px 15px;
border-radius: 6px;
color: #d9dae9;
text-align: center;
}
iframe, marquee {
display: block;
}
<!-- /css bitis -->
</style>
</div>
<!-- /yukari git -->
<a href="#" class="yukari-git">Yukarı Git</a>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type='text/javascript'></script>
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.yukari-git').fadeIn(duration);
} else {
jQuery('.yukari-git').fadeOut(duration);
}
});
jQuery('.yukari-git').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
});
});
</script>
<!-- /yukari git bitis -->
</body>
</html>