<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glassmorphism Responsive Product Card</title>
<style>
body {
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #ff0099 0%, #493240 100%);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
color: white;
}
.container {
width: 100%;
max-width: 600px;
margin: 0 auto;
padding: 20px;
text-align: justify;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.2);
border-radius: 15px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.product-card {
display: flex;
flex-wrap: wrap;
margin: 10px 0;
padding: 20px;
background: rgba(255, 255, 255, 0.2);
border-radius: 15px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.product-info {
flex: 2 1 200px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.product-description {
margin-bottom: 10px;
}
.product-image {
flex: 1 1 100px;
max-width: 150px;
margin-left: 20px;
border-radius: 10px;
}
.product-image img {
width: 100%;
height: auto;
border-radius: 10px;
}
.buy-button {
background-color: rgba(255, 255, 255, 0.4);
color: #000;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
font-weight: bold;
transition: background-color 0.3s ease;
}
.buy-button:hover {
background-color: rgba(255, 255, 255, 0.6);
}
@media (max-width: 600px) {
.product-card {
flex-direction: column;
align-items: center;
text-align: center;
}
.product-image {
margin-left: 0;
margin-top: 15px;
max-width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<p>Đây là đoạn văn bản ví dụ trước product card. Card này sẽ được chèn vào giữa đoạn văn bản này và có khoảng cách đều từ các cạnh của card. Văn bản này sẽ phủ kín khoảng trống ở hai bên trái và phải của card.</p>
<div class="product-card">
<div class="product-info">
<div class="product-description">
<h3>Sản phẩm ABC</h3>
<p>Đây là mô tả ngắn gọn về sản phẩm. Nó bao gồm các thông tin nổi bật và tính năng chính của sản phẩm.</p>
</div>
<a href="#" class="buy-button">Mua Ngay</a>
</div>
<div class="product-image">
<img src="https://via.placeholder.com/150" alt="Product Image">
</div>
</div>
<p>Đây là đoạn văn bản ví dụ sau product card. Văn bản này cũng sẽ cách đều các cạnh của card và bao quanh nó. Văn bản sẽ tiếp tục phủ kín cả trên và dưới, bên trái và bên phải của card, tạo ra một bố cục gọn gàng và rõ ràng.</p>
</div>
</body>
</html>
