Scribd
Upload
10 views8 pages

Kavin Ssa2

Uploaded by

notkowsik007
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
10 views8 pages

Kavin Ssa2

Uploaded by

notkowsik007
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/ 8

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

SELF STUDY ASSIGNMENT – 2

(REAL TIME PROBLEMS)

CGB1101 - Web Application Development

Name : KAVIN. N

Register No. : CSE073

Year / Sec : I / C4

Marks Awarded:

Technology/ Solution Conclusion


Descriptive Problem
Objective Methodology and and Total
Headline Analysis
(3) Adopted Results References (20)
(2) (4)
(4) (4) (3)

Assignment Topic CO PO addressed BTL Level


Create a product card for an online store that
PO1, PO2, BTL 4
includes an image, description, and price, with
CO1 PO3, PO4,
a hover effect for the card.
PO12
Create a product card for an online store that includes an image, description,
and price, with a hover effect for the card.

Objective:

To design an interactive product card for an online store that includes a


product image, description, and price, with a visually appealing hover effect. The card
should improve user engagement, making the shopping experience more attractive
and intuitive.

Problem Analysis:

Online shoppers often rely on visual cues and interactions to make


quick decisions. A well-designed product card can:

1. Highlight the product features concisely.

2. Engage users with animations or hover effects.

3. Provide essential information (image, description, price) in a compact layout.

The challenge is to create a responsive, lightweight, and visually engaging card that
adapts well to various devices and screen sizes, while also being easy to integrate
into any website.

Technology/ Methodology Adopted:

1. HTML: For structuring the card elements, such as the image, product
name, description, and price.

2. CSS: For styling the card, including layout, colors, fonts, and the hover
effect.

3. JavaScript (optional): Inline JavaScript is used to add the hover effect if


inline styling is preferred.

4. Responsive Design: CSS properties are used to ensure the card is


responsive and scales well on different devices
Program:

We developed a product card with the following features:

1. Compact Design: The card displays the image, product name, short
description, and price, all within a small frame.

2. Hover Effect: A subtle scaling and shadow effect on hover improves the
visual appeal.

3. Image Placeholder: An image URL is included, which can easily be


replaced with actual product images.

!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Product Card</title>

<style>

/* General styling */

body {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

background-color: #f2f2f2;

font-family: Arial, sans-serif;

margin: 0;

.product-card {
width: 300px;

background: #fff;

border-radius: 8px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

overflow: hidden;

transition: transform 0.3s ease;

cursor: pointer;

/* Hover effect */

.product-card:hover {

transform: scale(1.05);

box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);

/* Product image */

.product-card img {

width: 100%;

height: 200px;

object-fit: cover;

/* Product details */

.product-details {

padding: 20px;

}
.product-details h2 {

font-size: 1.25rem;

margin: 0;

color: #333;

.product-details p {

font-size: 1rem;

color: #666;

margin: 10px 0;

.product-details .price {

font-size: 1.2rem;

font-weight: bold;

color: #28a745;

</style>

</head>

<body>

<div class="product-card">

<!-- Product Image -->

<img src="https://via.placeholder.com/300x200" alt="Product Image">

<!-- Product Details -->

<div class="product-details">
<h2>Product Name</h2>

<p>This is a short description of the product. It highlights the main features


and benefits.</p>

<div class="price">$29.99</div>

</div>

</div>

</body>

</html>
Output:
Results:

The resulting product card is:

Visually Engaging: The hover effect makes the card stand out, drawing user
attention to each product.

Responsive and Compact: The card layout adjusts to different screen sizes,
making it ideal for desktop and mobile views.

Easy to Integrate: This product card can be easily embedded in any e-


commerce webpage.

Conclusion:

This product card design meets the objectives of engaging users,


presenting essential information, and adding visual appeal. The hover effect adds
interactivity without compromising performance, making it a valuable addition to any
online store interface. This approach could be further enhanced by integrating
dynamic content through JavaScript or a backend to display product details
dynamically.

References

For more on creating responsive and interactive product cards, refer to:

1.MDN Web Docs on CSS Transitions

2.W3Schools on HTML and CSS Basics

You might also like