REPORT FILE OF MINI PROJECT

“Amazon Homepage 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(2022-2026)
Submitted By: Submitted To:
Group Members name Rashmi Richhariya
Name
1) Ashish Jaiswal
2) Shivam Gaur
3) Aditya Sharma
4) Vishnu Mishra

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 –“Amazon

Homepage 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) Ashish Jaiswal
2) Shivam Gaur
3) Aditya Sharma
4) Vishnu Mishra

Page|3
 CERTIFICATE
I ________________________________________________Enroll No.
______________________from B. Tech (CSE) III Sem, of Mangalmay Institute of Engineering&
Technology, U.P. hereby declare that the Mini Project (BCC351) entitled
_____________________________________________________submitted in partial fulfillment
of B.Tech Computer Science and Engineering to be awarded by Dr. A.P.J. Abdul Kalam Technical
University Lucknow is an original work and the same has not been submitted to any other
Institute for the award of any other degree.

Date: Signature of the Student

Certified that the Mini Project (BCC 351) submitted in partial fulfillment of B.Tech Computer
Science and Engineering to be awarded by Dr. A.P.J. Abdul Kalam Technical University Lucknow
by ___________________________________________Enrolment No.
_________________________has been completed under my guidance and is satisfactory.

Date: Signature of the Faculty Guide

Name of the Faculty Guide

Signature & Name of the Project Coordinator

Page|4
 ACKNOWLEDGEMENT
We express our sincere indebtedness towards our guide “Amazon Homepage
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) Ashish Jaiswal
2) Shivam Gaur
3) Aditya Sharma
4) Vishnu Mishra

Page|5
 INTRODUCTION
Welcome to the Amazon Homepage Clone Project 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
hierarchy,
Through aaccessibility, andHTML
well-structured semantic structure.
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
CSS

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

Page|21