Hosted Link: https://mayankkatheriya.github.io/Major-Project-CSS/
Steps to open Hosted link on chrome:
- Step-1:
Click on the link - Step-2:
Clcik on this details button - Step 3
click here to open the webpage
- HTML: The HTML document is for a webpage titled "Major project." It includes several external resources like a CSS stylesheet ("styles.css") and Google Fonts. The page content is enclosed within the body tag.
Back to Top Button: There is a back-to-top button represented by an anchor tag with a class "back-to-top." It is linked to the section with the ID "home."
Navigation Bar (nav): The navigation bar consists of a logo image, a list of navigation links, and social media icons. It includes the following links:
Home
Intro
Services
Call Me
Projects
About (with a dropdown icon)
Contact
Social media icons for Facebook and Twitter
Font Awesome Icons: The code includes a script tag to load Font Awesome icons from the Kit. This provides access to icons such as Facebook and Twitter icons used in the navigation.
- CSS Universal Reset:
Resets margin, padding, and box-sizing for all elements.
Root Variables:
Defines custom color and font variables for consistent usage.
HTML Styles:
Enables smooth scrolling.
Sets a fixed height for the HTML element (1500px) and hides horizontal overflow.
Font Styles:
Applies the "Montserrat" font to headings and buttons.
Back-to-Top Button:
Creates a fixed position button for returning to the top of the page.
Styled with a circular background and an upward arrow icon.
Navigation Styles:
Defines styles for the navigation bar.
Uses flexbox for layout, aligning items and wrapping as needed.
Fixed position at the top of the viewport with a teal background.
Contains a logo, navigation links, and social icons.
Applies font styles to navigation items and adjusts spacing.
Handles hover and active states for navigation links.
Utilizes a "hamburger" icon for responsive design.
Social Icons:
Styles social icons within the navigation.
Displays icons with a background color and a clipped triangular shape.
Adjusts colors on hover.
Hamburger Icon:
Styles the "hamburger" icon with a white color and larger font size.
-
HTML: The code represents a section with the class "home" and the ID "home." Inside this section, there is a container containing a heading, a paragraph describing the company's focus, and a link labeled "Discover" that directs to another section with the ID "intro."
-
CSS:
Background: Uses a gradient overlay and image. Minimum height of 900px. Content is centered.
Container: 60% width, content centered using flexbox.
Heading: Large, bold, white text.
Animated Text: Cycles through "TEMPLATE," "SERVICES," "SOLUTIONS" using keyframes animation.
Paragraph: Open Sans font, 18px size, smoky white color, limited width.
Button: Teal background, white text, borders, rounded corners. Changes on hover.
This code creates an attractive home section with dynamic text and styled content.
- HTML: The code represents a section with the class "intro" and the ID "intro." Inside this section, there is a container containing two main parts. The first part includes a block of text with a subheading, a main heading describing business growth services, a couple of paragraphs explaining the challenges of starting or growing a business, a quote attributed to the CEO, and the CEO's name.
The second part contains a set of three cards, each representing a stage in the business growth process. Each card includes an icon, a heading describing the stage, and a paragraph providing information about that stage. The stages are "Environment Analysis," "Development Planning," and "Execution & Evaluation." Each card is enclosed in a hexagonal shape.
- CSS: Layout: Uses flexbox for alignment and responsiveness. Content is centered and wrapped.
Container: Contains text and image elements. Max width is 1160px. Uses flexbox for spacing.
Text Section: Left-aligned. Styled with different headings, paragraphs, and italic text.
Image Section: Right-aligned. Includes an image with hover effect.
Cards Section: Max width of 1160px. Contains individual card elements.
Card Styles: Each card is a column layout with a hexagon icon, title, and description.
- HTML:
The code represents a section with the class "services" and the ID "services." This section is divided into three rows, each containing different content.
Row 1:
The first row contains a container with two main parts. The first part includes a subheading, a main heading describing service packages, and a paragraph introducing the packages. The second part consists of three cards. Each card contains an image, a card body with a heading describing the service, a description paragraph, a list of service details, the starting price, and a "Details" button linked to the "Call Me" section.
Row 2:
The second row contains two parts. The first part is an image, and the second part is a container with details. Inside the container, there's a main heading, followed by a set of items with numbers and headings, each representing a different aspect of the service. The items are accompanied by paragraphs explaining each aspect.
Row 3:
The third row contains two parts as well. The first part is a container with details, including a title with three headings. Each heading is followed by a description of the corresponding concept. Below this, there's a heading, a paragraph about the services provided by Aria, and a set of progress bars showing different percentages related to business development topics.
Testimonials:
The last part of the section contains testimonials. There's a container with a main heading and a paragraph introducing customer testimonials. Below this, there's a testimonial list container containing multiple testimonial items. Each item includes an image, an italicized testimonial quote, and the name of the person giving the testimonial.
This section is designed to showcase Aria's services, their benefits, and customer testimonials.
- CSS:
Layout: Uses flexbox for alignment and responsiveness. Background color is a dull white.
Row 1: Contains introductory text and cards. Max width is 1500px.
Text Section: Center-aligned. Styled with headings and paragraphs.
Cards Section: Contains cards with images and descriptions. Flex layout with spacing.
Button: Positioned absolutely. Styled link with hover effect.
Row 2: Divided into two halves.
Image Section: Displays a background image.
Details Section: Contains container with title, items, and progress bars.
Row 3: Similar to Row 2, with different content.
Testimonials Section: Center-aligned. Styled headings and paragraphs.
Testimonial List: Scrollable container with testimonial items.
Testimonial Item: Contains image, name, and testimonial text.
- HTML:
Column 1:
The first column contains a text container with a section title, a heading explaining the purpose, and a paragraph guiding users to fill out a form to receive a personalized offer. Additionally, there's an unordered list with three list items, each containing an icon and a description of the steps users need to take.
Column 2:
The second column features a form with several form groups. Each form group contains an input element with various attributes, such as type, class, id, name, and required. There's a text input for the user's name, a text input for the phone number, an email input for the email address, a select input for choosing the service of interest, and a checkbox input for agreeing to Aria's Privacy Policy and Terms & Conditions. The form also includes a submit button labeled "CALL ME."
- CSS:
Layout: Uses flexbox for alignment and responsiveness. Background color is a light teal.
Container: Max width of 1140px, centered horizontally.
Row: Flexbox layout for columns, responsive design.
Column 1: Left-aligned content.
Section Title: Small, seagreen color.
Text Container: Margin and padding adjustments, styled headings and paragraphs.
Unordered List: Styled list items with icons.
Media Layout: Flexbox for aligning content.
Column 2: Right-aligned content.
Form Styles: Margin, padding, border styles for form elements.
Form Controls: Input and select styles, label animations.
Checkbox Styles: Checkbox and label styles.
Submit Button: Styled button with hover effect.
- HTML:
The code represents a section with the class "projects" and the ID "projects." It consists of a series of radio input elements, each associated with a label. These inputs allow users to filter project photos displayed on the page.
Structure:
The section contains several radio input elements with unique IDs ("check1" to "check5"). The first input is checked by default.
Within a container, there are two rows.
Row 1:
A single column with a section title and a heading.
Row 2:
A single column containing:
A top content area with labels corresponding to each radio input. These labels serve as filters.
A photo gallery that displays various project images along with their titles.
Filter Labels:
SHOW ALL
DESIGN
DEVELOPMENT
MARKETING
SEO
Project Images and Titles:
Online Banking
Classic Industry
BoomBap Audio
Van Moose
Joy Moments
Spark Events
Casual Wear
Zazoo Apps
This section showcases different project images along with their respective titles, providing users with the ability to filter projects based on various categories. The "SHOW ALL" label allows users to view all projects, while other labels categorize the projects by their nature.
- CSS:
This code defines styles for a "projects" section with the following features:
Layout: Utilizes flexbox and grid layout for alignment and responsiveness. Max width of 1140px, centered horizontally.
Row 1: Flexbox layout for alignment, centered content.
Headings: Center-aligned section titles and headings.
Row 2: Flexbox layout for images and labels, responsive design.
Labels: Styled labels for filtering image categories.
Photo Gallery: Grid layout for images, responsive scaling and hover effects.
Checkbox Behavior: CSS transitions based on checkbox selection.
Checkbox Styling: Hides checkboxes and uses labels for interaction.
- HTML:
The code represents a section with the class "team." This section showcases the members of a consulting team along with their roles and social media links.
Structure:
The section contains a container with two rows.
Row 1: A single column with a heading and a paragraph introducing the team.
Row 2:
A single column containing:
Multiple team member profiles.
Each team member profile consists of:
An image wrapper containing the team member's image.
The team member's name displayed as a paragraph.
The team member's role displayed as an h2 heading.
Social media icons, each represented as a hexagon and containing a Facebook and a Twitter icon.
Team Members:
John Whitelong
Role: General Manager
Image: team-1.png
Veronique Smith
Role: Business Developer
Image: team-2.png
Chris Zimerman
Role: Online Marketer
Image: team-3.png
Mary Villalonga
Role: General Manager
Image: team-4.png
Each team member's profile includes their image, name, role, and links to their social media profiles (Facebook and Twitter).
The section provides an overview of the consulting team's members and their roles within the organization.
- CSS:
This code defines styles for a "team" section with the following features:
Layout: Utilizes flexbox for alignment and responsiveness. Max width of 1140px, centered horizontally.
Row 1: Flexbox layout for section title and description.
Headings: Center-aligned section title and paragraph.
Row 2: Flexbox layout for team member profiles, responsive design.
Team Member Cards: Styled cards for displaying team members.
Image Hover Effect: Enlarges team member images on hover.
Skills Stack: Displays a hexagonal icon and skill label on hover.
This code creates a visually appealing "team" section that showcases team member profiles along with their skills using a hexagonal icon and hover effects.
- HTML:
This code represents a section with the class "about." The section provides information about the company's philosophy, goals, and achievements.
Structure:
The section contains a container with a single row.
The row is divided into two columns:
Column 1:
Contains an image container displaying an image related to the company.
The image has an alt attribute set to "about" for accessibility.
Column 2:
Contains a text container with the following content:
A section title with the text "ABOUT."
An h2 heading introducing the company's passion for delivering growth services.
A paragraph describing the company's goal of providing appropriate business growth services to help companies thrive.
An unordered list with two list items, each containing:
A square icon
A media body describing key features of the company's services.
A "counter" container with three "cell" divs.
Each "cell" div contains:
A counter value with a number.
A counter info description, such as "Happy Users," "Issues Solved," or "Good Reviews."
Counter Values:
Happy Users: 231
Issues Solved: 121
Good Reviews: 159
The "about" section provides a glimpse into the company's values, services, and achievements, highlighting its commitment to delivering growth services and positive outcomes.
- CSS:\
This code defines styles for an "about" section with the following features:
Layout: Utilizes flexbox for alignment and responsiveness. Max width of 1140px, centered horizontally.
Image and Text: Split layout with an image on the left and text content on the right.
Image: Responsive image with rounded corners.
Text Content: Styled section title, paragraphs, and icon lists.
Icon Lists: Utilizes Font Awesome icons for visual representation of features.
Counters: Styled counters with values and descriptions.
This code creates a visually pleasing "about" section that includes an image, text content, icon lists, and counters to highlight the key features of the website or service.
- HTML:\
This code represents a section with the class "contact." The section provides contact information and a contact form for users to get in touch with the company.
Structure:
The section contains a container with a single row.
The row is divided into two columns:
Column 1:
Contains a text container with the following content:
A section title with the text "CONTACT."
An h2 heading introducing the idea of getting in touch using the form.
A paragraph describing the options to contact the company and visit the office.
An unordered list with contact information:
An address with a location icon.
Phone numbers with phone icons.
Email addresses with an envelope icon.
An h3 heading with the text "Follow Aria On Social Media."
A series of spans with social media icons (Facebook, Twitter, Pinterest, Instagram, LinkedIn, Behance).
Column 2:
Contains a form with the following input fields:
A form group for the name with an input field.
A form group for the email with an input field.
A form group for the message with a textarea field.
A form group checkbox for agreeing to privacy policy and terms.
A form group with a submit button.
Users can input their name, email, and message, agree to the privacy policy and terms, and submit the message to get in touch with the company.
The "contact" section offers users a convenient way to reach out to the company, whether it's through contact information or by submitting a message using the form
- CSS:\
Here's an overview of the added styles for the "contact" section:
Layout: The section has padding at the top and bottom and a dull white background.
Container: The content is centered within a container with a max width of 1140px.
Text and Lists: The section contains headings, paragraphs, lists, and contact information.
Icon Styling: Utilizes Font Awesome icons for contact information.
Heading Styles: h2 and h3 headings have specific styles for color, font size, and line height.
Stack Icons: Hexagon-shaped stack icons for social media links with hover effects.
Contact Form: Styles for form inputs and textarea for user input.
Checkbox Styling: Styles for checkboxes and links within the contact form.
Form Label Animation: Styling for label animation when input fields are focused or contain content.
Button Hover: Hover effect for buttons.
These styles create a cohesive and visually appealing "contact" section with a contact form and information.
- HTML:\
This code represents the footer of a web page.
Structure:
The footer contains a container with two rows.
Row 1:
Divided into four columns (col-1, col-2, col-2, col-2).
Column 1:
Contains a text container with the class "about."
Includes a heading (h4) with the text "Few Words About Aria."
Contains a paragraph (p) with a class "white" describing the company's passion for delivering business growth services to startups and established companies.
Column 2:
Contains a text container.
Includes a heading (h4) with the text "Links."
Contains an unordered list (ul) with class "list-unstyled li-space-lg white."
List items (li) are links (a) with class "white" and href attributes pointing to "terms-conditions.php" and "#." (Note: "#" is a placeholder for the actual URLs.)
Columns 3 and 4:
Similar to column 2 but with different headings ("Tools" and "Partners") and link items.
Row 2:
Contains a single column.
Includes a paragraph (p) with the class "copyright" displaying the copyright information and the company name "Inovatik."
Includes a link (a) without an href attribute (placeholder) around the "Inovatik" text.
This footer section provides essential information, links, and partner details about the company. It also includes a copyright notice with a link to the company responsible for creating the website.