My passion for coffee led me to create this fictional company’s website, a wholesale coffee roaster, which had recently incorporated training to their services.

The website highlights three aspects of the company’s services: the variety of coffee beans they offer, their new SCA training courses and brewing guides.

I created a basic logo on https://www.canva.com using a free icon found at https://www.iconfinder.com

Link to icon: https://www.iconfinder.com/icons/1046681/barista_tamper_icon

Link to logo: https://document-export.canva.com/DADmhgmoll8/2/thumbnail/0001-3414094849.png Image editing on https://www110.lunapic.com/editor/

A live demo can be found http://techsini.com/multi-mockup/?url=https://roxanahefferon.github.io/M1-CI-UC-Front-End-Development/http://www.example.com

My number one goal was to make it easy to access information on the site while promoting the brand. For prospective customers and baristas alike, I wanted to provide them with a brief overview of what the Coffee Project Co. does and how, as well as with the option to get in contact should they require more information/schedule a meeting with a sales representative.

Downloadable PDF versions of some brewing techniques were also provided for their ease of access.

My design choice comes from https://visme.co/blog/website-color-schemes/. Colours used: #e7717d #c2cad0 #c2b9b0 #7e685a #afd275 This combination of candy pink, green-yellow, lavender gray and pastel brown is ideal for designs looking to project a vibrant and inviting image.

Hero image from by Simon Zachrisson | https://unsplash.com/photos/CWHzMfB0LWg

Our Coffees image by Ubu Komarova | https://unsplash.com/photos/K3oOCdn9qcQ

Single Origin card image by Karl Fredrickson | https://unsplash.com/photos/TYIzeCiZ_60

Blends card image by Lodewijk Hertog | https://unsplash.com/photos/LnG_bBDHLYo

Brew guides heading image by René Pollock | https://unsplash.com/photos/pLPZjZL8cII

Header SCA courses image by Nathan Dumlao | https://unsplash.com/photos/JHxGT0lA_GA

Intro to coffee SCA image by Marc Babin | https://unsplash.com/photos/VMJtKiREtMc

Barista SCA image by Tyler Nix | https://unsplash.com/photos/3uSHEffsDXI

Brewing SCA image by Helena Lopes | https://unsplash.com/photos/kN69WG8zfwA

Icons by Oliver Pitsch | https://www.iconfinder.com

https://www.iconfinder.com/icons/889385/aero_press_aeropress_barista_brewing_coffee_coffee_maker_espresso_icon

https://www.iconfinder.com/icons/889375/barista_chemex_coffee_coffee_maker_filter_icon

https://www.iconfinder.com/icons/889371/bodum_coffee_coffee_maker_french_french_press_press_icon

https://www.iconfinder.com/icons/889382/barista_cafe_coffee_espresso_espresso_machine_machine_icon

Created course registration form on https://form.jotformeu.com/92816922928368

Created product order form on https://form.jotformeu.com/92817292835366

1. HTML
2. CSS
3. Bootstrap (4.0.0)

I would like to add a calendar and booking system as well as payment options and product order forms. As it is I was only able to link to an external form.

The accordion was created following code found at: https://www.w3schools.com/howto/howto_js_accordion.asp

This is for educational use.