Web design + coding

c6 chocolates

Combining my love of food and design, c6 chocolates is a passion project and long-time dream of mine realized in 2017. While creating and selling handmade gourmet chocolates, the design portion of the project stretched beyond the physicality of each chocolate; I constructed a responsive web page to continue exercising my web design and coding muscles that’d evolved during my experience in the Front-End Development program at HackerYou.

An e-commerce wireframe from the school provided a loose foundation, but I added my own innovations to the original design with personalized flares to bring the composition to life. For the hero section, I pushed beyond my scope of comfort by using a carousel jQuery plugin. Other technical skills I put into practice in this project include:
– media query
– SCSS with Prepros
– flexbox
– form and transition
– shadow and overlay
– absolute/relative positioning
– image optimization

Single page responsive website

c6 chocolates website - home page c6 chocolates website - shop section c6 chocolates website - custom section c6 chocolates website - footer

Carousel with Vegas jQuery plugin in mobile view

c6 chocolates mbile home page carousel showing coolourful bonbons c6 chocolates mbile home page carousel showing squares of truffles c6 chocolates mbile home page carousel showing a piece of chocolate with a bunch of spices

I had to learn the art of cropping images to understand which aspect ratios are most optimal for different electronic devices.

Fade-in sign up form

slide in sign up form

Animated search area

keyframe enlarge search input area

To view the live site, click here.c6 chocolates Webpage (Opens in a new window)

To view the code on GitHub, click here.C6 Chocolates Webpage on Github (Opens in a new window)

PREVIOUS

/

NEXT