Membuat Website Card Flip Part 2

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

 

13 Oktober 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat