Mẫu HTML + CSS Menu nhà hàng đẹp
5 năm trước,
HTML/CSS,
1108 Lượt xem
Nội dung
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
-
Hướng dẫn quản lý web bán hàng 2 ngôn ngữ
1 năm trước, 349 Lượt xemXin 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
1 năm trước, 345 Lượt xemTrong 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…
-
Hướng dẫn Plugin floating contact
2 năm trước, 456 Lượt xemNetweb xin hướng dẫn cách quản lý Plugin floating contact các bạn nhớ làm theo kỹ tường bước để plugin hoạt động Tính năng: Hiển…
-
ánh xạ OneDrive for Business dưới dạng Ổ đĩa mạng
2 năm trước, 466 Lượt xemHôm nay netweb sẽ hướng dẫn các bạn ánh xạ ổ đĩa mạng để làm việc online dùng như ổ cứng bình thường qua OneDrive…
-
Backup Yandex Mail
2 năm trước, 295 Lượt xemKhác với dịch vụ email theo tên của microsoft và google với chi phí đắt đỏ tầm 1tr/năm/1user, vì thế nên netweb khuyên dùng dịch…
Bình luận trên facebook netweb.vn