Documentation

Html-Tailwind Template

UiCamp Html-Tailwind Template is a creative & modern template, A perfect place for your creative portfolio. Multiple demoes are included in this template with lots of CSS and tailwind animations, Responsive based on TailwindCss.

  • Last Update: 2 Jun, 2024

If you have any questions that are beyond the scope of this help file, Please feel free to contact us via UiCamp.

Features

  • Build on HTML CSS
  • Based on Tailwind
  • Based On SCSS
  • Creative layouts
  • 100% Responsive
  • Easy to Customize
  • Minimal and Clean
  • Fonts Awesome Icons
  • Well Documentation
  • Free Updates
  • All files are well commented
  • Displays well in all modern browsers

Files Include

[template_name]_Html-Tailwind

Folder contains main template code & all HTML 5, json, scss, css, images, fonts, js files

[template_name]_Html-Tailwind_docs

Documentation folder of "template_Html-Tailwind" written in html css

Installation

Follow the steps below to setup your template:

  1. Download the latest theme source code from the Marketplace.

open your project at the borwser

[root_folder] folder contains the whole project folders & files

project file

Click on name of page that you want

Deployment

You can deploy your project to any host that you need
We suggest some hosting you can consider to use:

  • heroku logo
  • vercel logo
  • Netlify logo

Folder Structure

Template comes with a flexible file structure that can be easily used for small to large scope projects. This section will explain the entire file structure and how to adapt it to your project.

Root Folder

[root_folder] folder contains the whole project folders & files

Root Folder Content:

File/Folder Description
assets Assets Folder is a folder that have all assets, images and style files that we use it at coding files
[page_name].html This file that have main code and data of page

Assets Folder

[root_folder]/assets/ Assets folder that contains all images , style source files and scripts files for functions.

[page_name]

[root_folder]/[page_name] file contains template code that contain all data of page (HTML 5 code, built in tailwind styles, and styles from our styles files).

Code Structure

Main template code structure

Page Code Structure


  
  <!DOCTYPE html>
  <html lang="zxx">

  <!-- ALL META DATA HERE AT <head> LIKE META TITLE AND ANOTHER THINGS THAT YOU NEED TO GET IT FROM ANOTHER FILES LIKE STYLES -->


    <head>
      <!-- Metas -->
      <meta charset="utf-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta
        name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1"
      />

      <!-- Title  -->
      <title>Gavi</title>

      <script src="https://cdn.tailwindcss.com"></script>
  
      <script src="./dark/assets/js/tailwindCongfig.js"></script>
  
      <!-- Plugins -->
      <!-- <link rel="stylesheet" href="dark/assets/css/plugins.css" /> -->
  
      <!-- Core Style Css -->
  
  
    </head> 


    <!-- ALL code of your body and what you see at your page are exist here at <body> you can edit what data that you need here  -->

    <body class="sub-bg" data-scroll-index="0">
      <div class="nav-top flex justify-center pt-30 pb-30">
        <div class="w-full mx-auto container">
          <div class="row flex justify-between">
            <div class="col-md-6 valign">
              <a href="#0" class="logo icon-img-60">
                <img src="dark/assets/imgs/logo-light.png" alt="" />
              </a>
            </div>
            <div class="col-md-6 valign">
              <div class="full-width info">
                <div class="d-flex justify-content-end">
                  <a href="#0" class="butn butn-md butn-bord radius-5">
                    <span>By Now</span>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <section class="preview section-padding">
        <div class="w-full">
          <div class="sec-head mb-80">
            <div class="row justify-content-center">
              <div class="col-lg-9">
                <div class="text-center">
                  <h1 class="fz-70 mb-15 font-[500]">GAVI</h1>
                  <h4 class="font-[500] text-[28px]">
                    Creative Personal
                    <span class="main-color">Portfolio</span> Template
                  </h4>
                </div>
              </div>
            </div>
          </div>
        </section>

        </body>
        </html>

Source & Credits

Images:

Images are only for demo purpose and not included with the download bundle.

Fonts:

Scripts:

Thank you for purchased UiCamp template

We truly appreciate and really hope that you'll enjoy our template!,
If you like our template, plase rate us 5 star !