Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kaushikshivam/natours
Natours is a landing page for a travel website which lets you book nature tours
https://github.com/kaushikshivam/natours
clippath css-animations css-framework css3 floats grid-layout html5 keyframe landing-page-theme landingpage nature
Last synced: 3 days ago
JSON representation
Natours is a landing page for a travel website which lets you book nature tours
- Host: GitHub
- URL: https://github.com/kaushikshivam/natours
- Owner: KaushikShivam
- Created: 2019-08-31T14:26:09.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T00:37:16.000Z (about 2 years ago)
- Last Synced: 2024-11-07T09:47:28.594Z (about 2 months ago)
- Topics: clippath, css-animations, css-framework, css3, floats, grid-layout, html5, keyframe, landing-page-theme, landingpage, nature
- Language: CSS
- Homepage: https://rawcdn.githack.com/KaushikShivam/natours/4689e752942b08a178655c7be225171b52959389/index.html
- Size: 26.5 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Natours - Outdoor is where life happens
[Natours](https://rawcdn.githack.com/KaushikShivam/natours/4689e752942b08a178655c7be225171b52959389/index.html) | Exciting tours for adventurous people
Natours is a professional and modern responsive website tempate for the Travel industry. The template can be used for apps such as Travel blogs, Tour bookings and more.
## Table of content
- [Description](#description)
- [Installation](#installation)
- [Scripts](#scripts)
- [Contact](#contact)
## Description
This template uses the following:
- ### Modern CSS
- ```clip-path```
- ```keyframes animations```
- ```background-clip```
- ```backface-visibility```
- ```background video```
- ```pop up using pure css```
- ### BEM Methodology
- ### Custom 4 column grid
- ### SASS
- ```variables```
- ```nesting```
- ```parials and imports```
- ```mixins```
- ```functions```
- ```extends```
- ### 7-1 project structure for SASS Files -
- ```base/```
- ```components/```
- ```layout/```
- ```pages/```
- ```themes/```
- ```abstracts/```
- ```vendors/```
A [build script](#scripts) is created to accomodate older browser compatibility
## Installation
1. Clone the project to your local directory
```
git clone https://github.com/KaushikShivam/natours.git
```
2. The project uses NPM for managing dependencies. Run npm install to install all the required dependencies
```
npm install
```
3. Run the watch script to view live changes to your CSS
```
npm run watch:sass
```
4. Open the index.html file in your browser to view the website in all its glory (Live-server is recommended to view live changes automatically)
## Scripts
The project uses [AutoPrefixer](https://github.com/postcss/autoprefixer), [Node-sass](https://github.com/sass/node-sass), [npm-run-all](https://www.npmjs.com/package/npm-run-all) etc to build the following scripts:
### Watch live changes in development
1. Watch live changes to the sass
```
"watch:sass": "node-sass sass/main.scss css/style.css -w"
```
2. Run Live-server for live development changes
```
"devserver": "live-server --browser=firefox"
```
3. Script to run both simultaneously
```
"start": "npm-run-all --parallel devserver watch:sass"
```
Run ```npm start``` to run the script
### Build script for production
1. Compile sass files
```
"compile:sass": "node-sass sass/main.scss css/style.comp.css"
```
2. Concat all the css files including font styles etc
```
"concat:css": "concat -o css/style.concat.css css/icon-font.css css/style.comp.css",
```
3. Add prefixes automatically to the modern CSS rules (supports last 10 years - Can be configured)
```
"prefix:css": "postcss --use autoprefixer -b 'last 10 versions' css/style.comp.css -o css/style.prefix.css"
```
4. Adds compression
```
"compress:css": "node-sass css/style.prefix.css css/style.css --output-style compressed"
```
5. Final Build process
```
"build:css": "npm-run-all compile:sass concat:css prefix:css compress:css"
```
Run ```npm run build:css``` to run the build script
## Contact
You can contact me at:
- [Portfolio](https://www.shivamkaushik.com)
- [Email](mailto:[email protected])
- [Linkedin](https://www.linkedin.com/in/kshivamdev/)
- [Twitter](https://twitter.com/kShivamDev)
- [Medium](https://medium.com/@shivamkaushikofficial)
- [Angellist](https://angel.co/kshivamdev)