Membuat Website Card Flip Part 2

13/10/2018    Maykhel David    575     Website

Membuat Website Flip Card part 2 – Hallo teman -teman, website dengan struktur sederhana pada artikel sebelimnya sudah jadi, saat ini kita akan membuat fungsi klik dan akan mengisi bagian depan dengan konten. untuk yang belum melihat artikel sebelumnya bisa lihat pada link berikut

http://dumetschool.com/blog/membuat-website-card-flip-part-2

Baiklah langsung kita simak saja tutorialnya berikut.

1.  Memberikan fungsi klik pada checkbox
Sekarang kita akan memberikan sebuah fungsi klik pada label dan checkbox untuk memutar balik card yang kita buat. Kita menghilangkan checkbox dan menggunakan label sebagai trigger. Dan membalikan card dengan rotateY

   .v-flip {
        display: none;
    }

    .v-flip:checked + .mykh-card {
        transform: rotateY(180deg);
        -webkit-transform: rotateY(180deg);
    }

    .flip-card:hover .v-flip:checked + .mykh-card {
        transform: rotateY(175deg);
        -webkit-transform: rotateY(175deg);
        box-shadow: 0 20px 20px rgba(255,255,255,.2);
    }

Sampai saat ini kita sudah memiliki sebuah card yang bisa di bolak- balik dengan cara di klik.

2.  Membuat css kolom menggunakan Flexbox

Kali ini kita tidak lagi menggunakan float untuk membagi kolom, saat ini kita menggunaan cara modern untuk membuat kolom, yaitu dengan menggunakan flexbox. Class yang kita buat adalah .flex-wrapper, .col, .col-x (1-10)

/* flex */
    .flex-wrapper > * {
        display: inline-block;
    }
    .flex-wrapper{
        display: flex;
        flex-wrap:wrap;

    }
    .flex-wrapper > .col{
        background: green;
        margin:5px;
        flex:1;
        flex-grow: 1;
        width: calc(100% * (1/5) - 10px - 1px)
    }
    .flex-wrapper > .col-1{
        flex:1;
    }
    .flex-wrapper > .col-2{
        flex:2;
    }
    .flex-wrapper > .col-3{
        flex:3;
    }
    .flex-wrapper > .col-4{
        flex:4;
    }
    .flex-wrapper > .col-5{
        flex:5;
    }
    .flex-wrapper > .col-6{
        flex:6;
    }
    .flex-wrapper > .col-7{
        flex:7;
    }
    .flex-wrapper > .col-8{
        flex:8;
    }
    .flex-wrapper > .col-9{
        flex:9;
    }
    .flex-wrapper > .col-10{
        flex:10;
    }

3.  Membuat konten halaman depan
Selanjutnya kita akan membuat struktur untuk mengisi halaman depan dengan mengisi elemen class .front dengan html berikut
           <div class="heading">
                <div class="flex-wrapper">
                    <div class="col-3">
                        <div class="ava-picture">
                            <img width="100px" src="path/GAMBAR_PROFILE.png">
                        </div>
                    </div>
                    <div class="col-7">
                        <h1 class="title_1">Nama Lengkap</h1>
                        <p>Web Developer &amp; Designer</p>
                    </div>
                </div>
            </div>
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                </p>
                <p> <br>Jakarta, Indonesia</p>
                
                
                <h3>MORE >></h3>
            </div>

Baiklah teman – teman saat ini kita sudah memiliki sebuah konten pada halaman depan, pada artikel selanjutnya kita akan memberikan konten halaman depan dan css untuk mempercantik tampilan website kita.

Klik disini

 

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More