https://github.com/jaridnft/aloha-apparel-co
Header page for Aloha apparel company.
https://github.com/jaridnft/aloha-apparel-co
css flexbox font-awesome font-face html javascript jquery npm sass webpack
Last synced: 3 months ago
JSON representation
Header page for Aloha apparel company.
- Host: GitHub
- URL: https://github.com/jaridnft/aloha-apparel-co
- Owner: jaridnft
- Created: 2018-07-09T21:41:51.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2021-08-19T12:56:44.000Z (almost 5 years ago)
- Last Synced: 2025-06-30T04:46:00.856Z (about 1 year ago)
- Topics: css, flexbox, font-awesome, font-face, html, javascript, jquery, npm, sass, webpack
- Language: SCSS
- Homepage: https://jaridwarren.github.io/aloha-apparel-co
- Size: 89 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# "Aloha Apparel Co." Home Page
#### Author: Jarid [ ]
Home page for an apparel company, complete with swipable product carousel, fixed header, functional "Add to cart" buttons and a responsive design.
### Desktop & Mobile View Demo
## Motivation
Learning CSS3 flexbox, jQuery, smooth scrolling with JavaScript, and @font-face.
## Technology
- 
JavaScript ES6 / 
jQuery
- 
npm / 
Webpack / 
Babel
- 
Sass / 
CSS3
- 
HTML5
## Code Sample
The following adds a shadow to the header once the user has scrolled from the top of the page.
```javascript
$(function() {
$(window).scroll(function() {
if ($(window).scrollTop() === 0) {
$('header').css({ 'box-shadow': 'none' });
} else {
$('header').css({ 'box-shadow': '1.5px 3.5px 4px 0 #CCCCCCCC' });
}
});
});
```
## Setup
Download or clone repo, then run the following commands in terminal:
**Initialize NPM:**
`> npm init`
**Install Webpack:**
`> npm install`
**Build project:**
`> webpack`
**Build project for production (compression):**
`> webpack -p`
**Launch dev server to automatically update changes:**
`> webpack-dev-server`