Renkli Son Yayınlanan Yayınlar Widget Tasarımı 3

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<title>Kodeks Editör</title>
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i);
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
body {
  background: #f3f5f6;
  color: #000;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 1.8;
  word-wrap: break-word;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased
}

.ux-featured {
  display: flex;
  margin: 8% auto 20px auto;
  width: 100%;
  overflow: hidden;
  max-width: 970px;
  box-shadow: 0 30px 10px -20px rgba(0,0,0,0.2)
}

.ux-featureditem {
  background: rgba(0, 0, 0, 0.02);
  display: block;
  position: relative;
  float: left;
  overflow: hidden;
  height: 220px;
  width: 25%
}

.ux-featureditem .uxcontent {
  background: #3498db;
  display: block;
  position: absolute;
  z-index: 6;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translate(0, 60px);
  opacity: 0;
  visibility: hidden;
  transition: all .3s
}

.ux-featureditem:hover .uxcontent {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0)
}

.ux-featureditem .uxcontent h3 {
  font-size: 14px;
  color: #fff;
  padding: 15px;
  margin: 0;
  text-align: center
}

.ux-featureditem .feat-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: 50%
}

.ux-featureditem a {
  display: block;
  color: rgba(255, 255, 255, 1);
  position: relative;
  vertical-align: bottom;
  z-index: 5;
  height: 100%;
  transition: all .3s
}

.ux-featureditem a:before {
  content: '';
  background: #3498db;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 3;
  top: 0;
  opacity: 0.9;
  transition: background 0.3s linear, opacity 0.3s linear
}

.ux-featureditem.first a:before,
.ux-featureditem.first .uxcontent {
  background: #56a8df
}

.ux-featureditem.second a:before,
.ux-featureditem.second .uxcontent {
  background: #e49148
}

.ux-featureditem.third a:before,
.ux-featureditem.third .uxcontent {
  background: #5bccb6
}

.ux-featureditem.fourth a:before,
.ux-featureditem.fourth .uxcontent {
  background: #f5b44c
}

.ux-featureditem a:hover:before {
  opacity: 0.1;
}

.ux-featureditem a:after {
  content: 'textsms';
  font-family: Material Icons;
  position: absolute;
  z-index: 3;
  font-size: 3rem;
  top: 32%;
  left: 0;
  right: 0;
  bottom: 0;
  color: #fff;
  text-align: center;
  transform: translate(0, 0);
  animation: jellygrav .6s linear;
  opacity: 1;
  visibility: visible;
  transition: all .3s
}

.ux-featureditem:hover a:after {
  opacity: 0;
  visibility: hidden;
  transform: translate(0, -60px)
}

@media screen and (max-width:600px) {
  .ux-featureditem {
    width: 50%
  }
  .ux-featureditem.third,
  .ux-featureditem.fourth {
    display: none
  }
}

@media screen and (max-width:500px) {
  .ux-featureditem {
    width: 100%
  }
  .ux-featureditem.second,
  .ux-featureditem.third,
  .ux-featureditem.fourth {
    display: none
  }
}
</style>
</head>
<body>
<div>
<div class='ux-featureds' id='ux-featured'>
<div class='widget-content'>
[son]
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
// Recent Post
function getPostUrl(a) {
  for (var b = 0; b < a.link.length; b++)
    if ("alternate" == a.link[b].rel) {
      var c = a.link[b].href;
      return c
    }
}

function getPostPublishDate(a) {
  var b = a.published.$t,
    c = b.split("-")[2].substring(0, 2),
    d = b.split("-")[1],
    e = b.split("-")[0],
    f = ["Ocak","Şubat","Mart","Nisan","Mayıs","Haziran","Temmuz","Ağustos","Eylül","Ekim","Kasım","Aralık"],
    g = f[d - 1],
    h = g + " " + c + ", " + e;
  return b ? h : ""
}

function getPostCategory(a) {
  var b = a.category;
  b && (b = a.category[0].term);
  var c = '<div class="category-wrapper"><a class="category" href="https://bloggereklentileri.blogspot.com/search/label/' + b + '?max-results=4">' + b + "</a></div>";
  return b ? c : ""
}

<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script><title>Kodeks Editör</title><style type="text/css">@import url(https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i);@import url(https://fonts.googleapis.com/icon?family=Material+Icons);body {  background: #f3f5f6;  color: #000;  font-family: 'Roboto', sans-serif;  font-size: 16px;  line-height: 1.8;  word-wrap: break-word;  font-weight: 400;  text-rendering: optimizeLegibility;  -webkit-font-smoothing: antialiased} .ux-featured {  display: flex;  margin: 8% auto 20px auto;  width: 100%;  overflow: hidden;  max-width: 970px;  box-shadow: 0 30px 10px -20px rgba(0,0,0,0.2)} .ux-featureditem {  background: rgba(0, 0, 0, 0.02);  display: block;  position: relative;  float: left;  overflow: hidden;  height: 220px;  width: 25%
 
 

Kodeks Editör

Renkli Son Yayınlanan Yayınlar Widget Tasarımı 3

"Renkli Son Yayınlanan Yayınlar Widget Tasarımı 3" 0 Yorum yapıldı.

Yorum Gönder

Kodeks Editör

İletişim Formu

Renkli Son Yayınlanan Yayınlar Widget Tasarımı 3

"Renkli Son Yayınlanan Yayınlar Widget Tasarımı 3" 0 Yorum yapıldı.

Yorum Gönder