My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more

Clone of Cult Fit Website

sheetal sindhu's photo
sheetal sindhu
·Aug 30, 2021·

2 min read

Cult-fit.png Hello, I hope you are doing great in your life. I would like you to introduce me first. I am Sheetal Sindhu, from Commerce Background. I have been learning Full Stack Web Development at Masai School. In this blog, I would like to share the journey of cloning Cult Fit that I and my colleagues have made in Construct week of Masai school. About Project

At Cult, It makes fitness is fun and easy. Our workouts can be done both at a cult center and at home with the help of do-it-yourself workout videos. Cult gives the best in technology to give a world-class experience. You can book classes, follow workout videos, Order food, buy sports Gear, Health care, and mind Therapy.

We used HTML and CSS for styling the website and some hover effects to the buttons on the page. JavaScript DOM and localStorage.

HTML5: It is used to build the basic structure of the website. All headings, Paragraphs, links, forms, etc. were structured by HTML.

CSS: It is used to add styling to the website. We used Advance CSS for Animation, Popup Modal window for login/Sign up, Payment, and for adding Address.

JavaScript: It is used to add logical functionalities to the webpages like the onClick function, DOM, and dynamic aspects of the webpage. We used localStorage to store products and Login Details. We have added all the functionalities.

Team Members

Some Snapshots of Website:

Landing Page: On Landing Page, It has Keywords animation in the top heading and the carousal effect of images. We achieved both functionalities.

image.png

Login/Signup Page: Users won’t be able to see products and add them to the cart without logging in or creating an account.

image.png

Store Page: It has all the kinds of sportswear for men, women and also footwear.

image.png

image.png

Cart Page: User can Increase and decrease the number of products on the cart page, we have added a voucher, the user will get a discount on the voucher. After, Add an address for placing order and Payment Process.

image.png

Add Address Page: The user needs to add an address first before placing an order.

image.png

Payment Page

image.png

image.png

This has been a great and wonderful experience. I’m so grateful for getting this opportunity, work with a collaborative team. There were some confusing situations that occurred while merging the pages. But Teamwork made it possible.

Thank You for reading.