http://wefashion.pearlwebhut.com/index1.html

http://wefashion.pearlwebhut.com/index2.html

How to use

• Designed 2 pages using the psd documemt provided provided.

• Both pages are developed using AngularJS and Foundation.

• Access them by reducing browser window width. Or from different devices.

First RWD Design index1.html

• When you will access index1.html, it will load products1 theme with products1.html as template using angular routing (please check routing code in app1.js file for first template).

Second RWD Design index2.html

• When you will access index2.html, it will load products2 theme with products2.html as template using angular routing (please check routing code in app2.js file for first template).

Use of Accordion• Since i am using foundation, so

accordion is available to all collapse and expend needs. Same i am using here to collapse and expend the left

• navigation. By clicking on any nav link in left nav, you can switch the products template design.

Use of Html5 form element & validation

• I am using Html5 form attributes like: email pwd etc with required, so if user attempt to submit the form it will show default validation of Html5. (it will show email is required if not entered, or email is invalid for abc@)

Use of AngularJS directives

• Using $scope service of angular, i am storing data in app js files and accessing them in index html file using angular directives like, ng-repeat, ng-scr, ng-hide, ng-show etc.

Search is Working !

• Try to search something. You will see its working ! because i am using a search method over $scope in app js files.

• When you make a search, it will check the current path and toggle the products template using routing and location.

Signup & Login Template

• I am using functions $scope.signup, to submit signup form and show the proper message. (Here we can have a rest call over $http service, to post the data). I am using functions $scope.login, to login and show the proper message. (Here also we can have a rest call over $http service, to post the data).

LocalStorage

• I am using localstorage for signup, login & logout functionality.

• Setting a key username, on signup & login, will show this name on right top.

• User can logout to clear this key from localstorage.

Use of CSS3 & Media Queries & Viewport Meta tag

• I am using css3 & media queries to handle different screen size or device view. I am using viewport meta tag to initialize window width as device width (width=device-width, initial-scale=1.0).

Social Media Buttons

• Social media buttons there to share the page on google+ & twitter, and pintrest.

• You can pin images on pintrest also, hover on image you will see pintrest icon at left top corner of image. Click on it to pin.

Thanks

• I can optimize the code more, for performance tuning and load on demand using RequireJS, but not using here to avoid complexity of code. I can do many more with it. thanks