This project is a clone of Sephora.nnnow.com Sephora India online is a powerful beauty presence in the digital space, thanks to its unparalleled assortment of prestige products in every category, unbiased service from beauty experts, interactive shopping environment, and innovation.
The tech Stack we used for creating this webiste are:-
- HTML
- CSS
- Javascript
- Node JS
- Express
- MongoDB
The Landing page of sephora.com displays the navigation bar for products, Learn about a particular product, pricing for the product, Cart Page and the login & signup part, along with the Popular in Various categories.
We have designed the carousel functionality of products using javascript as assigning the event listeners to the arrow buttons and containing each product in a different container and put all the products in a container at last and overflow the image and user the attributes like visibility hidden and trigger on the event listeners. Even if event listeners are not triggered product is carousel after a set interval of time using the Setinterval function. We used javascript to append various products in HTML page using an array of objects along with CSS for styling the containers
There have no account to first to create the acount. There be need to E-mail account and the mobile no. also then set the strong password. then click the signup. they also redirect to login page.
After the successful completion of the signup, your email and password are stored in the local storage and you can log in with that credentials, if the email and password are incorrect it will fail the validation and you cannot log in to the website.
The product page contains various products from various categories which could be filtered using multiple filters present on-page to select from.
whenever any product is added to the cart, the Cart page display no. of products added to the cart and a container containing the product you added to the cart. From where you can change the quantity of a particular product. It also has a coupon code section where you can get a 30% discount by typing " masai30 " on the product. Besides that, you can place an order by clicking on the "Place Order" button.
The address is taken from the user and sent to localStorage so this address could be used further used in the payment page to select from multiple addresses entered. The idea was to make a payment page that is not functional, but the carrier can take the dummy input that the user provides. basically, it was just a dummy Static page with a minimum amount of CSS present.
This is the footer part of my website. There have some data to our site and their products.
