Our website is designed to engage more customers, showcase our products and progress, and drive higher sales for our distribution business. It serves as a platform to highlight our growth, share key updates, and provide easy access to our contact details, ensuring customers can connect with us effortlessly.
View M&H Distributions on Github Pages
About M&H Distribution
M&H Distribution is a wholesaler and distributor based in Bristol, serving the market for over a year. As we look to expand across the UK, our goal is to reach more customers and grow our presence in the industry.
We aim to share our business journey, showcase our products, and provide an easy way for customers to connect with us. This platform allows us to share contact details, display our offerings, and build strong relationships with businesses looking for reliable distribution services.
-
Our Top-Selling Products
-
Banners for Upcoming Stock Arrivals and Events
-
Showcasing Our Featured Brands
-
A Snapshot of Our Business History
-
Contact Information
-
Our Physical Address
-
Ensure the site is responsive and accessible across various device sizes.
-
Make it easy for new customers to contact us, fostering new connections with brands.
-
Highlight best-selling products and new stock with prominent banners at the top.
-
Provide an overview of our business history and describe our working methods.
-
An online platform to showcase our history and work processes.
-
Customers can easily view our contact details and stay updated on new stock arrivals.
- Encourage new customers to reach out and connect with us.
Here is the color scheme for the project:
- White:
#FFFFFF - Dark Blue:
#023E8A - Blue:
#0077B6 - Black:
#000000
In the retail and distribution business, customers typically prioritize clarity and ease of use over complex technologies or elaborate themes. Therefore, this website is designed with a simple, easy-to-read color scheme, ensuring a clear and straightforward message on every page. This approach enhances user navigation and allows customers to quickly find important business details without confusion.
-
White & Black: These colors create a strong contrast, often symbolizing balance and clarity.
-
Blue: Represents serenity, trust, and reliability, reinforcing a professional and credible brand image.
-
The color palette was generated using Coolors.
The website uses Google Fonts, specifically:
-
Tinos Bold: Used for headings, a serif font that conveys a professional and authoritative feel.
-
Tinos Regular: Applied to body text, offering a clean and readable appearance.
-
Designed by Steve Matteson, Tinos is an ideal choice for business communication due to its readability and professional tone.
Most images used on the site are sourced from personal online resources to maintain a relevant and professional visual appeal.
Wireframes for the website were created using Figma.
Click to view the website wireframes here.
-
A responsive navigation bar with Animation at the top for easy site navigation. On the left side, there is a text logo for M&H Distributions.
-
On the right side, the navigation bar includes links to the Home, About Us, and Contact Us pages.
-
To ensure a clean user experience, the M&H Distribution website text is hidden on mobile devices using a media query. Instead, a hamburger menu replaces the navigation links, making the site visually appealing and easy to navigate for mobile users.
-
A footer containing the brand logo and distributor slogan.
-
The footer also includes a building icon displaying the business address, phone number, and email, making it easy for customers to contact us.
-
A small navigation section is added for improved accessibility.
-
Icons are used to maintain a clean footer design and enhance user experience, as they are universally recognizable.
Home Page
-
The hero section is split 50/50.
-
Left Side: Displays the distributor's slogan along with a brief introduction about the business.
-
Right Side: Features a carousel showcasing images of the distributor's warehouse to create a professional look.
- Displays four banners highlighting new stock arrivals and upcoming events.
- A detailed description of the distributor, set against a clean white background for clarity and readability.
-
A Bootstrap carousel showcasing four products per slide.
-
Each product includes its price, making it more appealing to potential customers.
-
Displays brand logos in a rounded format for a sleek design.
-
Additional text underneath to provide more details for customers.
-
A detailed introduction outlining the distribution process and the company's promise.
-
Emphasizes trust-building with both new and existing customers, reinforcing reliability and strong business relationships.
About Us Page
An overview of the business, including its success and history, along with customer reviews highlighting the satisfaction of new customers. Contact Us Page Use iframes to display the distributor's location on Google Maps and include a Contact Us form with HTML validation, allowing customers to submit inquiries and ask questions directly to the team.
Thank You Page.
-A message thanks the user for submitting the form and lets them know someone will be in touch soon.
-
Integrate a live chat feature.
-
Create a new products page with categorized listings.
-
Include social media icons for better engagement.
I have carefully coded the website to ensure maximum accessibility by:
-
Utilizing semantic HTML for better structure and readability.
-
Adding descriptive alt attributes to all images.
-
Providing screen reader-friendly information where icons are used without accompanying text.
-
Maintaining sufficient color contrast throughout the site for better visibility.
-
Making menus accessible, with the current page clearly marked for screen readers.
-
Selecting readable fonts that complement the background color for enhanced readability.
HTML and CSS were used to create this website.
Figma - Used to create wireframes.
Git - For version control.
Github - To save and store the files for the website.
Bootstrap Version 5.3 - The framework for the website. Code for the navigation bar, carousel, cards and form were used and modified. Additional CSS styling was also implemented in style.css.
Google Fonts - To import the fonts used on the website.
Bootstrap Icons - For the iconography on the website.
Google Dev Tools - To troubleshoot and test features, solve issues with responsiveness and styling.
Tiny PNG To compress images.
Favicon.io To create favicon.
Am I Responsive? To show the website image on a range of devices.
Shields.io To add badges to the README
Make a note here of all the languages used in creating your project. For the first project this will most likely just be HTML & CSS.
Github Pages was used to deploy the live website. The instructions to achieve this are below:
- Log in (or sign up) to Github.
- Find the repository for this project, MH Distribution.
- Click on the Settings link.
- Click on the Pages link in the left hand side navigation bar.
- In the Source section, choose main from the drop down select branch menu. Select Root from the drop down select folder menu.
- Click Save. Your live Github Pages site is now deployed at the URL shown.
To fork the M&H Distribution repository:
- Log in (or sign up) to Github.
- Go to the repository for this project, Mubashirgit1/mhdistribution.
- Click the Fork button in the top right corner.
To clone the Bully-Book-Club repository:
- Log in (or sign up) to GitHub.
- Go to the repository for this project, Mubashirgit1/mhdistribution.
- Click on the code button, select whether you would like to clone with HTTPS, SSH or GitHub CLI and copy the link shown.
- Open the terminal in your code editor and change the current working directory to the location you want to use for the cloned directory.
- Type 'git clone' into the terminal and then paste the link you copied in step 3. Press enter.
Visit the deployed site: M&H Distribution
Testing was ongoing throughout the entire build. We utilised Chrome developer tools whilst building to pinpoint and troubleshoot any issues as we went along.
Each page has been inspected using google chrome developer tools & Firefox inspector tool to ensure that each page is fully responsive on a variety of different screen sizes and devices. We have also physically tested the responsiveness of the site on a number of different devices.
W3C was used to validate the HTML on all pages of the website. It was also used to validate the CSS.
A warning relating to the use of the aria-label in the <i> tag was flagged as being a possible misuse of the label. This is due to the bootstrap class for the icons to allow the icons to be accessible friendly (taken from the documentation for bootstrap5), and can therefore be ignored.
Update April 2025
Further research into this matter suggests that moving the aria-label into the parent <a> tag will remove the above error relating to the misuse of the label.
An Error to remove pixel unit from width and height of img attritbute from our project
-
About US W3C HTML Validation - Pass
jigsaw.w3 was used to validate the Cascading styling sheet.
- style.css CSS Validation - Pass
I used Lighthouse within the Chrome Developer Tools to test the performance, accessibility, best practices and SEO of the website.
-
Index Page
-
About Page
-
Contact Page
-
Thank you Page
-
Index Page
-
About Page
-
Contact Page
-
Thank you Page
Testing was ongoing throughout the entire build. I utilised Chrome developer tools while building to pinpoint and troubleshoot any issues as I went along.
The following issues were raised during my mid project meeting with my mentor:
-
Meta Tags Are Missing: Essential meta tags (such as title, description, and keywords) should be included in the
<head>section for SEO and better website visibility. -
Images Alternative Text Needs Improvement: The alt text for images should be more descriptive and meaningful to provide better accessibility and SEO benefits. It should clearly describe the image content for screen readers and search engines.
-
Convert All Images to WebP Format: Using WebP instead of traditional formats (JPEG/PNG) helps reduce file sizes while maintaining high quality, improving page load speed and performance.
-
Toggle Button Not Clear for Users: The navbar toggle button should be more visible and user-friendly, possibly by adjusting its size, contrast, or adding an icon label to indicate its function.
-
Code Formatting: The code should be properly formatted, indented, and structured for readability and maintainability. Well-organized code makes debugging and future updates easier.
-
Remove Unused Links: Any broken, unused, or irrelevant links should be removed to keep the website clean, functional, and user-friendly. This avoids confusion and improves navigation.
The following issues were raised during my mid project meeting with my mentor:
-
Meta Tags Are Missing: Essential meta tags (such as title, description, and keywords) should be included in the
<head>section for SEO and better website visibility. -
Images Alternative Text Needs Improvement: The alt text for images should be more descriptive and meaningful to provide better accessibility and SEO benefits. It should clearly describe the image content for screen readers and search engines.
-
Convert All Images to WebP Format: Using WebP instead of traditional formats (JPEG/PNG) helps reduce file sizes while maintaining high quality, improving page load speed and performance.
-
Toggle Button Not Clear for Users: The navbar toggle button should be more visible and user-friendly, possibly by adjusting its size, contrast, or adding an icon label to indicate its function.
-
Code Formatting: The code should be properly formatted, indented, and structured for readability and maintainability. Well-organized code makes debugging and future updates easier.
-
Remove Unused Links: Any broken, unused, or irrelevant links should be removed to keep the website clean, functional, and user-friendly. This avoids confusion and improves navigation.
Full testing was performed on the following devices:
- Laptop:
- Intel Premium Aspire 3 14 inch screen
- Mobile Devices:
- iPhone 13 pro.
- iPhone 11 pro.
- Phone X.
Each device tested the site using the following browsers:
- Google Chrome
- Safari
- Firefox
Additional testing was taken by friends and family on a variety of devices and screen sizes.
| Feature | Expected Outcome | Testing Performed | Result | Pass/Fail |
|---|---|---|---|---|
Navbar |
||||
| Site logo | Redirects to the home page | Click logo | Redirects to home page | Pass |
| Site Name | Redirects to home page | Click site name | Redirects to home page | Pass |
| Home Link | Redirects to home page | Click home link | Redirects to home page | Pass |
| About Link User go to about us informaton | Pass | |||
| Contact Link User can see contact us page and all information to contact us | Pass | |||
| Thanks Page user submit form and fill all fields then move to Thanks Page | Pass | |||
| Admin View | Redirects to the admin view page | Click admin view link | Redirected to admin view page | Pass |
| Logout link (user logged in) | User will be logged out | Click log out link | Redirected to home page - login link available | Pass |
Home Page |
||||
| View threads button | Redirects to the threads page | Click button | Redirected to the thread | Pass |
| Start a new thread button | Modal popup to create new thread | Click button | New thread modal popped up | Pass |
Login Page |
||||
| Form - link to sign up page | Redirects user to sign in page | Click link | Redirected to sign up page | Pass |
| Form - Submission with no information | User prompted to fill in information | clicked submit button with no fields filled out | Form highlighted first empty field | Pass |
Signup Page |
||||
| Form - Submission with no information | User prompted to fill in information | clicked submit button with no fields filled out | Form highlighted first empty field | Pass |
Footer |
||||
| Footer - Home | Redirects Home | Click button | Pass | |
| Footer - About links | Redirect to About | Pass | ||
| Footer - Contact | Redirects to Contact | Pass | ||
| footer - Logo | Redirects to the Home | Pass |
Content for the website was written by the owner of Mubashir Hussain
Content for the website was written by the owner of Mubashir Hussain
warehouse hero image
Images are used from Rayburn Trading https://www.rayburntrading.com/
New stock and upcoming events Images
As M&H DIstribution Allow to display product Images Products Images
Brands Logo Images Brands Logo
About Us Page
Free download From Unplush
I would like to acknowledge the following people who helped me along the way in completing my first milestone project:
- Mudasser Hussain (Owner of M&H Distributions), for allowing me to create a website based on the M&H Distribution.
- Graeme_Taylor, my Code Institute Mentor.