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/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
- HTML
- CSS
- 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.