This is a website project based on the Flowers Shop design from Michael D. It is intended to be developed using the technics and knowledge acquired through the HTML & CSS module of the main curriculum of the Microverse program.
- HTML5
- CSS3
- Font Awesome
- Google Fonts
To get a local copy up and running follow these simple example steps:
- Under the repository name, click the "Clone or download" green button.
-
Copy the URL given by clicking the clipboard button
-
Open a terminal window in your local machine and change the current directory to the one you want the clone directory to be made.
-
Type git clone and then paste the URL you previously copied to the clipboard
-
Change the current directory to the newly created folder
-
Now open the index.html file on your browser. Use the menu to go to the catalogue of products. By clicking on one product, you will be taken to the product page. You can test these three pages changing the width of your browser window. The content will fit either to desktop and mobile screen sizes.
See a live demo here
Watch a video with the presentation of the project here
This is an online flower shop that helps the user to find the best flowers to gift by asking him/her the price he/she wants to spend, the main color of the bouquet, and also the kind of event and who will go to receive the gift. Once the user finds the product that fits the selected criteria, is asked for the final order details, like the number of flowers, the type of delivery, to finally place the order.
This page shows a beautiful bouquet and describes the type of work they offer to their customers. The big button at the left lets the user start the buying process or, if preferred, he/she can scroll down to find product samples, testimonials from other customers, or the map with the physical location of the store.
Once in this place, the user can select the products that best match his/her preferences by choosing the desired options in the filter on the left side. This action results in a grid of pictures on the right side to let the user choose between his/her favorite products.
The product page offers the user a big photo of the chosen product, and the final details to place the order. It also shows to the user, related products that can be of his/her interest
The goal of this site is to let the user buy from anywhere. The responsive behavior makes the pages to fit any screen size. The following is the appearance of the pages on small screens
Homepage Catalogue Product page
- Use of actual form elements instead of placeholders
- Javascript for calculating the order total
- W3C validator for HTML
- Stickler for "Style Matters" stickler
- Stylelint for VSCode
to Michael D for his beautiful design
👤 Carlos Santamaría
- Twitter: @Flakster
- Github: @Flakster
- Email: contact@carlossantamaria.co