Free Menu Card Template |It's Not Hard as You Think

HTML

<body> <div class="mainpage"> <div class="navbar"> <div class="navlogo"> <img src="https://cafeu.codebasket.net/assets/img/logo/logo.png"> </div> <div class="hedermenu"> <ul class="headerul"> <li class="headerli">Home</li> <li class="headerli">About us</li> <li class="headerli">Menu</li> <li class="headerli">Blog</li> <li class="headerli">Pages</li> <li class="headerli">Contact</li> </ul> </div> <div class="navicon"> <i class="bx bx-search-alt-2 liicon1"></i> <i class="bx bxs-cart liicon1"></i> <i class="bx bxs-user liicon1"></i> </div> </div> <div class="maintitle"> <h1>Menu Us</h1> <p>Home / About</p> </div> </div> <div class="display1"> <div class="title"> <h3>Special Menu</h3> <h2>Our Specials Menu</h2> </div> <div class="maincard"> <div class="card1"> <img src="https://cafeu.codebasket.net/assets/img/product/9.png" alt="Roast Fish with Lemon"> <h3>Roast Fish with Lemon</h3> <p>$35 - $25</p> <i class="bx bxs-heart icon1"></i> <i class="bx bxs-cart icon2"></i> <i class="bx bxs-bullseye icon3"></i> </div> <div class="card2"> <img src="https://cafeu.codebasket.net/assets/img/product/11.png" alt="Quisque diam lorem interdum"> <h3>Quisque diam lorem interdum</h3> <p>$35 - $25</p> <i class="bx bxs-heart icon1"></i> <i class="bx bxs-cart icon2"></i> <i class="bx bxs-bullseye icon3"></i> </div> <div class="card3"> <img src="https://cafeu.codebasket.net/assets/img/product/15.png" alt="Fried Chicken, Biryani"> <h3>Fried Chicken, Biryani</h3> <p>$35 - $25</p> <i class="bx bxs-heart icon1"></i> <i class="bx bxs-cart icon2"></i> <i class="bx bxs-bullseye icon3"></i> </div> <div class="card4"> <img src="https://cafeu.codebasket.net/assets/img/product/16.png" alt="Rice and curry Pakistani"> <h3>Rice and curry Pakistani</h3> <p>$35 - $25</p> <i class="bx bxs-heart icon1"></i> <i class="bx bxs-cart icon2"></i> <i class="bx bxs-bullseye icon3"></i> </div> </div> </div>  <div class="footer"> <div class="footercard1"> <div class="logoinfo"> <img src="https://cafeu.codebasket.net/assets/img/logo/logo-white.png"> <p>Lorem ipsum dolor sit consectetur, ame <br>adipiscing elit, sed do</p> </div> <div class="seticoninfo"> <div class="footeraddress"> <i class="bx bx-location-plus icon11"></i> <div class="footeraddress1"> <p> 4920 Trails End Road Ft United <br>States, FL 33311</p> </div> </div> <div class="footermail"> <i class="bx bx-mail-send icon22"></i> <div class="footermail1"> <p>nfo@example.com <br> test@example.com </p> </div> </div> <div class="footernumber"> <i class="bx bxs-phone icon33"></i> <div class="footerno"> <p>+123 456 679 123 <br> +123 456 789 </p> </div> </div> </div> </div> <div class="footercard2"> <h3>Quick links</h3> <ul class="footerul"> <li class="footerli">Pizza</li> <li class="footerli">Burger</li> <li class="footerli">Cake</li> <li class="footerli">Chocolate</li> <li class="footerli">Ice Cream</li> <li class="footerli">Pizza</li> <li class="footerli">Burger</li> </ul> </div> <div class="footercard3"> <h3>Instagram</h3> <ul class="f_ul1"> <li class="f_imgli"> <img src="https://cafeu.codebasket.net/assets/img/instagram/1.png"> </li> <li class="f_imgli"> <img src="https://cafeu.codebasket.net/assets/img/instagram/2.png"> </li> <li class="f_imgli"> <img src="https://cafeu.codebasket.net/assets/img/instagram/3.png"> </li> </ul> <ul class="f_ul2"> <li class="f_imgli"> <img src="https://cafeu.codebasket.net/assets/img/instagram/4.png"> </li> <li class="f_imgli"> <img src="https://cafeu.codebasket.net/assets/img/instagram/5.png"> </li> <li class="f_imgli"> <img src="https://cafeu.codebasket.net/assets/img/instagram/6.png"> </li> </ul> </div> <div class="footercard4"> <h3>Subscribe</h3> <p>Lorem ipsum dolor si consectetur <br>adipisicing elit, sed eiusmotempor<br> incididunt ut labore et </p> <input type="text" placeholder="Enter Your E-mail"> <button><i class="bx bxs-navigation f_icon"></i></button> <div class="footericon"> <i class="bx bxl-facebook f_i"></i> <i class="bx bxl-twitter f_i"></i> <i class="bx bxl-skype f_i"></i> <i class="bx bxl-instagram f_i"></i> </div> </div> </div>  <div class="lastfooter"> <p>© Copyright Cafeu. 2022 All Right Reserved</p> </div> </body> </p> </p>

CSS

*{ margin: 0%; padding: 0%; } .mainpage{ width: 100%; height: 400px; background-image: url('https://cafeu.codebasket.net/assets/img/page-ban-bg.png'); background-size: cover; } .navbar{ width: 80%; background-color: white; height: 61px; margin-top: 40px; margin-left: 131px; display: flex; float: left; } .navlogo{ width: 20%; } .navlogo img{ padding-top: 8px; padding-left: 16px; } .hedermenu{ width: 70%; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; font-size: 16px; color: #292929; } .headerul{ display: flex; float: left; list-style: none; text-align: center; padding-top: 20px; padding-left: 115px; } .headerli{ padding-left: 42px; } .navicon{ width: 20%; text-align: right; padding-right: 20px; } .liicon1{ font-size: 22px; padding-top: 19px; padding-left: 10px; } .liicon1:hover{ color: #cc3333; } .maintitle{ width: 100%; height: 339px; } .maintitle h1{ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 39px; padding-top: 216px; padding-left: 553px; color: white; } .maintitle p{ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; padding-left:590px; color: white; } /* ---------------------------------------------------------------------------------- */ .display1{ width: 100%; height: 700pxpx; /* display: flex; */ } .title{ margin-top: 70px; width: 100%; height: 100px; /* display: flex; */ } .title h3{ font-family: 'Lobster', cursive; color: #cc3333; font-size: 25px; text-align: center; } .title h2{ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 30px; text-align: center; padding-top: 10px; } .maincard{ width: 100%; height: 400px; display: flex; float: left; } .card1{ width: 20%; height:338px; box-shadow: 0px 5px 20px 1px #00000029; margin-left: 91px; } .card1 img{ padding-top: 10px; padding-left: 50px; } .card1 h3{ padding-top: 30px; font-family: 'Roboto', sans-serif; text-align: center; } .card1 p{ font-family: 'Roboto', sans-serif; padding-top: 15px; font-size: 15px; padding-right: 40px; padding-left: 20px; color: #666666; text-align: center; } .icon1{ margin-left: 73px; text-align: center; margin-top: 20px; border: solid #666666; padding-left: 3px; padding-right: 3px; padding-top: 3px; padding-bottom: 3px; } .icon1:hover{ background-color: #cc3333; color: white; } .icon2:hover{ background-color: #cc3333; color: white; } .icon3:hover{ background-color: #cc3333; color: white; } .icon2{ text-align: center; margin-top: 20px; border: solid #666666; padding-left: 3px; padding-right: 3px; padding-top: 3px; padding-bottom: 3px; } .icon3{ text-align: center; margin-top: 20px; border: solid #666666; padding-left: 3px; padding-right: 3px; padding-top: 3px; padding-bottom: 3px; } .card2{ width: 20%; height: 338px; box-shadow: 0px 5px 20px 1px #00000029; margin-left: 20px; } .card2 img{ padding-top: 10px; padding-left: 50px; } .card2 h3{ padding-top: 30px; font-family: 'Roboto', sans-serif; text-align: center; } .card2 p{ font-family: 'Roboto', sans-serif; padding-top: 15px; font-size: 15px; padding-right: 40px; padding-left: 20px; color: #666666; text-align: center; } .card3{ width: 20%; height: 338px; box-shadow: 0px 5px 20px 1px #00000029; margin-left: 20px; } .card3 img{ padding-top: 10px; padding-left: 50px; } .card3 h3{ padding-top: 30px; font-family: 'Roboto', sans-serif; text-align: center; } .card3 p{ font-family: 'Roboto', sans-serif; padding-top: 15px; font-size: 15px; padding-right: 40px; padding-left: 20px; color: #666666; text-align: center; } .card4{ width: 20%; height: 338px; box-shadow: 0px 5px 20px 1px #00000029; margin-left: 20px; } .card4 img{ padding-top: 10px; padding-left: 50px; } .card4 h3{ padding-top: 30px; font-family: 'Roboto', sans-serif; text-align: center; } .card4 p{ font-family: 'Roboto', sans-serif; padding-top: 15px; font-size: 15px; padding-right: 40px; padding-left: 20px; color: #666666; text-align: center; } /* -------------------------------------------------------------------------------------------------------- */ .footer{ width: 100%; height: 500px; background-image: url('https://cafeu.codebasket.net/assets/img/footer-bg.png'); background-size: cover; display: flex; float: left; margin-bottom: 5px; } .footercard1{ width: 25%; height: 396px; margin-left: 100px; margin-top: 100px; } .logoinfo{ width: 100%; height: 125px; } .logoinfo p{ font-family: 'Roboto', sans-serif; padding-top: 15px; font-size: 15px; line-height: 27px; color: white; text-align: left; padding-left: 20px; } .seticoninfo{ width: 100%; height:253px; } .footeraddress{ font-family: 'Zen Kaku Gothic Antique', sans-serif; padding-top:17px; } .footeraddress1{ float: right; display: flex; } .icon11{ font-size: 35PX; padding-top: 20px; color: white; } .footeraddress1 p{ font-family: 'Roboto', sans-serif; padding-top: 15px; font-size: 15px; line-height: 27px; color: white; text-align: left; padding-right: 70px; } .footermail{ width: 100%; height: 77px; display: flex; float: left; } .footermail1{ float: right; } .icon22{ font-size: 35PX; padding-top: 20px; color: white; } .footermail1 p{ font-family: 'Roboto', sans-serif; font-size: 15px; line-height: 27px; color: white; text-align: left; padding-left:27px; padding-top: 15px; } .footernumber{ width: 100%; height: 77px; display: flex; float: left; } .footerno{ float: right; } .icon33{ font-size: 35PX; padding-top: 20px; color: white; } .footerno p{ font-family: 'Roboto', sans-serif; font-size: 15px; line-height: 27px; color: white; text-align: left; padding-left:27px; padding-top: 15px; } .footercard2{ width: 15%; height: 396px; float: left; margin-top: 100px; } .footercard2 h3{ font-family: 'Roboto', sans-serif; color: white; font-size: 20px; padding-left: 20px; padding-top: 10px; } .footerul{ list-style: none; font-family: 'Roboto', sans-serif; color: white; padding-left: 20px; padding-top: 30px; } .footerli{ padding-top: 15px; } .footerli:hover{ color: #cc3333; } .footercard3{ width: 23%; height: 396px; float: left; margin-top: 100px; } .footercard3 h3{ font-family: 'Roboto', sans-serif; color: white; font-size: 20px; padding-left: 20px; padding-top: 10px; } .f_ul1{ list-style: none; display: flex; float: left; padding-top: 40px; padding-left: 10px; } .f_imgli{ padding-left: 10px; } .f_ul2{ list-style: none; display: flex; float: left; padding-top: 10px; padding-left: 10px; } .footercard4{ width: 25%; height:396px; float: left; margin-top: 100px; } .footercard4 h3{ font-family: 'Roboto', sans-serif; color: white; font-size: 20px; padding-left: 20px; padding-top: 10px; } .footercard4 p{ font-family: 'Roboto', sans-serif; padding-top: 23px; font-size: 15px; line-height: 27px; color: white; text-align: left; padding-left: 20px; } .footercard4 input{ margin-top: 30px; display: flex; float: left; width: 183px; height: 37px; padding-left: 10px; margin-left: 20px; } .footercard4 button{ width: 100px; height: 37px; float: right; background-color: #cc3333; margin-top: 30px; margin-right: 27px; color: white; border: none; } .footercard4 button:hover{ background-color: #666666; } .f_icon{ font-size: 20px; } .footericon{ display: flex; float: left; padding-left: 20px; color: white; padding-top: 20px; } .f_i{ padding-left: 10px; } .f_i:hover{ color: #cc3333; } .lastfooter{ width: 100%; height: 50px; display: flex; background-image: url('https://cafeu.codebasket.net/assets/img/footer-bg.png'); background-size: cover; } .lastfooter p{ font-family: 'Roboto', sans-serif; font-size: 15px; line-height: 27px; color: white; text-align: center; padding-top: 16px; padding-left: 523px; }

Menu Card Template

Features of The Template

HTML

CSS