Barbosa The Barber

Barbosa The Barber

Technologies Used: HTML, CSS


The site was built to serve as a singular place where my brother, Guilherme, who is a barber, could promote his business. By consolidating all the information in one place, we hope to attract new customers.


Features

The website consists of six pages, five of which can be accessed through the navigation menu. These include the Home, About, Services, Gallery, and Contact pages. The sixth page, a success page, is displayed once a user submits the form on the Contact page.


All Pages on the website have:

A responsive navigation bar at the top, with the Barbosa The Barber logo positioned on the left and links to the different pages floated to the right. The currently selected page is highlighted with a gold underline to indicate the user's location on the site.


Additionally, every page includes a footer with two centrally placed social media links for TikTok and Instagram. The footer also carries the text "COPYRIGHT © VITOR BARBOSA" to denote the ownership of the website.


Home Page.

Hero Image Section: This section includes a hero image that covers the page. It also has a box in the right corner that contains a phrase.

Why Cut with Me Section: This section has a centered H2 heading. It is then split into two; one side has an image of Guilherme standing, and the right side has a statement with a button to book underneath.

Review Section: This section includes multiple images, each of them representing a different review.

Tiktok Section: This section displays Guilherme's Tiktok feed.

About Page.

About me section. This section is split into two. The left side features an image of Guilherme, while the right side contains a title and a statement.

Services Page.

P Services We Offer section. This section contains a table that displays all the updated prices for each service that Guilherme offers as a barber.


Gallery Page.

Pictures Section. This section is a collection of images which showcase different cuts.

Contact Page.

Contact On Insta Section: This section, located on the left side of the page, contains a title and a paragraph. At the end of the paragraph, there's an Instagram button that will redirect the user to Guilherme's Instagram page.

Barber Info Section: Next, we have a section that displays the location and operating hours of the barber. The location is shown using Google Maps, and the hours are presented in a table.

Book Your Cut Section: Underneath everything, there's a form that allows the user to input their name, the type of haircut they want, and the day they want to get the haircut. Once they submit the form, they are redirected to the success page.

Success Page.

This page is simiply a thank you message and then a button to go home

Future Implementations.

Use javascript to fetch the feed but written in my code so I have a bit more control over the styles and also what it is doing.

Use javascript to hook up the form to some sort of service that will automacticly send an email to Guilherme telling him someone wants to book him.

GitHub Live Demo