This is an ecommerce website template for a jewelry brand Pardo by Mireia Pardo. The template ensures the potential user can see the latest products and information of the brands whereabouts aswell as contacting directly with the brand if needed.it also provides a selling online platform for all the products od Pardo by Mireia Pardo.
This website is a e-commerce front-end example template made mainly with HTML5 and CSS3 along with JS and Jquery.
This website uses HTML5, CSS3 and JS/jQueryto route viewers through the site. The site is styled with Bootstrap.The site can be viewed HERE
- Eye catching front page
- Sliding carousel
- Logo as home link.
- Blog/Newin/Contact clickable images in black and white that hover to color.
- Contact form with Formspree
- Clean not overcrowded navbar.
- Shopinsta section, mimicking the real instagram of the brand. This makes access to products spotted in the IG profile by the clients easy.
- Products sections in which the main element is the picture of the product.
- Hover effect with add to cart and product profile options.
- Links to several policies and information at the foter along with social media profiles of the brand.
- User login and personal panel in which to view former orders and wishlist along with personal data.
- Submit button so viewers can see how they scored on the quiz
- New in section
- Payment form template example.
- EN/ES version.
- HTML5 and CSS3, JS/jQuery
- Base languages used to create website
- Bootstrap
- We use Bootstrap to give our project a simple, responsive layout
- Fontawesome
- We use Fontawesome to give our project the icons.
- Google Fonts
- We use Google Fonts to give our project the fonts.
- Formspree
- We use Formspree to be able to send email through the contact form directly.
- All code used on the site has been tested to ensure everything is working as expected
- Site viewed and tested in the following browsers:
- Google Chrome
- Safari
- Site viewed and tested in the following devices:
- Iphone 7plus
- Iphone x
- Ipad
- Macbook 13" and 15"
- Samsung Galaxy
Testing in different devices i started using the console toggle device toolbar, to fix and scale the website for all the different screens. After doing this I realised that the display was all over the place for Iphone. This made me create a specific and new version for mobile. For this purpose I downloaded Xcode simulator and served the website via npm package serve to be able to access remotely through my Iphone.(Incompatibility of bg-attachment fixed with mobile devices).
- Navigate to the repository where you're setting up your deployments.
- Under your repository name, click Settings.
- Go to GitHub Pages section.
- Click and choose master branch.
- Click save.
- Firstly you will need to clone this repository by running the
git clone <project's Github URL>command - After you've that you'll need to make sure that you have npm installed
- You can get npm by installing Node from here
- After those dependencies have been installed you'll need to make sure that you have http-server installed. You can install this by running the following:
npm install -g http-server # this also may require sudo on Mac/Linux - Once http-server is installed run
http-server -c-1 - The project will now run on localhost
- Make changes to the code and if you think it belongs in here then just submit a pull request
- The photos used in this site were obtained from the clients database.
- The form design for the user login was an adapted version of the one found in Colorlib
- The information used to create this site (materials, sizes and the rest of the pdfs) were provided by the client Pardo by Mireia Pardo.