There is nothing complicated about making a cup of instant coffee. Heat up a kettle of water, grab your favorite cup, measure a few scoops of instant coffee and stir in the hot water, and enjoy. Just like the making of a cup of instant coffee, you will find the navigation of our website simple.
When you think of coffee, you think dark, even if you are the type to pour milk or cream in your coffee, you first think about its bold brown color. We wanted our website to remind you of your favorite cup of coffee, and with a stretch of imagination, even its smell. Once on the home page users dive deep into a dark cup of coffee with coffee beans swirling around and morphing into the granules. Folgers and Nescafe, two of the leading instant coffee producers, inspired us to keep the dark brown, grey and yellow colors throughout the website. Users can easily navigate to other sections of our website by clicking at the top of of the home page on each tab, or by scrolling to the bottom of the landing page and navigating to each section by clicking the large icons that labels each section.
Making instant coffee is simple, but its algorithm and architecture are not. While we have highlighted the complexities behind its structure and composition, it was important that we explained the process as clearly as possible so you will note hyperlinks throughout these pages that provide additional information beyond what we provide on the website. Arguably, the most important use for coffee is its caffeine. But many people have little knowledge about how caffeine is introduced into the production of coffee, hopefully, our website will provide some insight.
Instant coffee has changed the way we do coffee. From the length of time it takes to make a cup, to where we are able to consume it, everything changed with the production of instant coffee. We hope users find the information highlighted on our website helpful in understanding the ways in which instant coffee plays an important role in our sociotechnical system.
Additional CSS
1.We use CSS to change the color of hyperlink from blue to year in order to adapt the colors in other pages.
a { color: #e5d01d !important; }
2.We use CSS to delete all the sidebars in every page to make the post with full width.
3.We use Plugins called Amazing Hover Effects to create the menu on the landing page.
Pictures
All the coffee pictures except the slide are from the unsplash.com, which provides beautiful and free photos.
The slide is made by us and some parts are cut from photos in unsplash.com as well.
