Trang chủMặc địnhĐịnh Dạng HTML Post Responsive Glassmorphism 1 Product Card Ảnh Bên Trái, Mô Tả & Nút Mua Bên Phải.

Định Dạng HTML Post Responsive Glassmorphism 1 Product Card Ảnh Bên Trái, Mô Tả & Nút Mua Bên Phải.

Vũ Thành Trung
12:51 AM 08/28/2024

    <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;

        }

        .container {

            width: 100%;

            max-width: 600px;

            margin: 0 auto;

            padding: 20px;

            text-align: justify;

            color: white;

        }

        .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);

            color: white;

            transition: transform 0.3s ease;

        }

        .product-card:hover {

            transform: translateY(-10px);

        }

        .product-info {

            flex: 2 1 200px;

            display: flex;

            flex-direction: column;

            justify-content: space-between;

            order: 2; /* Đặt thông tin sản phẩm sau hình ảnh */

        }

        .product-description {

            margin-bottom: 10px;

        }

        .product-image {

            flex: 1 1 100px;

            max-width: 150px;

            margin-right: 20px; /* Chuyển sang margin-right */

            border-radius: 10px;

            order: 1; /* Đặt hình ảnh trước thông tin sản phẩm */

        }

        .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;

            text-align: center;

            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-right: 0; /* Reset margin-right */

                margin-top: 15px;

                max-width: 100%;

            }

        }

    </style>

    <div class="container">

        <p>Nội dung bên trên Product card.</p>

        <div class="product-card">

            <div class="product-image">

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

            </div>

            <div class="product-info">

                <div class="product-description">

                    <h3>Sản phẩm ABC</h3>

                    <p>

Mô Tả Sản Phẩm 

</p>

                </div>

                <a href="#" class="buy-bu

tton">Mua Ngay</a>

            </div>

        </div>

        <p>

Nội dung bên dưới Product Card

</p>

    </div>

CHUYÊN ĐỀ :

====♢====

SỐNG XANH, SỨC KHỎE LÀ VÀNG, VÌ MỘT HÀNH TINH XANH, TIÊU DÙNG THÔNG MINH, SẢN PHẨM XANH - THÂN THIỆN VỚI MÔI TRƯỜNG. 

======================

BÀI VIẾT NỔI BẬT :

======================

Mr. Bing & Lord Bard :

====♢====

  1. Mr. Bing : Chúa Tể Content, Kẻ Thống Trị Nội Dung Kỹ Thuật Số. Trợ Lý Ảo - Chuyên Gia Marketing, Seo & Chạy Quảng Cáo. 
  2. Thủ lĩnh Ai, Con Bot Viết Lách Công nghệ Trí Tuệ Nhân Tạo, Khiến Nhà Sáng Tạo Bộ Não Nơ Ron Thần Kinh Sinh Học, Khóc Thét.
  3. 6 bước thần thánh, xuất bản nội dung hiệu quả, chinh phục khách hàng, đốn tim người xem.

======================

Blog Chia Sẻ :

====♢====

  1. Kho mẫu, từ khóa tạo tiêu đề giật tít cực căng, kích thích nỗi đau, chạm vào cảm xúc Thu Hút độc giả Ngay Lần Xem Đầu Tiên
  2. 21++ Thể Loại Blog Content Phổ Biến Nhất
  3. Công Thức Viết Content Đỉnh Cao : Bí Quyết Đơn Giản Nhưng Hiệu Quả, Giúp Tăng Lưu Lượng Truy Cập, Hiệu Suất Chuyển Đổi Cực Cao.
  4. Tham khảo Bảng Thông Số Kích Cỡ Bánh & Sườn Xe Đạp, Phù Hợp Với Độ Tuổi Và Chiều Cao
  5. Chỉ mất vài phút, Bing đã giúp tôi hoàn thành sơ đồ danh mục blog cấu trúc Silo. Chuẩn Không Cần Chỉnh.

======================

Top Thương Hiệu :

====♢====

  1. Top 5 thương hiệu nồi cơm điện cao cấp được yêu thích nhất tại thị trường Việt Nam, sở hữu những tính năng nổi bật theo đánh giá của người dùng P.1

======================

MR. BING !
ĐĂNG TIN
Design Marketing, XÂY KÊNH MXH, BLOG WEB QUẢNG BÁ THƯƠNG HIỆU & SẢN PHẨM, Blog Style 5W1H


Khay Gỗ Decor

Thớt Gỗ Tràm
Top Content Xưởng Mộc :

1. Gỗ Tràm Xẻ Sấy
2. Thớt Gỗ Teak
3. Thanh Gỗ Bào S4S, S2S, E4E, E2E
4. Thớt Gỗ Xuất Khẩu
5. Gỗ Ghép Giá Rẻ
6. Gia Công Gỗ
1. Sponsored
2. Review
Blog / Web :
1. www.goghepthanh.com
2. www.thotgo.asia
3. www.khoz.vn
4. facebook.com/namtrungjsc
5. https://www.tiktok.com/@bloggiabao
====♢====

Thiết Kế Website [ HTML - CSS - Script ] :
# CSS No JS là Gì ?   # 11 Thành Phần Không Thể Thiếu Bạn Nên Biết Khi Cần Thiết Kế Website  

Write Ads - Viết Quảng Cáo : # Viết Quảng Cáo CTA "Đồ Dùng Phòng Ăn & Nhà Bếp  

Blogging : # Top 10++ Kế Hoạch Tận Hưởng & Nâng Cao Chất Lượng Cuộc Sống  

Tư Vấn : # Bán Cái Gì? Khi Khách Hàng Cần "Cân Bằng Cuộc Sống"!   # Bán Cái Gì ? Cho Người Thích Nấu Nướng.  

Đồ Dùng Nhà Bếp : # Top 7 Loại Thớt Gỗ Phổ Biến   # Dụng Cụ Nhà Bếp Bằng Gỗ Xuất Khẩu  

Kho Xưởng Gỗ : # Kho Gỗ Tràm Xẻ Sấy Bình Dương  

Kiếm Tiền " Kỹ Thuật Số " : # Kiếm Tiền Từ Ảnh (Monetizing Photos) Là Gì?   # Viết Blog Kiếm Tiền Là Gì?   # Viết Blog Kiếm Tiền Từ Website   # Viết Blog : Giải Pháp Tối Ưu Thu Nhập Ngoài Giờ.  

Thế Giới Quà Tặng : # Biến Mọi Thứ Thành Quà Tặng Độc Đáo  

Revew : # Khay Gỗ Decor  

Quản Lý Nội Dung - Content Management ( Viết Tắt CM ) : # CM : Blog Nấu Nướng   # CM : Blog Đồ Dùng Nhà Bếp & Phòng Ăn  
💨 💨 💨 Nhà Phân Phối Thớt Gỗ : Click Để Xem