Barber Shop Website

A website for local small or big barber shop businesses. This design has all the basic necessity components for a successful business online presents. The website is reponsive and accessible on any mobile devices.

Link to the Website: https://codepen.io/hodin81/full/MWVVvBN

How It's Made:

Tech Used: HTML 5, CSS 3, and JavaScript

Tutorial Video from Easy Tutorial: https://www.youtube.com/watch?v=lBfshkPlMW8&t=221s

Lessons Learned:

• Learned to create a nav menu slider function by using addEventListener "click" and style via JavaScript.
• Learned to create and apply hover overlay text effect on images using opacity, transform: translateX(), and transition via CSS.
• Learned to create and apply hover tilting up effect on boxes using transform: translateY() via CSS.
• Learned to create and apply sliding hover effect on buttons using z-index, span, and transition via CSS.
• Learned to apply cferdinandi's smooth-scroll script JavaScript for smooth scrolling effect when using the navigation menu.
  • https://github.com/cferdinandi/smooth-scroll

My Addition to the Website:

• Added main.js file to create Nav Menu Slider function.
• Added icons from fontawesome v5.
• Added link to location text in the contact page which open a new page to show the exact location of shop on Google Map.
• Added "mailto" link to email text in the contact page which open a new emailing message page addressing to the email provided.
• Added addtional CSS styling for mobile viewport layout.

Other Examples:

Take a look at these couple examples that I have in my own portfolio:

• Kevin Portfolio Website: https://github.com/hodinsay/Kevin-Portfolio-Website/tree/master
• Din Portfolio Website: https://github.com/hodinsay/Din-Portfolio-Website