Scribd
Upload
37 views10 pages

Web 1

f1

Uploaded by

rathna
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
37 views10 pages

Web 1

f1

Uploaded by

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

Sri Saru Kumar S

953622205046

WEB ESSENTIALS
ASSIGNMENT – 1
44. Designing a webpage for a mobile shop that showcases mobile phones along with
their prices and includes zoom-in and zoom-out functionality for all views of mobile
images
Index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobile Shop</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head>
<body>
<header>
<h1>Mobile Shop</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#products">Products</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="products">
<h2>Our Mobile Phones</h2>
<div class="product-container">
<div class="product">
Sri Saru Kumar S
953622205046

<div class="image-container">
<img src="1.jpg" alt="Mobile 1" class="zoom">
</div>
<div class="details">
<h3>Mobile 1</h3>
<p>Price: $499</p>

<button class="add-to-cart">Add to Cart</button>


<button class="buy-now">Buy Now</button>
</div>
</div>

<div class="product">
<div class="image-container">
<img src="2.jpg" alt="Mobile 2" class="zoom">
</div>
<div class="details">
<h3>Mobile 2</h3>
<p>Price: $699</p>

<button class="add-to-cart">Add to Cart</button>


<button class="buy-now">Buy Now</button>
</div>
</div>

<div class="product">
<div class="image-container">
<img src="3.jpg" alt="Mobile 3" class="zoom">
</div>
<div class="details">
Sri Saru Kumar S
953622205046

<h3>Mobile 3</h3>
<p>Price: $799</p>

<button class="add-to-cart">Add to Cart</button>


<button class="buy-now">Buy Now</button>
</div>
</div>

<div class="product">
<div class="image-container">
<img src="4.jpg" alt="Mobile 4" class="zoom">
</div>
<div class="details">
<h3>Mobile 4</h3>
<p>Price: $599</p>

<button class="add-to-cart">Add to Cart</button>


<button class="buy-now">Buy Now</button>
</div>
</div>

<div class="product">
<div class="image-container">
<img src="5.png" alt="Mobile 5" class="zoom">
</div>
<div class="details">
<h3>Mobile 5</h3>
<p>Price: $899</p>

<button class="add-to-cart">Add to Cart</button>


Sri Saru Kumar S
953622205046

<button class="buy-now">Buy Now</button>


</div>
</div>

<div class="product">
<div class="image-container">
<img src="6.jpg" alt="Mobile 6" class="zoom">
</div>
<div class="details">
<h3>Mobile 6</h3>
<p>Price: $749</p>

<button class="add-to-cart">Add to Cart</button>


<button class="buy-now">Buy Now</button>
</div>
</div>

<div class="product">
<div class="image-container">
<img src="7.jpg" alt="Mobile 7" class="zoom">
</div>
<div class="details">
<h3>Mobile 7</h3>
<p>Price: $999</p>

<button class="add-to-cart">Add to Cart</button>


<button class="buy-now">Buy Now</button>
</div>
</div>
</div>
Sri Saru Kumar S
953622205046

</section>
</main>
<footer>
<p>Contact us: [email protected]</p>
<p>Follow us on social media: <a href="#">Facebook</a>, <a
href="#">Twitter</a></p>
</footer>
</body>
</html>
Styles.css:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

header {
background-color: #333;
color: white;
padding: 10px 0;
text-align: center;
}

header nav ul {
list-style-type: none;
padding: 0;
}

header nav ul li {
display: inline;
margin: 0 10px;
Sri Saru Kumar S
953622205046

header nav ul li a {
color: white;
text-decoration: none;
}

main {
padding: 20px;
}

#products {
overflow-x: auto;
white-space: nowrap;
padding: 20px 0;
}

.product-container {
display: inline-flex;
}

.product {
display: inline-block;
margin-right: 20px;
width: 250px; /* Adjusted the width to be more mobile-friendly */
border: 1px solid #ccc;
padding: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
background-color: #fff;
vertical-align: top; /* Ensures all products are aligned at the top */
Sri Saru Kumar S
953622205046

.image-container {
width: 100%;
height: 200px; /* Fixed height for consistency */
overflow: hidden;
}

.image-container img {
width: 100%;
transition: transform 0.2s;
}

.image-container img.zoom:hover {
transform: scale(2);
}

.details {
text-align: left; /* Changed to left-align for better readability */
margin-top: 10px;
overflow-wrap: break-word; /* Ensures text stays within the box */
}

button {
display: block;
width: 100%;
margin-top: 10px;
padding: 10px;
border: none;
background-color: #28a745;
Sri Saru Kumar S
953622205046

color: white;
cursor: pointer;
font-size: 16px;
}

button:hover {
background-color: #218838;
}

.buy-now {
background-color: #007bff;
}

.buy-now:hover {
background-color: #0056b3;
}

footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px 0;
position: fixed;
width: 100%;
bottom: 0;
}
Script.js:
document.addEventListener('DOMContentLoaded', function() {
const images = document.querySelectorAll('.zoom');
Sri Saru Kumar S
953622205046

images.forEach(image => {
image.addEventListener('mouseover', function() {
image.style.transform = 'scale(2)';
});

image.addEventListener('mouseout', function() {
image.style.transform = 'scale(1)';
});
});

const buyNowButtons = document.querySelectorAll('.buy-now');

buyNowButtons.forEach(button => {
button.addEventListener('click', function() {
alert('Purchase successful!');
});
});
});
Output:
Sri Saru Kumar S
953622205046

You might also like