BDM Network is a digital distributor and music publisher who wants to help independent artists and record labels on their music journey

The end-user of this website is independent artists who whats to get their music to digital stores such as Spotify, Deezer, Amazon Music, Beatport etc. and have professional services where they are the top priority. BDM is innovating a new rising model of the music business. Music is all about passion, love, and creativity. They are much more than a music distribution company and far ahead of the old record label industry.

As a user, I expect -
to be able to navigate around the site easily.
To be able to view the website from any device size.
To have website loads fast.

to be able to see whats is this service about.
To be able to contact the company quickly.

As an artist, I want
to see what this company can provide me with.
To have easy access to contact the company.

As a new user, I expect to feel welcome and not intimidated by lots of technical languages.
As a new user, I want to know why shud I work with this company.
As a new user, I want to have easy access to the company contact.

This project is a remake of my company website built on WordPress that can be checked here.
This website is created in plain HTML5 and CSS. No frameworks are used for this project.

The deployed website can be visited here.

This website is a multi-page website. It contains 3 pages home, about and contact page. Navigation does not include the hamburger menu since there was no JavaScript in this project. The website is fully responsive with the help of CSS Flexbox and CSS Grid.

This website is designed in Figma. The project can be found here

The colours I chose for this design are

Backgrund 1: 232526
Backgrund 2: 414345
CTA (Call to action) 1: FF512F
CTA (Call to action) 2: F09819
Accent color: F09819
Font Color: CDCDCD

• Mostly dark design so that visitors will not strain their eyes when visiting.
• An inspiring hero image combined with good typography and a CTA.
• A lot of CTA which will make it easier for visitors to get in touch with the client.
• Fully responsive design.
• Fully Functional contact form.
• Colour changing social links and CTA on hover.
• Prominent and repetitive CTA to attract the attention of visitors.

• Unsplash for all of the images on the website Visit Unsplash for excellent free to use pictures.
• AmIResponive to check responsive design and make a screenshot for the project Visit AmIResponsive.
• Font Awesome for social icons Visit Font Awesome.
• UI gradients for choosing my gradients Visit UI gradients.
• Figma for desinging Visit Figma.
• Stark plugin for figma to check my contrast Check out Stark plguin.
• W3C HTML validator to check my HTML code Check your HTML code here.
• W3C CSS validator to check my CSS code Check your CSS code here.
• GTMetrix to check the preformance of my project Check performance here.

Testing was done in a few steps. Designs were done first for mobile devices using chrome dev tools. I check all of my pages on every device that the dev tool can emulate. Staring from devices with 280px screens to 4K. 1080p 1440p and 4K was natively checked.

Code was checked with the W3C HTML validator and W3C CSS validator to ensure that there were no problems with my code and that my code met all standards.

Full CSS validation can be found. Here

Performance was checked with GTMetrix to make sure that my website was loading fast with no problems.

I want to thank my mentor Antonija Simic. She is amazing. She helped me a lot with this project. This is my 2nd version of this project first one had a lot of problems with responsive design, but she jumped into it and gave me great advice on how to sort those problems out.

This project was created for educational purposes only.