Notes

HTML5 Logistics Website

 

Task Description:

 

Your task is to create an HTML5 webpage for "ABC Logistics" following the provided structure and content. Below are the detailed instructions to replicate the webpage:

HTML File:

 

Write script in HTML file named index.html.


Title and Stylesheet:


Inside the head section of the HTML file, set the title as "Logistics"

Link the provided stylesheet styles.css located in the same directory to style the webpage.


Header Section:

 

Create a header element with a class of "header"
Inside the header, add an h1 element with the text "ABC Logistics"
Create a navigation bar using the nav element.

 

Within the navigation bar, place the following navigation links using anchor elements (a):

"TRACK" 
"SERVICES" 
"ABOUT US" 
"SIGNUP" 


Note: If the user clicks on the navigation link, it should go to the respective section.


Main Content Sections:

 

Section 1 - Track Shipment:

 

Create a section element with a class of "trackShipment" and an id of "trackShipment".
Inside this section, create a div element with a class of "card".
Add an h1 element with the text "Track Your Shipment".
Insert a p element with the text "Tracking made easy with ABC Logistics".
Create a form element.
Inside the form, add an input element with the type attribute set to "text" and a placeholder attribute with the text "Enter invoice number or phone number".
Include a button element with the text "Track".


Section 2 - Services:

 

Create a section element with a class of "services" and an id of "services".
Add an h1 element with the text "Our services are for you".
Create a div element with a class of "category".
Inside the div, create four figure elements as follows:
For each figure, include an img element with a source attribute pointing to respective image files (truck.png, aeroplane.png, ship.png, warehouse.png).
Add a figcaption element with an h4 element containing the service title and a p element with a brief description.
A title (e.g., "Road Freight", "Air Freight Service", "Sea Freight" and "Warehouse Service").
For all service the description is "Lorem, ipsum dolor sit amet consectetur adipisicing elit."
Include a button with the text "Read More".


Section 3 - More About:

 

Create a section element with a class of "moreAbout" and an id of "moreAbout".
Add an h1 element with the text "Experienced Drivers & Quality Fleet".
Insert a p element with the text " Our qualified drivers and best-in-class fleet are the reasons of our success and our customers satisfaction. They make us #1 logistic company worldwide.".
Include a button element with the text "Learn More About ABC Logistics".


Section 4 - About Us:

 

Create a section element with a class of "aboutus" and an id of "aboutus".
Add an h2 element with the text "Recent Facts About Us".
Create a div element with a class of "details".
Inside the div, create three sub-divs with the class name of parcels, countries, people each containing:
An img element with source attributes pointing to respective image files (parcel_icon.png, globe.png, work.png).
An h2 element with the provided numeric data.
A p element with corresponding information.

 

Example:

parcels -> 1,258,247 Parcels delivered per year
countries -> Over 220 Countries and territories served
people -> 147,000 People working at ABC Logistics

 

Section 5 - Signup:

 

Create a section element with a class of "signup" and an id of "signup".
Add a form element.
Within the form, include the following elements:
An h3 element with the text "Signup".
Two input elements with type attributes set to "text" for "First Name" and "Last Name," both marked as required.
A select element with an option for "Gender" (selected and disabled), and two more options for "Male" and "Female".
An input element with type "email" for "Email," marked as required.
An input element with type "number" for "Phone," marked as required.
A button element with type "submit" and the text "Submit".

 

Footer Section:

 

Create a footer element.
Inside the footer, create a section element with a class of "contactus".
Within the "contactus" section, create three div elements with classes "address," "mail," and "rights".
Place the company address in a pre element within the "address" div.
Add a p element with the company's email address in the "mail" div.
Include a p element with the text "ABC Logistics. All rights reserved." in the "rights" div.

 

Note: Ensure that the provided image files (truck.png, aeroplane.png, ship.png, warehouse.png, parcel_icon.png, globe.png, work.png) are correctly referenced in the img elements.

 

Your goal is to create the HTML structure and content as specified in the instruction.

 

Note: Use lowercase HTML5 tags only.

 
Screenshots:
Instructions to work in online IDE

 

Navigate to the "HTML/app" folder to find "index.html"
The project dependencies are already installed . Use VScode to edit the files and complete the challenge
To run the application: Open a terminal in the Project folder "kickoffs-html-challenge"and and execute the command -> sh run.sh 
To run the test cases: Open a terminal in the Project folder "kickoffs-html-challenge" and execute the command -> sh test.sh.
After completion, click Submit.