Skip to content

3atallah/HTML_And_CSS_Template_01

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Cars | By 3atallah Documentation

Overview

"Cars | By 3atallah" is a website dedicated to showcasing a variety of vehicles, including cars, motorcycles, and trucks. It provides users with essential information about each vehicle and facilitates easy navigation to explore the options available.

Features

1. Header Navigation:

A logo and a responsive navigation bar.
Links to different sections: Cars, Motors, Trucks, and Contact Us.

2. Vehicle Categories:

  • Cars: Highlights electric cars like Byd Yuan Plus, Neta U EV, and Audi AQ-40 Etron.
  • Motors: Displays a variety of Yamaha motorcycles, including touring and beginner-friendly bikes.
  • Trucks: Features rugged and electric trucks like Ford Ranger and Maxus T90EV.

3. Contact Form:

Allows users to send inquiries or feedback.
Fields: Name, Email, Message.

4. Footer:

Displays copyright information.

File Structure

  • index.html: The main webpage structure.
  • CSS/style.css: Defines the styling of the webpage (external file linked in the HTML).
  • Img/: Contains images for logos, vehicles, and other visual elements.

Technologies Used

  • HTML: For structuring the website content.
  • CSS: For styling the webpage.
  • Image Resources: For displaying vehicle images and branding.

How to Use

Viewing the Website

Open index.html in any web browser to view the website.

Navigating

Use the header navigation bar to explore:

  • Cars
  • Motors
  • Trucks
  • and Contact Us sections.

Sending a Message

  1. Scroll to the "Contact Us" section.
  2. Fill out your name, email, and message in the form.
  3. Click Send Message.

Styling Changes

Modify CSS/style.css to change the design elements.

Updating the Logo

Replace the file at Img/Logo/logo.jpg with a new logo image.

Potential Improvements

  • Implement backend functionality for the contact form to store or send submitted messages.
  • Enhance user interactivity with JavaScript (e.g., filtering vehicles by type or price).
  • Make the website fully responsive for all device sizes.

Demo

https://3atallah.github.io/HTML_And_CSS_Template_01/