Simple Business Card Website

Published in

Generation Girl

6 min readApr 8, 2019

Hai temen-temen 👋🏻 ! Balik lagi di tutorial HTML Generation Girl.

Kali ini, aku mau ngasihtau kalian cara bikin website business card yang super simple, dan bisa kalian pakai buat nampilin contact information kalian. Selain itu, ini juga bisa buat mini-personal-homepage kalian biar bisa showcase semua info dan important links yang kalian mau share, all in one page. How functional! (Eh tapi jangan share sesuatu yang bener-bener private ya.)

Okay, first thing first, aku bakal kasih sedikit gambaran apa aja yang perlu kita siapin buat ini. Untuk contoh di tutorial ini, kita bakalan butuh info dibawah ini:

Nama Lengkap
E-mail
Social links (Twitter, Facebook, LinkedIn, apapun yang mau kalian tampilin di websitenya)
Foto profil (pastiin kamu crop jadi square)
Background image yang mau kalian masukin di dalam websitenya. Untuk ini kalian bisa cari di royalty free images websites, seperti Unsplash, Pexels, dan lainnya.

Selain itu, karena kita akan membuat suatu website, tentunya perlu text-editor yang mendukung untuk bikin file HTML dan CSS nya. Biasanya aku pakai Sublime Text, karena gratis. Tapi kalau kamu punya text-editor lain yang biasa dipakai, boleh kok!

Optional:
Kalian bisa juga siapin font yang mau kalian pakai di website kalian. Disini, aku akan pakai font dari Google Fonts (karena licensenya safe buat personal & commercial use), yaitu font Quicksand.

Yuk kita mulai!

HTML

Seperti yang biasa aku lakukan (dan sebaiknya kamu juga!), aku pasti bikin rangkaian HTMLnya terlebih dahulu, supaya nggak lupa buat buka dan tutup kurung nantinya. Mulai dari tag !DOCTYPE html, html, head, dan body . Kalau mau kasih footer juga boleh, misalkan kamu mau masukin credits atau copyright.

`head`

Untuk bagian head , karena kita akan memakai Bootstrap, jangan lupa buat link semua CDN nya di sini. Jangan lupa juga buat link file CSS yang nantinya akan kalian pakai. Buat CDN Bootstrapnya bisa kalian copy dibawah ini:

Jadi, setelah semuanya udah kalian set, codenya bakal terlihat seperti ini:

Next, kita masuk ke bagian body untuk konten websitenya.

body

Untuk bagian ini, kalian bisa mulai rancang dengan membuat div terlebih dahulu. Di contoh ini, aku akan kasih <div id = "content"> sebagai container untuk semua informasi yang udah kita siapin, yaitu foto, nama lengkap, e-mail dan social links.

Foto

Pertama, kita akan taruh foto di dalam containernya. Jangan lupa juga buat kasih id ke tag image nya supaya nantinya kita bisa ubah styling nya di CSS.

<img id = "photo" src = "profile.jpg" alt = "profile-photo">

Nama & E-mail

Selanjutnya, kalian bisa taruh nama dan email di 2 line yang berbeda. Untuk ini, bisa pakai heading supaya tulisannya besar.

<h2 id = "name"> [Put your full name here] </h2><h4 id = "email">
      <a class = "emaillink" href = "mailto:email@gmail.com">
           email@gmail.com
      </a>
</h4>

mailto: fungsinya supaya bisa langsung compose e-mail ke alamat e-mail yang dituju. Selain itu, tag a nya aku kasih class emaillink biar nantinya kita bisa ubah stylingnya di CSS.

Links

Bagian ini bisa kalian isi dengan link yang mau kalian tampilin. Contoh: Twitter, Instagram.

Supaya penempatannya rapih, kita bisa pakai Bootstrap Grid untuk ini. Pertama, kita bisa bikin grid, dan define jumlah row dan column yang mau kalian kasih untuk websitenya. Disini, aku akan contohin buat kasih 4 link, jadi kita akan butuh 4 column.

<div class = "row">
        <div class = "col-lg-3">
                <a href = "http://twitter.com/@samplelink" class = "link">
                        Twitter
                </a>
        </div>
        <div class = "col-lg-3">
                <a href = "http://instagram.com/samplelink" class = "link">
                        Instagram
                </a>
        </div>
        <div class = "col-lg-3">
                <a href = "http://linkedin.com/samplelink" class = "link">
                        LinkedIn
                </a>
        </div>
        <div class = "col-lg-3">
                <a href = "http://behance.net/samplelink" class = "link">
                        Behance
                </a>
        </div>
</div>

Disini, semua tag a aku kasih class link supaya nantinya aku bisa modify stylingnya di CSS.

Terakhir, jangan lupa save filenya dengan extension .html.

Final HTML code nya akan jadi seperti ini:

All done! Moving on to the CSS part 😊

CSS

Bagian ini adalah bagian terseru, karena disini kalian bisa dekor website kalian secara bebas! Di tutorial ini, aku akan ngasihtau cara aku mendekor business card ala-ala minimalist 😉

Pertama banget, kita bikin file cssnya dulu, namanya harus sama dengan yang kalian link di head nya (styles.css).

html

Pertama kita masukin tag html di dalam CSS nya. Fungsinya untuk mengontrol hal-hal global yang akan kita terapkan di dalam styling websitenya. Berbeda dengan code HTML, cara memasukkan code per tag nya bukan pakai kurung siku <> tapi pakai kurung kurawal {}.

html{
        background-image: url('nama file background & extnya');
        overflow: none;
        background-size: cover;
        display: inline-block;
}

Kalian bisa input file background yang sudah kalian siapin di awal di tag background-image. overflow di set sebagai none supaya nggak ada slider horizontal dan vertikal di pagenya. background-size kita set jadi cover biar filenya bisa stretch ke seluruh layar secara proporsional. display: inline-block berguna supaya kita bisa tumpuk div content diatas background nya.

#content

Bagian content kita taruh menggunakan hash / tanda pagar karena kita set tag nya dengan menggunakan id dan bukan class. Kenapa bukan class? karena kita akan hanya memakai nama content sekali saja, dan tidak di apply berulang kali di tag lainnya.

#content{
       width: 600px;
       height: 400px;
       text-align: center;
       padding: 50px;
       border-radius: 5px;

Pertama, kita adjust ukuran container content kita. Berhubung isinya nggak banyak, disini aku adjust jadi fixed width dan height. Teks nya juga dibikin rata tengah dengan text-align: center. padding berguna untuk kasih jarak antara konten yang akan kita tulis dan border containernya, sedangkan border-radius untuk bikin cornernya agak bulat, jadi nanti containernya nggak terlalu kotak.

        background-color: #ffffff;
        box-shadow: 1px 1px 10px rgba(0,0,0,30%);

Next, kita mau pastiin warna content yang kita tumpuk diatas background imagenya menjadi warna putih (hex codenya #ffffff). Lalu, kita juga kasih shadow supaya hasil tumpukannya lebih keliatan smooth.

        position: absolute;
        margin: 0 auto;
        left: 50%;
        margin-left: -300px;
        top:50%;
        margin-top: -200px;        font-family: Quicksand;
}

Bagian position sampai margin-top itu supaya kita bisa set content kita persis ditengah layar. Terakhir, aku apply font untuk isi konten nya dengan font Quicksand.

#photo

Untuk tag CSS ini, kita akan set fotonya supaya bentuknya bulat dan bukan kotak. Caranya dengan menggunakan border-radius. Kita bisa set di 50% supaya bentuk foto kita benar benar bisa rounded. Selain itu, kita juga perlu adjust sizenya, jadi aku set width nya supaya lebih kecil. Berhubung foto yang kita pakai bentuknya udah square, kita nggak perlu set heightnya lagi disini.

#photo{
        width:150px;
        border-radius: 50%;
}

#name

Untuk name, kita hanya perlu memberi jarak antara ujung bawah foto profil dan nama lengkap. Jadi, kita bisa pakai property margin-top untuk mengatur jaraknya.

#email & #link

Khusus untuk bagian e-mail dan important links, kita akan bermain dengan property CSSnya anchor atau <a>. Karena anchor adalah tag yang membantu kita dalam memberi link ke external file / website, sifat dari tag anchor adalah: tulisannya pasti berubah secara default ke warna biru dan biasanya dihias dengan underline untuk menandakan bahwa itu bisa di click.

Pasti nggak mau sekedar nampilin tulisan secara standar kayak gitu kan?

Kita bisa ubah default settings ini dengan cara mengganti warna link itu sendiri, atau behavior tulisannya saat kita arahin kursor ke linknya. Hal ini bisa kita achieve dengan mengubah text-decoration menjadi none dan property color bisa kita ubah ke warna yang kita mau. Untuk mengubah behavior saat kursor diarahkan ke link, kalian bisa ubah dengan cara menambahkan tulisan :hover sebelum kalian mendefinisikan tagnya. Kalau bingung, kalian bisa liat code snippet dibawah ya 😊

#email{
        text-decoration: none;
        color: #e08283;
}#email:hover{
        text-decoration: none;
        color: #89c4f4;
}

Disini, ada dua tag yang kita ubah yaitu #email dan #email:hover. Seperti yang udah aku jelasin diatas, #email adalah kondisi pada saat linknya belum di click sama sekali, sedangkan #email:hover adalah kondisi pada saat kursor diarahin ke tulisannya. Di code ini aku tweak dengan cara mengganti warna yang ada. Untuk bagian #link akan sama persis kayak code #email di atas, jadi aku contohin satu aja ya 😉

Yay udah kelar codenya! Jangan lupa di save ya filenya dengan extension .css!

Ini final CSS codenya ya temen-temen: