<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Title -->
<title>Soup - Restaurant with Online Ordering System Template</title>
<!-- Favicons -->
<link rel="shortcut icon" href="assets/img/favicon.png">
<link rel="apple-touch-icon" href="assets/img/favicon_60x60.png">
<link rel="apple-touch-icon" sizes="76x76" href="assets/img/favicon_76x76.png">
<link rel="apple-touch-icon" sizes="120x120" href="assets/img/favicon_120x120.png">
<link rel="apple-touch-icon" sizes="152x152" href="assets/img/favicon_152x152.png">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&family=Raleway:wght@100;200;400;500&display=swap" rel="stylesheet">
<!-- CSS Core -->
<link rel="stylesheet" href="dist/css/core.css" />
<!-- CSS Theme -->
<link id="theme" rel="stylesheet" href="dist/css/theme-beige.css" />
</head>
<body>
<!-- Body Wrapper -->
<div id="body-wrapper" class="animsition">
<!-- Header -->
<header id="header" class="light">
<div class="container">
<div class="row">
<div class="col-md-3">
<!-- Logo -->
<div class="module module-logo dark">
<a href="index.html">
<img src="assets/img/logo-light.svg" alt="" width="88">
</a>
</div>
</div>
<div class="col-md-7">
<!-- Navigation -->
<nav class="module module-navigation left mr-4">
<ul id="nav-main" class="nav nav-main">
<li class="has-dropdown">
<a href="#">Home</a>
<div class="dropdown-container">
<ul>
<li><a href="index.html">Home Basic</a></li>
<li><a href="index-burgers.html">Home Burgers</a></li>
<li><a href="index-slider.html">Home Fullwidth Slider</a></li>
<li><a href="index-video.html">Home Video</a></li>
<li><a href="index-fresh.html">Home Fresh <span class="badge badge-success">New</span></a></li>
<li><a href="index-dark.html">Home Dark <span class="badge badge-success">New</span></a></li>
</ul>
</div>
</li>
<li class="has-dropdown">
<a href="#">About</a>
<div class="dropdown-container">
<ul class="dropdown-mega">
<li><a href="page-about.html">About Us</a></li>
<li><a href="page-services.html">Services</a></li>
<li><a href="page-gallery.html">Gallery</a></li>
<li><a href="page-reviews.html">Reviews</a></li>
<li><a href="page-faq.html">FAQ</a></li>
</ul>
<div class="dropdown-image">
<img src="http://assets.suelo.pl/soup/img/photos/dropdown-about.jpg" alt="">
</div>
</div>
</li>
<li class="has-dropdown">
<a href="#">Menu</a>
<div class="dropdown-container">
<ul>
<li class="has-dropdown">
<a href="#">List</a>
<ul>
<li><a href="menu-list-navigation.html">Navigation</a></li>
<li><a href="menu-list-collapse.html">Collapse</a></li>
</ul>
</li>
<li class="has-dropdown">
<a href="#">Grid</a>
<ul>
<li><a href="menu-grid-navigation.html">Navigation</a></li>
<li><a href="menu-grid-collapse.html">Collapse</a></li>
</ul>
</li>
</ul>
</div>
</li>
<li><a href="page-offers.html">Offers</a></li>
<li><a href="page-contact.html">Contact</a></li>
<li class="has-dropdown">
<a href="#">More</a>
<div class="dropdown-container">
<ul class="dropdown-mega">
<li><a href="page-offer-single.html">Offer single</a></li>
<li><a href="page-product.html">Product</a></li>
<li><a href="book-a-table.html">Book a table</a></li>
<li><a href="checkout.html">Checkout</a></li>
<li><a href="confirmation.html">Confirmation</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="blog-sidebar.html">Blog + Sidebar</a></li>
<li><a href="blog-post.html">Blog Post</a></li>
<li><a href="documentation/" target="_blank">Documentation</a></li>
</ul>
<div class="dropdown-image">
<img src="http://assets.suelo.pl/soup/img/photos/dropdown-more.jpg" alt="">
</div>
</div>
</li>
</ul>
</nav>
<div class="module left">
<a href="menu-list-navigation.html" class="btn btn-outline-secondary"><span>Order</span></a>
</div>
</div>
<div class="col-md-2">
<a href="#" class="module module-cart right" data-toggle="panel-cart">
<span class="cart-icon">
<i class="ti ti-shopping-cart"></i>
<span class="notification">0</span>
</span>
<span class="cart-value">$<span class="value">0.00</span></span>
</a>
</div>
</div>
</div>
</header>
<!-- Header / End -->
<!-- Header -->
<header id="header-mobile" class="light">
<div class="module module-nav-toggle">
<a href="#" id="nav-toggle" data-toggle="panel-mobile"><span></span><span></span><span></span><span></span></a>
</div>
<div class="module module-logo">
<a href="index.html">
<img src="assets/img/logo-horizontal-dark.svg" alt="">
</a>
</div>
<a href="#" class="module module-cart" data-toggle="panel-cart">
<i class="ti ti-shopping-cart"></i>
<span class="notification">0</span>
</a>
</header>
<!-- Header / End -->
<!-- Content -->
<div id="content">
<!-- Page Title -->
<div class="page-title bg-light">
<div class="container">
<div class="row">
<div class="col-lg-8 offset-lg-4">
<h1 class="mb-0">Blog</h1>
<h4 class="text-muted mb-0">Some informations about our restaurant</h4>
</div>
</div>
</div>
</div>
<!-- Page Content -->
<div class="page-content bg-light">
<div class="container">
<div class="row">
<div class="col-lg-10 offset-lg-1">
<!-- Post / Item -->
<article class="post post-wide animated" data-animation="fadeIn">
<div class="post-image"><img src="http://assets.suelo.pl/soup/img/posts/post01.jpg" alt=""></div>
<div class="post-content">
<ul class="post-meta">
<li>24 July, 2016</li>
<li>by Johnatan Doe</li>
</ul>
<h4><a href="blog-post.html">Delicious idea for your Sunday dessert</a></h4>
<p>Nulla leo lectus, commodo porttitor lacus a, placerat facilisis ligula.</p>
</div>
</article>
<!-- Post / Item -->
<article class="post post-wide animated" data-animation="fadeIn">
<div class="post-image"><img src="http://assets.suelo.pl/soup/img/posts/post02.jpg" alt=""></div>
<div class="post-content">
<ul class="post-meta">
<li>24 July, 2016</li>
<li>by Johnatan Doe</li>
</ul>
<h4><a href="blog-post.html">How to make perfect Pasta?</a></h4>
<p>Nulla leo lectus, commodo porttitor lacus a, placerat facilisis ligula.</p>
</div>
</article>
<!-- Post / Item -->
<article class="post post-wide animated" data-animation="fadeIn">
<div class="post-image"><img src="http://assets.suelo.pl/soup/img/posts/post03.jpg" alt=""></div>
<div class="post-content">
<ul class="post-meta">
<li>24 July, 2016</li>
<li>by Johnatan Doe</li>
</ul>
<h4><a href="blog-post.html">Delicious idea for your Sunday dessert</a></h4>
<p>Nulla leo lectus, commodo porttitor lacus a, placerat facilisis ligula.</p>
</div>
</article>
<!-- Post / Item -->
<article class="post post-wide animated" data-animation="fadeIn">
<div class="post-image"><img src="http://assets.suelo.pl/soup/img/posts/post04.jpg" alt=""></div>
<div class="post-content">
<ul class="post-meta">
<li>24 July, 2016</li>
<li>by Johnatan Doe</li>
</ul>
<h4><a href="blog-post.html">How to make perfect Pasta?</a></h4>
<p>Nulla leo lectus, commodo porttitor lacus a, placerat facilisis ligula.</p>
</div>
</article>
<!-- Post / Item -->
<article class="post post-wide animated" data-animation="fadeIn">
<div class="post-image"><img src="http://assets.suelo.pl/soup/img/posts/post05.jpg" alt=""></div>
<div class="post-content">
<ul class="post-meta">
<li>24 July, 2016</li>
<li>by Johnatan Doe</li>
</ul>
<h4><a href="blog-post.html">How to make perfect Pasta?</a></h4>
<p>Nulla leo lectus, commodo porttitor lacus a, placerat facilisis ligula.</p>
</div>
</article>
<!-- Pagination -->
<nav aria-label="Page navigation" class="mt-5">
<ul class="pagination justify-content-center">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<i class="ti ti-arrow-left"></i>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item"><a class="page-link active" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<i class="ti ti-arrow-right"></i>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer id="footer" class="bg-dark dark">
<div class="container">
<!-- Footer 1st Row -->
<div class="footer-first-row row">
<div class="col-lg-3 text-center">
<a href="index.html"><img src="assets/img/logo-light.svg" alt="" width="88" class="mt-5 mb-5"></a>
</div>
<div class="col-lg-4 col-md-6">
<h5 class="text-muted">Latest news</h5>
<ul class="list-posts">
<li>
<a href="blog-post.html" class="title">How to create effective webdeisign?</a>
<span class="date">February 14, 2015</span>
</li>
<li>
<a href="blog-post.html" class="title">Awesome weekend in Polish mountains!</a>
<span class="date">February 14, 2015</span>
</li>
<li>
<a href="blog-post.html" class="title">How to create effective webdeisign?</a>
<span class="date">February 14, 2015</span>
</li>
</ul>
</div>
<div class="col-lg-5 col-md-6">
<h5 class="text-muted">Subscribe Us!</h5>
<!-- MailChimp Form -->
<form action="//suelo.us12.list-manage.com/subscribe/post-json?u=ed47dbfe167d906f2bc46a01b&id=24ac8a22ad" id="sign-up-form" class="sign-up-form validate-form mb-5" method="POST">
<div class="input-group">
<input name="EMAIL" id="mce-EMAIL" type="email" class="form-control" placeholder="Tap your e-mail..." required>
<span class="input-group-btn">
<button class="btn btn-primary btn-submit" type="submit">
<span class="description">Subscribe</span>
<span class="success">
<svg x="0px" y="0px" viewBox="0 0 32 32"><path stroke-dasharray="19.79 19.79" stroke-dashoffset="19.79" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11"/></svg>
</span>
<span class="error">Try again...</span>
</button>
</span>
</div>
</form>
<h5 class="text-muted mb-3">Social Media</h5>
<a href="#" class="icon icon-social icon-circle icon-sm icon-facebook"><i class="fa fa-facebook"></i></a>
<a href="#" class="icon icon-social icon-circle icon-sm icon-google"><i class="fa fa-google"></i></a>
<a href="#" class="icon icon-social icon-circle icon-sm icon-twitter"><i class="fa fa-twitter"></i></a>
<a href="#" class="icon icon-social icon-circle icon-sm icon-youtube"><i class="fa fa-youtube"></i></a>
<a href="#" class="icon icon-social icon-circle icon-sm icon-instagram"><i class="fa fa-instagram"></i></a>
</div>
</div>
<!-- Footer 2nd Row -->
<div class="footer-second-row">
<span class="text-muted">Copyright Soup 2020©. Made with love by Suelo.</span>
</div>
</div>
<!-- Back To Top -->
<button id="back-to-top" class="back-to-top"><i class="ti ti-angle-up"></i></button>
</footer>
<!-- Footer / End -->
</div>
<!-- Content / End -->
<!-- Panel Cart -->
<div id="panel-cart">
<div class="panel-cart-container">
<div class="panel-cart-title">
<h5 class="title">Your Cart</h5>
<button class="close" data-toggle="panel-cart"><i class="ti ti-close"></i></button>
</div>
<div class="panel-cart-content cart-details">
<table class="cart-table">
<tr>
<td class="title">
<span class="name"><a href="#product-modal" data-toggle="modal">Beef Burger</a></span>
<span class="caption text-muted">Large (500g)</span>
</td>
<td class="price">$9.00</td>
<td class="actions">
<a href="#product-modal" data-toggle="modal" class="action-icon"><i class="ti ti-pencil"></i></a>
<a href="#" class="action-icon"><i class="ti ti-close"></i></a>
</td>
</tr>
<tr>
<td class="title">
<span class="name"><a href="#product-modal" data-toggle="modal">Extra Burger</a></span>
<span class="caption text-muted">Small (200g)</span>
</td>
<td class="price text-success">$9.00</td>
<td class="actions">
<a href="#product-modal" data-toggle="modal" class="action-icon"><i class="ti ti-pencil"></i></a>
<a href="#" class="action-icon"><i class="ti ti-close"></i></a>
</td>
</tr>
</table>
<div class="cart-summary">
<div class="row">
<div class="col-7 text-right text-muted">Order total:</div>
<div class="col-5"><strong>$<span class="cart-products-total">0.00</span></strong></div>
</div>
<div class="row">
<div class="col-7 text-right text-muted">Devliery:</div>
<div class="col-5"><strong>$<span class="cart-delivery">0.00</span></strong></div>
</div>
<hr class="hr-sm">
<div class="row text-lg">
<div class="col-7 text-right text-muted">Total:</div>
<div class="col-5"><strong>$<span class="cart-total">0.00</span></strong></div>
</div>
</div>
<div class="cart-empty">
<i class="ti ti-shopping-cart"></i>
<p>Your cart is empty...</p>
</div>
</div>
</div>
<a href="checkout.html" class="panel-cart-action btn btn-secondary btn-block btn-lg"><span>Go to checkout</span></a>
</div>
<!-- Panel Mobile -->
<nav id="panel-mobile">
<div class="module module-logo bg-dark dark">
<a href="#">
<img src="assets/img/logo-light.svg" alt="" width="88">
</a>
<button class="close" data-toggle="panel-mobile"><i class="ti ti-close"></i></button>
</div>
<nav class="module module-navigation"></nav>
<div class="module module-social">
<h6 class="text-sm mb-3">Follow Us!</h6>
<a href="#" class="icon icon-social icon-circle icon-sm icon-facebook"><i class="fa fa-facebook"></i></a>
<a href="#" class="icon icon-social icon-circle icon-sm icon-google"><i class="fa fa-google"></i></a>
<a href="#" class="icon icon-social icon-circle icon-sm icon-twitter"><i class="fa fa-twitter"></i></a>
<a href="#" class="icon icon-social icon-circle icon-sm icon-youtube"><i class="fa fa-youtube"></i></a>
<a href="#" class="icon icon-social icon-circle icon-sm icon-instagram"><i class="fa fa-instagram"></i></a>
</div>
</nav>
<!-- Body Overlay -->
<div id="body-overlay"></div>
</div>
<!-- Modal / Product -->
<div class="modal fade product-modal" id="product-modal" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header modal-header-lg dark bg-dark">
<div class="bg-image"><img src="http://assets.suelo.pl/soup/img/photos/modal-add.jpg" alt=""></div>
<h4 class="modal-title">Specify your dish</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="ti ti-close"></i></button>
</div>
<div class="modal-product-details">
<div class="row align-items-center">
<div class="col-9">
<h6 class="mb-1 product-modal-name">Boscaiola Pasta</h6>
<span class="text-muted product-modal-ingredients">Pasta, Cheese, Tomatoes, Olives</span>
</div>
<div class="col-3 text-lg text-right">$<span class="product-modal-price"></span></div>
</div>
</div>
<div class="modal-body panel-details-container">
<!-- Panel Details / Size -->
<div class="panel-details panel-details-size">
<h5 class="panel-details-title">
<label class="custom-control custom-radio">
<input name="radio_title_size" type="radio" class="custom-control-input">
<span class="custom-control-indicator"></span>
</label>
<a href="#panel-details-sizes-list" data-toggle="collapse">Size</a>
</h5>
<div id="panel-details-sizes-list" class="collapse show">
<div class="panel-details-content">
<div class="product-modal-sizes">
<div class="form-group">
<label class="custom-control custom-radio">
<input name="radio_size" type="radio" class="custom-control-input" checked>
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Small - 100g ($9.99)</span>
</label>
</div>
<div class="form-group">
<label class="custom-control custom-radio">
<input name="radio_size" type="radio" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Medium - 200g ($14.99)</span>
</label>
</div>
<div class="form-group">
<label class="custom-control custom-radio">
<input name="radio_size" type="radio" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Large - 350g ($21.99)</span>
</label>
</div>
</div>
</div>
</div>
</div>
<!-- Panel Details / Additions -->
<div class="panel-details panel-details-additions">
<h5 class="panel-details-title">
<label class="custom-control custom-radio">
<input name="radio_title_additions" type="radio" class="custom-control-input">
<span class="custom-control-indicator"></span>
</label>
<a href="#panel-details-additions-content" data-toggle="collapse">Additions</a>
</h5>
<div id="panel-details-additions-content" class="collapse">
<div class="panel-details-content">
<!-- Additions List -->
<div class="row product-modal-additions">
<div class="col-sm-6">
<div class="form-group">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Tomato ($1.29)</span>
</label>
</div>
<div class="form-group">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Ham ($1.29)</span>
</label>
</div>
<div class="form-group">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Chicken ($1.29)</span>
</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Cheese($1.29)</span>
</label>
</div>
<div class="form-group">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Bacon ($1.29)</span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Panel Details / Other -->
<div class="panel-details panel-details-form">
<h5 class="panel-details-title">
<label class="custom-control custom-radio">
<input name="radio_title_other" type="radio" class="custom-control-input">
<span class="custom-control-indicator"></span>
</label>
<a href="#panel-details-other" data-toggle="collapse">Other</a>
</h5>
<div id="panel-details-other" class="collapse">
<form action="#">
<textarea cols="30" rows="4" class="form-control" placeholder="Put this any other informations..."></textarea>
</form>
</div>
</div>
</div>
<button type="button" class="modal-btn btn btn-secondary btn-block btn-lg" data-action="add-to-cart"><span>Add to Cart</span></button>
<button type="button" class="modal-btn btn btn-secondary btn-block btn-lg" data-action="update-cart"><span>Update</span></button>
</div>
</div>
</div>
<!-- Cookies Bar -->
<div id="cookies-bar" class="body-bar cookies-bar">
<div class="body-bar-container container">
<div class="body-bar-text">
<h4 class="mb-2">Cookies & GDPR</h4>
<p>This is a sample Cookies / GDPR information. You can use it easily on your site and even add link to <a href="#">Privacy Policy</a>.</p>
</div>
<div class="body-bar-action">
<button class="btn btn-primary" data-accept="cookies"><span>Accept</span></button>
</div>
</div>
</div>
<!-- JS Core -->
<script src="dist/js/core.js"></script>
</body>
</html>