free Designer cafe template Download Now!

HTML

<html> <head> <title>food website</title> <link rel="stylesheet" href="food.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@500;600&family=Poppins:wght@500&family=Roboto:ital@0;1&family=Zen+Kaku+Gothic+Antique:wght@300&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">  <link rel="stylesheet" href="https://unpkg.com/boxicons@latest/css/boxicons.min.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> </head> <body> <div class="main"> <div class="header"> <div class="headerlogo"> <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"> <a href="aboutus.html"> About us</a> </li> <li class="headerli"> <a href="menu.html">Menu</a></li> <li class="headerli">Blog</li> <li class="headerli">Pages</li> <li class="headerli">Contact</li> <li class="headerli"><i class='bx bx-search-alt-2'></i></li> <li class="headerli"><img src="https://cafeu.codebasket.net/assets/img/icon/call.png"> </li> <li class="headerli1">+880 123 456 789</li> </ul> </div> </div>  <div class="display1"> <div class="display1_maincover"> <div class="d1cover"> <h3>best in cafeu</h3> <h1>Different <span>Spice</span>For A<br> Different Taste </h1> <p>Lorem ipsum dolor sit amet, conscetur adipiscing elit, sed do eimod <br> tempor incididunt ut labore et dolore magna aliqua Quis</p> <div class="btn"> <button>Order Now</button> <i class='bx bx-play-circle d1icon'></i> <p>Watch Video</p> </div> </div> <div class="d1img"> <img src="https://cafeu.codebasket.net/assets/img/slider/baner.png"> </div> </div> </div>  <div class="display2"> <div class="d2card1"> <div class="c1img"> <img src="https://cafeu.codebasket.net/assets/img/icon/1.png"> <h3>100% Swiss Quality</h3> <p>Lorem ipsum dol consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore dolore magna aliqua</p> <h4>Discover More</h4> </div> </div> <div class="d2card2"> <div class="c2img"> <img src="https://cafeu.codebasket.net/assets/img/icon/2.png"> <h3>Organic Production</h3> <p>Lorem ipsum dol consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore dolore magna aliqua</p> <h4>Discover More</h4> </div> </div> <div class="d2card3"> <div class="c3img"> <img src="https://cafeu.codebasket.net/assets/img/icon/3.png"> <h3>Food Law Certified</h3> <p>Lorem ipsum dol consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore dolore magna aliqua</p> <h4>Discover More</h4> </div> </div> <div class="d2card4"> <div class="c4img"> <img src="https://cafeu.codebasket.net/assets/img/icon/4.png"> <h3>Food Law Certified</h3> <p>Lorem ipsum dol consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore dolore magna aliqua</p> <h4>Discover More</h4> </div> </div> </div>  <div class="display3"> <div class="d3title"> <h1>Stay Informed About Special Offers</h1> <h4>For Exclusive Deals, Coupons, News and More!</h4> </div> <div class="d3input"> <input type="text" placeholder="type Your email address"> <button>Subscribe</button> </div> </div>  <div class="display4"> <div class="d4img"> <img src=" https://cafeu.codebasket.net/assets/img/image/exparience.png "> </div> <div class="d4contant"> <h3>About Us</h3> <h1>Why We Are The Best </h1> <p>Quis autem vel eum iure reprehenderit qui in evoluptate velit esse qua nihil<br> molestiae consequatur, vel illum qui dolorem eum fugiat quvoluptas nulla<br> pariatureaque ipsa quae ab illo inventore veritatis et quasi architecto<br> beatae vitae dicta sunt explicabo.</p> <div class="d4mainicon1"> <div class="d4icon1"> <img src="https://cafeu.codebasket.net/assets/img/icon/5.png"> </div> <div class="d4iconcontaint"> <h4>Buffet Service</h4> <p>Qariatureaque ipsa quae a illo inventore<br> veritatis et quasi architecto</p> </div> </div> <div class="d4mainicon2"> <div class="d4icon2"> <img src="https://cafeu.codebasket.net/assets/img/icon/6.png"> </div> <div class="d4iconcontaint2"> <h4>Online Booking</h4> <p>Qariatureaque ipsa quae a illo inventore<br> veritatis et quasi architecto</p> </div> </div> <button class="btn1">About Us</button> </div> </div>  <div class="display5"> <div class="d5title"> <h3>Special Menu</h3> <h2>Our Specials Menu</h2> </div> </div>  <div class="display6"> <div class="d5menu"> <ul class="ulmenu"> <li class="limenu"> <img src="https://cafeu.codebasket.net/assets/img/category/icon/7.png"> <h3>All</h3> </li> <li class="limenu"><img src="https://cafeu.codebasket.net/assets/img/category/icon/1.png"> <h3>Pizza</h3> </li> <li class="limenu"><img src="https://cafeu.codebasket.net/assets/img/category/icon/2.png"> <h3>Asian</h3> </li> <li class="limenu"><img src="https://cafeu.codebasket.net/assets/img/category/icon/3.png"> <h3>Burger</h3> </li> <li class="limenu"><img src="https://cafeu.codebasket.net/assets/img/category/icon/4.png"> <h3>Salad</h3> </li> <li class="limenu"><img src="https://cafeu.codebasket.net/assets/img/category/icon/5.png"> <h3>Bakery</h3> </li> <li class="limenu"><img src="https://cafeu.codebasket.net/assets/img/category/icon/6.png"> <h3>Drink</h3> </li> </ul> </div> </div>  <div class="display7"> <div class="maincard1"> <div class="d7card1"> <img src="https://cafeu.codebasket.net/assets/img/product/1.png"> <h3>Grilled Fingerlings Pizza</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tellus turpis</p> <h4> Delivery Fee : $10</h4> <i class='bx bx-message-square-add d7icon1'></i> <i class='bx bxs-cart-alt d7icon2'></i> </div> <div class="d7card2"> <img src="https://cafeu.codebasket.net/assets/img/product/2.png"> <h3>Grilled Fingerlings Pizza</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tellus turpis</p> <h4> Delivery Fee : $10</h4> <i class='bx bx-message-square-add d7icon1'></i> <i class='bx bxs-cart-alt d7icon2'></i> </div> <div class="d7card3"> <img src="https://cafeu.codebasket.net/assets/img/product/3.png"> <h3>Grilled Fingerlings Pizza</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tellus turpis</p> <h4> Delivery Fee : $10</h4> <i class='bx bx-message-square-add d7icon1'></i> <i class='bx bxs-cart-alt d7icon2'></i> </div> </div> <div class="maincard2"> <div class="d7card4"> <img src="https://cafeu.codebasket.net/assets/img/product/4.png"> <h3>Grilled Fingerlings Pizza</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tellus turpis</p> <h4> Delivery Fee : $10</h4> <i class='bx bx-message-square-add d7icon1'></i> <i class='bx bxs-cart-alt d7icon2'></i> </div> <div class="d7card5"> <img src="https://cafeu.codebasket.net/assets/img/product/5.png"> <h3>Grilled Fingerlings Pizza</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tellus turpis</p> <h4> Delivery Fee : $10</h4> <i class='bx bx-message-square-add d7icon1'></i> <i class='bx bxs-cart-alt d7icon2'></i> </div> <div class="d7card6"> <img src="https://cafeu.codebasket.net/assets/img/product/6.png"> <h3>Grilled Fingerlings Pizza</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tellus turpis</p> <h4> Delivery Fee : $10</h4> <i class='bx bx-message-square-add d7icon1'></i> <i class='bx bxs-cart-alt d7icon2'></i> </div> </div> </div>  <div class="display8"> <div class="d8title"> <h2>Simple Way to Order<br> Your Food Faster</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eius-<br> mod tempor incididunt ut labore et dolore magna aliqua. Q ipsum<br> suspendisse ultrices gravida. Risus commodo viverra maeceas<br> accumsan lacus vel facilisis</p> <img src="https://cafeu.codebasket.net/assets/img/app/play-store.png"> <img src="https://cafeu.codebasket.net/assets/img/app/apple.png"> </div> <div class="d8img"> <img src="https://cafeu.codebasket.net/assets/img/app/app-1.png"> <img src="https://cafeu.codebasket.net/assets/img/app/app-2.png"> </div> </div>  <div class="dispaly9"> <div class="d9contant"> <i class='bx bx-play-circle d9icon'></i> <h2>We Have Excellent Of Quality<br> Japanese Food</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed<br> do eiusmod tempor incididunt ut labore et dolore</p> </div> <div class="d9card"> <h4>Opening Times</h4> <h3>Check Availability</h3> <ul class="d9ulmenu"> <li class="d9limenu"> <p class="day">Sunday to Tuesday</p> <p class="time">09:00 - 06:00</p> </li> <li class="d9limenu"> <p class="day">Friday to Sunday</p> <p class="time">06:00 - 09:00</p> </li> <li class="d9limenu"> <p class="day">Sunday to Tuesday</p> <p class="time">09:00 - 06:00</p> </li> <li class="d9limenu"> <p class="day">Monday to Friday</p> <p class="time">06:00 - 09:00</p> </li> <li class="d9limenu"> <p class="day">Monday to Saturday</p> <p class="time">06:00 - 09:00</p> </li> </ul> <h5>Call Us Now<br> +993240-765230</h5> </div> </div>  <div class="display10"> <div class="display10title"> <h4>Our Team</h4> <h2>Meet Our Team</h2> <div class="d10card"> <div class="d10card1"> <img src="https://cafeu.codebasket.net/assets/img/team/1.png"> <h4>Jimmey Aenderson</h4> <h5>Chief Executive</h5> <h3>_________________</h3> </div> <div class="d10card2"> <img src="https://cafeu.codebasket.net/assets/img/team/2.png"> <h4>Mike by Dooley</h4> <h5>Executive</h5> <h3>_________________</h3> </div> <div class="d10card3"> <img src="https://cafeu.codebasket.net/assets/img/team/3.png"> <h4>Alextina Jimiey</h4> <h5>Food Lovers</h5> <h3>_________________</h3> </div> </div> </div> </div>  <div class="display11"> <ul class="d11ul"> <li class="d11li"> <img src="https://cafeu.codebasket.net/assets/img/partner/1.png"> </li> <li class="d11li"> <img src="https://cafeu.codebasket.net/assets/img/partner/2.png"> </li> <li class="d11li"> <img src="https://cafeu.codebasket.net/assets/img/partner/3.png"> </li> <li class="d11li"> <img src="https://cafeu.codebasket.net/assets/img/partner/4.png"> </li> </ul> </div>  <div class="display12"> <div class="d12title"> <h4>Happy Customers</h4> <h2>Our Guestbook</h2> </div> <div class="guestcard"> <div class="guestcardtitle"> <img src="https://cafeu.codebasket.net/assets/img/icon/7.png"> <h2>James Smith Loader list <br> Specifications 2022</h2> <p>Organizations throughout the World to manage heir IT <br> with our unique approach to technology agement and <br> consultancy solutions. Provide users with priate view <br> and access permissions </p> <h3>Reson Roy </h3> <h5>- Tool Customar</h5> </div> <div class="guestphoto"> <img src="https://cafeu.codebasket.net/assets/img/customer/11.png"> </div> </div> </div>  <div class="display13"> <div class="d13title"> <h4>News & Blog</h4> <h2>Latest News</h2> </div> <div class="d13maincard"> <div class="d13card1"> <img src="https://cafeu.codebasket.net/assets/img/blog/1.png"> <h3>New Restaurant Town Our Ple<br> Award Contract</h3> <p>Drive your business and manage ris with<br> a global industry leader.</p> <h6>________________________________________________________________</h6> <h5>Jan 1, 2022 - Comments</h5> <h4>Read More</h4> </div> <div class="d13card2"> <img src="https://cafeu.codebasket.net/assets/img/blog/2.png"> <h3>Greek yogurt breakfast bowls Ple<br> Award Contract</h3> <p>Drive your business and manage ris with<br> a global industry leader.</p> <h6>________________________________________________________________</h6> <h5>Jan 1, 2022 - Comments</h5> <h4>Read More</h4> </div> <div class="d13card3"> <img src="https://cafeu.codebasket.net/assets/img/blog/3.png"> <h3>Make Authentic Italian Marg Herita<br> Pizza at Home</h3> <p>Drive your business and manage ris with<br> a global industry leader.</p> <h6>________________________________________________________________</h6> <h5>Jan 1, 2022 - Comments</h5> <h4>Read More</h4> </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> </div> </body> </html> </p> </p>

CSS

*{ margin: 0%; padding: 0%; } .header{ width: 100%; height: 100px; background-image: url('https://cafeu.codebasket.net/assets/img/slider/banner-bg.jpg'); background-size: cover; /* position: absolute; */ display: flex; float: left; position: fixed; /* z-index: 99; */ } .headerlogo{ width: 25%; height: auto; } .headerlogo{ text-align: center; padding-top: 25px; } .hedermenu{ width: 65%; 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: 38px; padding-left: 33px; } .headerli a{ color: #292929; } .headerli{ padding-left: 42px; color: #292929; } .headerli i{ font-size: 22px; font-weight: 500; } .headerli i:hover{ color: #cc3333; } .headerli img{ width: 35px; height: 35px; color: #cc3333; } .headerli1{ padding-left: 15px; color: #292929; } .headerli1:hover{ color: #cc3333; } /* ---------------------------------------------------------------------------------------------- */ .display1{ width: 100%; height: 600px; background-image: url('https://cafeu.codebasket.net/assets/img/slider/banner-bg.jpg'); background-size: cover; display: flex; float: left; margin-top: auto; } .display1_maincover{ width: 90%; height: 600px; display: flex; float: left; margin-left: 73px; } .d1cover{ width: 45%; height: 600px; float: left; } .d1img{ width: 45%; height: 600px; } .d1img img{ width: 500px; height: 500px; padding-top: 50px; padding-left: 90px; } .d1cover h3{ font-family: 'Lobster', cursive; color: #cc3333; font-size: 25px; padding-top: 100px; padding-left: 40px; } .d1cover h1{ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 44px; padding-top: 30px; padding-left: 40px; } span{ color: #cc3333; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .d1cover p{ font-family: 'Roboto', sans-serif; font-size: 15px; padding-top: 20px; padding-left: 40px; color: #666666; } .btn{ display: flex; float: left; font-family: 'Roboto', sans-serif; padding-top: 58px; padding-left: 40px; } .btn button{ width: 127px; height: 40px; background-color: rgb(180, 20, 20); border: none; font-family: 'Roboto', sans-serif; font-weight: 600; color: white; word-spacing: 5px; } .d1icon{ font-size: 40px; color: #cc3333; padding-left: 45px; opacity: 0.8; } .btn p{ padding-left: 20px; padding-top: 9px; font-weight: 600; color: #666666; } /* .d1icon:before { content: ""; position: absolute; left: 50%; top: 50%; width: 45px; height: 45px; background: var(--main-color); border-radius: 50%; animation: pulse-border 1500ms ease-out infinite; } */ /* ---------------------------------------------------------------------------------------------- */ .display2{ width: 90%; height: 400px; margin-top: 30px; display: flex; float: left; margin-left: 131px; } .d2card1{ width: 20%; height: 350px; background-image: url('https://cafeu.codebasket.net/assets/img/slider/banner-bg.jpg'); background-size: cover; } .d2card1:hover{ border: solid lightpink; } .c1img{ font-family: 'Roboto', sans-serif; text-align: center; } .c1img img{ margin-top: 60px; } .c1img h3{ padding-top: 60px; } .c1img h3:hover{ color: #cc3333; } .c1img p{ font-size: 15px; padding-top: 15px; padding-left: 10px; padding-right: 10px; color: #666666; } .c1img h4{ padding-top: 15px; } .c1img h4:hover{ color: #cc3333; } .d2card2{ width: 20%; height: 350px; margin-left: 10px; background-image: url('https://cafeu.codebasket.net/assets/img/slider/banner-bg.jpg'); background-size: cover; } .d2card2:hover{ border: solid lightpink; } .c2img{ font-family: 'Roboto', sans-serif; text-align: center; } .c2img img{ margin-top: 60px; } .c2img h3{ padding-top: 69px; } .c2img h3:hover{ color: #cc3333; } .c2img h4:hover{ color: #cc3333; } .c2img p{ font-size: 15px; padding-top: 15px; padding-left: 10px; padding-right: 10px; color: #666666; } .c2img h4{ padding-top: 15px; } .d2card3{ width: 20%; height: 350px; margin-left: 10px; background-image: url('https://cafeu.codebasket.net/assets/img/slider/banner-bg.jpg'); background-size: cover; } .d2card3:hover{ border: solid lightpink; } .c3img{ font-family: 'Roboto', sans-serif; text-align: center; } .c3img img{ margin-top: 60px; } .c3img h3{ padding-top: 60px; } .c3img h3:hover{ color: r #cc3333; } .c3img h4:hover{ color: #cc3333; } .c3img p{ font-size: 15px; padding-top: 15px; padding-left: 10px; padding-right: 10px; color: #666666; } .c3img h4{ padding-top: 15px; } .d2card4{ width: 20%; height: 350px; margin-left: 10px; background-image: url('https://cafeu.codebasket.net/assets/img/slider/banner-bg.jpg'); background-size: cover; } .d2card4:hover{ border: solid lightpink; } .c4img{ font-family: 'Roboto', sans-serif; text-align: center; } .c4img img{ margin-top: 60px; } .c4img h3{ padding-top: 60px; } .c4img h3:hover{ color: #cc3333; } .c4img h4:hover{ color: #cc3333; } .c4img p{ font-size: 15px; padding-top: 15px; padding-left: 10px; padding-right: 10px; color: #666666; } .c4img h4{ padding-top: 15px; } /* ---------------------------------------------------------------------------------------------------------- */ .display3{ width: 100%; height: 250px; margin-top: 30px; display: flex; float: left; background-image: url('../imges/food\ img.png'); background-size: cover; margin-bottom: 100px; } /* .display3:before{ position: absolute; content: ""; width: 100%; height: 100%; left: 0; top: 0; background: #000; opacity: 0.4; z-index: -1; } */ .d3title{ width: 50%; height: 250px; text-align: center; padding-top:87px; color: white; font-family: 'Roboto', sans-serif; } .d3title h4{ padding-top: 20px; } .d3input input{ width: 475px; height: 47px; padding-left: 20px; font-family: 'Roboto', sans-serif; margin-top: 88px; } .d3input button{ height: 47px; background-color: rgb(180, 20, 20); color: white; opacity: 0.8; width: 135px; font-size: 15px; text-align: center; font-family: 'Roboto', sans-serif; } /* ---------------------------------------------------------------------------------------------------------- */ .display4{ width: 100%; height: 600px; display: flex; float: left; } .d4img{ width: 50%; height: 600px; } .d4img img{ padding-left: 52px; } .d4contant{ width: 50%; height: 600px; } .d4contant h3{ font-family: 'Lobster', cursive; color: #cc3333; font-size: 25px; padding-top:61px; } .d4contant h1{ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 44px; padding-top: 10px; } .d4contant p{ font-family: 'Roboto', sans-serif; font-size: 15px; padding-top: 10px; color: #666666; } .d4mainicon1{ width: 60%; height: 100px; display: flex; margin-top: 20px; /* float: left; */ } .d4icon1{ height: 100px; padding-left: 30px; padding-top: 30px; } .d4iconcontaint{ margin-left: 20px; height: 100px; } .d4iconcontaint h4{ font-family: 'Roboto', sans-serif; color: #cc3333; font-size: 15px; padding-top: 20px; } .d4iconcontaint p{ font-family: 'Roboto', sans-serif; font-size: 15px; margin-right: 30px; color: #666666; } .d4mainicon2{ width: 60%; height: 100px; display: flex; margin-top: 20px; /* float: left; */ } .d4icon2{ height: 100px; padding-left: 30px; padding-top: 30px; } .d4iconcontaint2{ margin-left: 20px; height: 100px; } .d4iconcontaint2 h4{ font-family: 'Roboto', sans-serif; color: #cc3333; font-size: 15px; padding-top: 20px; } .d4iconcontaint2 p{ font-family: 'Roboto', sans-serif; font-size: 15px; margin-right: 30px; } .btn1{ width: 127px; height: 40px; background-color: rgb(180, 20, 20); border: none; font-family: 'Roboto', sans-serif; font-weight: 600; color: white; margin-top: 20px; } /* ---------------------------------------------------------------------------------------------------------- */ .display5{ width: 100%; height: auto; margin-top: 50px; display: flex; } .d5title{ margin-top: 120px; width: 100%; height: 100px; /* display: flex; */ } .d5title h3{ font-family: 'Lobster', cursive; color: #cc3333; font-size: 25px; text-align: center; } .d5title h2{ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 30px; text-align: center; padding-top: 10px; } .display6{ width: 100%; display: flex; float: left; } .d5menu{ width: 60%; height: auto; float: left; margin-left: 301px; } .ulmenu{ list-style: none; } .limenu{ float: left; padding-left: 30px; } .limenu img{ padding-top: 20px; } .limenu h3{ color: #cc3333; font-family: 'Lobster', cursive; text-align: center; font-weight: 400; padding-bottom: 40px; } /* ------------------------------------------------------------------------------------------------------------------------- */ .display7{ width: 100%; height: 1200px; /* display: flex; */ margin-top: 30px; } .maincard1{ width: 90%; height: 500px; display: flex; float: left; margin-left: 73px; } .d7card1{ width: 30%; height: 500; } .d7card1 h3{ font-family: 'Roboto', sans-serif; padding-top: 20px; padding-left: 20px; } .d7card1 h3:hover{ color: #cc3333; } .d7card1 p{ font-family: 'Roboto', sans-serif; padding-top: 15px; font-size: 15px; padding-right: 40px; padding-left: 20px; color: #666666; } .d7card1 h4{ font-family: 'Roboto', sans-serif; padding-top: 20px; font-size: 15px; display: flex; float: left; padding-left: 20px; color: #cc3333; } .d7icon1{ font-size: 20px; padding-top: 20px; padding-left: 20px; margin-top: 20px; padding-left: 5px; padding-right: 5px; padding-top: 5px; color: white; padding-bottom: 5px; margin-left: 160px; } .d7icon1:hover{ color: #cc3333; } .d7icon2{ font-size: 20px; margin-top: 20px; font-size: 20px; padding-top: 10px; color: white; background-color: rgb(22, 22, 22); padding-left: 5px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px; } .d7icon2:hover{ background-color: #cc3333; } .d7card2{ width: 30%; height: 500; margin-left: 25px; } .d7card2 h3{ font-family: 'Roboto', sans-serif; padding-top: 20px; padding-left: 20px; } .d7card2 h3:hover{ color: #cc3333; } .d7card2 p{ font-family: 'Roboto', sans-serif; padding-top: 15px; font-size: 15px; padding-right: 40px; padding-left: 20px; color: #666666; } .d7card2 h4{ font-family: 'Roboto', sans-serif; padding-top: 20px; font-size: 15px; display: flex; float: left; padding-left: 20px; color: #cc3333; } .d7card3{ width: 30%; height: 500; margin-left: 25px; } .d7card3 h3{ font-family: 'Roboto', sans-serif; padding-top: 20px; padding-left: 20px; } .d7card3 h3:hover{ color: #cc3333; } .d7card3 p{ font-family: 'Roboto', sans-serif; padding-top: 15px; font-size: 15px; padding-right: 40px; padding-left: 20px; color: #666666; } .d7card3 h4{ font-family: 'Roboto', sans-serif; padding-top: 20px; font-size: 15px; display: flex; float: left; padding-left: 20px; color: #cc3333; } .maincard2{ width: 90%; height: 500px; display: flex; margin-left: 73px; padding-top: 20px; } .d7card4{ width: 30%; height: 500; margin-left: 25px; } .d7card4 h3{ font-family: 'Roboto', sans-serif; padding-top: 20px; padding-left: 20px; } .d7card4 h3:hover{ color: #cc3333; } .d7card4 p{ font-family: 'Roboto', sans-serif; padding-top: 15px; font-size: 15px; padding-right: 40px; padding-left: 20px; color: #666666; } .d7card4 h4{ font-family: 'Roboto', sans-serif; padding-top: 20px; font-size: 15px; display: flex; float: left; padding-left: 20px; color: #cc3333; } .d7card5{ width: 30%; height: 500; margin-left: 25px; } .d7card5 h3{ font-family: 'Roboto', sans-serif; padding-top: 20px; padding-left: 20px; } .d7card5 h3:hover{ color: #cc3333; } .d7card5 p{ font-family: 'Roboto', sans-serif; padding-top: 15px; font-size: 15px; padding-right: 40px; padding-left: 20px; color: #666666; } .d7card5 h4{ font-family: 'Roboto', sans-serif; padding-top: 20px; font-size: 15px; display: flex; float: left; padding-left: 20px; color: #cc3333; } .d7card6{ width: 30%; height: 500; margin-left: 25px; } .d7card6 h3{ font-family: 'Roboto', sans-serif; padding-top: 20px; padding-left: 20px; } .d7card6 h3:hover{ color: #cc3333; } .d7card6 p{ font-family: 'Roboto', sans-serif; padding-top: 15px; font-size: 15px; padding-right: 40px; padding-left: 20px; color: #666666; } .d7card6 h4{ font-family: 'Roboto', sans-serif; padding-top: 20px; font-size: 15px; display: flex; float: left; padding-left: 20px; color: #cc3333; } /* ------------------------------------------------------------------------------------------------------------------------- */ .display8{ width: 100%; height: 677px; display: flex; float: left; margin-top: 100px; } .d8title{ width: 40%; height: 800px; text-align: left; padding-left: 170px; padding-top: 70px; } .d8title h2{ font-family: 'Roboto', sans-serif; font-size: 30px; padding-top: 10px; } .d8title p{ font-family: 'Roboto', sans-serif; font-size: 15px; padding-top: 20px; padding-right: 100px; color: #666666; } .d8title img{ width: 142px; height: 42px; padding-top: 30px; } /* ------------------------------------------------------------------------------------------------------ */ .dispaly9{ width: 100%; height: 400px; background-image: url('../imges/food\ img.png'); background-size: cover; display: flex; margin-bottom: 120px; } .d9contant{ width: 50%; height: 350px; text-align: left; padding-left: 97px; padding-top: 54px; } .d9icon{ font-size: 40px; color: #cc3333; } .d9contant h2{ font-family: 'Roboto', sans-serif; font-size: 30px; text-align: center; padding-top: 20px; color: white; text-align: left; } .d9contant p{ font-family: 'Roboto', sans-serif; padding-top: 15px; font-size: 15px; color: white; text-align: left; } .d9card{ width: 30%; height: 400px; margin-top: 100px; margin-left: 63px; background-color: white; box-shadow: 0px 1px 20px 1px #2f2e2e52; } .d9card h4{ font-family: 'Lobster', cursive; color: #cc3333; font-size: 25px; text-align: center; padding-top: 10px; } .d9card h3{ font-family: 'Roboto', sans-serif; font-size: 30px; text-align: center; padding-top: 10px; } .d9ulmenu{ list-style: none; font-family: 'Roboto', sans-serif; padding-top: 25px; } .d9limenu{ padding-top: 20px; } .day{ width: 50%; /* display: flex; */ float: left; padding-left: 20px; } .time{ padding-right: 20px; text-align: right; } .d9card h5{ font-family: 'Lobster', cursive; color: #cc3333; font-size: 20px; text-align: center; padding-top: 40px; } /* ------------------------------------------------------------------------------------------------------------- */ .dispaly10{ width: 100%; height: 700px; display: flex; padding-top: 100px; } .display10title{ width: 100%; height: 150px; } .display10title h4{ font-family: 'Lobster', cursive; color: #cc3333; font-size: 25px; text-align: center; padding-top: 10px; } .display10title h2{ font-family: 'Roboto', sans-serif; font-size: 30px; text-align: center; padding-top: 10px; } .d10card{ width: 90%; height: 500px; display: flex; margin-top: 50px; margin-left: 99px; } .d10card1{ width: 30%; height: 450px; } .d10card1 h4{ font-family: 'Roboto', sans-serif; color: #292929; font-size: 20px; text-align: center; padding-top: 20px; } .d10card1 h5{ font-family: 'Roboto', sans-serif; color: #666666; /* font-size: 20px; */ text-align: center; padding-top: 10px; } .d10card1 h3{ padding-top: 10px; text-align: center; font-size: 30px; } .d10card1 h3:hover{ color: #cc3333; } .d10card2{ width: 30%; height: 450px; margin-left: 20px; } .d10card2 h4{ font-family: 'Roboto', sans-serif; color: #292929; font-size: 20px; text-align: center; padding-top: 20px; } .d10card2 h5{ font-family: 'Roboto', sans-serif; color: #666666; /* font-size: 20px; */ text-align: center; padding-top: 10px; } .d10card2 h3{ padding-top: 10px; text-align: center; font-size: 30px; } .d10card2 h3:hover{ color: #cc3333; } .d10card3{ width: 30%; height: 450px; margin-left: 20px; } .d10card3 h4{ font-family: 'Roboto', sans-serif; color: #292929; font-size: 20px; text-align: center; padding-top: 20px; } .d10card3 h5{ font-family: 'Roboto', sans-serif; color: #666666; /* font-size: 20px; */ text-align: center; padding-top: 10px; } .d10card3 h3{ padding-top: 10px; text-align: center; font-size: 30px; } .d10card3 h3:hover{ color: #cc3333; } .display10 { width: 100%; float: left; } /* ------------------------------------------------------------------------------------------------------------- */ .display11{ width: 100%; margin-top: 36%; height: 200px; display: flex; float: left; background-image: url('../imges/food\ img.png'); background-size: cover; } /* .display11::before{ position: absolute; content: ""; background-color: black; width: 100%; height: 300px; top: 0; left: 0; z-index: -1; } */ .d11ul{ float: left; display: flex; list-style: none; padding-top: 86px; padding-left: 143px; } .d11li{ padding-left: 30px; } .d11li img{ height: 47px; width: 218px; } /* ------------------------------------------------------------------------------------------------------ */ .display12{ width: 100%; height: 600px; margin-top: 1000px; margin-bottom: 50px; } .d12title{ text-align: center; width: 100%; padding-top: 50px; } .d12title h4{ font-family: 'Lobster', cursive; color: #cc3333; font-size: 25px; text-align: center; padding-top: 10px; } .d12title h2{ font-family: 'Roboto', sans-serif; font-size: 30px; text-align: center; padding-top: 10px; } .guestcard{ width: 80%; height: 550px; display: flex; margin-left: 227px; } .guestcardtitle{ width: 50%; height: 496px; padding-left: 20px; border-left: solid #cc3333; } .guestcardtitle img{ padding-top: 30px; } .guestcardtitle h2{ font-family: 'Roboto', sans-serif; font-size: 30px; text-align: left; padding-top: 51px; } .guestcardtitle p{ font-family: 'Roboto', sans-serif; padding-top: 15px; font-size: 15px; line-height: 27px; color: #666666; text-align: left; } .guestcardtitle h3{ font-family: 'Roboto', sans-serif; color: #292929; font-size: 20px; text-align: left; padding-top: 10px; float: left; } .guestcardtitle h5{ font-family: 'Roboto', sans-serif; color: #666666; font-size: 15px; text-align: left; padding-top: 20px; padding-left: 5px; } .guestphoto{ width: 30%; height: 550px; } /* -------------------------------------------------------------------------------------------------------- */ .display13{ width: 100%; height: 800px; } .d13title{ text-align: center; width: 100%; padding-top: 100px; } .d13title h4{ font-family: 'Lobster', cursive; color: #cc3333; font-size: 25px; text-align: center; padding-top: 10px; } .d13title h2{ font-family: 'Roboto', sans-serif; font-size: 30px; text-align: center; padding-top: 10px; } .d13maincard{ width: 90%; height: 700px; display: flex; margin-top: 50px; margin-left: 99px; } .d13card1{ width: 30.5%; height: 507px; box-shadow: 0px 5px 20px 1px #00000029; } .d13card1 h3{ font-family: 'Roboto', sans-serif; color: #292929; font-size: 20px; padding-top: 20px; padding-left: 20px; } .d13card1 h3:hover{ color: #cc3333; } .d13card1 p{ font-family: 'Roboto', sans-serif; padding-top: 15px; font-size: 15px; line-height: 27px; color: #666666; text-align: left; padding-left: 20px; } .d13card1 h6{ color: #666666; text-align: center; } .d13card1 h5{ font-family: 'Roboto', sans-serif; padding-top: 15px; font-size: 11px; line-height: 27px; color: #666666; text-align: left; float: left; padding-left: 20px; } .d13card1 h4{ font-family: 'Roboto', sans-serif; color: #292929; font-size: 16px; padding-top: 20px; text-align: right; padding-right: 20px; } .d13card1 h4:hover{ color: #cc3333; } .d13card2{ width: 30.5%; height: 507px; padding-left: 23px; box-shadow: 0px 5px 20px 1px #00000029; } .d13card2 h3{ font-family: 'Roboto', sans-serif; color: #292929; font-size: 20px; padding-top: 20px; padding-left: 20px; } .d13card2 h3:hover{ color: #cc3333; } .d13card2 p{ font-family: 'Roboto', sans-serif; padding-top: 15px; font-size: 15px; line-height: 27px; color: #666666; text-align: left; padding-left: 20px; } .d13card2 h6{ color: #666666; text-align: center; } .d13card2 h5{ font-family: 'Roboto', sans-serif; padding-top: 15px; font-size: 11px; line-height: 27px; color: #666666; text-align: left; float: left; padding-left: 20px; } .d13card2 h4{ font-family: 'Roboto', sans-serif; color: #292929; font-size: 16px; padding-top: 20px; text-align: right; padding-right: 20px; } .d13card2 h4:hover{ color: #cc3333; } .d13card3{ width: 30.5%; height: 507px; padding-left: 23px; box-shadow: 0px 5px 20px 1px #00000029; } .d13card3 h3{ font-family: 'Roboto', sans-serif; color: #292929; font-size: 20px; padding-top: 20px; padding-left: 20px; } .d13card3 h3:hover{ color: #cc3333; } .d13card3 p{ font-family: 'Roboto', sans-serif; padding-top: 15px; font-size: 15px; line-height: 27px; color: #666666; text-align: left; padding-left: 20px; } .d13card3 h6{ color: #666666; text-align: center; } .d13card3 h5{ font-family: 'Roboto', sans-serif; padding-top: 15px; font-size: 11px; line-height: 27px; color: #666666; text-align: left; float: left; padding-left: 20px; } .d13card3 h4{ font-family: 'Roboto', sans-serif; color: #292929; font-size: 16px; padding-top: 20px; text-align: right; padding-right: 20px; } .d13card3 h4:hover{ color: #cc3333; } /* ------------------------------------------------------------------------------------------------------ */ .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; }

Free Cafe Template

Features of The Restaurant Cafe Template

HTML

CSS

JS