Biox - Personal Portfolio HTML Tailwind CSS Template.

Introduction

  • Item Name : Biox - Personal Portfolio HTML Tailwind CSS Template.
  • Item Version : 1
  • Author : Maraviya Infotech
  • Copyright : 2024

First of all, thank you so much for purchasing this Biox Template and for being my loyal customer. You are awesome! You are entitled to get free lifetime updates to this product + exceptional support from the author directly.

This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly. Basic HTML, CSS | SCSS & JS knowledge is required to customize this item. You may learn basics here and here .

Getting Started

Requirements

You will need the following softwares to customize this template.

  1. Code Editing Software (eg: Visual studio code, Dreamweaver, Sublime Text or Notepad++)
  2. For SCSS build up (eg: koala, prepos, codekit etc...)
  3. Web Browser for testing (eg: Google Chrome or Mozilla Firefox)
Note : Be careful while editing the item. If not edited properly, the design layout may break completely.

Include Files

  • HTML
  • CSS
  • SCSS
  • JS
  • IMAGES(Demo images only)
  • FONT

Files Structure :

  • css
    • Plugins - ( Plugin stylesheets )
    • Vendor - ( Vendor stylesheets )
  • fonts
    • Montserrat - ( Montserrat fonts )
  • img
    • about
    • achieve
    • blog
    • breadcrumb
    • hero
    • hire
    • logo
    • project
    • services
    • testimonials
  • js
    • plugins - ( Plugins js files )
  • scss
    • base - ( typography, font family )
    • components - ( Component stylesheets )
    • layout - ( Layout stylesheets )
    • Pages - ( Pages stylesheets )
    • utilities - ( Mixins & variable stylesheets )

Local Server Installation

➣ There are the Four things to setup & run the theme.

1. Install & Start Xampp Server Click
2. How to Setup Theme Code Folder Click
3. Database Configuration Click (this theme have not use any database, because it's html template)
4. Run the theme into browser Click

Step-1 : ➣ Install & Start Xampp Server

➣ Download the latest version of Xampp & Install Xampp Server Click

➣ Click on Start button to start Apache & MySql into Xampp Server

➣ Now blow image show the running Xampp Server

Now Xammp Installation process end up here and move to the next step below..

Step-2 : ➣ How to Setup Template Code Folder

➣ Open unzip folder Biox - Personal Portfolio HTML Tailwind CSS Template. and copy biox-tailwind folder as show below image

➣ Now open Xampp folder

➣ After that open htdocs folder

➣ Now paste already copied biox-tailwind folder into htdocs

Step-3 : ➣ Database Configuration

This theme have not use any database, because it's html template and not needed any type of database configuration. theme directly run in localhost or server.

Step-4 : ➣ Run the Home page into browser

➣ Open Browser and run the Home page to type located theme path : localhost/biox-tailwind as show below image

➣ Now you can take a look on any of the layout by choosing on top of the site menu.

Live Server Installation

➣ There are the Four things to setup & run the theme.

1. Hosting Account Click
2. How to Setup Theme Code Folder Click
3. Database Configuration Click (this theme have not use any database, because it's html template)
4. Run the theme into browser Click
Step-1 : ➣ Hosting Account

➣ You must have Hosting account. And if you don't have please purchase it before move ahed. Click

Note: I am just giving the example of Hosting account you can purchase any of hosting account that support PHP.

➣ Get Login into your hostinger account and open dashboard.

Now Hosting account end up here and move to the next step below..

Step-2 : ➣ How to Setup Theme Code Folder

➣ From Dashboard Click on File Manager as show below image

➣ Now upload biox-tailwind.zip folder into server

➣ After upload unzip this folder as shown below image

Now the Theme Code setup is finished here move to the next step below..

Step-3 : ➣ Database Configuration

This theme have not use any database, because it's html template and not needed any type of database configuration. theme directly run in localhost or server.

Step-4 : ➣ Run the Home Page into browser

➣ Open Browser and run the "Home page" to type located theme path : yourdomain.com/biox-tailwind as show below image

➣ Now you can take a look on any of the layout by choosing on top of the site menu.

Customization & Source Files

Fonts

First download fonts which you want. and then paste fonts file in font folder.
and Goto "scss > base > _typography", and change. after compile your code and run html file.

typo

Logo

If you want to change logo. Goto "assets/img/logo" folder and change logo png image.

<!-- Header Logo Start -->
	<a class="navbar-brand" href="index.html">
    <img src="assets/img/logo/logo.png" alt="logo" class="bix-logo w-[90px] px-[15px] flex">
    <img src="assets/img/logo/logo-dark.png" alt="logo" class="dark-logo w-[90px] px-[15px] hidden">
</a>
<!-- Header Logo End -->

Menus

If you want to add menu and change menu name.

<li class="nav-item dropdown drop-list transition-all duration-[0.3s] ease-in-out ml-[30px] relative">
    <a class="nav-link dropdown-arrow transition-all duration-[0.3s] ease-in-out font-montserrat tracking-[0.03rem] p-[0] text-[15px] font-medium leading-[40px] capitalize text-[#1b1c20] flex items-center relative hover:text-[#f41a4a]" href="javascript:void(0)">
        pages
        <i class="ri-arrow-drop-down-line transition-all duration-[0.3s] ease-in-out mr-[5px] text-[24px] text-[#1b1c20] flex"></i>
    </a>
    <ul class="sub-menu transition-all duration-[0.3s] ease-in-out min-w-[170px] mt-[15px] py-[15px] px-[20px] absolute z-[16] text-left opacity-[0] invisible left-[0] rounded-[5px] right-auto bg-[#fff] block">
        <li class="py-[5px] block">
            <a href="single-project.html" class="transition-all duration-[0.3s] ease-in-out font-montserrat tracking-[0.03rem] leading-[20px] font-medium text-[14px] text-[#777] capitalize flex justify-between items-center p-[0] hover:text-[#f41a4a]">Single Project</a>
        </li>
        <li class="py-[5px] block">
            <a href="blog.html" class="transition-all duration-[0.3s] ease-in-out font-montserrat tracking-[0.03rem] leading-[20px] font-medium text-[14px] text-[#777] capitalize flex justify-between items-center p-[0] hover:text-[#f41a4a]">Blog</a>
        </li>
        <li class="py-[5px] block">
            <a href="blog-detail.html" class="transition-all duration-[0.3s] ease-in-out font-montserrat tracking-[0.03rem] leading-[20px] font-medium text-[14px] text-[#777] capitalize flex justify-between items-center p-[0] hover:text-[#f41a4a]">Blog Detail</a>
        </li>
    </ul>
</li>

Source File (CSS)

<!-- Site Favicon -->
	<link rel="icon" href="assets/img/favicon/favicon.png" type="image/x-icon">

	<!-- Css All Plugins Files -->
	<link rel="stylesheet" href="assets/css/vendor/remixicon.css">
	<link rel="stylesheet" href="assets/css/vendor/jquery.fancybox.min.css">
	<link rel="stylesheet" href="assets/css/vendor/owl.carousel.min.css">
	<link rel="stylesheet" href="assets/css/vendor/aos.css">
	
	<!-- tailwindcss -->
	<script src="assets/js/vendor/tailwindcss3.4.5.js"></script>
	
	<!-- Main Style -->
	<link rel="stylesheet" href="assets/css/style.css">

Source File (JS)

<!-- Plugins -->
	<script src="assets/js/vendor/jquery.min.js"></script>
	<script src="assets/js/vendor/jquery.fancybox.min.js"></script>
	<script src="assets/js/vendor/jquery.mixitup.min.js"></script>
	<script src="assets/js/vendor/owl.carousel.min.js"></script>
	<script src="assets/js/vendor/parallax.min.js"></script>
	<script src="assets/js/vendor/aos.js"></script>
	<script src="assets/js/vendor/smoothscroll.min.js"></script>
	
	<!-- main-js -->
	<script src="assets/js/main.js"></script>

Customize Template Colors

Template primary color is #f41a4a, And Template have 10 colors if you want to use color-2.css, you can just add a link inside head tag on every page.

<link rel="stylesheet" href="assets/css/color-2.css" id="add_class">

Customize Template Light | Dark Mode

If you want to use dark mode, just add a link(dark.css) inside head tag on every page.

<link rel="stylesheet" href="assets/css/dark.css" id="add_dark">

Customize Template LTR | RTL

If you want to use RTL mode, just add a link(rtl.css) inside head tag on every page.

<link rel="stylesheet" href="assets/css/rtl.css" id="add_rtl">

Free Resources

  • Google Fonts
  • Owl Carousel
  • Animate
  • Aos
  • Mixitup
  • Fancybox
  • Smoothscroll

Thank You

Thank you again for download 'Biox', enjoy it and give us your valuable Review & Rating Here.

shapes