REPORT FILE OF MINI PROJECT

E-Commerce Website Clone

Submitted in partial fulfillment of the requirement
For the award of degree Of BACHELOR OF
TECHNOLOGY

Dr A P J ABDUL KALAM TECHNICAL UNIVERSITY , LUCKNOW

SESSION(2023-2027)
Submitted By: Submitted To:
Group Members name Rashmi Richhariya
1. Shreeyum Kumar

Page|1
 Table of Contents
S.no. Description Pageno
1. DECLARATION 3
2. CERTIFICATE 4
3. ACKNOWLEDGEMENT 5
4. INTRODUCTION 6
5. OBJECTIVE AND SCOPE 7
6. TECHNOLOGY BUCKET 8
7. APPENDICES(Implementation Code) 9-12
8. OUTPUT SCREEN 13

Page|2
 DECLARATION

We here by declare that the project entitled : E-commerce

Website Clone,which is being submitted as Mini
project of 3rd semester in Computer Science &
Engineering to MANGALMAY INSTITUTE
OF
ENGINEERING AND TECHNOLOGY, G.B.Nagar(U.P) is an
authentic record of our genuine work done under the
guidance of Rashmi Richhariya of Computer Science &
Engineering , Mangalmay Institute of Engineering and
Technology ,G.B Nagar(U.P.).

Date: dd/mm/yyyy Group Member name

Place: Greater Noida 1. Shreeyum Kumar

Page|3
 ACKNOWLEDGEMENT
We express our sincere indebtedness towards our guide “E-Commerce website
Clone” of Computer Science and Engineering, Mangalmay institute of
Engineering and Technology for his valuable suggestion, guidance and
supervision through out the work. Without his kind patronage and guidance,
the project would not have taken shape. We would also like to express our
gratitude and sincere Regards for his kind approval of the project.Time to time
counseling and advises.
We would also like to thank our HOD/Coordinator___________________
Department of Computer Science and Engineering

We owe sincerely thanks to all the faculty members in the department of

Computer Science and engineering
For their kind guidance and encouragement time to time.

Group member name

1. Shreeyum Kumar

Page|5
 INTRODUCTION
Welcome to the E-Commerce Website Clone In this project, I have
developed a clone of the Amazon homepage using only HTML and CSS to
demonstrate my understanding of front-end web design and
development. The objective was to replicate the key features of the
Amazon homepage, such as the search bar, navigation menu, product
listings, promotional banners, and footer, all while focusing on design
accuracy and layout structure.
To achieve this, I utilized HTML for content structuring and CSS for
styling and layout. The design is fully responsive, ensuring that the page
adapts seamlessly to different screen sizes, from desktop to mobile
devices. This was accomplished through the use of CSS media queries,
allowing the page elements to adjust dynamically, providing a
consistent user experience across various devices.
Throughout the development process, I concentrated on writing clean,
maintainable code and adhering to best practices in web design. By
using CSS for layout management (such as Flexbox and Grid), I was able
to create a visually appealing and functional interface. The project also
emphasized the importance of typography, spacing, and color choices to
ensure a polished, user-friendly design.
This Amazon homepage clone project allowed me to hone my skills in
responsive web design and HTML/CSS development. It also deepened
my understanding of real-world web layout principles and the
significance of user experience and accessibility in modern web design.

Page|6
 OBJECTIVE AND SCOPE
Objective : The primary objective of this project was to develop a static
clone of the Amazon homepage using only HTML and CSS, without
incorporating JavaScript. The goal was to replicate the basic structure,
layout, and design elements such as the navigation bar, search bar, product
listings, banners, and footer. However, dynamic features such as live search,
interactive elements, or a shopping cart were excluded since they require
JavaScript.

SCOPE:
The scope of the project focuses on the visual and structural aspects of the
Amazon homepage. This includes creating a responsive design using CSS media
queries to ensure the page adapts seamlessly across devices, such as desktops,
tablets, and mobile phones. The layout was constructed using CSS Flexbox and Grid,
providing a clean and organized display. Styling and layout were carefully matched to
Amazon’s homepage, emphasizing user experience and accessibility. No back-end or
JavaScript functionality was included, focusing purely on front-end design.

Page|7
 Technology bucket
HTML
HTML (Hypertext Markup Language) is the backbone of this project, used to
structure and organize the content. It defines key elements such as the page
header, navigation menus, product listings, banners, and footers. Each
section of the page is represented using appropriate HTML tags, such as
<header>, <nav>, <section>, and <footer>. HTML provides the
foundational framework for the webpage, ensuring proper content

Through a well-structured HTML layout, the project ensures clear

organization and easy readability, which is essential for a functional and
user-friendly webpage.

CSS
CSS (Cascading Style Sheets) was used to style the webpage, controlling the
visual appearance and layout. It enhances the HTML structure by applying
colors, fonts, spacing, and positioning to the content.
CSS Flexbox and Grid were utilized to create a responsive and organized
layout that adapts to various screen sizes. CSS media queries ensure the
design is responsive, providing an optimal viewing experience across
devices such as desktop, tablet, and mobile.

By using CSS, the project achieves a modern, polished design while

maintaining consistent user experience across different platforms.

Page|8
 Appendices
Implementation Code
HTML

Page|9
Page|10
Page|10
Page|10
C SS

Page|10
Page|10
Page|10
Page|10
Page|10
Page|10
OUTPUT SCREEN

Page|21