Flat Responsive Sliding Boxes

[abdullahozturk]

Dün bulduğum ve siteme yerleştirdiğim güzel bir slider ile karşınızdayım.Ben yapmadım.


Admin KP > Temalar & Şablonlar > Şablonlar > Temanız >

{header} yazısının hemen altına boşluk bırakıp yapıştırın.HTML KODLARI;

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

<section>
<div id="icon-wrapper">
  <a href="map.html">
    <div class="icons">
      <div class="icon-slide-container">
        <img class="slide-icon"  alt="The Kite Map Logo" height="100" src="http://thekitemap.com/images/slide/view-map.jpg">
        </div>
      </div>
    </a>
    
    <a href="kite-map.php">
      <div class="icons2">
        <div class="icon-slide-container">
          <img class="slide-icon"  alt="The Kite Map Logo" height="100" src="http://thekitemap.com/images/slide/add-beach.jpg">
          </div>
        </div>
      </a>
      
      <a href="location.php">
        <div class="icons3">
          <div class="icon-slide-container">
            <img class="slide-icon"  alt="The Kite Map Logo" height="100" src="http://thekitemap.com/images/slide/view-all.jpg">
            </div>
          </div>
        </a>
        
        <a href="feedback.html">
          <div class="icons4">
            <div class="icon-slide-container">
              <img class="slide-icon"  alt="The Kite Map Logo" height="100" src="http://thekitemap.com/images/slide/feedback.jpg">
              </div>
            </div>
          </a>
 </div>
</section> 


Admin KP > Temalar & Şablonlar > Temalar > Temanız > global.css > Gelişmiş düzenleme > En alta yapıştırın bu CSS kodlarını;

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

body3{
  background:#eeeeee;
}

section{
 float: left;
 padding-top: 50px;
 padding-bottom: 100px;
 width: 100%;
 padding-left:0;
 padding-right:0;
}

#icon-wrapper{
 width:100%;
 float:left;
 height:300px;
}

.icons {
 width:25%;
 float:left;
 position:relative;
}
.icons2 {
 width:25%;
 float:left;
 position:relative;
 margin-left:25%;
}
.icons3 {
 width:25%;
 float:left;
 position:relative;
 margin-left:50%;
}
.icons4 {
 width:25%;
 float:left;
 position:relative;
 margin-left:75%;
}

.icon-slide-container{
 height:300px;
 overflow:hidden;
 text-align: left;
 position: absolute;
 float: left;
 width: 300px;
 left: 50%;
 margin-left: -150px;
}

.slide-icon{
  width:300px;
  height:auto;
  position:absolute;
  margin-top:-300px;
  -webkit-transition:.4s ease;
  -moz-transition:.4s ease;
  -ms-transition:.4s ease;
  -o-transition:.4s ease;
  transition:.4 ease;
}
 
.slide-icon:hover{
  position:absolute;
  margin-top:0;
}

@media only screen and (max-width: 1300px) {
  #icon-wrapper{
 width:100%;
 float:left;
 height:170px;
 }
  .icon-slide-container {
 height: 200px;
 overflow: hidden;
 text-align: left;
 position: absolute;
 float: left;
 width: 200px;
 left: 50%;
 margin-left: -100px;
 }
  .slide-icon {
 width: 200px;
 height: auto;
 position: absolute;
 margin-top: -200px;
 }
}

@media only screen and (max-width: 1000px) {
  #home-social-container{
 margin-right: 0;
 margin-left: 0;
 width: 100%;
 padding: 0;
 float: left;
 left: 0;
 }
}

@media only screen and (max-width: 840px) {
  #icon-wrapper{
 width:100%;
 float:left;
 height:650px;
 }
 
 .icon-slide-container {
 height: 300px;
 overflow: hidden;
 text-align: left;
 position: absolute;
 float: left;
 width: 300px;
 left: 50%;
 margin-left: -150px;
 }
 
 .slide-icon {
 width: 300px;
 height: auto;
 position: absolute;
 margin-top: -300px;
 } 
 .icons {
 width: 50%;
 float: left;
 position: relative;
 }
 .icons2 {
 width: 50%;
 float: left;
 position: relative;
 margin-left: 50%;
 }
 .icons3 {
 width: 50%;
 float: left;
 position: relative;
 margin-left: 0%;
 margin-top: 350px;
 }
 .icons4 {
 width: 50%;
 float: left;
 position: relative;
 margin-left: 50%;
 }
}
                        
@media only screen and (max-width: 650px) {
 #icon-wrapper {
 height: 400px;
 }
 #section{
 width: 90%;
 padding-left:5%;
 padding-right:5%;
 }
 .slide-icon {
 width: 200px;
 height: auto;
 position: absolute;
 margin-top: -200px;
 }
 .icon-slide-container {
 height: 200px;
 width: 200px;
 left: 50%;
 margin-left: -100px;
 }
 .icons3 {
 width: 50%;
 position: relative;
 margin-left: 0%;
 margin-top: 230px;
 }
}
                                  
@media only screen and (max-width: 570px) {
 #icon-wrapper {
 height: 300px;
 }
 .slide-icon {
 width: 150px;
 height: auto;
 position: absolute;
 margin-top: -150px;
 }
 .icon-slide-container {
 height: 150px;
 width: 150px;
 left: 50%;
 margin-left: -75px;
 }
 .icons3 {
 width: 50%;
 float: left;
 margin-left: 0%;
 margin-top: 190px;
 } 
} 


Önizleme olarak buraya bakabilirsiniz:

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

onizle.koddostu.com

[Ufufuk]

Forum ziyaretçilere kapalı,

koddostundan önizlemek için css'in başına <style> 

sonunada;

</style>  tagları arasına koyun.

Paylaşım için teşekkürler.

[abdullahozturk]

Evet kapalı.

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

onizle.koddostu.com 


Sitesinden önizleyebilirsiniz.Önemli değil.