One is a beginner-friendly portfolio template for showcasing your talents in a simple yet beautiful manner. All the colours, fonts, and images are customizable to your specifications. Using a Bootstrap 5.0 Framework, it is responsive and looks good in various screen resolutions from mobile devices, tablets to desktops. It is based on Cover.
ONE by Heksagon
Information | Detail |
---|---|
License | MIT License |
Version of Product | v1.0 |
Date of Release | 23-2-2021 |
Bootstrap | 5.0.0 Beta2 |
- π§ Easy-Installation
- β‘οΈ Fast
- π± Responsive
- π¨ Customizable
Preview
Performance (Lighthouse Report)
Click here to check out the result
To keep it optimized, in the server that you choose to host, have a suitable caching policy and properly sized images.
Support
If you like this template, please give a star at its GitHub Page, and consider supporting me at:
Your support is greatly appreciated π
Installation π₯
- Dowload the zip folder from the link in Github or direct dowload by clicking here.
- Unzip all content (inside ‘one-main’ folder) to any working folder of your choice. The general structure should look like so:
.(site root)
βββ index.html <-- Home Page
βββ /portfolio/index.html <-- Portfolio Page
βββ /contact/index.html <-- Contact Page
βββ /assets/
βββ /css/
β βββbootstrap.min.css <-- Edit styles here
β βββone.css
βββ /img/ <-- Place images inside this folder
- Use any text editor to edit the HTML files. Please don’t move any existing files out of their respective folders to make sure the links and styling work.
- Once you have everything ready, make your website live by uploading the files to your hosting provider. Or you can register for a new hosting provider by clicking here:
If you encounter any issues or have any questions with the template, please contact us directly.
Template Guide
- Once downloaded from Github, to let your personalized template able to reference each other, please change ALL the file path accordingly (at the root folder of your server). For example,
- Delete
/one
from this path:
/one/asset/css/bootstrap.min.css
to the following in ALL your index.html files
/asset/css/bootstrap.min.css
- Store all your images in /asset/img/ folder to easily reference them.
- In
one.css
the colours, background image, and fonts can be adjusted at the ‘:root’ , ‘.bg-dark’ and ‘body’ components respectively.
- Change the colours here:
:root{
--button-bg-color: rgba(255,255,255,0);
--button-border-color: rgb(245, 245, 245);
--button-font-color: rgb(245, 245, 245);
--button-hover-color:rgb(245, 245, 245);
--button-hover-font:rgb(0, 0, 0);
--fonts-color: rgb(245, 245, 245);
--menu-underline:rgb(255, 255, 255);
}
- Change the fonts in font-family here:
body {
...
font-family:'Trebuchet MS', 'Lucida Sans Unicode',
'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
- Change the background image here:
.one-bg{
background-image: url(/assets/img/1.webp);
...
}
- For the slideshow in /portfolio/index.html:
- You can choose to use all formatting types or only keep the ones you need
- Each formatting has its respective comments to help you choose
<!-- Normal Image Format -->
<figure><img loading="lazy" alt="" src="/one/assets/img/2.webp"></figure>
<figure><img loading="lazy" alt="" src="/one/assets/img/3.webp"></figure>
<!-- Typing Format -->
<figure>
<p>You can type hereβ¦</p>
</figure>
<!-- Image With Captions Format -->
<figure>
<img loading="lazy" alt="" src="/one/assets/img/4.webp">
<figcaption><p>or have captions</p></figcaption>
</figure>
<!-- Image With Captions And Solid Background Format -->
<figure style="background:#ac3f00">
<img loading="lazy" alt="" src="/one/assets/img/5.webp">
<figcaption> <p>choose a solid background to suit any mood</p></figcaption>
</figure>
<!-- FullScreen Image Format -->
<figure class="fullscreen">
<img loading="lazy" alt="" src="/one/assets/img/6.webp">
<h2 style="color:black !important;">or go full screen</h2>
</figure>
- In order to receive any contact submission from site visitors, please replace the form action in /contact/index.html to a valid one which can be retrieved by registering for a free account in Formspree or Formsubmit
<form action="[Replace with a valid Formspree link here]" method="post">
Custom Installation
If you’d like to have a custom installation and further customization, feel free to contact us to request for a quotation.