Hizaki Labs Website This is a simple, modern landing page for a tech and creative company, built with a focus on clean design and responsive behavior. The website is composed of three main files that work together to create the full user experience.
File Structure index.html: This is the core of the website. It contains the main HTML structure, including all the content sections (Home, Services, Portfolio, etc.). This file also links to the necessary CSS and JavaScript files. It's the file you will open in a browser to view the website.
main.css: While the website primarily uses Tailwind CSS for utility-first styling, this file contains custom CSS rules for unique elements or global styles. This includes the background image, font definitions (@font-face), and the styling for specific components like the "section title" divider.
main.js: This file adds interactive functionality to the site. It includes scripts for:
Current Year: Automatically updates the copyright year in the footer.
Mobile Menu: Toggles the mobile navigation menu on and off.
Smooth Scrolling: Provides a smooth scrolling animation when you click on navigation links that point to a section on the same page.
How to Use the Website Open the file: The easiest way to view the website is to simply open the index.html file directly in your web browser.
Make edits: You can edit the content by modifying the index.html file in a text editor.
Customize styling: You can change the appearance of elements by adding or changing the Tailwind CSS classes within the index.html file. For more specific or custom styling, you would add new rules to the main.css file.
Add new functionality: For new features, such as contact form validation or dynamic content loading, you would add new JavaScript code to the main.js file.
Customization Tips Change colors: You can easily change the primary color scheme by modifying the Tailwind classes. For example, change bg-indigo-600 to bg-emerald-600.
Add new sections: You can copy and paste an existing section block from index.html and customize the content to create a new part of the page.
Update content: You can easily change the text, images, and links within the index.html file to reflect your specific content.