Membuat Resume atau CV dengan bootstrap 4 bagian kedua desain header dan desain menu
Setelah menyelesaikan langkah awal pembuatan resume atau cv dengan bootstrap 4, yaitu menyiapkan dokumen awal dan melengkapi berkas. Kini tiba ke langkah selanjutnya yaitu mendesain header dan menu.
Rencana saya akan mendesain resume atau CV terbagi dua tampilan yaitu tampilan mobile dengan maksimal resolusi 768px dan tampilan di atas resolusi tersebut.
Untuk desain mobile, header dan menu tampil bersama dilayar, sedangkan tampilan layar resolusi diatas dari 768px hanya header saja yang tampil ditambah ornamen atau hiasan untuk memperindah tampilan.
Desain header/tajuk/kepala
Pada bagian header, tampilan layar dibagi dua bagian, untuk bagian pertama berisi logo dan tulisan sedang bagian kedua berisi profil singkat pemilik CV.
Pada tampilan mobile dua bagian header tersebut tampil vertikal atas dan bawah. Sedangkan pada layar di atas resolusi 768px dua bagian tersebut tampil secara horizontal.
Dibawah tag <body> tulis kode seperti di bawah ini.
<header class="container-fluid bg-primary kepala">
<div class="row">
<div class="col-md-2 text-center text-light border rounded m-2"> <!-- kolom pertama yang berisi logo dan tulisan -->
<p class="m-2 mt-4">
<i class="fas fa-file-alt fa-4x"></i> <!-- menggunakan fontawesome untuk menambah logo-->
</p>
<h1 class="lead mt-2">
<b>Curriculum Vitae</b>
</h1>
</div>
<div class="col-md-9 text-white bg-primary"> <!-- kolom kedua berisi profil singkat -->
<h2 class="text-uppercase text-center nama mt-2">
Nama Anda
</h2>
<p class="lead text-center lahir">
Jogja, 29 - April - 1995
</p>
<p class="text-center petunjuk"> <!-- hanya tampil di resolusi maksimal 767.98px -->
Selamat datang di Halaman Curriculum Vitae saya, jika resolusi layar Anda kecil silahkan menggunakan menu di bawah untuk tahu lebih lanjut.
</p>
<p class="mt-2 text-center panah"> <!-- hanya tampil di resolusi maksimal 767.98px-->
<i class="fas fa-arrow-down fa-2x "></i> <!-- icon fontawesome -->
</p>
</div>
</div>
</header>
Dibawah tag </header> untuk mempercantik tampilan tulis kode berikut :
<div class="ornamen">
</div>
</div>
Desain menu
Desain menu menggunakan menu scroll yang memanfaatkan css overflow. Selain itu saya menggunakan class bootstrap yaitu grup button. Menu ini hanya terlihat di tampilan mobile saja.
Untuk kode pada menu bisa ditempatkan setelah kode untuk ornamen dan dapat di tulis seperti di bawah ini.
<nav>
<div class="btn-group fixed-bottom menu" role="group">
<button type="button" class="btn btn-primary"><i class="fas fa-home mr-1"></i>Beranda</button>
<button type="button" class="btn btn-primary "><i class="fas fa-suitcase mr-1"></i>Karir</button>
<button type="button" class="btn btn-primary"><i class="fas fa-graduation-cap mr-1"></i>Pendidikan</button>
<button type="button" class="btn btn-primary"><i class="fas fa-toolbox mr-1"></i>Keahlian</button>
<button type="button" class="btn btn-primary"><i class="fas fa-mail-bulk mr-1"></i>Kontak</button>
</div>
</nav>
CSS untuk desain header dan menu.
CSS saya tempatkan antara tag <head></head> dengan memberi tag <style></style>, atau bisa disebut juga menempatkan CSS secara internal.
Agar tampilan lebih indah dan sesuai seperti yang di inginkan, saya menambah css seperti di bawah ini.
<style>
@media(min-width: 768px){/* untuk tampilan di atas resolusi 768px */
.petunjuk,.panah{
display:none;
}
.nama,.lahir{
text-align:left !important;
}
.ornamen{/*agar muncul kotak dengan tinggi 30px dan warna biru tua*/
height: 30px;
background-color:#2255ff;
}
.menu{
display:none;
}
}
@media(max-width:767.98px){/* untuk tampilan di bawah 767.98px atau tampilan mobile */
html, body{
height:100%;
}
.kepala{
height:100vh;
}
.menu{
overflow:auto; /*membuat menu bisa discroll */
white-space:nowrap;
}
}
</style>
Untuk desain header dan menu cukup sampai disini. Postingan selanjutnya akan membahas desain bagian karir dan pendidikan.
Komentar
Posting Komentar