Coder Social home page Coder Social logo

deathook007 / hillsafari-frontend Goto Github PK

View Code? Open in Web Editor NEW
14.0 2.0 0.0 30.54 MB

Responsive static landing page for promoting tourism in the hills.

License: MIT License

HTML 35.85% SCSS 64.15%
html5 css3 css-grid css-animations css-grid-layout css3-animations sass babel

hillsafari-frontend's Introduction

HillSafari | Go where you feel most alive :)

Small Tour video of website

screenshot

  • A Fully Responsive static landing page for promoting tourism in the hills.

  • Pack your bags. We’re going on vacation!

That’s exactly what an effective travel website should make you feel.

It should activate the travel bug with vibrant imagery and vivid copy. And while photos can do a lot of the work in inspiring visitors, a travel site can’t accomplish its purpose without great web design.

screenshot

Description

Web design plays a major role in visitors’ first impressions of a business. In fact, in one study, when participants were asked why they distrusted a website, 94% of the comments were about design.

  • The website is made fully responsive without using any framework in first place.

  • Pure basis CSS3 and SCSS is used for learning purpose.

  • No fluid layout used for responsiveness like grids and flexbox.


screenshot

Install

Clone the repo and type following commands in terminal after opening the directory in IDE

  1. Install the necessary dependencies from npm by doing npm install in root directory.
  2. Use npm run start to start the functionality.
  3. use npm run build:css to build the css and start the server at local host 3030
  4. Enjoy the design !

screenshot

Features and Properties

  • Model-View-Controller (MVC) architectural model applied!
  • Font transformation on zoom-in zoom-out (3R Rule applied).
  • Advance CSS3 animations and hover effects in buttons, cards and form.
  • Advance css3 properties like clip, media query and animation used.
  • Custom checkbox button.
  • Responsive images and design using pixel density selection and new
  • Reusable and redable code for every element.

ScreenShots Below 👇

User Benifits Section-

screenshot

Reviews Section -

screenshot

Tour cards Section -

screenshot

Gallery Section -

screenshot

hillsafari-frontend's People

Contributors

deathook007 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.