INFOSYS PORTFOLIO

USING HTML & CSS

A PROJECT REPORT

Submitted by

MURALIDHARAN.M (621721104032)

ARJUN.S (621721104001)

VENKADAPATHI.V (621721104052)

in partial fulfillment for the award of the degree

of

BACHELOR OF ENGINEERING

in

COMPUTER SCIENCE AND ENGINEERING

MUTHAYAMMAL COLLEGE OF ENGINEERING,

RASIPURAM.

ANNA UNIVERSITY :: CHENNAI 600 025

NOVEMBER 2024
 ANNA UNIVERSITY :: CHENNAI 600 025

BONAFIDE CERTIFICATE

Certified that this project report “INFOSYS PORTFOLIO

USING HTML & CSS” is the bonafide work of“

MURALIDHARAN.M (621721104032)

ARJUN.S (621721104001)

VENKADAPATHI.V (621721104052)

” who carried out the projectwork under my supervision.

SIGNATURE SIGNATURE

Dr.C.Suganthi, M.E.,Ph.D., Mrs.S.Priya, M . E .

HEAD OF THE DEPARTMENT SUPERVISOR

Department of Computer Science and Department of Computer Science and

Engineering, Engineering,

Muthayammal College of Engineering, Muthayammal College of Engineering,

Rasipuram. Rasipuram.

Submitted for Anna University Project Viva Voce held on .

Internal Examiner External Examiner

 DECLARATION

We affirm that the project work titled “INFOSYS PORTFOLIO USING HTML & CSS”

being submitted in partial fulfillment for the award of B.E.,(Computer Science

and Engineering) is the original carried out by us. It has not formed the part of any
other project work submitted for award of any degree, either in this or any other
University.

(Signature of the candidates)

MURALIDHARA.M (621721104032)

ARJUN.S (621721104001)

VENKADAPATHI.V (621721104052)

I certify that the declaration made above by the candidates is true to the best of my

knowledge and belief.

(Signature of the Guide)

Dr.C.Suganthi,M.E.,Ph.D.,

Head Of The Departmaent,

Department of Computer Science and Engineering,

Muthayammal College of Engineering,

Rasipuram-637 408.
 ACKNOWLEDGEMENT

First of all, we would like to thank the Almighty for blessings and our
parents for their moral support given to us to complete our project successfully.

Our hearty thanks to Shri R.Kandasamy, Chairman, Muthayammal

Educational Trust & Research Foundation.

We express our hearty thanks to Dr.K.Gunasekaran, Ph.D.,FIE Secretary

and Managing Trustee for providing the necessary facilities.

We would also extend our deep gratitude and thanks to

Dr.P.Venugopal,Ph.D., Principal of Muthayammal College of Engineering for
his kind support and guidance.

We extend our deep pleasure and sincere thanks to

Dr.C.Suganthi,Ph.D., Head of the Department of Computer Science and
Engineering for her guidance and kind co-operation.

We wish to extend our sincere thanks to Dr.C.Suganthi,Ph.D., Head of

the Department, Department of Computer science of Engineering for her guidance
to complete the project.

We express our heartful gratitude and sincere thanks to Mrs.S.Priya,M.E.,

project coordinator for her valuable support.
 ABSTRACT

The Infosys Portfolio project documentation presents an overview of the

various technical competencies, software development practices, and
successful projects delivered by the developer during their tenure at Infosys.
This portfolio serves as a comprehensive record of the skills, tools, and
methodologies applied to real-world projects, demonstrating proficiency in
areas such as web development, mobile app development, cloud computing,
and AI-driven solutions.

This documentation highlights the key projects completed for clients across
diverse industries, focusing on the solutions delivered to meet client
requirements, the technologies leveraged, and the impact of these solutions. It
emphasizes the developer's ability to apply industry best practices,
collaborate with cross-functional teams, and deliver scalable, high-
performance systems.
 TABLE OF CONTENTS

CHAPTER NO TITLE PAGE NO

ABSTRACT V

1. INTRODUCTION 1

1.1 Objectives 2

1.2 Scope of the project 2

1.2.1.In-Scope 2

1.2.2.Out-Scope 4
1.3.Flowchart 5
2. Project Approach & Methodology 6

2.1. Project Approach 6

2.2. Project Methodology 6

2.3.Design Phase 6

3. Solution Architecture 7

3.1 . Solution Architecture 7

3.2. Explaination of the Code 7

 3.3.Key Technologies and Tools 8

4. PROGRAM

4.1. HTML Code 10

4.2. CSS Code 14

4.3Sample Output 22

5. Code Explaination 24

5.1.HTML 24

5.1.1.Head Section 24

5.1.2.Body Section 24

5.2.CSS 26

5.2.1.Global Reset 26

5.2.2.Body Styling 26

6. Challenges and Sollution 27

6.1.Responsive Design 27

6.2.Cross-Browser Compactibility 27

7. Conclusion 28

8. Reference 29
I
X
 CHAPTER 1

1.INTRODUCTION

As a software engineer at Infosys, I have had the privilege of working on a diverse

range of projects across different industries, leveraging cutting-edge technologies and
applying my technical skills to solve complex business problems. This Project Report
documents a selection of key projects I have worked on during my tenure at Infosys,
showcasing my role, the challenges faced, the solutions implemented, and the overall
impact these projects had on the clients.Throughout my experience at Infosys, I have
contributed to several high-impact projects involving web development, mobile
applications, cloud-based solutions, and artificial intelligence (AI). Each of these
projects was an opportunity to not only expand my technical expertise but also enhance
my problem-solving abilities, leadership skills, and my understanding of working in a
collaborative, client-centric environment.

This report aims to provide a detailed overview of the projects I have worked on,
highlighting the following key aspects:

1. Project Overview: A high-level description of each project, its objectives, and the
problem it aimed to solve for the client.
2. Technologies and Tools: The technical stack and tools used for the development
and deployment of each project, showcasing the depth of my technical knowledge.
3. Role and Responsibilities: An outline of my role in each project, highlighting my
contributions in terms of design, development, testing, deployment, and client
interactions.
4. Challenges and Solutions: The obstacles faced during the project lifecycle, and
the creative and technical solutions implemented to overcome them.

1
 5. Impact and Results: A summary of the results achieved, including any
performance improvements, cost savings, or business value delivered to the client.

1.1. Objectives

The primary objectives of the project were:

 To design and develop a user-friendly web application that could handle customer
transactions.
 To create an intuitive dashboard for real-time data analytics.
 To implement a secure login system for different user roles (Admin, User).
 To ensure that the application was scalable and could accommodate future feature
enhancements.

1.3.Scope of the Project for Infosys Portfolio

The Scope of the Project in an Infosys portfolio refers to the boundaries of the project,
including the deliverables, tasks, technologies, and timelines. It defines what is included
and excluded from the project, ensuring clarity on expectations and responsibilities.

Here’s an example of how to define the Scope of the Project for a project done at
Infosys in your portfolio:

1.3.1.Scope of the Project

Project Title: INFOSYS PORTFOLIO USING HTML & CSS
Client: Microsoft Corporation
Technology Stack: HTML,CSS, GitHub.
1. In-Scope
The in-scope section defines what will be delivered during the course of the project.
2
These deliverables are the core features that will be developed and implemented.
 Web Application Development:
o Design and develop a web-based project management system that allows the
client’s employees to track projects, manage tasks, and allocate resources.
 User Authentication & Authorization:
o Implement secure login and authentication features with role-based access
control (RBAC) for different user roles, such as admins, project managers,
and team members.
 Project Dashboard:
o Develop a real-time project dashboard that shows key project metrics,
progress, deadlines, and resource allocation.
 Task Management:
o Develop functionality to create, assign, and track tasks within the project.
Allow project managers to assign resources and set deadlines for tasks.
 Integration with Existing CRM System:
o Integrate the web application with the client’s existing Customer
Relationship Management (CRM) system to pull project-related data (e.g.,
client details, sales pipelines).
 Data Analytics & Reporting:
o Provide functionality to generate reports on project performance, resource
utilization, and deadlines. Include charts and graphs for visual
representation.
 Deployment on Cloud:
o Host the application on AWS, leveraging services like EC2 for server
hosting, S3 for storage, and RDS for database management.
 Testing & Quality Assurance:
o Perform functional and non-functional testing, including unit testing,
integration testing, and performance testing to ensure high-quality and
3
 scalable application delivery.
 Post-Go-Live Support:
o Provide post-deployment support and bug fixing for two months after the
go-live phase to address any user issues or system bugs.
1.3.2. Out-of-Scope

This section clearly defines what is not part of the project, helping to manage
expectations and prevent scope creep.

 Mobile Application Development:

o Development of a mobile app (iOS or Android) for the project management
system will not be included in this phase of the project.
 On-Premise Infrastructure Setup:
o The project will not involve setting up or managing on-premise
infrastructure. The solution will be cloud-based on AWS.
 Third-Party Integrations:
o Integration with third-party tools or services (e.g., external payroll systems,
marketing platforms) is out of scope for this phase.
 Data Migration from Legacy Systems:
o Migrating data from legacy systems (e.g., old project management tools) to
the new system will not be handled in this project. This will be considered
in a future phase.
 Customization of Existing CRM:
o Customization or modification of the client’s existing CRM system is out of
scope. The project will only focus on integration with the existing system.

4
FLOWCHART

5
 CHAPTER 2
2.Project Approach & Methodology for Infosys Portfolio

In any project, the approach and methodology define how the project will be executed,
managed, and delivered. For an Infosys portfolio, you can showcase the project
approach and methodology that aligns with Infosys' standards and best practices in
delivering successful IT solutions.

2.1. Project Approach Overview

The project approach at Infosys typically involves a structured and systematic approach
to deliver high-quality solutions to clients. This approach is centered on achieving
project goals efficiently and effectively while adhering to timelines, budgets, and client
requirements.

Key elements of an Infosys project approach include:

 Client-Centric Approach: Understanding the client's needs and designing the

solution based on those needs.

 End-to-End Project Lifecycle: From requirement gathering, design, development,

and deployment to post-deployment support and maintenance.

 Agile & Lean Methodologies: Adopting Agile practices to ensure flexibility,

iterative development, and continuous delivery of working software.

2.2. Project Methodology

Infosys uses a combination of various project methodologies depending on the

nature of the project, client requirements, and industry best practices. Some of the
most common methodologies are:
6
  Agile: Infosys embraces Agile methodology for projects that require flexibility,
frequent updates, and rapid delivery of features.

 Waterfall: For projects with clear, well-defined requirements, a Waterfall approach

may be used.

 DevOps: Used for projects that require continuous integration, continuous delivery
(CI/CD), and automation.

 Hybrid: In many cases, a hybrid model is employed, combining elements of Agile

and Waterfall to suit the project’s needs.

2.3.Design Phase
Objective: Define the technical and functional design of the solution.
 Activities:
o System Design: Architects and developers define the architecture,
technology stack, and system flow.
o UI/UX Design: For client-facing systems, UI/UX designers create
wireframes, prototypes, and design guidelines.
o Prototyping: Develop a prototype or proof of concept (PoC) to validate
the design.
Outcome:

 Technical Architecture: Detailed diagrams and specifications for system

architecture.
 UI/UX Designs: Mockups, wireframes, or prototypes for user interfaces.
o

7
 CHAPTER 3

3.1.Solution Architecture
If you're creating a Solution Architecture for a portfolio website using HTML and
CSS, the goal is to present a clear, organized, and visually appealing layout that explains
the architecture of a project or system. A Solution Architecture typically includes:
1. System Components: Describing the different layers or components in the
system.
2. Interactions: How components interact with each other.
3. Technologies Used: The stack or tools you used in the project.
4. Diagrams: Optional, but you can use visual representations like flowcharts or
diagrams to make it more intuitive.
Here’s an example of how you can document Solution Architecture for your portfolio
using HTML and CSS. This approach will include a section to describe the components,
a list of technologies, and a simple visual layout.

3.2.Explanation of the Code

HTML Structure:
1. Header: Contains a title and description of the architecture.
2. System Components: This section explains the key components of the solution
architecture like Frontend, Backend, and Database. Each component has a short
description and a list of technologies used.
3. Interactions: Shows how the frontend, backend, and database interact with each
other. In this example, a simple flow diagram is created using arrows.
4. Technologies Used: Lists the technologies involved in the architecture such as
HTML, CSS, JavaScript, Node.js, MongoDB, etc.
5. Footer: Includes copyright information.

8
CSS Styling:
 The design uses flexbox to align components horizontally in the System
Components section.
 Box shadows and rounded corners are used for the containers to make them
visually appealing.
 The interaction flow section uses arrows (→) to represent the communication
between components in a simple and clear way.
 Icons (✔️ and 🔧) are added before list items for visual appeal and to highlight
technologies used and the architecture components.

3.3.Key Technologies and Tools

Explanation of the Code:
HTML Structure:
1. Header: Contains a title (<h1>) and a brief description of the section.
2. Technologies Section: This contains multiple categories (e.g., Frontend
Technologies, Backend Technologies, Database, etc.).
o Each category has a <h2> heading and a list of icons representing the
technologies used in that category.
o Inside each category, there is a div with the class tech-icons which holds
individual technology icons (<img>).
o Each icon is wrapped in a div with the class icon, which contains the image
and a <p> tag for the name of the technology.
3. Footer: A simple footer with copyright information.
CSS Styling:
1. General Reset: Basic CSS reset to remove any default margins or padding.
2. Header Styling:
o The header has a background color (#2c3e50) with white text. It is padded
and centered with a border-radius for rounded corners.
9
 o The header title (<h1>) is large, and the paragraph (<p>) is slightly smaller.
3. Technologies Section:
o Categories: Each category (Frontend, Backend, Database, etc.) has a
margin-bottom to separate it from other categories.
o Tech Icons: The tech-icons container uses flexbox to arrange the
technology icons in rows and wrap them to the next line when necessary.
There’s also a gap between icons.
o Icon Styling: Each icon is styled to be a square with centered content. It has
a background color (#ecf0f1) and a box shadow for a card-like appearance.
It also has a hover effect to slightly lift the icon when the user hovers over
it.
o Icon Images: The images are resized to 50px by 50px and centered inside
the div.
4. Footer Styling: The footer is styled similarly to the header, with a background
color and centered text.

Additional Ideas for Enhancing the Key Technologies Section:

1. Icons and Images:
o Use recognizable icons for each technology. You can find high-quality, free
icons on sites like FontAwesome or Iconfinder.
o Alternatively, use logos of technologies (such as the official React, Node.js,
or AWS logos) to make the section visually appealing and familiar to
viewers.
2. Animations and Hover Effects:
o Add more interactive hover effects to icons, such as changing the
background color, rotating, or scaling the icons. This adds a dynamic feel to
the portfolio.

10
 CHAPTER 4
PROGRAM:

HTML Code:

<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Company Portfolio</title>
<link rel="stylesheet" href="port.css">
</head>
<body>

<!-- Header Section -->

<header>
<div class="container">
<h1 class="logo">Infosys</h1>
<nav>
<ul>
<li><a href="#about">About Us</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
11
 </header>

<!-- Hero Section -->

<section class="hero">
<div class="container">
<img src="infosys-logo-infosys-icon-free-free-vector.jpg" height="5%"
width="50%">
<h2>Welcome to Infosys</h2>
<p>Your partner in success. We help your business grow with innovative
solutions.</p>
<a href="#contact" class="cta-btn">Get in Touch</a>
</div>
</section>

<!-- About Us Section -->

<section id="about" class="about">
<div class="container">
<h2>About Us</h2>
<p>CompanyName is a leading provider of top-tier solutions for businesses of all
sizes. With years of experience and a dedicated team, we offer unmatched quality and
reliability.</p>
</div>
</section>

<!-- Services Section -->

<section id="services" class="services">
<div class="container">
<h2>Our Services</h2>
12
 <div class="service-list">
<div class="service-item">
<h3>Web Design</h3>
<p>We design responsive and visually appealing websites that help you stand
out.</p>
</div>
<div class="service-item">
<h3>Branding</h3>
<p>Our branding solutions create a strong identity for your company in the
market.</p>
</div>
<div class="service-item">
<h3>Digital Marketing</h3>
<p>We create custom marketing strategies to grow your business online.</p>
</div>
</div>
</div>
</section>

<!-- Portfolio Section -->

<section id="portfolio" class="portfolio">
<div class="container">
<h2>Our Work</h2>
<div class="portfolio-items">
<div class="portfolio-item">
<img src="images.png" alt="Project 1">
<p>Project 1</p>
</div>
13
 <div class="portfolio-item">
<img src="download.png" alt="Project 2">
<p>Project 2</p>
</div>
<div class="portfolio-item">
<img src="download.jpg" alt="Project 3">
<p>Project 3</p>
</div>
</div>
</div>
</section>

<!-- Contact Section -->

<section id="contact" class="contact">
<div class="container">
<h2>Contact Us</h2>
<p>Have a question or want to work with us? Get in touch with us!</p>
<form>
<input type="text" placeholder="Your Name" required="">
<input type="email" placeholder="Your Email" required="">
<textarea placeholder="Your Message" required=""></textarea>
<button type="submit" class="cta-btn">Send Message</button>
</form>
</div>
</section>

<!-- Footer Section -->

<footer>
14
 <div class="container">
<p>© 2024 CompanyName. All Rights Reserved.</p>
<ul>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Service</a></li>
<li><a href="#">Social Media</a></li>
</ul>
</div>
</footer>
</body></html>

CSS Code:
{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
line-height: 1.6;
background-color: #b89999;
color: #333;
}
/* Header Section */
header {
background-color: #333;
15
 color: white;
padding: 20px 0;
}

header .logo {
font-size: 1.8rem;
font-weight: bold;
text-transform: uppercase;
}

header nav ul {
list-style: none;
display: flex;
justify-content: center;
padding-top: 10px;
}

header nav ul li {
margin: 0 15px;
}

header nav ul li a {
color: white;
text-decoration: none;
font-size: 16px;
}

header nav ul li a:hover {

16
 text-decoration: underline;
}

/* Hero Section */
.hero {
background: #333 url('https://via.placeholder.com/1600x600') no-repeat center
center/cover;
color: white;
text-align: center;
padding: 80px 0;
}

.hero h2 {
font-size: 3rem;
margin-bottom: 20px;
}

.hero p {
font-size: 1.2rem;
margin-bottom: 30px;
}

.cta-btn {
padding: 10px 20px;
background-color: #f57c00;
color: white;
text-decoration: none;
font-size: 18px;
17
 border-radius: 5px;
text-transform: uppercase;
}

.cta-btn:hover {
background-color: #e67e22;
}

/* About Us Section */
.about {
padding: 40px 0;
background-color: #fff;
text-align: center;
}

.about h2 {
margin-bottom: 20px;
}

.about p {
font-size: 1.1rem;
margin-top: 20px;
}

/* Services Section */
.services {
background-color: #f4f4f4;
padding: 60px 0;
18
}

.services h2 {
text-align: center;
margin-bottom: 40px;
}

.service-list {
display: flex;
justify-content: space-between;
gap: 20px;
}

.service-item {
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
width: 30%;
}

.service-item h3 {
margin-bottom: 10px;
}

.service-item p {
font-size: 1rem;
19
}

/* Portfolio Section */
.portfolio {
padding: 60px 0;
background-color: #fff;
}

.portfolio h2 {
text-align: center;
margin-bottom: 40px;
}

.portfolio-items {
display: flex;
justify-content: space-between;
gap: 20px;
}

.portfolio-item {
width: 30%;
text-align: center;
}

.portfolio-item img {
width: 100%;
height: auto;
border-radius: 10px;
20
}

.portfolio-item p {
margin-top: 10px;
}

/* Contact Section */
.contact {
background-color: #f4f4f4;
padding: 60px 0;
text-align: center;
}

.contact h2 {
margin-bottom: 20px;
}

.contact p {
font-size: 1.1rem;
margin-bottom: 30px;
}

.contact form {
display: flex;
flex-direction: column;
gap: 15px;
max-width: 600px;
margin: 0 auto;
21
}

.contact form input,

.contact form textarea {
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
width: 100%;
}
.contact form button {
padding: 10px;
background-color: #333;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.contact form button:hover {
background-color: #555;
}
/* Footer Section */
footer {
background-color: #333;
color: white;
padding: 20px 0;
text-align: center;
}
22
SAMPLE OUTPUT:

23
24
 CHAPTER 4
4.Code Explaination
4.1.HTML
4.1.1.Head Section (<head>)
 Meta Tags:
o The <meta charset="UTF-8"> tag ensures the document uses the UTF-8
character encoding.
o The <meta name="viewport" content="width=device-width, initial-
scale=1.0"> ensures the website is mobile-friendly by controlling the layout
on smaller screens.
o The <meta http-equiv="X-UA-Compatible" content="ie=edge"> ensures
that the latest rendering engine is used in Internet Explorer.
 Title:
o The <title> tag sets the page's title in the browser tab to "Company
Portfolio."
 Link to External Stylesheet:
o The <link rel="stylesheet" href="port.css"> tag links to an external CSS file
that will define the styling of the page.
4.1.2. Body Section (<body>)
Header Section (<header>)
 This section contains a logo (in this case, "Infosys") and a navigation menu with
links to different sections of the page: "About Us," "Services," "Portfolio," and
"Contact."
 The navigation is wrapped in a <nav> element inside a .container div.
Hero Section (<section class="hero">)
 The Hero section typically contains a large introductory image or banner and a
brief welcoming message. Here, there's a logo image (infosys-logo-infosys-icon-

25
 free-free-vector.jpg) and a call-to-action (CTA) button that directs users to the
"Contact" section.
About Us Section (<section id="about">)
 This section provides a short description of the company or business, highlighting
their services and expertise. The section contains a heading and a paragraph about
the company.
Services Section (<section id="services">)
 This section outlines the services the company offers. It contains three "service-
item" divs, each with a title and description:
o Web Design
o Branding
o Digital Marketing
Portfolio Section (<section id="portfolio">)
 The portfolio section showcases some of the company's previous work. Each
portfolio item contains an image (representing a project) and a description. In this
case, placeholder images and project names ("Project 1", "Project 2", etc.) are
used.
Contact Section (<section id="contact">)
 This section includes a contact form that allows users to submit their name, email,
and a message. The form includes:
o An input field for the user's name.
o An input field for the user's email.
o A textarea for the user's message.
o A button to submit the form.
 The form doesn't specify a method or action, so it won't actually send a message
unless the backend is configured.
Footer Section (<footer>)
 The footer provides copyright information and links to privacy policy, terms of
26
 service, and social media pages. These links are placeholders and would typically
point to actual pages in a real website.

4.2.CSS
4.2.1. Global Reset (Universal Selector *)
Purpose: This is a "reset" rule that applies to all elements on the page (* targets all
elements).
 margin: 0 removes default margins applied by browsers.
 padding: 0 removes default padding applied by browsers.
 box-sizing: border-box ensures that padding and borders are included in the total
width and height of elements, rather than extending the dimensions.
4.2.2. Body Styling (body)
 font-family: Arial, sans-serif: Sets the font to Arial (a sans-serif font). If Arial is
unavailable, it will fallback to a generic sans-serif font.
 line-height: 1.6: Sets the line spacing for text. A value of 1.6 is a common choice
for readability.
 background-color: #b89999: Sets a light brownish-pink color (#b89999) as the
background color of the page.

27
 CHAPTER 5
5.1.Challenge: Responsive Design
Problem: The portfolio needs to work across various devices, such as desktops, tablets,
and mobile phones. On smaller screens, the layout may break or elements may not scale
properly, making the site look unprofessional.
Solution:
 Use CSS Media Queries to adjust styles based on the screen size.
 Implement a flexible layout with Flexbox or CSS Grid to ensure content
rearranges itself on smaller screens.
 Use relative units like rem, em, and percentages for widths, margins, and
paddings instead of fixed pixel values, so elements scale appropriately.
 Consider using a mobile-first design approach. Start by designing for mobile and
then progressively enhance the design for larger screens.

5.2.Challenge: Cross-Browser Compatibility

Problem: Different browsers may render HTML and CSS differently, causing
inconsistencies in layout, colors, and fonts.

Solution:

 Use CSS resets to neutralize browser default styles (like the universal selector * {
margin: 0; padding: 0; }).
 Test the site across major browsers (Chrome, Firefox, Safari, Edge) to identify and
fix any inconsistencies.
 Implement fallback fonts and colors. For example, if a custom font doesn’t load,
the browser should fallback to a default system font.

28
 CHAPTER 6
Conclusion:
Creating a well-designed and functional portfolio website using HTML and CSS
involves addressing a variety of challenges. By focusing on responsive design, visual
consistency, accessibility, performance optimization, and proper HTML structure, you
can create an effective and professional portfolio that reflects the company's brand and
ensures a positive user experience.

29
REFERENCES:

Link 1:
https://www.google.com/search?sca_esv=a9d980729aea7839&q=portfolio+reference+lin
k&tbm=vid&source=lnms&fbs=AEQNm0CFDpRHaDHkXm_YXueHTfHtrgIXUKlluA
CpCix4T5ZoUSz6e3GWv4zN_09JkP2cR-DwqD-
ER1CSuTjXzdXNKT0Wma9mNyum3oWLzhs1xt8u5N_8f3uUgStDs9UpKFAFlFGSO
MoqQM9HMiNsP9mioHh2RXyquw6CV17dtB6pod7Wqwuaoj8KLwF-5ybcxBC-
9vVePghwqzsfsWfHCa5dRS4yxLs8KA&sa=X&ved=2ahUKEwjg8NDhtNaJAxWfxzg
GHTJVJHYQ0pQJegQIFxAB&biw=1536&bih=695&dpr=1.25#fpstate=ive&vld=cid:52
27edae,vid:ocdwh0KYeUs,st:0

Link 2:

https://www.google.com/search?sca_esv=a9d980729aea7839&q=portfolio+reference
+link&tbm=vid&source=lnms&fbs=AEQNm0CFDpRHaDHkXm_YXueHTfHtrgI
XUKlluACpCix4T5ZoUSz6e3GWv4zN_09JkP2cR-DwqD-
ER1CSuTjXzdXNKT0Wma9mNyum3oWLzhs1xt8u5N_8f3uUgStDs9UpKFAFlFG
SOMoqQM9HMiNsP9mioHh2RXyquw6CV17dtB6pod7Wqwuaoj8KLwF-
5ybcxBC-
9vVePghwqzsfsWfHCa5dRS4yxLs8KA&sa=X&ved=2ahUKEwjg8NDhtNaJAxWfx
zgGHTJVJHYQ0pQJegQIFxAB&biw=1536&bih=695&dpr=1.25#fpstate=ive&vld
=cid:5dfb228a,vid:gNv2Vbt3bJM,st:0

Link 3:

https://www.google.com/search?sca_esv=a9d980729aea7839&q=portfolio+reference
+link&tbm=vid&source=lnms&fbs=AEQNm0CFDpRHaDHkXm_YXueHTfHtrgI
XUKlluACpCix4T5ZoUSz6e3GWv4zN_09JkP2cR-DwqD-
ER1CSuTjXzdXNKT0Wma9mNyum3oWLzhs1xt8u5N_8f3uUgStDs9UpKFAFlFG
SOMoqQM9HMiNsP9mioHh2RXyquw6CV17dtB6pod7Wqwuaoj8KLwF-
5ybcxBC-
9vVePghwqzsfsWfHCa5dRS4yxLs8KA&sa=X&ved=2ahUKEwjg8NDhtNaJAxWfx
zgGHTJVJHYQ0pQJegQIFxAB&biw=1536&bih=695&dpr=1.25#fpstate=ive&vld
=cid:25999e25,vid:5IBPvaJCXPk,st:0

30
31