Home Β» Templates

One

 Β· 8 min Β· Nasir

One is a free, beginner-friendly, mobile-responsive (Bootstrap 5), customizable portfolio website template for showcasing your talents in a simple yet beautiful manner.

portfolio free template

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

 CodePreviewDownload
InformationDetail
LicenseMIT License
Version of Productv1.0
Date of Release23-2-2021
Bootstrap5.0.0 Beta2
  • πŸ”§ Easy-Installation
  • ⚑️ Fast
  • πŸ“± Responsive
  • 🎨 Customizable

Preview

Desktop Preview
Desktop Preview
Mobile Preview
Mobile Preview

 CodePreviewDownload

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:

Support Me

Your support is greatly appreciated 😊


Installation πŸ“₯

  1. Dowload the zip folder from the link in Github or direct dowload by clicking here.
  2. 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
  1. 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.
  2. 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:

Heksagon's Exclusive Affiliate Link
Quality Web Hosting At A Discounted Offer

If you encounter any issues or have any questions with the template, please contact us directly.


Template Guide

  1. 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
  1. Store all your images in /asset/img/ folder to easily reference them.
  2. 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);
    ...
}
  1. 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>
  1. 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.

 CodePreviewDownload

We use cookies to improve your experience on our site and to show you relevant advertising.

Read cookie policy

Accept & Close