Bricknet - Construction Company Website (HTML)

Documentation

Template Name: Bricknet
Author: PeterDraw Studio
Version: 1.0.0
Last Update: 06 September 2025

Thank you very much for purchasing the template. We've put a lot of hard work into it, and we hope you love it as much as we do. This is a flexible and modern HTML boilerplate for construction company websites. It uses TailwindCSS v4. It's designed to power landing pages and is perfect for developers looking to build fast, customizable, static websites. As far as the documentation is concerned, we have tried to cover as much as possible to help you get your new template up and running and to help you customize it. If you have any questions that are beyond the scope of this help file, please feel free to drop us an email to hello@peterdraw.co. Thanks so much!

Features

  • 🎨 Latest Tailwind CSS v4
  • 🧩 Zero Dependency – No jQuery
  • 📝 SEO-ready commented HTML5 files
  • ✅ Valid HTML5 & CSS3
  • 📊 Well-written code
  • 📱 Responsive layout
  • 🖼️ Retina-ready
  • 📜 Onepage layout option with smooth scroll
  • 🎭 Color options
  • 🔤 Font options
  • 🎭 Duotone icon option with https://github.com/phosphor-icons/web
  • 🔤 Font icon option with https://github.com/phosphor-icons/web
  • 🖼️ Image background option
  • 📲 Offcanvas mobile menu and info panel
  • 🔔 Notification bar
  • 💬 Modal popup
  • ✨ Animations on scroll with AOS.js
  • 🔄 Slider with animated captions Swiper.js
  • 🔍 Filterable gallery with Shuffle.js
  • 📧 Mailchimp compatible
  • 📝 Contact form without page refresh
  • 🎥 Video player HTML5, YouTube and Vimeo video support with Plyr
  • 🎨 TailwindCSS v4 for styling
  • 📨 Contact form powered by Formspree

CDN Assets

The project loads a small set of third‑party assets from CDNs.

CSS

  • Google Fonts – Inter: https://fonts.googleapis.com/css2?family=Inter:...&display=swap — Primary font family
  • Phosphor Icons (Regular, v2.1.2): https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/regular/style.css — Icon font styles
  • AOS (v2.3.4): https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.min.css — Scroll animations styles
  • Swiper (v12): https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css — Slider styles
  • Plyr (v3.8.3): https://cdn.jsdelivr.net/npm/plyr@3.8.3/dist/plyr.min.css — Media player styles
  • Toastify (v1.12.0): https://cdn.jsdelivr.net/npm/toastify-js@1.12.0/src/toastify.min.css — Toast notification styles

Also included after the CDN styles:

  • public/css/custom.css
  • src/styles/main.css

JavaScript

  • AOS (v2.3.4): https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.min.js
  • Swiper (v12): https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js
  • Plyr (v3.8.3): https://cdn.jsdelivr.net/npm/plyr@3.8.3/dist/plyr.min.js
  • Shuffle.js (v6.1.2): https://cdn.jsdelivr.net/npm/shufflejs@6.1.2/dist/shuffle.min.js
  • Toastify (v1.12.0): https://cdn.jsdelivr.net/npm/toastify-js@1.12.0/src/toastify.min.js
  • Main script: /js/main.js (served from public/js/main.js)

Notes: Versions above reflect the exact references in the partials. Update the URLs in the partials to change versions. If you prefer self‑hosting, you can download these assets and reference them locally instead of via CDN.

Packages

This project utilizes the following high-quality packages:

🎨 CSS & Styling

  • Tailwind CSS - Utility-first CSS framework for rapidly building custom user interfaces with a highly configurable design system
    • Integration: The project uses Tailwind CSS v4 with the Vite plugin for seamless integration
    • Configuration: Custom theme settings are defined in src/styles/tailwind-config.css using the @theme directive
    • Usage: Import Tailwind in src/styles/main.css with @import 'tailwindcss'
    • Dependencies: Requires tailwindcss and @tailwindcss/vite packages (already included in package.json)
    • Customization: Modify colors, fonts, and spacing in the @theme section of the config file
  • @tailwindcss/typography - Plugin that provides a set of prose classes for beautiful typographic defaults
    • Usage: Imported in main.css with @plugin "@tailwindcss/typography"
    • Implementation: Use prose classes for rich text content formatting
    • Customization: The project includes custom prose styles in src/styles/style.css with the .prose-custom class

🎮 UI & Interaction

  • Phosphor Icons - Flexible icon family with 6 weights and improved performance for modern web applications
  • Swiper - Modern touch slider with hardware-accelerated transitions for mobile websites and web applications
  • AOS - Animate On Scroll library for elegant scroll animations
  • Shuffle - Categorize, sort, and filter a responsive grid of items

🎬 Media

  • Plyr - Simple, lightweight and customizable media player for HTML5, YouTube and Vimeo with accessibility features

HTML Structure

This template is based on a responsive and full screen layout. And it's built using HTML5 standards.

From beginning of the <body> tag till the ending </body> tag, all the codes and texts are used for the template structure. You can change any text from the template by navigating through the HTML files and localizing each line of text you want to change.

Change Placeholder Images

When you download the template files you will see we used placeholder images instead of those originals we used in our preview link. To change with your desired images, replace the placeholder images in the src/images directory and run the image optimization script.

Icons

We use Phosphor Icons for both duotone and font icons.

For more information, visit Phosphor Icons GitHub.

CSS Files

All the CSS files are located in the src/styles folder of the template.
main.css - Main stylesheet which imports Tailwind CSS.
style.css - Contains custom styles for the template.
tailwind-config.css - Contains Tailwind theme configuration using the @theme directive.

JavaScript Files

All JavaScript files are located in the src/js folder.
main.js - Main JavaScript file that imports and initializes all components.
Other specialized JS files handle specific functionality like mobile menu, contact form, etc.

Please DO NOT edit these files unless you have JavaScript coding experience. Simple mistakes can cause serious damage to the scripts.

Mailchimp

To set up Mailchimp integration, replace:

  • YOUR_DC → your Mailchimp datacenter (e.g. us21).
  • YOUR_U_ID → your Mailchimp u= value.
  • YOUR_LIST_ID → your Mailchimp id= value.
  • YOUR_F_ID → the hidden f_id param (Mailchimp now includes this in new embed forms).

Keep the hidden honeypot field (b_YOUR_U_ID_YOUR_LIST_ID) for anti-spam.

Contact Form (Formspree)

This project includes a ready-to-go contact form using Formspree.

You must update the form action attribute with your own Formspree endpoint URL for the form to work correctly.

Example:

<form
  action="https://formspree.io/f/your-form-id"
  method="POST"
  id="contact-form"
>
  <!-- form fields here -->
</form>

Setup:

  • Sign up at Formspree
  • Create a new form
  • Replace the action URL with your new Formspree endpoint

Form submissions are handled using a standalone JavaScript file which displays a confirmation message without reloading the page.

Deployment

This section provides step-by-step instructions for deploying your project using shared hosting via FTP.

Deploying to Shared Hosting via FTP

For traditional web hosting that supports FTP access, follow these steps to deploy your Bricknet project.

Prerequisites

  • FTP client software (such as FileZilla, Cyberduck, or WinSCP)
  • FTP credentials from your hosting provider:
    • FTP server/host address
    • Username
    • Password
    • Port (usually 21 for standard FTP)

Step-by-Step File Upload Process

  1. Build your project: 
    npm run build
  2. Connect to your server via FTP:
    • Open your FTP client
    • Enter your FTP credentials (host, username, password, port)
    • Click Connect/Login
  3. Navigate to the appropriate directory:
    • Locate your website's root directory (often called public_html, www, htdocs, or web)
    • If you want to install in a subdirectory, navigate to or create that directory
  4. Upload the contents of your project:
    • Select all files and folders from your project directory
    • Upload them to the server directory
    • Ensure file transfer mode is set appropriately (ASCII for text files, Binary for images/media)

Recommended File Structure on Server

public_html/               # Root web directory on your server
├── index.html             # Main entry point
├── assets/                # Contains CSS, JS, and other assets
│   ├── css/
│   ├── js/
│   └── images/
└── other directories...   # Other directories from your build

Post-Deployment Configuration

  1. Verify file permissions:
    • HTML, CSS, JS files: 644 (rw-r--r--)
    • Directories: 755 (rwxr-xr-x)
    • Adjust if needed using your FTP client's permission settings
  2. Configure server for SPA (if applicable):
    • If your hosting uses Apache, ensure the .htaccess file is uploaded with proper redirects
    • For Nginx servers, you may need to contact your hosting provider to configure redirects
  3. Test your website:
    • Visit your domain in a web browser
    • Test all major functionality
    • Check for any missing assets or broken links

Common Troubleshooting Tips for FTP Deployment

  • 404 Errors: Ensure index.html is in the root directory and named correctly
  • Missing Assets: Check file paths; they should be relative to the root
  • Permission Issues: If pages don't load or show errors, verify file permissions
  • Blank Page: Check browser console for JavaScript errors; ensure all required files were uploaded
  • Slow Loading: Consider enabling GZIP compression on your server if available
  • FTP Connection Issues:
    • Verify credentials are correct
    • Try passive mode if connection fails
    • Check if your hosting provider requires FTPS (FTP over SSL)

Sources and Credits

Image Credits:

Packages and Libraries:

Rate This Template

If you like this template, please remember to rate it on ThemeForest - it really helps us to know what people think of our templates. To rate this item, go to your Downloads page on ThemeForest and give it the five star rating :

We would love to hear your feedback. If you find any bugs or have suggestions for improvements please get in touch. Nearly all of the time we follow your advice and issue a rapid update.