Arcas Restaurant HTML template

Is flat designed, well organized template for restaurant. Responsive layouts are available for mobile and tablet devices.

restaurant template preview

Folder structure

  • project
    • assets
      • Contains all assets used by the template
      • css
        • Contains CSS file/s
      • fonts
        • Contains fonts used by the template
      • img
        • Contains all images used by the template
      • js
        • Contains JS file/s
      • vendor
        • Contains all vendor files (ie. bootstrap, jquery, etc.)

Icons

We use icons from flaticon.com in the template.

Fonts

We use fonts from fonts.google.com in the template.

Poppins

https://fonts.google.com/specimen/Poppins?query=poppins

Kaushan script

https://fonts.google.com/specimen/Kaushan+Script?query=kausha

Heading 1

Heading 2

Heading 3

Heading 4

External sources

We used external sources listed below in the template.

Fonts

https://fonts.google.com/

Icons

https://www.flaticon.com/

Images

https://unsplash.com/

Elements


Heading 1

Heading 2

Heading 3

Heading 4

<h1 class="title">Heading 1</h1>
<h2 class="title">Heading 2</h2>
<h3 class="title">Heading 3</h3>
<h4 class="title">Heading 4</h4>

<button type="button" class="arcas-btn arcas-btn-stylized-red arcas-btn-rounded">Button</button>
1 2 3 ... >
<div class="pagination-container">
 <a href="#" class="pagination-circle active">1</a>
 <a href="#" class="pagination-circle">2</a>
 <a href="#" class="pagination-circle">3</a>
 <a href="#" class="pagination-circle">...</a>
 <a href="#" class="pagination-circle">></a>
</div>

<label class="arcas-checkbox">Unchecked
 <input type="checkbox">
 <span class="checkmark"></span>
</label>

<label class="arcas-radio">Unchecked
 <input type="radio" name="radio">
 <span class="checkmark"></span>
</label>

<label class="arcas-switch">
 <input type="checkbox">
 <span class="slider"></span>
</label>

<div class="arcas-select">
 <select>
  <option value="one">Option one</option>
  <option value="two">Option two</option>
  <option value="three">Option three</option>
  <option value="four">Option four</option>
 </select>
</div>

<div class="input-light">
 <div class="form-group">
  <input type="text" class="form-control" placeholder="Your name">
 </div>
</div>

<div class="input-dark">
 <div class="form-group">
  <input type="text" class="form-control" placeholder="Your name">
 </div>
</div>

Alert 1 - success
Alert 2 - warning
Alert 3 - danger
Alert 4 - info
<div class="alert alert-success">Alert 1 - success</div>
<div class="alert alert-warning">Alert 2 - warning</div>
<div class="alert alert-danger">Alert 3 - danger</div>
<div class="alert alert-info">Alert 4 - info</div>

<div class="element-container">
 <div class="news-container">
  <a class="card border-0" href="#">
    <div class="card-img-container">
     <img src="/doc/assets/img/pages/elements/blog1.png" alt="blog image">
     <div class="date date-absolute">10/03/2020</div>
    </div>
    <div class="card-body">
     <h5 class="fancy-title">New lorem ipsum dolor</h5>
     <div class="divider-red"></div>
     <div class="news-text">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet
       ligula sed ipsum tristique pretium. In sed neque in velit ultrices commodo
       In dignissim euismod erat, eu elementarum massa lacinia...
     </div>
    </div>
  </a>
 </div>
</div>

<div class="element-container">
 <div class="news-detail-other-content">
  <a href="#" class="card">
    <div class="card-img-top">
     <img src="/doc/assets/img/pages/elements/news-small1.png" alt="news image">
     <p class="news-detail-other-image-short">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet ligula sed ipsum tristique pretium.</p>
    </div>
    <div class="card-body">
     <div class="date">10/03/2020</div>
     <div class="fancy-title">New lorem ipsum dolor</div>
     <div class="divider-red divider-centered"></div>
    </div>
  </a>
 </div>
</div>

wedding image

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div class="element-container">
 <div class="news-detail-other">
  <div class="news-detail-other-content">
    <div class="card">
     <div class="card-img-top view-image">
      <img src="/doc/assets/img/pages/elements/photo3.png" alt="wedding image">
      <p class="news-detail-other-image-short">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
     </div>
    </div>
  </div>
 </div>
</div>
<div class="image-modal">
 <button type="button" class="close" data-dismiss="modal"><span class="close-icon"></span></button>
 <img id="image-preview">
</div>

Opening hours

Mon 11:00 - 22:00
Tue 11:00 - 22:00
Wed 11:00 - 22:00
Thu 11:00 - 22:00
Fri 11:00 - 00:00
Sat 14:00 - 00:00
Sun Closed
<div class="element-container">
 <div class="d-flex justify-content-center">
  <div class="contact-us-opening-hours">
    <h3 class="fancy-title">Opening hours</h3>
    <div class="divider-red"></div>
    <table class="table table-striped">
     <tbody>
      <tr>
        <th scope="row">Mon</th>
        <td>11:00 - 22:00</td>
      </tr>
      <tr>
        <th scope="row">Tue</th>
        <td>11:00 - 22:00</td>
      </tr>
      <tr>
        <th scope="row">Wed</th>
        <td>11:00 - 22:00</td>
      </tr>
      <tr>
        <th scope="row">Thu</th>
        <td>11:00 - 22:00</td>
      </tr>
      <tr>
        <th scope="row">Fri</th>
        <td>11:00 - 00:00</td>
      </tr>
      <tr>
        <th scope="row">Sat</th>
        <td>14:00 - 00:00</td>
      </tr>
      <tr>
        <th scope="row">Sun</th>
        <td>Closed</td>
      </tr>
     </tbody>
    </table>
  </div>
 </div>
</div>

<div class="element-container">
 <div class="menu-container tabs">
  <ul class="nav nav-tabs menu-categories">
   <li class="nav-item menu-category">
    <a class="nav-link" data-toggle="tab" href="#menu1">
     <span class="lunch-img"></span>
      Lunch menu
     </a>
    </li>
    <li class="nav-item menu-category">
     <a class="nav-link active" data-toggle="tab" href="#menu2">
      <span class="specialities-img"></span>
      Specialities
     </a>
    </li>
    <li class="nav-item menu-category">
     <a class="nav-link" data-toggle="tab" href="#menu3">
      <span class="drinks-img"></span>
      Drinks
     </a>
    </li>
  </ul>

  <div class="tab-content">
    <div id="menu1" class="tab-pane menu-content-container">
     <div class="menu-content">
      <h2 class="fancy-title text-center mb-4">Starter</h2>
      <div class="divider-red divider-centered"></div>
      <ul class="menu-content-list">
        <li class="menu-item">
         <div class="menu-item-info">
          <div class="menu-item-name">Gazpacho</div>
          <div class="menu-item-desc">Pickled cucumber, black olive & basil</div>
         </div>
         <div class="menu-item-price">15 USD</div>
        </li>

        <li class="menu-item">
         <div class="menu-item-info">
          <div class="menu-item-name">Thal Salad</div>
          <div class="menu-item-desc">Pomelo, cucumber & fresh coconut</div>
         </div>
         <div class="menu-item-price">15 USD</div>
        </li>

        <li class="menu-item">
         <div class="menu-item-info">
          <div class="menu-item-name">Salmon Cevich</div>
          <div class="menu-item-desc">Ginger, chilli & avocado</div>
         </div>
         <div class="menu-item-price">19 USD</div>
        </li>
      </ul>
     </div>
    </div>

    <div id="menu2" class="tab-pane menu-content-container active">
     <div class="menu-content">
      <h2 class="fancy-title text-center mb-4">Chef's selection</h2>
      <div class="divider-red divider-centered"></div>
      <ul class="menu-content-list">
        <li class="menu-item">
         <div class="menu-item-info">
          <div class="menu-item-name">Salmon tacoma</div>
          <div class="menu-item-desc">Cherry mustard sauce and wild pilaf</div>
         </div>
         <div class="menu-item-price">13 USD</div>
        </li>

        <li class="menu-item">
         <div class="menu-item-info">
          <div class="menu-item-name">Culf shrimp scampi</div>
          <div class="menu-item-desc">Shrimp sautéed in garlic, lemon & butter</div>
         </div>
         <div class="menu-item-price">14 USD</div>
        </li>

        <li class="menu-item">
          <div class="menu-item-info">
          <div class="menu-item-name">Chicken teriyaki</div>
         </div>
         <div class="menu-item-price">11 USD</div>
        </li>
      </ul>
     </div>
    </div>

    <div id="menu3" class="tab-pane menu-content-container">
     <div class="menu-content">
      <h2 class="fancy-title text-center mb-4">Cocktails</h2>
      <div class="divider-red divider-centered"></div>
      <ul class="menu-content-list">
        <li class="menu-item">
         <div class="menu-item-info">
          <div class="menu-item-name">Margarita</div>
         </div>
         <div class="menu-item-price">8 USD</div>
        </li>

        <li class="menu-item">
         <div class="menu-item-info">
          <div class="menu-item-name">Mojito</div>
         </div>
         <div class="menu-item-price">6 USD</div>
        </li>

        <li class="menu-item">
         <div class="menu-item-info">
          <div class="menu-item-name">Bloody Mary</div>
         </div>
         <div class="menu-item-price">5 USD</div>
      </li>
     </ul>
    </div>
   </div>
  </div>
 </div>
</div>

New lorem ipsum dolor

Aenean varius nulla nibh, vel sodales urna sollicitudin at. Etiam nec felis a dolor eleifend consectetur at a risus.

New lorem ipsum dolor 2

In hendrerit malesuada consectetur. In a rhoncus nibh. scelerisque. Sed mi ante, lobortis quis imperdiet eget.

New lorem ipsum dolor 3

Nullam laoreet facilisis sem, id efficitur orci viverra quis. Donec faucibus, tellus quis eleifend lacinia, est odio.

<div class="element-container">
 <div class="tabs">
  <ul class="nav nav-tabs">
    <li class="nav-item">
     <a class="nav-link active" data-toggle="tab" href="#tab1">Tab name 1</a>
    </li>
    <li class="nav-item">
     <a class="nav-link" data-toggle="tab" href="#tab2">Tab name 2</a>
    </li>
    <li class="nav-item">
     <a class="nav-link" data-toggle="tab" href="#tab3">Tab name 3</a>
    </li>
  </ul>

  <div class="tab-content">
    <div id="tab1" class="tab-pane active">
     <h2 class="fancy-title">New lorem ipsum dolor</h2>
     <div class="divider-red divider-tall"></div>
     <p>
       Aenean varius nulla nibh, vel sodales urna sollicitudin at.
       Etiam nec felis a dolor eleifend consectetur at a risus.
     </p>
    </div>
    <div id="tab2" class="tab-pane">
     <h2 class="fancy-title">New lorem ipsum dolor 2</h2>
     <div class="divider-red divider-tall"></div>
     <p>
       In hendrerit malesuada consectetur. In a rhoncus nibh.
       scelerisque. Sed mi ante, lobortis quis imperdiet eget.
      </p>
    </div>
    <div id="tab3" class="tab-pane">
     <h2 class="fancy-title">New lorem ipsum dolor 3</h2>
     <div class="divider-red divider-tall"></div>
     <p>
       Nullam laoreet facilisis sem, id efficitur orci viverra quis.
       Donec faucibus, tellus quis eleifend lacinia, est odio.
     </p>
    </div>
  </div>
 </div>
</div>

In hendrerit malesuada consectetur. In a rhoncus nibh. Vivamus et iaculis nulla. Pellentesque cursus nisl vitae.

Donec consectetur sapien eget luctus pharetra. Aliquam eleifend vehicula turpis, sed ornare. Nunc ac vulputate purus, nec suscipit nisl.

Duis elementum consectetur massa in scelerisque. Nullam sodales convallis felis, nec ultrices mauris.

Nam ac ultrices lorem. Morbi lacinia tristique lectus. Mauris gravida nisl vel turpis semper interdum. Phasellus cursus lacus quis nunc faucibus tincidunt.

In efficitur placerat lacus, vel ultricies tellus. Sed molestie cursus efficitur. Suspendisse mollis interdum felis, eget laoreet. Aenean eget velit et nisi euismod placerat at et.

Ut sagittis condimentum enim, non tempus tortor. Phasellus vitae orci ac magna finibus hendrerit. Fusce blandit quis turpis in finibus.

<div class="sidemenu-container row">
 <div class="nav nav-tabs col-12 col-sm-4">
  <a class="side-link active" data-toggle="tab" href="#slide1">Slide 1</a>
  <a class="side-link" data-toggle="tab" href="#slide2">Slide 2</a>
  <a class="side-link" data-toggle="tab" href="#slide3">Slide 3</a>
  <a class="side-link" data-toggle="tab" href="#slide4">Slide 4</a>
  <a class="side-link" data-toggle="tab" href="#slide5">Slide 5</a>
  <a class="side-link" data-toggle="tab" href="#slide6">Slide 6</a>
 </div>
 <div class="tab-content col-sm-8 col-12">
  <div id="slide1" class="tab-pane active">
    <p>
      In hendrerit malesuada consectetur. In a rhoncus nibh.
      Vivamus et iaculis nulla. Pellentesque cursus nisl vitae.
    </p>
  </div>
  <div id="slide2" class="tab-pane">
    <p>
      Donec consectetur sapien eget luctus pharetra.
      Aliquam eleifend vehicula turpis, sed ornare.
      Nunc ac vulputate purus, nec suscipit nisl.
    </p>
  </div>
  <div id="slide3" class="tab-pane">
    <p>
      Duis elementum consectetur massa in scelerisque.
      Nullam sodales convallis felis, nec ultrices mauris.
    </p>
  </div>
  <div id="slide4" class="tab-pane">
    <p>
      Nam ac ultrices lorem. Morbi lacinia tristique lectus.
      Mauris gravida nisl vel turpis semper interdum.
      Phasellus cursus lacus quis nunc faucibus tincidunt.
    </p>
  </div>
  <div id="slide5" class="tab-pane">
    <p>
      In efficitur placerat lacus, vel ultricies tellus.
      Sed molestie cursus efficitur.
      Suspendisse mollis interdum felis, eget laoreet.
      Aenean eget velit et nisi euismod placerat at et.
    </p>
  </div>
  <div id="slide6" class="tab-pane">
    <p>
      Ut sagittis condimentum enim, non tempus tortor.
      Phasellus vitae orci ac magna finibus hendrerit.
      Fusce blandit quis turpis in finibus.
    </p>
  </div>
 </div>
</div>