provide the whole code html and combine css styling create a web page make the header seprated just like this page use it as a refrence. add find us page. make the home page background

$4$

$$images moving to show some of the work add some video link about the service. here is the detailed page Header:

Logo and Navigation: The header features a prominently displayed company logo on the left

$($

Roofing Co

$.$

$)$

$$and a navigation menu centered below it

$.$

$$The menu includes links to Home, About Us

$,$

$$Services$,$ Testimonials, Our Work, Pricing, and Contact Us

$.$

Call

$-$

to

$-$

Action: There is a Call Us button on the top right of the header for immediate contact, styled in orange with white text for visibility.

Hero Section:

Background: The hero section has a large background image of a roof, with a dark overlay to enhance text readability.

Content: It includes a bold headline

$("$

Reliable Roofing Services You Can Trust"

$)$

$$and a call

$-$

to

$-$

action button

$("$

Get a Free Quote"

$)$

$$encouraging users to get in touch.

About Us Section:

Content: This section provides detailed information about the company's experience, commitment to quality, and customer service. It highlights their mission, services, and expertise.

Styling: The background color is light orange

$($

#ffecb

$3)$

$,$

$$with text in dark brown to maintain consistency with the overall color scheme. The text is presented in a white box with rounded corners and a slight shadow for improved readability.

Services Section:

Content: Describes three main services: Roof Installation, Roof Repair, and Roof Maintenance. Each service has a heading, description, and an accompanying image.

Styling: Each service is presented in a light yellow box with rounded corners and shadow effects. Service descriptions are on the left, while images are on the right, creating a clean and organized layout.

Our Work Section:

Gallery: Showcases a gallery of images displaying past projects. Images are displayed in a flexible grid layout with margins for spacing.

Styling: The background is light beige

$($

#f

$9$

f

$9$

f

$9)$

$,$

$$and images are presented with rounded corners for a polished look.

Pricing Section:

Content: Lists three pricing packages with descriptions of what each package includes. Prices range from $

$499$

$$to $

$1499$

$.$

Styling: The pricing table has a light yellow background

$($

#f

$6$

e

$58$

d

$)$

$$with alternating row colors to differentiate the packages. Each pricing block includes a heading, price, and description.

Contact Us Section:

Form: Features a contact form with fields for name, email, and message. It includes a submit button styled in orange.

Additional Info: Provides the company's address, phone number, and email. There's also a placeholder for embedding a Google Map.

Styling: The form has a beige background

$($

#f

$8$

e

$8$

e

$0)$

$$and uses rounded corners and shadowing for visual appeal.

Footer:

Links: Includes navigation links to various sections of the site and social media icons.

Social Media: Icons for Facebook, Instagram, and X

$($

formerly Twitter

$)$

$$are included, though the links need updating.

Styling: The footer background is dark brown

$($

#

$3$

e

$2723)$

$,$

$$with white text and links for contrast.

Live Chat Button:

Positioning: A fixed, circular button positioned at the bottom

$-$

right of the page, styled in orange with a chat icon.

Functionality: Clicking the button opens a live chat window, providing users with immediate support.

Color Scheme

Primary Colors: Dark brown

$($

#

$3$

e

$2723)$

$,$

$$Orange

$($

#ff

$9800)$

$,$

$$Light Beige

$($

#f

$9$

f

$9$

f

$9)$

$,$

$$Light Yellow

$($

#ffecb

$3)$

$,$

$$and White.

Text Colors: Primarily dark brown for headings and orange for call

$-$

to

$-$

action elements.

Overall User Experience

The page is designed to be user

$-$

friendly, visually cohesive, and engaging. It features clear calls to action, a well

$-$

structured layout, and a consistent color scheme that enhances readability and aesthetics. The live chat button adds an interactive element for real

$-$

time customer support.