Membuat Website Card Flip Part 3

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

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 Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat