Membuat Website Card Flip Part 3

13/10/2018    Maykhel David    393     Website

Membuat Website Flip Card part 3 – Hallo semuanya bagaimana mengikuti tutorial kali ini? Apakah ada kendala? Jika tidak, kalian bisa melanjutkan tutorial kali ini dengan sangant mudah. Untuk yang belum lihat artikel saya sebelumnya bisa klik link berikut
http://dumetschool.com/blog/membuat-website-card-flip-part-2
Baiklah, sekarang kita akan lanjutkan tutorial sebelumnya.


1.  Memberikan CSS untuk halaman depan

Pada bagian .heading, kita akan membuat menjadi dua kolom, dan kita akan mengubah posisi tulisan more ke kanan bawah.

/* Custom styling CSS*/
    .ava-picture{
        width: 100px;
        height: 100px;
        overflow: hidden;
        border-radius: 10px;
        border:5px solid #16a085;
    }
    .ava-picture img{
        width: 100px;
        border-radius:
    }
    .title_1{
        color: #16a085;
        font-size: 30px;
    }
    .heading{
        border-bottom: 3px solid #16a085;
        margin: 20px;
        padding-bottom: 20px;
    }
    .heading p{
        margin-top: 10px;
        font-size: 15px
    }
    .content{
    }
    .content p {
        padding: 10px 25px
    }
    .content h3{
        color: #16a085;
        font-size: 30px;
        font-weight: bold;
        text-align: center;
        position: absolute;
        bottom:20px;
        right: 20px
    }

Baiklah sekarang ini tampilah halaman depan sudah jadi saat ini kita akan membuat konten untuk bagian belakang.

2.  Meberikan html di bagian belakang
Saat ini kita akan menambahkan konten pada halaman belakang dengan html seperti berikut.

<div class="flex-wrapper">
                <div class="col-10">
                    <div class="ava-picture">
                        <img src="storage/ava.png">
                    </div>
                </div>
            </div>
            <div class="flex-wrapper social">
                <div class="col-3">
                    <a class="bg-ig" target="_blank" href="#">
                        <i class="fab fa-instagram"></i>
                    </a>
                </div>
                <div class="col-3">
                    <a class="bg-fb" target="_blank" href="#">
                        <i class="fab fa-facebook-square"></i>
                    </a>
                </div>
                <div class="col-3">
                    <a class="bg-li" target="_blank" href="#">
                        <i class="fab fa-linkedin"></i>
                    </a>
                </div>
            </div>

Selanjutnya kita akan memberikan css untuk bagian belakang

.bg-ig,.bg-fb,.bg-li{
        padding: 0 34px;
        display: block;
        line-height: 125px;
        color: #fff;
        font-size: 50px;
        opacity: 1;
        transition: ease all 0.3s
    }
    .bg-ig{
        background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
    }
    .bg-fb{
        background: #3b5998;
    }

    .bg-li{
        background: #0e76a8
    }
    .back h3{
        bottom: 20px;
        left: 20px;
        position: absolute;
        font-weight: lighter;
    }
    .back h3 i{
        font-weight: bold;
        margin-left: 20px;
    }
    .back h1{
        margin:40px 0;
    }
    .back a:hover {
        opacity: 0.5
    }
    .back .ava-picture{
        width: 50%;
        height: 250px;
        border:0px;
        border-radius: 0px
    }
    .back .ava-picture img{
        width: 100%;
    }
    .back .social{
        position: absolute;top: 0;left: 50%;text-align: center;
    }


3.  Responsive layout
Yang terakhir adalah membuat elemen menjadi responsive ketika dibuka di device mobile seperti smartphone dengan memberikan css seperti berikut.

@media screen and (max-width: 600px){
        .flip-card{
            width: 100%;
            height: 100%;
        }
        
    }
    @media screen and (min-width: 601px){
        .flip-card:hover .mykh-card {
            -webkit-transform: rotateY(3deg);
            transform: rotateY(3deg);
            box-shadow: 0 20px 20px rgba(50,50,50,.2);
        }
    }

Baiklah teman teman, demikian artikel kali ini yang membahas tentang cara membuat website flip card. Bagi kalian yang ingin memiliki website sederhana hanya untuk profile, bisa kalian ikuti tutorial ini, semoga bermanfaat

Untuk source code sudah saya upload di github 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