Manik's Blog CS50: Final Project A brief overview of .sneakers (my CS50 Final Project). It is just a design sample with no backend server support. Dec 24, 2023 · 3 min read .sneakers The ultimate sneaker paradise! https://github.com/maniksharma17/.sneakers-store-ecommerce?tab=readme-ov-file#sneakers Video Demo: https://youtu.be/IEy3mR09E7I Description: My final project for Harvard CS50 is a "front-end only" sneaker website named ".sneakers". I used html, css, and javascript DOM manipulation to bring my imagination into reality. I developed this as part of my web development learning journey to enhance my front-end and designing skills. The e-commerce website is just a design sample and not a fully functional sneaker store. Contents: NAVBAR SLIDER FEATURE SECTION PRODUCT DESCRIPTION SECTION PAYMENT MODAL GALLERY FOOTER Navbar: The navbar top has the ".sneakers" logo, a transparent search bar, and a limited offer banner with a green bottom border. The bottom navbar has sneaker brand names (Air Force, Jordan, blazer, crater, hippie). Slider: The slider holds the product image along with title and price. It also holds a BUY NOW button. If you click on the button, it will redirect you to the product description section with a smooth transition. When you click on different brand names from the bottom navbar, the products in the slider changes accordingly. The product image, title and price is updated instantly. Feature Section: The feature section shows different features offered by the sneaker brand. It includes free shipping, gift cards, return policy and contact system. Each feature holds an image, a title and a short description. Product Description Section: The product description section contains a medium-sized picture of the sneaker along with the title and a detailed description of the product. It also shows the price of the selected product. There are various colour options available. When the user clicks on a certain colour, the sneaker image is updated. The user can also select between different sizes. There is a BUY button available which shows a smooth transition when the user hovers over it. Payment Modal: When the BUY button is clicked, a payment model appears on the screen which prompts the user for personal information as well as the card information. The user has to enter name, address and contact, and also the payment details. There is a PURCHASE button which shows a transition when the user hover on it. When the user clicks on PURCHASE checkout button, a message box appears on the screen which shows the purchase verification. There is a SEE MORE button on the message. When it is clicked, the message box closes and the user is redirected to the slider section. Gallery: The gallery section of the website shows vibrant and distinctive images of sneaker shoes parallel to each other. The bottom section of gallery shows a banner announcing winter arrivals and also contains a button which redirect the user to the beginning of the web page. Footer: The footer of the webpage contains two sections. The first section contains useful links which re-directs the user to the different webpages. The second section provides user option to subscribe to the sneaker newsletter and also provide social media handles for the sneaker brand. Read on web Add a comment © 2023 Manik's Blog 8 The Green, Ste 300, Dover, Delaware, 19901 Unsubscribe Publish with Hashnode