https://github.com/kadirkarabacak/natours-page

Natours is a landing page for Nature tours.
https://github.com/kadirkarabacak/natours-page

Last synced: about 2 months ago
JSON representation

Natours is a landing page for Nature tours.

• Host: GitHub
• URL: https://github.com/kadirkarabacak/natours-page
• Owner: KadirKarabacak
• Created: 2023-11-06T14:57:35.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-12-07T00:44:15.000Z (about 1 year ago)
• Last Synced: 2023-12-07T02:27:56.953Z (about 1 year ago)
• Language: SCSS
• Homepage: https://natours-page-k.netlify.app/
• Size: 31.5 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 
🌳 NATOURS PAGE

## ❔ About project 

* In this project i build a nature tours page with **Jonas Schmedthmann**.

* Live version of Natours Page 🟢 ▶  Natours-Page 


## 🧩 Structure 

* I used the **7-in-1 Sass** model to make it easier to develop and edit files.

* I used mixins for do not repeat code and easily include responsive breakpoints.

* I used scss files for variables and utilities which most used in project to don't repeat myself.

* Each component has its own file for easier access and development.

##  CSS properties i used in this project

* **::before** / **::after** / **::selection** / **:not(:last-child)** / **:focus:invalid** / **:placeholder-shown** / **:checked** /  🔻🔺 pseudo-elements 

* skew / transform / translate / rotate / scale / perspective / clip-path / filter /

* @keyframes for animations

* Grid and float for positioning

##  CSS & SASS features i used in this project

* Hamburger menu 

* Image overlay

* On :hover skewed headers

* Clipped sections

* Flip card effect and modal

* Personalized radio buttons

* And other cool :hover effects

* Each image and icon has a lower quality version of itself. These images are used to increase performance for devices with smaller screens.

## 🛠 Technologies i used while creating the project 

![Tech-icon](./tech-icons/html-icon.png) ![Tech-icon](./tech-icons/css-icon.png)  ![Tech-icon](./tech-icons/sass-icon.png) ![Tech-icon](./tech-icons/npm-icon.png)

## 
HEADER SECTION

![Natours-Page](readme-img/natours-1.png)

## 
ABOUT SECTION

![Natours-Page](readme-img/natours-2.png)

## 
FEATURES SECTION

![Natours-Page](readme-img/natours-3.png)

## 
TOURS SECTION

![Natours-Page](readme-img/natours-4.png)

## 
STORIES SECTION

![Natours-Page](readme-img/natours-5.png)

## 
BOOKING SECTION

![Natours-Page](readme-img/natours-6.png)

## 
FOOTER SECTION

![Natours-Page](readme-img/natours-7.png)

## 
NAVIGATION SECTION

![Natours-Page](readme-img/natours-8.png)

## 
MODAL SECTION

![Natours-Page](readme-img/natours-9.png)


## :phone: Contact

 

     Contact with me 

   


   

   
KADIR KARABACAK 

   

     


     Project's Link: NATOURS PAGE

     


     


     LinkedIn:  LinkedIn 

     


     Instagram:  Instagram account

     


     E-Mail:  [email protected]