A mock landing page for an ice cream shop with flavors geared toward computer programmers.
The purpose of this project was to create a landing page with a variety of content and a compelling user interface. I took this opportunity to continue refining my custom CSS skills and to consider how I would create an interesting page for an ice cream parlor.
Creating a responsive navbar using only custom CSS was a great opportunity for me. I have become accustomed to using navbars in Bootstrap and Bulma, which already have responsive capabilities, so it was interesting to consider all the code going on behind the scenes to achieve the desired functionality. I also learned more about fixed positioning (both the navbar and footer are fixed on the page) and flexbox. I used flexbox several times in this page to position several components properly, and that truly helped me understand it better.
I used JavaScript to dynamically generate hundreds of "sprinkles" (small, thin divs with randomly assigned colors and rotations). I have never done anything like that before with JavaScript, and so it was such a great experience to think through how I could use JavaScript to create a desired effect.
Additionally, I learned how to change a cursor to a custom image. To create a waffle cone texture for the footer, I used Canva to rotate and tile a waffle image from PNG Repo.
Overall, I am excited about what I learned in building this page and look forward to applying these concepts in future projects.
Please find the deployed page here: https://vruss14.github.io/coding-creamery
- HTML
- CSS
- Google Fonts
No installation steps are required to view this project. To view the page, visit the URL above. The application's source code can be found on GitHub here: https://github.com/vruss14/coding-creamery.
This project is a mock landing page and is not intended to copy the ideas and/or products of an existing business. This website includes responsive design and can be viewed on all devices.
Below is a screenshot of the desktop version of the deployed page:
Below is a screenshot of the deployed page on mobile:
Valerie Russell was the sole contributor to this project. Contact her at vruss14@gmail.com.