Scribd
Upload
4 views

Experiment 1

The document provides the HTML and CSS code for creating a web page resembling an Amazon clone. It includes a header with a logo, search bar, navigation items, a hero image, a product grid showcasing various categories, and a footer with links and copyright information. The CSS styles define the layout, colors, and responsive design for different screen sizes.

Uploaded by

devx.ankitx
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views

Experiment 1

The document provides the HTML and CSS code for creating a web page resembling an Amazon clone. It includes a header with a logo, search bar, navigation items, a hero image, a product grid showcasing various categories, and a footer with links and copyright information. The CSS styles define the layout, colors, and responsive design for different screen sizes.

Uploaded by

devx.ankitx
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

Experiment 1

Ques. Create a web page using HTML and CSS file.


Sol. index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Amazon Clone</title>
<link rel="stylesheet" href="styles.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
/>
</head>
<body>
<header>
<div class="header-top">
<div class="logo">amazon</div>
<div class="search-bar">
<input type="text" placeholder="Search Amazon" />
<button><i class="fas fa-search"></i></button>
</div>
<div class="header-right">
<div class="nav-item">
<span>Hello, Sign in</span>
<strong>Account & Lists</strong>
</div>
<div class="nav-item">
<span>Returns</span>
<strong>& Orders</strong>
</div>
<div class="cart">
<i class="fas fa-shopping-cart"></i>
<span>Cart</span>
</div>
</div>
</div>
<nav class="header-bottom">
<a href="#"><i class="fas fa-bars"></i> All</a>
<a href="#">Today's Deals</a>
<a href="#">Customer Service</a>
<a href="#">Registry</a>
<a href="#">Gift Cards</a>
<a href="#">Sell</a>
</nav>
</header>
<main>
<div class="hero">
<img
src="https://images.unsplash.com/photo-1607082349566-187342175e2f"
alt="Hero Banner"
/>
</div>
<div class="product-grid">
<div class="product-card">
<h2>Electronics</h2>
<img
src="https://images.unsplash.com/photo-1498049794561-7780e7231661"
alt="Electronics"
/>
<a href="#">Shop now</a>
</div>
<div class="product-card">
<h2>Fashion</h2>
<img
src="https://images.unsplash.com/photo-1483985988355-763728e1935b"
alt="Fashion"
/>
<a href="#">Shop now</a>
</div>
<div class="product-card">
<h2>Home & Kitchen</h2>
<img
src="https://images.unsplash.com/photo-1556911220-e15b29be8c8f"
alt="Home"
/>
<a href="#">Shop now</a>
</div>
<div class="product-card">
<h2>Books</h2>
<img
src="https://images.unsplash.com/photo-1495446815901-a7297e633e8d"
alt="Books"
/>
<a href="#">Shop now</a>
</div>
</div>
</main>
<footer>
<div class="footer-content">
<div class="footer-links">
<a href="#">Conditions of Use</a>
<a href="#">Privacy Notice</a>
<a href="#">Help</a>
</div>
<div class="footer-copyright">
© 2025, Amazon Clone, Inc. or its affiliates
</div>
</div>
</footer>
</body>
</html>

styles.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
header {
background-color: #131921;
color: white;
}

.header-top {
display: flex;
align-items: center;
padding: 10px 20px;
gap: 20px;
}

.logo {
font-size: 24px;
font-weight: bold;
color: white;
}

.search-bar {
flex: 1;
display: flex;
max-width: 700px;
}

.search-bar input {
width: 100%;
padding: 10px;
border: none;
border-radius: 4px 0 0 4px;
}

.search-bar button {
padding: 0 10px;
background: #febd69;
border: none;
border-radius: 0 4px 4px 0;
cursor: pointer;
}

.header-right {
display: flex;
gap: 20px;
align-items: center;
}

.nav-item {
display: flex;
flex-direction: column;
font-size: 12px;
}

.nav-item strong {
font-size: 14px;
}

.cart {
display: flex;
align-items: center;
gap: 5px;
}

.header-bottom {
background-color: #232f3e;
padding: 8px 20px;
display: flex;
gap: 20px;
}

.header-bottom a {
color: white;
text-decoration: none;
font-size: 14px;
}

.hero {
width: 100%;
height: 600px;
overflow: hidden;
position: relative;
}

.hero img {
width: 100%;
height: 100%;
object-fit: cover;
}

.product-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
padding: 20px;
margin-top: -200px;
position: relative;
}

.product-card {
background: white;
padding: 20px;
border-radius: 4px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.product-card h2 {
font-size: 21px;
margin-bottom: 15px;
}

.product-card img {
width: 100%;
height: 200px;
object-fit: cover;
margin-bottom: 15px;
}
.product-card a {
color: #007185;
text-decoration: none;
font-size: 14px;
}

.product-card a:hover {
color: #c7511f;
text-decoration: underline;
}

@media (max-width: 768px) {


.product-grid {
grid-template-columns: repeat(2, 1fr);
}

.header-right {
display: none;
}
}

footer {
background-color: #232f3e;
color: white;
padding: 30px 0;
margin-top: 40px;
}

.footer-content {
max-width: 1000px;
margin: 0 auto;
text-align: center;
}

.footer-links {
margin-bottom: 10px;
}

.footer-links a {
color: white;
text-decoration: none;
margin: 0 10px;
font-size: 14px;
}

.footer-links a:hover {
text-decoration: underline;
}

.footer-copyright {
font-size: 12px;
color: #ddd;
}

You might also like