DreamsNFT is a modern, elegant, and fully responsive NFT marketplace template crafted for digital artists, collectors, creators, and Web3 businesses. It is designed to showcase NFT collections, highlight creators, promote digital assets, and provide a seamless marketplace experience with style and performance. Built with Bootstrap 5.3.x, creator and collection pages, live auction interfaces, NFT detail pages, and a powerful dashboard for managing digital assets, collections, and user activities. DreamsNFT delivers everything you need in one sleek, performance-optimized package.
Project Overview
The project follows a modular structure with clear separation of concerns.
dreams-nft/ │ ├── html/ │ │ │ │ │ ├── assets/ # Contains all static resources used in the project │ │ │ ├── css/ # Compiled CSS stylesheets │ │ │ ├── img/ # Images, icons, and media files │ │ │ ├── js/ # JavaScript files and scripts │ │ │ ├── plugins/ # Third-party libraries and plugins │ │ │ ├── scss/ # SCSS source files for styling (precompiled to CSS) │ │ │ │ │ └── All HTML Files # Main HTML pages of the template (UI screens)
Structure Overview
DreamsNFT is powered by the robust Bootstrap Framework, the most trusted front-end toolkit for developing responsive and mobile-first websites.
Below is sample coding structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<title>DreamsNFT – is a Bootstrap-based template for NFT Marketplace HTML Template.</title>
<link rel="shortcut icon" href="assets/img/favicon.png">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/plugins/tabler-icons/tabler-icons.min.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="main-wrapper">
<!-- Header -->
<header class="header">
<!-- Add your header content here -->
</header>
<!-- Breadcrumb -->
<div class="breadcrumb-bar">
<div class="content">
<div class="container">
<!-- Breadcrumb content here -->
</div>
</div>
</div>
</div>
<!-- JS Files -->
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/plugins/swiper/swiper-bundle.min.js"></script>
<script src="assets/plugins/gsap/gsap.min.js"></script>
<script src="assets/plugins/gsap/ScrollTrigger.min.js"></script>
<script src="assets/js/gsap-animations.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>Script Overview
The DreamsNFT template includes a wide range of powerful JavaScript plugins designed to enhance the NFT marketplace experience. These plugins power essential features such as interactive sliders, wallet integrations, auction countdowns, data visualizations, image galleries, animations, and responsive user interfaces, ensuring a seamless and engaging experience for NFT collectors, creators, and traders.
You can find all the JS files organized in the js/ and plugins/ directories.
<script src="assets/js/script.js"></script>
Follow these steps to set up DreamsNFT! on your local development environment.
Installation Steps
Unzip Template Files
After downloading, extract the DreamsNFT package. Inside, you will find the folder HTML (Source Code), which contains all necessary files.
Copy Files to Server
Open the HTML folder, then copy all files and paste them into your localhost directory (e.g., htdocs for XAMPP, www for WAMP) or directly into your web server’s root folder.
Run in Browser
Once the files are in place, you can open the template in any modern web browser (Chrome, Firefox, Safari, Edge) from your PC or laptop. Simply navigate to localhost/dreamsnft/index.html or www.example.com/index.html or the domain where you uploaded the template.
Overview
Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor that extends CSS with variables, nesting, mixins, and more. This guide covers the installation and setup of Sass for the DreamsNFT! template.
Prerequisites
Node.js Installation
Before installing Sass, ensure you have Node.js installed on your system:
https://nodejs.org/en/download/
The default font is Inter. To change the font:
Update the @import URL and the $font-family-primary variable in style.css:
@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400..900;1,400..900&display=swap');
// Font Family
$font-family-primary: "Schibsted Grotesk", sans-serif;DreamsNFT is developed by Dreams Technologies and is available under both Envato Extended & Regular License options.
Regular License
Usage by either yourself or a single client is permitted for a single end product, provided that end users are not subject to any charges.
Extended License
For use by you or one client in a single end product for which end users may be charged.
What are the main differences between the Regular License and the Extended License?
If you operate as a freelancer or agency, you have the option to acquire the Extended License, which permits you to utilize the item across multiple projects on behalf of your clients.
| NAME | URL |
|---|---|
| Bootstrap | https://getbootstrap.com/ |
| Lucide | https://lucide.dev/ |
| Google Fonts | https://fonts.google.com/ |
| Swiperjs | https://swiperjs.com/ |
| Flatpickr | https://flatpickr.js.org/ |
| GSAP | https://gsap.com/ |
Need Support?
If this documentation does not address your questions, please feel free to contact us via email at support@dreamstechnologies.com
Reach the team at GMT+5:30. Typical reply within 12–24 hours on weekdays — rarely up to 48 hrs during holidays. Support is available to verified buyers for template-related issues.
Contact SupportImportant Note : We strive to offer top-notch support, but it's only available to verified buyers and for template-related issues such as bugs and errors. Custom changes and third-party module setups are not covered.
Do you need a customized application for your business?
If you need a customized application for your business depends on your specific requirements and goals, Please contact us. Customization can be the key to success, ensuring your project perfectly aligns with your unique goals and requirements.
Don't Miss Out on the Benefits of Customization!
Unlock the potential of your project. It's time to ensure your project isn't another cookie-cutter solution but truly unique and effective one.
Discover how customization can make a difference in your project's success. Let's create a solution that's as unique as your vision!
We'll tailor the application to meet your specific needs and preferences.
We will upload your website to the server and ensure it is live.
Thank You
Thank you once again for downloading DreamsNFT.
We hope you're enjoying your experience, and we kindly request that you take a moment to share your valuable review and rating with us.