Nội dung

Mẫu HTML + CSS Menu nhà hàng đẹp

3 năm trước, HTML/CSS, 513 Lượt xem

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

  • Quản lý mẫu web phòng khám

    Quản lý mẫu web phòng khám

    2 tháng trước, 125 Lượt xem

    Xin chào tất cả các khách hàng dùng mẫu web công ty bên netweb, sau đây netweb.vn xin hướng dẫn các bạn quản lý mẫu…

  • Quản lý mẫu web công ty

    Quản lý mẫu web công ty

    5 tháng trước, 191 Lượt xem

    Xin chào tất cả các khách hàng dùng mẫu web công ty bên netweb, sau đây netweb.vn xin hướng dẫn các bạn quản lý mẫu…

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

Đam mê thiết kế web, kinh nghiệm 9 năm trong nghề thiết kế website, đang thiết kế web dạo tại netweb.vn, Callme: 08.9898.2526 (Mr Hải)