Widodo

Membuat Box Galery Team Reponsive Simplegrid

Selamat sore teman-teman mohon maaf baru sempat update oke untuk kali kita akan mempelajari bagaimana cara membuat sebuah b ox atau galery team pada sbuah website mapun bisa diterapkan dalam blog, tutorial ini saya menggunakan framework css simplegrid agar layout yang kita hasilkan nantinya akan reponsive, pembuatan galery team ini cukup simple kawan hanya memahain css dan html aja tanpa adanya jquery.

untuk itu kita mulai langsung ya ..

1. Buatlah sebuah document baru

2. Jangan lupa download framework css simplegrid

3. Sekarang kita buat layout box galery teamnya anda bisa menggunakan css dibawah ini

.team {
background-color:#3699DC; padding-bottom:20px;
border-top-width: 4px;
border-bottom-width: 4px;}
.header {width:100%; margin:auto; padding:10px; text-align:left; color:#fff;
background:#333;position:fixed; top:0px;}
.team-images {width:100%; margin:auto;overflow:hidden;height:230px; }
.team-images img { width:100%; margin:auto; height:230px;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;}
.team-images img:hover {-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
-o-transform:scale(1.5);
}
.team .text {margin-bottom: 1px; text-align:center; color:#fff; font-family:Arial, Helvetica, sans-serif;
background:#2A7FB8; padding-top:10px; padding-bottom:10px;}
.team .text a{text-decoration:none; color:#fff; text-align:center; text-transform:uppercase}
.social {
padding-top: 20px;
border-top: 2px solid #2A7FB8;
text-align: center;
font-size: 0;
line-height: 0;
}
.social a {background:#2A7FB8;border-radius:50%; color:#fff;
display: inline-block;
font-size:16px; text-decoration:none;
line-height:32px; margin:2px;
width: 31px;
height: 31px;-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.social a:hover{background:#333;}

4. Sekarang kita tinggan memanggil cssnya dengan html seperti dibawah ini

<div class="grid grid-pad">
<div class="col-1-4">
<div class="team">
<div class="team-images"><img src="C360_2014-10-04-11-18-18-188.jpg" alt=""></div>
<div class="text"><a href="#">Coki Widodo</a><br>Developments</div>
<div class="social">
<a href="#"><i class="icon-facebook"></i></a>
<a href="#"><i class="icon-twitter"></i></a>
<a href="#"><i class="icon-google-plus"></i></a>
<a href="#"><i class="icon-facebook"></i></a></div>
</div>
</div>

<div class="col-1-4">
<div class="team">
<div class="team-images"><img src="10261979_918006498225613_1947586412182350864_n.jpg" alt=""></div>
<div class="text"><a href="#">Ehwansah Jailani</a><br>Developer</div>
<div class="social">
<a href="https://www.facebook.com/zheyhacker.net" target="_blank"><i class="icon-facebook"></i></a>
<a href="#"><i class="icon-twitter"></i></a>
<a href="#"><i class="icon-google-plus"></i></a>
<a href="#"><i class="icon-facebook"></i></a></div>
</div>
</div>

<div class="col-1-4">
<div class="team">
<div class="team-images"><img src="10570313_803315189719665_5071246633696805667_n.jpg" alt=""></div>
<div class="text"><a href="#">Amir Rasyid</a><br>Web Design</div>
<div class="social">
<a href="https://www.facebook.com/Amir.RPL2" target="_blank"><i class="icon-facebook"></i></a>
<a href="#"><i class="icon-twitter"></i></a>
<a href="#"><i class="icon-google-plus"></i></a>
<a href="#"><i class="icon-facebook"></i></a></div>
</div>
</div>

<div class="col-1-4">
<div class="team">
<div class="team-images"><img src="9766_886001198077303_4661911021014844416_n.jpg" alt=""></div>
<div class="text"><a href="#">Upil Dan Ipil</a><br>Developer</div>
<div class="social">
<a href="https://www.facebook.com/tkjxman" target="_blank"><i class="icon-facebook"></i></a>
<a href="#"><i class="icon-twitter"></i></a>
<a href="#"><i class="icon-google-plus"></i></a>
<a href="#"><i class="icon-facebook"></i></a></div>
</div>
</div>
</div>
Catatan :
Silahkan gunakan font awesome untuk menampilkan icon sosialnya.
Yang masih kesulitan silahkan download dibawah ini

Demo Download



Artikel Terkait

0 Komentar