Homepage for an e-commerce the Aloha Apparel. This website implement responsive design which adapt to different kind of screens.
This project follows the design on the assest folder. According to the three images whose follows different screen's types.
- Clone the project
- Open
index.htmlfile - Enjoy it!
- FlexBox: To create the layout of the main bar and product section.
- Style is in
style.css - Reset css from Meyer Reset
meyerReset.css - Flickity-docs for the carrousel get it from Flickity.In order to follow the design requirements, the Flickity functionalities were downloaded and the customize the width of the box to get the correct view on each version.
- Email validation using JavaScript
Due the difference screen's types the project was developed using FLEX-BOX.
- Create the DOM the page should follow.
<html>---<head>---<header>---<body>---<footer>
!
!
!
<section>SHOP <section>ABOUT<section>SHOP <section>UPDATES
- Create Mobile version first, width less than 600px`.
-
In most cases every section use flexbox, so items adapt the screen size.
-
For feature part I used Flickity to create the products carrousel, download the files and follow the steps.
-
Adapt to tablet and desktop version with the follow queries
@media screen and (min-width: 600px) { }
@media screen and (min-width: 1240px) { }
