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.
<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.
.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.
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
