Membuat halaman portfolio berdasarkan kategori

Beberapa hari yang lalu aku di tantang temanku membuat halaman portfolio yang unik. Lalu tanpa sengaja pun aku menemukan halaman portfolio yang unik, sayangnya aku lupa di mana link tersebut. Jadi akupun mencoba membuatnya sendiri dan berbagi di sini. 😉 *ting. Untuk membuat halaman portfolio ini aku mengunakan jquery jadi jangan lupa bahan-bahannya.

Bahan-Bahan

eggs copy

  1. 1 File Jquery yang nantinya di masukan di folder js, (link1, link2)
  2. 5 gambar portfolio anda, bisa di tambah sesuai selera. Untuk file img-ku bisa di ambil di sini
  3. 1 file reset CSS (link)
  4. Script Editor

Cara Membuatnya

  1. Buat code HTML seperti ini dan beri nama index.html
    <!DOCTYPE html>
    
    <html>
    <head>
        <link href="css/style.css" rel="stylesheet"/>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/script.js"></script>
        <title>My Portfolio</title>
    </head>
    
    <body>
        <div id="wrapper">
            <h1>My Portfolio</h1>
    	<div id="navi">
    	    <ul>
    		<li class="allButton">All Design</li>
    		<li class="gdButton">Graphic Design</li>
    		<li class="wdButton">Web Design</li>
    		<li class="pdButton">Product Design</li>
    	    </ul>
    	</div>
    	<div id="portfolio">
    	    <div class="port graphic">
    		<img src="images/1.jpg"/>
    		<h3>Portfolio 1</h3>
    		in <span>Graphic Design</span>
    	    </div>
    	    <div class="port web">
    		<img src="images/2.jpg"/>
    		<h3>Portfolio 2</h3>
    		in <span>Web Design</span>
    	    </div>
    	    <div class="port graphic">
    		<img src="images/3.jpg"/>
    		<h3>Portfolio 3</h3>
    		in <span>Graphic Design</span>
    	    </div>
    	    <div class="port web">
    		<img src="images/4.jpg"/>
    		<h3>Portfolio 4</h3>
    		in <span>Web Design</span>
    	    </div>
    	    <div class="port product">
    		<img src="images/5.jpg"/>
    		<h3>Portfolio 5</h3>
    		in <span>Product Design</span>
    	    </div>
    	</div>
        </div>
    </body>
    </html>

    div dan class merupakan pembungkus pada HTML, bedanya kelas id lebih tinggi dari class. id hanya boleh 1 pada tiap halaman html

    goreng telur copy

  2. Setelah itu siapkan folder css sejajar dengan index.html lalu di isi dengan reset.css, dan style .css.
  3. style.css
    @import url('reset.css');
    
    /*attribute*/
    body {
        background: #f2f2f2;
        font-family: sans-serif;
        font-size: 12px;
        color: #181818;
        line-height: 18px;
    }
    
    /*--------------end of Position----------------*/
    /*---------------------Layout----------------*/
    #wrapper {
        width: 960px;
        margin: 20px auto;
    }
    
    /*Style buat portfolio*/
    #portfolio {
        margin: 20px 10px;
        width: 960px;
    }
    
    .port {
        width:200px;
        padding: 9px;
        margin: 10px;
        background: #fff;
        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        float: left;
    }
    
    .port:hover {
        -moz-box-shadow: 0 0 5px #000;
        -webkit-box-shadow: 0 0 5px #000;
        box-shadow: 0 0 5px #000;
    }
    
    .port img{
        border: 1px solid #131313;
        margin-bottom: 10px;
    }
    
    #navi ul li{
        display: inline-block;
        margin-left: 10px;
        background: #444;
        color: #f2f2f2;
        padding: 5px 10px;
        text-shadow: 1px 1px 0 #181818;
        cursor: pointer;
        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
    }
    
    /*------------------------Element-------------*/
    hr {
        border: solid #f6f6f6 1px;
        margin: 5px 0 20px;
        -moz-box-shadow: 0px 1px 0px #ababab;
        -webkit-box-shadow: 0px 1px 0px #ababab;
        box-shadow: 0px 1px 0px #ababab;
        clear: both;
    }
    
    /*--------Typo-----------*/
    h1 {
        text-align: center;
        font-family: serif;
        font-size: 20px;
        margin-bottom: 15px;
    }
    
    h2 {
        font-size: 12px;
        margin-bottom: 5px;
    }
    
    span {
        color: #ff0000;
    }
    
    span:hover {
        color: #018181;
    }

    id=”#” , class = “.”, dan di akhir “;”.
    contoh penulisannya: #id {keterangan: nilai;}

  4. Tampilan maka kurang lebih akan seperti web demo tadi, tetapi masih kurang fungsi2nya. buat 1 lagi folder yang bernama “js”. Di dalam folder “js” di isi dengan jquery.js dan script js.
  5. script.js
    $(document).ready(function(){
     $(".allButton").click(function(){
     $(".web").show("slow");
     $(".graphic").show("slow");
     $(".product").show("slow");
     });
    });
    
    $(document).ready(function(){
     $(".gdButton").click(function(){
     $(".web").hide("slow");
     $(".graphic").show("slow");
     $(".product").hide("slow");
     });
    });
    
    $(document).ready(function(){
     $(".wdButton").click(function(){
     $(".web").show("slow");
     $(".graphic").hide("slow");
     $(".product").hide("slow");
     });
    });
    
    $(document).ready(function(){
     $(".pdButton").click(function(){
     $(".web").hide("slow");
     $(".graphic").hide("slow");
     $(".product").show("slow");
     });
    });

    jquery:
    $(document).ready(function(){
    $(“.kelas”).trigger(function(){
    $(“.kelas”).action();
    });
    });

Hasil

ceplok copy copy

Jika sudah melakukan langkah-langkah tersebut dengan benar, maka tampilannya akan sama seperti web portfolioku tadi. Untuk script pada jquery menurutku agak terlalu banyak maklum baru coba Jquery :]. Jika teman-teman punya sugesti script yang lebih hemat, jangan lupa beri tau.

baru-baru saja aku tau klo ada service google yang bisa menyimpang cahce jquery. caranya: ketik script ini di head

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

Penampakan Demo

Baca Juga:  Percantik Form Pencarian dengan CSS

DEMO

tulisan ini aq juga tulis di blogku. 🙂

Komentar

comments

finnfirrior

Web Designer and Graphic Designer Freelance. Interest in Web and Printable Design.

grain storage instagram türk takipçi satın al