Flat Duyuru Panosu V2

[admin]

Flat Duyuru Panosu V2 Kodladım
Önizleme

Kod: Tümünü Seç Tümünü Kopyala

http://codepen.io/dream41/pen/GZaXRJ

Admin KP>Temalar Şablonlar>Temalar Kullandığınız Tema >
Css Oluşturun 
Css Adı:duyuru.css
Kendi İçeriğimi Yazıcam

Kod: Tümünü Seç Tümünü Kopyala

.flatduyuru1{
background:linear-gradient(#2980b9,#2980b9);
border-bottom:7px solid #2980b9;
width:370px;
height:80px;
transition-property: background;
transition-duration:0.1s;
transition-delay: 0.2s;
transition:all 1s ease-in-out 0s;
}



.flatduyuru1:hover {
      border-bottom:7px solid #444;
  background:linear-gradient(#3498db,#3498db);
  }

.flatduyuru1 a{
 color:#fff;
  text-decoration:none;
}

.flatduyuru2{
background:linear-gradient(#c0392b,#c0392b);
border-bottom:7px solid #c0392b;
width:370px;
height:80px;
 transition-property: background;
transition-duration:0.1s;
transition:all 1s ease-in-out 0s;
transition-delay: 0.2s;
margin-top:-87px;
left:375px;
 position:relative;
}


.flatduyuru2:hover {
      border-bottom:7px solid #444;
     background:linear-gradient(#e74c3c,#e74c3c);
  }

.flatduyuru2 a{
  color:#fff;
  text-decoration:none;
}

.flatduyuru3{
background:linear-gradient(#2c3e50,#2c3e50);
border-bottom:7px solid #34495e;
width:370px;
height:80px;
 transition-property: background;
transition-duration:0.1s;
transition-delay: 0.2s;
transition:all 1s ease-in-out 0s;
margin-top:-87px;
left:755px;
 position:relative;
}


.flatduyuru3:hover {
      border-bottom:7px solid #444;
     background:linear-gradient(#34495e,#34495e);
  }


.flatduyuru3 a{
  color:#fff;
  text-decoration:none;
}


.yazi{
  color:#fff;
font-size:23px;
font-family: 'Yanone Kaffeesatz', sans-serif;
text-align:center;
padding:20px;
}

Admin KP>Temalar Şablonlar>Şablonlar>Kullandığınız Tema>İndex şablonlar>index
{$header} altına

Kod: Tümünü Seç Tümünü Kopyala

<link href='https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>

<div class="flatduyuru1"><div class="yazi">Duyuru <a href="#">Link</a></div></div>

<div class="flatduyuru2"><div class="yazi">Duyuru <a href="#">Link</a></div></div>


<div class="flatduyuru3"><div class="yazi">Duyuru <a href="#">Link</a></div></div>

Flat Duyuru Panosu V1

Kod: Tümünü Seç Tümünü Kopyala

http://codepen.io/dream41/pen/PZmvNP