Five

Five is a live preview of a beginner-friendly tutorial on making a resume/portfolio template. Five by Heksagon .btn-dark { width: fit-content; display: flex; padding: 5px 20px; justify-content: center; align-items: center; color: #fff; background-color: #212529; border-color: #212529; } .btn-dark:hover { color: #fff !important; background-color: #383838 !important; border-color: #1a1e21; } .btn-check:focus + .btn-dark, .btn-dark:focus { color: #fff; background-color: #1c1f23 !important; border-color: #1a1e21; box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5); } .btn-check:active + .btn-dark, .btn-check:checked + .btn-dark, .btn-dark.active, .btn-dark:active, .show .btn-dark.dropdown-toggle { color: #fff; background-color: #1a1e21 !important; border-color: #191c1f; } .btn-check:active + .btn-dark:focus, .btn-check:checked + .btn-dark:focus, .btn-dark.active:focus, .btn-dark:active:focus, .show .btn-dark.dropdown-toggle:focus { box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5); } .btn-dark.disabled, .btn-dark:disabled { color: #fff; background-color: #212529; border-color: #212529; } Code .btn-white { width: fit-content; display: flex; padding: 5px 20px; justify-content: center; align-items: center; color: #212832 !important; background-color: #f6f9ff !important; border-color: #fff; } .btn-white.focus, .btn-white:focus, .btn-white:hover { color: #212832; background-color: #ceefff7a !important; border-color: #ceefff; } .btn-white.focus, .btn-white:focus { box-shadow: 0 0 0 0.2rem rgba(222, 223, 224, 0.5); } .btn-white.disabled, .btn-white:disabled { color: #212832; background-color: #fff; border-color: #fff; } .btn-white:not(:disabled):not(.disabled).active, .btn-white:not(:disabled):not(.disabled):active, .show .btn-white.dropdown-toggle { color: #212832; background-color: #e6e6e6; border-color: #dfdfdf; } .btn-white:not(:disabled):not(.disabled).active:focus, .btn-white:not(:disabled):not(.disabled):active:focus, .show .btn-white.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(222, 223, 224, 0.5); } .btn-green { color: #fff; background-color: #00ac69; border-color: #00ac69; } .btn-green.focus, .btn-green:focus, .btn-green:hover { color: #fff; background-color: #008652; border-color: #00794a; } Preview .btn-danger { width: fit-content; display: flex; padding: 5px 20px; justify-content: center; align-items: center; color: #fff; background-color: #dc3545; border-color: #dc3545; } .btn-danger:hover { color: #fff; background-color: #bb2d3b; border-color: #b02a37; } .btn-check:focus + .btn-danger, .btn-danger:focus { color: #fff; background-color: #bb2d3b; border-color: #b02a37; box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5); } .btn-check:active + .btn-danger, .btn-check:checked + .btn-danger, .btn-danger.active, .btn-danger:active, .show .btn-danger.dropdown-toggle { color: #fff; background-color: #b02a37; border-color: #a52834; } .btn-check:active + .btn-danger:focus, .btn-check:checked + .btn-danger:focus, .btn-danger.active:focus, .btn-danger:active:focus, .show .btn-danger.dropdown-toggle:focus { box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5); } .btn-danger.disabled, .btn-danger:disabled { color: #fff; background-color: #dc3545; border-color: #dc3545; } Download Information Detail License MIT License Version of Product v1.0 Date of Release 15-12-2021 Bulma v0.9.3 AOS 2.3.1 🔧 Easy-Installation ⚡️ Fast 📱 Responsive 🎨 Customizable Preview Desktop Preview Mobile Preview .btn-dark { width: fit-content; display: flex; padding: 5px 20px; justify-content: center; align-items: center; color: #fff; background-color: #212529; border-color: #212529; } .btn-dark:hover { color: #fff !important; background-color: #383838 !important; border-color: #1a1e21; } .btn-check:focus + .btn-dark, .btn-dark:focus { color: #fff; background-color: #1c1f23 !important; border-color: #1a1e21; box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5); } .btn-check:active + .btn-dark, .btn-check:checked + .btn-dark, .btn-dark.active, .btn-dark:active, .show .btn-dark.dropdown-toggle { color: #fff; background-color: #1a1e21 !important; border-color: #191c1f; } .btn-check:active + .btn-dark:focus, .btn-check:checked + .btn-dark:focus, .btn-dark.active:focus, .btn-dark:active:focus, .show .btn-dark.dropdown-toggle:focus { box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5); } .btn-dark.disabled, .btn-dark:disabled { color: #fff; background-color: #212529; border-color: #212529; } Code .btn-white { width: fit-content; display: flex; padding: 5px 20px; justify-content: center; align-items: center; color: #212832 !important; background-color: #f6f9ff !important; border-color: #fff; } .btn-white.focus, .btn-white:focus, .btn-white:hover { color: #212832; background-color: #ceefff7a !important; border-color: #ceefff; } .btn-white.focus, .btn-white:focus { box-shadow: 0 0 0 0.2rem rgba(222, 223, 224, 0.5); } .btn-white.disabled, .btn-white:disabled { color: #212832; background-color: #fff; border-color: #fff; } .btn-white:not(:disabled):not(.disabled).active, .btn-white:not(:disabled):not(.disabled):active, .show .btn-white.dropdown-toggle { color: #212832; background-color: #e6e6e6; border-color: #dfdfdf; } .btn-white:not(:disabled):not(.disabled).active:focus, .btn-white:not(:disabled):not(.disabled):active:focus, .show .btn-white.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(222, 223, 224, 0.5); } .btn-green { color: #fff; background-color: #00ac69; border-color: #00ac69; } .btn-green.focus, .btn-green:focus, .btn-green:hover { color: #fff; background-color: #008652; border-color: #00794a; } Preview .btn-danger { width: fit-content; display: flex; padding: 5px 20px; justify-content: center; align-items: center; color: #fff; background-color: #dc3545; border-color: #dc3545; } .btn-danger:hover { color: #fff; background-color: #bb2d3b; border-color: #b02a37; } .btn-check:focus + .btn-danger, .btn-danger:focus { color: #fff; background-color: #bb2d3b; border-color: #b02a37; box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5); } .btn-check:active + .btn-danger, .btn-check:checked + .btn-danger, .btn-danger.active, .btn-danger:active, .show .btn-danger.dropdown-toggle { color: #fff; background-color: #b02a37; border-color: #a52834; } .btn-check:active + .btn-danger:focus, .btn-check:checked + .btn-danger:focus, .btn-danger.active:focus, .btn-danger:active:focus, .show .btn-danger.dropdown-toggle:focus { box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5); } .btn-danger.disabled, .btn-danger:disabled { color: #fff; background-color: #dc3545; border-color: #dc3545; } Download Support If you like this template, please give a star at its GitHub Page, and consider supporting me at: Import an existing project" Your support is greatly appreciated 😊 Installation 📥 This repository is a live demo. To use the theme in your site, download the zip folder from the link in GitHub or direct dowload by clicking here. Copy the content into the root location of your site. Check out the full tutorial here. If you encounter any issues or have any questions with the template, please contact us directly and let us know about it. Custom Installation If you’d like to have a custom installation and further customization, feel free to contact us to request for a quotation. .btn-dark { width: fit-content; display: flex; padding: 5px 20px; justify-content: center; align-items: center; color: #fff; background-color: #212529; border-color: #212529; } .btn-dark:hover { color: #fff !important; background-color: #383838 !important; border-color: #1a1e21; } .btn-check:focus + .btn-dark, .btn-dark:focus { color: #fff; background-color: #1c1f23 !important; border-color: #1a1e21; box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5); } .btn-check:active + .btn-dark, .btn-check:checked + .btn-dark, .btn-dark.active, .btn-dark:active, .show .btn-dark.dropdown-toggle { color: #fff; background-color: #1a1e21 !important; border-color: #191c1f; } .btn-check:active + .btn-dark:focus, .btn-check:checked + .btn-dark:focus, .btn-dark.active:focus, .btn-dark:active:focus, .show .btn-dark.dropdown-toggle:focus { box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5); } .btn-dark.disabled, .btn-dark:disabled { color: #fff; background-color: #212529; border-color: #212529; } Code .btn-white { width: fit-content; display: flex; padding: 5px 20px; justify-content: center; align-items: center; color: #212832 !important; background-color: #f6f9ff !important; border-color: #fff; } .btn-white.focus, .btn-white:focus, .btn-white:hover { color: #212832; background-color: #ceefff7a !important; border-color: #ceefff; } .btn-white.focus, .btn-white:focus { box-shadow: 0 0 0 0.2rem rgba(222, 223, 224, 0.5); } .btn-white.disabled, .btn-white:disabled { color: #212832; background-color: #fff; border-color: #fff; } .btn-white:not(:disabled):not(.disabled).active, .btn-white:not(:disabled):not(.disabled):active, .show .btn-white.dropdown-toggle { color: #212832; background-color: #e6e6e6; border-color: #dfdfdf; } .btn-white:not(:disabled):not(.disabled).active:focus, .btn-white:not(:disabled):not(.disabled):active:focus, .show .btn-white.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(222, 223, 224, 0.5); } .btn-green { color: #fff; background-color: #00ac69; border-color: #00ac69; } .btn-green.focus, .btn-green:focus, .btn-green:hover { color: #fff; background-color: #008652; border-color: #00794a; } Preview .btn-danger { width: fit-content; display: flex; padding: 5px 20px; justify-content: center; align-items: center; color: #fff; background-color: #dc3545; border-color: #dc3545; } .btn-danger:hover { color: #fff; background-color: #bb2d3b; border-color: #b02a37; } .btn-check:focus + .btn-danger, .btn-danger:focus { color: #fff; background-color: #bb2d3b; border-color: #b02a37; box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5); } .btn-check:active + .btn-danger, .btn-check:checked + .btn-danger, .btn-danger.active, .btn-danger:active, .show .btn-danger.dropdown-toggle { color: #fff; background-color: #b02a37; border-color: #a52834; } .btn-check:active + .btn-danger:focus, .btn-check:checked + .btn-danger:focus, .btn-danger.active:focus, .btn-danger:active:focus, .show .btn-danger.dropdown-toggle:focus { box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5); } .btn-danger.disabled, .btn-danger:disabled { color: #fff; background-color: #dc3545; border-color: #dc3545; } Download

Information	Detail
License	MIT License
Version of Product	v1.0
Date of Release	15-12-2021
Bulma	v0.9.3
AOS	2.3.1

Five

Five by Heksagon#

Preview#

Support#

Installation 📥#

Custom Installation#

Five `by Heksagon`

Preview

Support

Installation 📥

Custom Installation