logo
  • Jun 04, 2023
  1. Home
  2. Programming

Tutorial Membuat Profile Card Hanya Dengan HTML CSS

by Flexadia 1 year ago in Programming
Tutorial Membuat Profile Card Hanya Dengan HTML & CSS

Membuat Profile Card Hanya Dengan HTML CSS – Halo pembaca, hari ini Anda belajar pemprogramman yaitu, cara membuat Profile Card yang Responsif hanya menggunakan HTML & CSS.

Sebagian besar orang menggunakan JavaScript dan Plugin untuk membuat Profile Card tetapi dalam pemrogramman kali ini, kita akan membuatnya dengan indah hanya denga menggunakan HTML & CSS.

Tutorial Membuat Profile Card Hanya Dengan HTML CSS

Profile Card berarti kartu identitas orang tertentu yang berisi beberapa rincian tentang mereka seperti nama, posisi pekerjaan, dan beberapa informasi lainnya. Di halaman web, kita dapat melihat berbagai Profile Card dengan desain yang berbeda.

Alasan utama untuk menambahkan Profile Card di halaman web adalah untuk membuat pengguna menghubungi orang tersebut dengan mudah.

Lihat juga: Membuat Pricing Card Slide Animation dengan HTML & CSS

Berikut adalah gambar kartu profil yang telah saya unggah di halaman web.

Tutorial Membuat Profile Card Hanya Dengan HTML CSS

Pada dasarnya, kartu profil terlihat seperti ini. Seperti yang Anda lihat ada gambar yang berbeda di atas dan nama seseorang pekerjaan mereka dan beberapa ikon media untuk menghubungi mereka melalui media sosial.

Untuk membuat Profile Card yang responsif, saya telah menggunakan properti layar media CSS, ini membantu membuat kartu sesuai dengan ukuran layar apa pun.

Jika Anda sudah familiar dengan HTML & CSS maka sangat mudah bagi Anda. Bagi teman-teman yang merasa kesulitan membuat halaman ini, saya telah menyediakan source code lengkap dari program ini di bawah ini. Anda dapat menyalin semua kode dari bawah.

Source Code Profile Card

Untuk menyalin-tempel kode Profile Card berikut pada dokumen Anda, pertama-tama Anda perlu membuat dua file, satu adalah file HTML dan lainnya adalah file CSS. Setelah membuat dua file ini, Anda dapat menyalin-menempelkan kode yang diberikan di dokumen Anda.

1. File HTML

Pertama, buat file index.html dan masukan kode berikut. Ingat! pastikan eksetensi filenya .html yah. Untuk foto profilenya, download disini (atau bisa pakai foto sendiri).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profile Card | Flexadia</title>

    <!-- my CSS -->
    <link rel="stylesheet" href="style.css">
    <!-- bootstrap icons CDN -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">

</head>
<body>

    <div class="content">
        <div class="foto fotoku">
            <img src="foto.jpg">
        </div>
        <div class="tentang">
            <h3 class="nama">Leonard Wokal</h3>
            <h3 class="pekerjaan">Web Developer</h3>
            <h3 class="moto">"Jangan Lupa Bahagia Selalu"</h3>
        </div>
        <div class="sosmed">
            <a href="#"><i class="bi bi-facebook"></i></a>
            <a href="#"><i class="bi bi-instagram"></i></a>
            <a href="#"><i class="bi bi-twitter"></i></a>
            <a href="#"><i class="bi bi-whatsapp"></i></a>
        </div>
        <div class="garis-bawah"> </div>
    </div>
   
</body>
</html>

2. File CSS

Kedua, buat file style.css dan masukan kode berikut. Ingat! pastikan eksetensi filenya .css yah.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
}

html,body{
    display: grid;
    place-items: center;
    margin: 40px;
    background: rgb(30,35,41);
}

.content{
    display: block;
    width: 300px;
    height: 380px;
    background: rgb(231,231,231);
    border-radius: 20px;
    box-shadow: 5px 10px 18px rgba(167,167,167,0.452);
}

.content .foto{
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 25px;
}

.content .foto img{
    width: 100%;
    height: 100%;
}
.content .fotoku img{
    width: 130px;
    height: 130px;
    padding: 5px;
    border-radius: 50%;
    background: rgb(5,38,75);
}
.content .tentang{
    margin-top: 20px;
    text-align: center;
}
.tentang h3.nama{
    font-size: 25px;
    font-weight: bold;
}
.tentang h3.pekerjaan{
    font-size: 18px;
    color: #3b3b3b;
}
.tentang h3.moto{
    font-size: 15px;
    color: #3b3b3b;
    margin-top: 3px;
}

.sosmed{
    text-align: center;
    margin-top: 20px;
}
.sosmed a{
    color: #fff;
    margin-right: 5px;
}
.sosmed a i{
    font-size: 17px;
    padding: 5px 8px;
    background: rgb(5,38,75);
    border-radius: 50%;
}
.sosmed a i:hover{
    background: rgb(5,64,131);
}

.content .garis-bawah{
    margin-top: 20px;
    margin-left: 10%;
    width: 80%;
    padding: 1px;
    background: #3b3b3b;
    border-radius: 10px;
}

Itu saja, sekarang Anda telah berhasil membuat Profile Card menggunakan CSS Murni. Jika kode Anda tidak berfungsi atau Anda menghadapi kesalahan/masalah, silakan download file source code dari tombol download dibawah ini. Ini gratis!.

Download

Related Posts