CLE Creamery & Floats Website

Mockup of the CLE Creamery & Floats website on a laptop.

This website was created using Bootstrap 5, HTML 5, and CSS 3. The goal of this project is to create an accessible and responsive site based on the provided name, CLE Creamery and Floats. The branding was established with a design identity based on Neapolitan ice cream and dairy cows.

The mock company was established as a mom-and-pop shop in northeast Ohio that has begun to expand its reach over the years. As the company grew larger, it needed to increase its reach and marketability. This website was created to better market their ice cream and additional merchandise. The site is a singular web page that provides links at the top and bottom to jump to the different sections. Customers can find a little “about us” section, the shop’s menu, fun activities on the farm, a free recipe for home, CLE Creamery’s promise to be sustainable, and new merchandise. There are also links to the company’s social media pages and contact information in the footer of the website in case clients prefer to use these methods of interaction. A comprehensive site is essential for any business in this day and age. It acts as a public face that anyone in the world can access on their phone, laptop, or tablet.

This site is simple and sweet to make sure maintaining and updating it would be easy for a growing company with a rotating ice cream menu.

Style Tile

Image of the website's style tile.


Image of the persona of a fictional client named Ava.
Image of the persona of a fictional client named Beatrice.
Image of the persona of a fictional client named Will.


Image of the website's wireframe.


Image of the CLE website sitemap.

Initial Version

Screenshot of initial menu and carousel design at the top of the website.
Screenshot of the about me section.
Screenshot of the first half of the menu section.
Screenshot of the bottom of the menu section.
Screenshot of the activities area.
Screenshot of the sustainability and merchandise sections.
Screenshot of the footer.

Final Version

Screenshot of the new menu and carousel area.
Screenshot of the updated about me section.
Screenshot of the new menu set up.
Screenshot of the new activities design.
Screenshot of the at home recipe directions.
Screenshot of the updated merchandise section.
Screenshot of the updated footer.