{"id":18677921,"url":"https://github.com/kaushikshivam/natours","last_synced_at":"2025-11-07T09:30:30.348Z","repository":{"id":37839090,"uuid":"205554509","full_name":"KaushikShivam/natours","owner":"KaushikShivam","description":"Natours is a landing page for a travel website which lets you book nature tours","archived":false,"fork":false,"pushed_at":"2022-12-10T00:37:16.000Z","size":27749,"stargazers_count":2,"open_issues_count":14,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-27T21:13:47.925Z","etag":null,"topics":["clippath","css-animations","css-framework","css3","floats","grid-layout","html5","keyframe","landing-page-theme","landingpage","nature"],"latest_commit_sha":null,"homepage":"https://rawcdn.githack.com/KaushikShivam/natours/4689e752942b08a178655c7be225171b52959389/index.html","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KaushikShivam.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-31T14:26:09.000Z","updated_at":"2023-08-30T18:23:15.000Z","dependencies_parsed_at":"2023-01-26T01:15:36.931Z","dependency_job_id":null,"html_url":"https://github.com/KaushikShivam/natours","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KaushikShivam%2Fnatours","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KaushikShivam%2Fnatours/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KaushikShivam%2Fnatours/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KaushikShivam%2Fnatours/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KaushikShivam","download_url":"https://codeload.github.com/KaushikShivam/natours/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239525422,"owners_count":19653325,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["clippath","css-animations","css-framework","css3","floats","grid-layout","html5","keyframe","landing-page-theme","landingpage","nature"],"created_at":"2024-11-07T09:35:26.964Z","updated_at":"2025-11-07T09:30:30.293Z","avatar_url":"https://github.com/KaushikShivam.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Natours - Outdoor is where life happens\n\n\n[Natours](https://rawcdn.githack.com/KaushikShivam/natours/4689e752942b08a178655c7be225171b52959389/index.html) | Exciting tours for adventurous people\n\nNatours 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.\n\n![Natours Screenshot](screenshot.png)\n\n## Table of content\n- [Description](#description)\n- [Installation](#installation)\n- [Scripts](#scripts)\n- [Contact](#contact)\n\n\n\n## Description\nThis template uses the following:\n- ### Modern CSS \n  - ```clip-path```\n  - ```keyframes animations```\n  - ```background-clip```\n  - ```backface-visibility```\n  - ```background video```\n  - ```pop up using pure css```\n- ### BEM Methodology \n- ### Custom 4 column grid\n- ### SASS\n  - ```variables```\n  - ```nesting```\n  - ```parials and imports```\n  - ```mixins```\n  - ```functions```\n  - ```extends```\n- ### 7-1 project structure for SASS Files - \n  - ```base/```\n  - ```components/```\n  - ```layout/```\n  - ```pages/```\n  - ```themes/```\n  - ```abstracts/```\n  - ```vendors/```\n  \nA [build script](#scripts) is created to accomodate older browser compatibility\n  \n\n## Installation\n\n1. Clone the project to your local directory\n```\ngit clone https://github.com/KaushikShivam/natours.git\n```\n\n2. The project uses NPM for managing dependencies. Run npm install to install all the required dependencies\n```\nnpm install\n```\n3. Run the watch script to view live changes to your CSS\n```\nnpm run watch:sass\n```\n4. 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)\n\n\n## Scripts\nThe 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:\n\n### Watch live changes in development\n1. Watch live changes to the sass\n```\n\"watch:sass\": \"node-sass sass/main.scss css/style.css -w\"\n```\n\n2. Run Live-server for live development changes\n```\n\"devserver\": \"live-server --browser=firefox\"\n```\n3. Script to run both simultaneously\n```\n\"start\": \"npm-run-all --parallel devserver watch:sass\"\n```\n\nRun ```npm start``` to run the script\n\n### Build script for production\n\n1. Compile sass files\n```\n\"compile:sass\": \"node-sass sass/main.scss css/style.comp.css\"\n```\n\n2. Concat all the css files including font styles etc\n```\n\"concat:css\": \"concat -o css/style.concat.css css/icon-font.css css/style.comp.css\",\n```\n\n3. Add prefixes automatically to the modern CSS rules (supports last 10 years - Can be configured)\n```\n\"prefix:css\": \"postcss --use autoprefixer -b 'last 10 versions' css/style.comp.css -o css/style.prefix.css\"\n```\n\n4. Adds compression\n```\n\"compress:css\": \"node-sass css/style.prefix.css css/style.css --output-style compressed\"\n```\n5. Final Build process\n```\n\"build:css\": \"npm-run-all compile:sass concat:css prefix:css compress:css\"\n```\n\nRun ```npm run build:css``` to run the build script\n\n## Contact\nYou can contact me at:\n\n- [Portfolio](https://www.shivamkaushik.com)\n- [Email](mailto:shivamkaushikofficial@gmail.com)\n- [Linkedin](https://www.linkedin.com/in/kshivamdev/)\n- [Twitter](https://twitter.com/kShivamDev)\n- [Medium](https://medium.com/@shivamkaushikofficial)\n- [Angellist](https://angel.co/kshivamdev)\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaushikshivam%2Fnatours","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkaushikshivam%2Fnatours","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaushikshivam%2Fnatours/lists"}