<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>

<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>

<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="arcas-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="arcas-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>

<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="btn-close" aria-label="close"><span class="close-icon"></span></button>
 <img id="image-preview" src="#" alt="image preview">
</div>

<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" role="tablist">
    <li class="nav-item menu-category">
     <a class="nav-link active" id="menu1-tab" data-bs-toggle="tab" data-bs-target="#menu1" role="tab" aria-controls="menu1" aria-selected="true" href="#">
      <span class="lunch-img"></span>
        Lunch menu
     </a>
    </li>
    <li class="nav-item menu-category">
     <a class="nav-link" id="menu2-tab" data-bs-toggle="tab" data-bs-target="#menu2" role="tab" aria-controls="menu2" aria-selected="false" href="#">
      <span class="specialities-img"></span>
      Specialities
     </a>
    </li>
    <li class="nav-item menu-category">
     <a class="nav-link" id="menu3-tab" data-bs-toggle="tab" data-bs-target="#menu3" role="tab" aria-controls="menu3" aria-selected="false" href="#">
      <span class="drinks-img"></span>
      Drinks
     </a>
    </li>
  </ul>

  <div class="tab-content">
    <div id="menu1" role="tabpanel" aria-labelledby="menu1-tab" class="tab-pane active">
     <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" role="tabpanel" aria-labelledby="menu2-tab" class="tab-pane">
     <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" role="tabpanel" aria-labelledby="menu3-tab" class="tab-pane">
     <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>

<div class="element-container">
 <div class="tabs-rest">
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
     <a class="nav-link active" id="tab1-tab" data-bs-toggle="tab" data-bs-target="#tab1" role="tab" aria-controls="tab1" aria-selected="true" href="#">Tab name 1</a>
    </li>
    <li class="nav-item">
     <a class="nav-link" id="tab2-tab" data-bs-toggle="tab" data-bs-target="#tab2" role="tab" aria-controls="tab2" aria-selected="false" href="#">Tab name 2</a>
    </li>
    <li class="nav-item">
     <a class="nav-link" id="tab3-tab" data-bs-toggle="tab" data-bs-target="#tab3" role="tab" aria-controls="tab3" aria-selected="false" href="#">Tab name 3</a>
    </li>
  </ul>

  <div class="tab-content">
    <div id="tab1" role="tabpanel" aria-labelledby="tab1-tab" 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" role="tabpanel" aria-labelledby="tab2-tab" 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" role="tabpanel" aria-labelledby="tab3-tab" 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>

<div class="sidemenu-container-rest row">
 <div class="nav nav-tabs col-12 col-sm-4">
  <a class="side-link active" data-bs-toggle="tab" data-bs-target="#slide1" href="#">Slide 1</a>
  <a class="side-link" data-bs-toggle="tab" data-bs-target="#slide2" href="#">Slide 2</a>
  <a class="side-link" data-bs-toggle="tab" data-bs-target="#slide3" href="#">Slide 3</a>
  <a class="side-link" data-bs-toggle="tab" data-bs-target="#slide4" href="#">Slide 4</a>
  <a class="side-link" data-bs-toggle="tab" data-bs-target="#slide5" href="#">Slide 5</a>
  <a class="side-link" data-bs-toggle="tab" data-bs-target="#slide6" href="#">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.
    </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>