Simple Business Card Website
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
- 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, taga
nya aku kasih classemaillink
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 classlink
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, sedangkanborder-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
sampaimargin-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:
Final Results
Ini dia hasilnya…. ta-da! 🎉
Gimana? Seru nggak tutorial hari ini? Semoga membantu ya!
Ikutin terus tutorial seru lainnya di Mediumnya Generation Girl ya! Thanks for reading and see you next time ❤️