Mẫu HTML + CSS Menu Nhà Hàng đẹp

Tìm kiếm Mẫu HTML + CSS Menu nhà hàng đẹp 6 năm trước, HTML/CSS, 1291 Lượt xem

Nội dung

• Mẫu html + css menu nhà hàng đệp bằng bootstrap 4

Mẫu html + css menu nhà hàng đệp bằng bootstrap 4

link: https://bootsnipp.com/snippets/R5GlM

Html 3 cột dọc

<!-- menu --> <div class="content"> <div class="container"> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center "> <div class="page-section"> <h1 class="page-title">Food Menu</h1> </div> </div> </div> <div class="row"> <!-- starter --> <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 mb40"> <div class="menu-block"> <h3 class="menu-title">Starter</h3> <div class="menu-content"> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12"> <div class="dish-img"><a href="#"><img src="https://via.placeholder.com/70x70" alt="" class="img-circle"></a></div> </div> <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12"> <div class="dish-content"> <h5 class="dish-title"><a href="#">Aloo and Dal ki Tikki</a></h5> <span class="dish-meta">Onion / Tomato</span> <div class="dish-price"> <p>$10</p> </div> </div> </div> </div> </div> </div> </div> <!-- /.starter --> <!-- Soup --> <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 mb40"> <div class="menu-block"> <h3 class="menu-title">Soup</h3> <div class="menu-content"> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12"> <div class="dish-img"><a href="#"><img src="https://via.placeholder.com/70x70" alt="" class="img-circle"></a></div> </div> <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12"> <div class="dish-content"> <h5 class="dish-title"><a href="#">Minestrone</a></h5> <span class="dish-meta"> beans / onions celery / carrots</span> <div class="dish-price"> <p>$15</p> </div> </div> </div> </div> </div> </div> </div> <!-- /.soup --> <!-- main course --> <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 mb40"> <div class="menu-block"> <h3 class="menu-title">Main Course</h3> <div class="menu-content"> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12"> <div class="dish-img"><a href="#"><img src="https://via.placeholder.com/70x70" alt="" class="img-circle"></a></div> </div> <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12"> <div class="dish-content"> <h5 class="dish-title"><a href="#">Biryani</a></h5> <span class="dish-meta"> Onion / Tomato</span> <div class="dish-price"> <p>$14</p> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!-- /.menu -->

Html 3 cột ngang

<?php /** * Template Name: Products Shop */ get_header(); ?> <!-- menu --> <div class="content"> <div class="container"> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center "> <div class="page-section"> </div> </div> </div> <h3 class="menu-title">Starter</h3> <div class="row"> <!-- blocktin --> <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 mb40"> <div class="menu-block"> <div class="menu-content"> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12"> <div class="dish-img"><a href="#"><img src="https://via.placeholder.com/70x70" alt="" class="img-circle"></a></div> </div> <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12"> <div class="dish-content"> <h5 class="dish-title"><a href="#">Aloo and Dal ki Tikki</a></h5> <span class="dish-meta">Onion / Tomato</span> <div class="dish-price"> <p>$10</p> </div> </div> </div> </div> </div> </div> </div> <!-- /.blocktin --> </div> </div> </div> <!-- /.menu --> <?php get_footer(); ?>

Css

img.attachment-post-thumbnail.size-post-thumbnail.wp-post-image { width: 70px; } .dish-price a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart { display: none; } .dish-price p.product.woocommerce.add_to_cart_inline { border: none !important; } img.img-circle { border-radius: 50%; } .menu-block { margin-bottom: 30px; } .menu-title { border-bottom: 3px solid #e0e6e3; margin-bottom: 36px; padding-bottom: 10px; } .menu-content { border-bottom: 1px solid #e0e6e3; margin-bottom: 30px; } .dish-img { } .dish-content { margin-top: 12px; margin-bottom: 40px; } .dish-meta { font-size: 12px; text-transform: uppercase; display: block; width: 210px; line-height: 1.7; } .dish-title { margin-bottom: 6px; font-size: 15px; text-transform: uppercase; font-weight: 500; position: relative; } .dish-price { position: absolute; right: 16px; top: 0px; font-size: 26px; color: #e03c23; font-weight: 500; font-family: 'Zilla Slab', serif; } .well-block .dish-meta { width: 100%; } .well-block .dish-price { font-size: 26px; color: #e03c23; font-weight: 500; font-family: 'Zilla Slab', serif; position: inherit; }

Bài viết mới cập nhập

• 

  DANH SÁCH 34 TỈNH/THÀNH PHỐ CỦA VIỆT NAM SAU SÁT NHẬP 1/7/2025

  6 tháng trước, 53774 Lượt xem

  Năm 2025, Việt Nam dự kiến sẽ có 34 tỉnh, thành phố sau khi sắp xếp lại 63 tỉnh, thành hiện nay. Trong đó, có 6…

• 

  Cấu hình Newsletter gửi theo thời gian chỉ định

  9 tháng trước, 86 Lượt xem

  GIẢI PHÁP HOÀN HẢO: Chỉ vô hiệu hóa tất cả job, nhưng không chặn file wp-cron.php Cách làm: Bạn thêm đoạn sau vào functions.php hoặc…

• 

  21 câu lệnh Linux phải nhớ quản lý vps

  9 tháng trước, 456 Lượt xem

  Đây là những câu lệnh căn bản bất cứ ai muốn tìm hiểu về Linux cần phải nhớ. clear: làm sạch cửa sổ dòng lệnh…

• 

  Hướng dẫn quản lý web bán hàng 2 ngôn ngữ

  2 năm trước, 410 Lượt xem

  Xin chào các bạn! hôm nay netweb sẽ hướng dẫn các bạn quản lý web bán hàng 2 ngôn ngữ! Hướng dẫn tạo user thành…

• 

  Hướng dẫn tạo user thành viên và quản lý đơn hàng

  2 năm trước, 429 Lượt xem

  Trong bài viết này, netweb sẽ hướng dẫn các bạn tạo user thành viên và đặt hàng quản lý đơn hàng trong WooCommerce Thêm mới…

Bình luận trên facebook netweb.vn

Gọi netweb Báo giá web Chát Zalo Chủ đề liên quan theo Tag

• Tổng hợp các đoạn mã css hay dùng
• Tổng hợp Video Gallery cực đẹp cho website
• Tổng hợp css Responsive menu đẹp
• Tổng hợp các hiệu ứng đẹp CSS3 và jquery

css, CSS Menu, css menu nhà hàng, html, html + css