Cara Membuat Desain Card Minimalis dengan CSS

Cara Membuat Desain Card Minimalis dengan CSS - Ada banyak sekali desain web dan elemen didalam web yang sangat menarik, ada yang membuat desain minimalis sampai dengan membuat elemen website yang komplek, ada yang membuat desain dengan hanya CSS, kombinasi jQuery dan lain sebagainya. Nah, pada kesemptan kali ini saya akan bagikan kepada kalian cara membuat desain minimalis namun tetap menarik untuk dilihat. Berikut adalah tutorial sederhana CSS tentang bagaiamana Cara Membuat Desain Card Minimalis dengan CSS, buat kalian yang ingin mencoba membuat desain ini silahkan ikuti langkah - langkahnya berikut ini.

Baik, langkah pertama silahkan kalian buat file index.html kemudian buat strukutur sederhana HTML untuk kerangka desain card nya seperti berikut.

<body>
    <div class="card">
        <div class="image">
            <img src="img.png">
        </div>
        <div class="text">
            <h3>Michael Kosim</h3>
            <p>Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan.</p>
        </div>
    </div>
</body>

Setelah membuat kerangka desain card seperti diatas, langkah selanjutnya adalah mendesain card dengan sintak CSS seperti berikut.

<style>
    .card {
        width: 500px;
        display: flex;
    }
    .image img{
        background: white;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        padding: 5px;
    }
    .text {
        background: #60c5a8;
        width: 400px;
        position: absolute;
        margin-left: 55px;
        z-index: -1;
        height: 100px;
        border-radius: 0 70px 70px 0;
        margin-top: 5px;
    }
    h3, p {
        margin-left: 70px;
        color: white;
    }
    p {
        margin-top: -15px;
    }
</style>

Jika sudah selesai semua sintak HTML dan CSS diatas telah diketikan, langkah terakhir silahkan simpan filenya kemudian kalian bisa melihat hasil akhirnya dibrowser masing - masing.

Baiklah, cukup sekian tutorial sederhana CSS tentang bagaimana Cara Membuat Desain Card Minimalis dengan CSS, semoga bermanfaat, selamat mencoba dan sampai jumpa ditutorial DUMETSchool selanjutnya.

28 Januari 2020

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