Monteno - NFT Portfolio HTML Template (TailWind CSS)
- Version: 1.0.0
- Last Updated: May 10 23
- Author: themesflat
Template features:
- HTML5 & Tailwind CSS
- Responsive Template
- XD files included
- Animate everything you want
- Free icons used
- Pixel Perfect
- Clean & Unique Design
- Easy to customize
- Retina Ready
- Unlimited Colors
- Home Page
- Services Page
- Service Detail
- Price List
- Parallax Effect
- & much more...
HTML Structure
Monteno - NFT Portfolio HTML Template
Below is Monteno basic structure:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Monteno - NFT Portfolio HTML Template (TailWind CSS) </title>
<!-- Mobile Specific Metas -->
<!-- Bootstrap -->
<!-- Theme Style -->
<!-- Responsive -->
<!-- colors -->
<!-- Animation Style -->
<!-- Favicon and touch icons -->
</head>
<body>
<!-- Header -->
<!-- Slider -->
<!-- Section -->
<section class="flat-row"> </section>
<!-- Footer -->
<footer class="footer"> </footer>
<!-- Bottom -->
<div class="bottom"> </bottom>
<!-- Go Top -->
<a class="go-top">
</a>
<!-- Javascript -->
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/js/swiper-bundle.min.js"></script>
<script type="text/javascript" src="assets/js/swiper.js"></script>
<script type="text/javascript" src="assets/js/main.js"></script>
</body>
</html>
CSS System
The Monteno CSS System contains 3 parts:
- Template style
- Responsive style
- Javascript - Fonts - Animation - Bootstrap style
Style.css ( Template style )
/**
* Reset Browsers
* General
* Elements
* Forms
* Typography
* Extra classes
* Header Fixed
* Scroll Top
* Widget
*/
Javascript - Fonts - Animation - Bootstrap style
/**
* bootstrap.css
* swiper-bundle.min.css
* font-awesome.css
* style.css
*/
Javascript Custom
Here you can modify any settings for ( Retina Logos, Animations, Testimonials, Sliders, & Progress bar and more..)
Main.js ( js/main.js )
/**
* Dark Light Mode
* Dark To Light
* dropdown
* headerFixed
* flatAccordion
* flatCounter
* flattabs
* loadmore
* progress
* preloader
*/
Shortcodes System
You can easily use the shortcodes to create your own page.
/**
* isMobile
* Parallax
* flatCounter
* flatAccordion
* buttonHeart
* goTop
* toggleMenu
* flatProgressBar
* Preloader
* dropdown
* tabs
* copycode
*/
How to edit tailwind css on your computer
To use Tailwind CSS on your computer, you will need to install it as a development dependency in your project. Do the following steps to do this
- Make sure you have Node.js and npm installed on your computer.
If you don't have them already, you can download and install them from the official website https://nodejs.org. - Open project on your editor
- Open the terminal as a root directory
-
Run the command to install node module package
npm i //===== or yarn -
To build css run the command in your terminal
npm run build //===== or yarn run build
=========================================
Changing Brand Logo
You can change the main logo
Changing Hero Slider Image
You can change the hero slider image
Changing Portfolio Image
You can change the portfolio image
Credits
-
Photos
- All images are just used for preview purpose only and NOT included in the final purchase files.
- Fonts & Icons
-
Javascript
- jQuery (http://jquery.com/)
- Bootstrap (http://getbootstrap.com)
- Swiper (https://swiperjs.com)
- TailWind (https://tailwindcss.com/)
- Cookie (https://github.com/carhartl/jquery-cookie)