Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <html>

<body>
  <div class="container">
    <header class="header">
      <div class="overlay has-fade"></div>
      <nav class="wrapper wrapper-plr flex flex-jc-sb flex-ai-c">
        <a href="#" class="header__logo">
          <img src="https://raw.githubusercontent.com/hzndr/pancake-house-website/main/img/logo_pancakes.png" alt="Pancake Stack Logo" />
        </a>

        <button href="#" class="header__btnHamburger hide-for-desktop">
          <span></span><span></span><span></span>
        </button>

        <div class="header__links hide-for-mobile">
          <a href="#menu">MENU</a><a href="#contact">CONTACT</a><a href="#about">ABOUT</a>
        </div>

        <div class="header__sm hide-for-mobile">
          <a href=""><i class="fab fa-facebook-f"></i></a><a href=""><i class="fab fa-instagram"></i></a><a href=""><i class="fab fa-tripadvisor"></i></a>
        </div>
      </nav>
      <div class="header__menu has-fade">
        <a href="#menu">MENU</a><a href="#contact">CONTACT</a><a href="#about">ABOUT</a>
        <div>
          <a href=""><i class="fab fa-facebook-f"></i></a><a href=""><i class="fab fa-instagram"></i></a><a href=""><i class="fab fa-tripadvisor"></i></a>
        </div>
      </div>
    </header>
    <main class="main">
      <section class="hero">
        <div class="slider">
          <div class="slider__item">
            <img src="https://raw.githubusercontent.com/hzndr/pancake-house-website/main/img/hero_pancake.jpg" alt="Pancakes" class="slider__img" />
          </div>
          <div class="slider__item">
            <img src="https://raw.githubusercontent.com/hzndr/pancake-house-website/main/img/hero_pancake2.jpg" alt="Pancakes" class="slider__img" />
          </div>
          <div class="slider__item">
            <img src="https://raw.githubusercontent.com/hzndr/pancake-house-website/main/img/hero_pancake3.jpg" alt="Pancakes" class="slider__img" />
          </div>
          <button class="slider__nextBtn">
            <i class="fas fa-chevron-right"></i>
          </button>
          <button class="slider__prevBtn" disabled>
            <i class="fas fa-chevron-left"></i>
          </button>
        </div>
        <h1 class="hero__title">BEST PANCAKES</h1>
        <a href="#delivery"><button class="hero__btn button">ORDER ONLINE</button></a>

        <div class="hero__scroll-icon">
          <a href="#about" class="">
            <div></div>
            <div></div>
          </a>
        </div>
      </section>
      <section id="about" class="about">
        <div class="about__content wrapper wrapper-pall flex flex-jc-c flex-ai-c">
          <h2 class="about__title">ABOUT US</h2>
          <p class="about__text wrapper-text">
            We are a family run pancake house. Mauris dictum euismod pretium.
            Sed tempor ultrices dolor commodo interdum. Vivamus metus eros,
            mollis non odio commodo, suscipit faucibus nulla. Sed porta, magna
            vel interdum convallis, lorem augue feugiat metus, eu pretium
            nulla velit et lectus. Nunc sed euismod urna, quis imperdiet odio.
            Vestibulum sed velit ac urna hendrerit aliquet. Nam pellentesque
            ipsum ligula, vel iaculis nisl finibus quis.
          </p>
        </div>
      </section>
      <section id="menu" class="menu wrapper-ptb">
        <header class="menu__header wrapper-plr wrapper-text">
          <h2>MENU</h2>
          <p>
            Want something sweet? Or maybe you prefer a savory dinner? Here
            you can find something for every whim. Nam pellentesque ipsum
            ligula, vel iaculis nisl finibus quis.
          </p>
        </header>
        <div class="menu__content wrapper-plr flex flex-jc-c flex-ai-c">
          <div class="card">
            <img class="card__img" src="https://raw.githubusercontent.com/hzndr/pancake-house-website/main/img/menu_1.jpg" alt="Sweet Pancakes" />
            <h3 class="card__category">SWEET</h3>
            <ul class="card__list">
              <li class="card__item">
                <header class="card__header">
                  <h4>CLASSIC</h4>
                  <span>15</span>
                </header>
                <p class="">butter, maple syrup</p>
              </li>
              <li class="card__item">
                <header class="card__header">
                  <h4 class="">Strawberry & Chocolate</h4>
                  <span>17</span>
                </header>
                <p class="card__description">
                  strawberry, chocolate chips, maple syrup
                </p>
              </li>
              <li class="card__item">
                <header class="card__header">
                  <h4 class="">Banana & Peanuts</h4>
                  <span>20</span>
                </header>
                <p class="card__description">
                  carmelized bananas, peanut butter, caramel
                </p>
              </li>
              <li class="card__item">
                <header class="card__header">
                  <h4 class="">Nutella</h4>
                  <span>22</span>
                </header>
                <p class="card__description">
                  Nutella, stawberry, blueberry, whipped cream
                </p>
              </li>
            </ul>
          </div>
          <div class="card">
            <img class="card__img" src="https://raw.githubusercontent.com/hzndr/pancake-house-website/main/img/menu_2.png" alt="Savory Pancakes" />
            <h3 class="card__category">SAVORY</h3>
            <ul class="card__list">
              <li class="card__item">
                <header class="card__header">
                  <h4 class="card__title">Tex-Mex</h4>
                  <span>22</span>
                </header>
                <p class="card__description">
                  minced beef, red bean, corn, pepper, hot sauce
                </p>
              </li>
              <li class="card__item">
                <header class="card__header">
                  <h4 class="card__title">Egg & Bacon</h4>
                  <span>20</span>
                </header>
                <p class="card__description">fried egg, bacon, maple syrup</p>
              </li>
              <li class="card__item">
                <header class="card__header">
                  <h4 class="card__title">Chili con carne</h4>
                  <span>25</span>
                </header>
                <p class="card__description">
                  minced beef, onion, pepper, chili
                </p>
              </li>
              <li class="card__item">
                <header class="card__header">
                  <h4 class="card__title">Tomato Chicken</h4>
                  <span>22</span>
                </header>
                <p class="card__description">
                  chicken, tomato sauce, spinach, mozzarella
                </p>
              </li>
            </ul>
          </div>
          <div class="card">
            <img class="card__img" src="https://raw.githubusercontent.com/hzndr/pancake-house-website/main/img/menu_3.jpg" alt="Beverages" />
            <h3 class="card__category">BEVERAGES</h3>
            <ul class="card__list">
              <li class="card__item">
                <header class="card__header">
                  <h4 class="card__title">Lemonade</h4>
                  <span>9</span>
                </header>
                <p class="card__description">
                  strawberry / lemon & mint / mango
                </p>
              </li>
              <li class="card__item">
                <header class="card__header">
                  <h4 class="card__title">Tea</h4>
                  <span>10</span>
                </header>
                <p class="card__description">
                  earl grey, green, raspberry, mango
                </p>
              </li>
              <li class="card__item">
                <header class="card__header">
                  <h4 class="card__title">Cappuccino</h4>
                  <span>12</span>
                </header>
                <p class="card__description"></p>
              </li>
              <li class="card__item">
                <header class="card__header">
                  <h4 class="card__title">Flat White</h4>
                  <span>11</span>
                </header>
                <p class="card__description"></p>
              </li>
              <li class="card__item">
                <header class="card__header">
                  <h4 class="card__title">Espresso</h4>
                  <span>8</span>
                </header>
                <p class="card__description"></p>
              </li>
            </ul>
          </div>
        </div>
      </section>
      <section id="contact" class="locations wrapper-ptb">
        <h2 class="locations__title">LOCATIONS</h2>
        <div class="locations__content flex flex-jc-c flex-wrap">
          <div class="locations__card">
            <div class="locations__img">
              <img src="https://raw.githubusercontent.com/hzndr/pancake-house-website/main/img/gdansk.jpg" alt="" />
              <h3>GDANSK</h3>
            </div>
            <h4 class="locations__address">
              Konopnickiej 5<br />
              80-445 GDANSK
            </h4>
            <p class="locations__contact">
              GDANSK@PANCAKESTACK.COM<br />
              504 785 334
            </p>
          </div>
          <div class="locations__card">
            <div class="locations__img">
              <img src="https://raw.githubusercontent.com/hzndr/pancake-house-website/main/img/wwa.jpg" alt="" />
              <h3>WARSAW</h3>
            </div>
            <h4 class="locations__address">
              Batorego 22<br />
              02-591 Warsaw
            </h4>
            <p class="locations__contact">
              WARSAW@PANCAKESTACK.COM<br />
              504 795 338
            </p>
          </div>
          <div class="locations__card">
            <div class="locations__img">
              <img src="https://raw.githubusercontent.com/hzndr/pancake-house-website/main/img/wroc.jpg" alt="" />
              <h3>WROCLOVE</h3>
            </div>

            <h4 class="locations__address">
              Sienkiewicza 28<br />
              50-335 Wroclove
            </h4>
            <p class="locations__contact">
              WROCLOVE@PANCAKESTACK.COM<br />
              500 675 334
            </p>
          </div>
        </div>
        <div class="locations__open-hours">
          <h3>OPENING HOURS</h3>
          <table>
            <tr>
              <th scope="row">MONDAY</th>
              <td>CLOSED</td>
            </tr>
            <tr>
              <th scope="row">TUESDAY - SUNDAY</th>
              <td>12:00 - 21:00</td>
            </tr>
          </table>
          <p class="locations__open-now">
            We are <span class="locations__open-closed"></span> now!
          </p>
        </div>
      </section>
      <section id="delivery" class="delivery">
        <div class="delivery__content wrapper wrapper-pall">
          <div class="delivery__text wrapper-text">
            <h2 class="delivery__title">ORDER ONLINE</h2>
            <p class="delivery__description">
              Now you can easily order your favorite pancakes online. Choose
              one of our delivery partners below. And remember, our delivery
              is FREE!
            </p>
          </div>
          <div class="delivery__logos flex flex-jc-c flex-wrap">
            <a href="#">
              <div style="background-image: url('https://raw.githubusercontent.com/hzndr/pancake-house-website/main/img/glovo_logo.png')"></div>
            </a>
            <a href="#">
              <div style="background-image: url('https://raw.githubusercontent.com/hzndr/pancake-house-website/main/img/wolt_logo.png')"></div>
            </a>
            <a href="#">
              <div style="background-image: url('https://raw.githubusercontent.com/hzndr/pancake-house-website/main/img/uber-eats_logo.png')"></div>
            </a>
          </div>
        </div>
      </section>
    </main>
    <footer class="footer wrapper wrapper-plr flex flex-jc-sb flex-ai-c">
      <div class="footer__links">
        <a href="#">Privacy Policy</a><a href="#">Terms of Use</a><a href="#contact">Contact</a>
      </div>
      <div class="footer__credits">
        Made by
        <a href="https://github.com/hzndr"><i class="fab fa-github"></i> Hania Zander</a>
      </div>
    </footer>
  </div>

  <body>
    <html>
              
            
!

CSS

              
                //Colors
$navy: #1e245e;
$blueTransparent: #b1b7fa83;
$navyTransparent: #1e245eab;
$lightPink: #ffd7d7;
$lightPinkTransparent: #ffdadab8;
$darkPink: #ffb6b6;
$tomato: #ff5d5d;
$darkTomato: #d64343;
$sand: #d7bc98;
$sandTransparent: #e6ba81b4;
$lightGray: #f1f1f1;
$white: #ffffff;

//Shadows
$boxShadowLight: 0px 2px 4px rgba(0, 0, 0, 0.1);

//Fonts
$primaryFont: "Josefin Sans", sans-serif;
$secondaryFont: "Open Sans", sans-serif;

//Mixins
//640px, 1024px, 1400px
$breakpoints-up: (
  "medium": "40rem",
  "large": "64rem",
  "xlarge": "87.5rem"
);
//639px, 1023px, 1399px
$breakpoints-down: (
  "small": "39.9375rem",
  "medium": "63.9375rem",
  "large": "87.4375rem"
);

@mixin breakpoint-up($size) {
  @media (min-width: map-get($breakpoints-up, $size)) {
    @content;
  }
}

@mixin breakpoint-down($size) {
  @media (max-width: map-get($breakpoints-down, $size)) {
    @content;
  }
}

// Blurry background
@mixin blurry-bg {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: radial-gradient(
      circle at 20% 80%,
      $blueTransparent 11%,
      transparent 11%
    ),
    radial-gradient(
      circle at 80% 30%,
      $lightPinkTransparent 10%,
      transparent 10%
    ),
    radial-gradient(circle at 70% 70%, $sandTransparent 10%, transparent 10%);
  filter: blur(3.5rem);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

//Animations
.has-fade {
  visibility: hidden;
}

@keyframes fade-in {
  from {
    visibility: hidden;
    opacity: 0;
  }
  1% {
    visibility: visible;
    opacity: 0;
  }
  to {
    visibility: visible;
    opacity: 1;
  }
}
.fade-in {
  animation: fade-in 300ms ease-in-out forwards;
}

@keyframes fade-out {
  from {
    visibility: visible;
    opacity: 1;
  }
  99% {
    visibility: visible;
    opacity: 0;
  }
  to {
    visibility: hidden;
    opacity: 0;
  }
}

.fade-out {
  animation: fade-out 300ms ease-in-out forwards;
}

@keyframes scroll {
  20%,
  100% {
    opacity: 0;
    top: 50%;
  }
}

//Globals
html {
  height: 100%;
  font-size: 100%;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: $secondaryFont;
  line-height: 1.6;

  &.noscroll {
    overflow: hidden;
  }
}

h1,
h2,
h3,
h4 {
  font-family: $primaryFont;
}

h2 {
  font-size: 2.25rem;
  color: $tomato;
}

h3 {
  font-size: 1.5rem;
  color: $navy;
}

h4 {
  margin: 0;
}

p {
  font-family: "Open Sans", sans-serif;
  margin: 0;
}

ul,
ol {
  list-style: none;
}

a,
a:hover,
a:visited {
  text-decoration: none;
  color: $navy;
}

.container {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.wrapper {
  max-width: 85rem;
  margin: 0 auto;

  &-pall {
    padding: 4.5rem;

    @include breakpoint-down(medium) {
      padding: 3rem;
    }
  }

  &-plr {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  &-ptb {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;

    @include breakpoint-down(medium) {
      padding-top: 3rem;
      padding-bottom: 3rem;
    }
  }
  &-text {
    max-width: 32rem;
    margin: 0 auto;
  }
}

//Flexbox

.flex {
  display: flex;

  &-jc-c {
    justify-content: center;
  }

  &-jc-sb {
    justify-content: space-between;
  }

  &-ai-c {
    align-items: center;
  }
  &-wrap {
    flex-wrap: wrap;
  }
}

button,
.button {
  border: none;
  background: none;
  cursor: pointer;
}

//Visibility

.hide-for-mobile {
  @include breakpoint-down(medium) {
    display: none;
  }
}

.hide-for-desktop {
  @include breakpoint-up(large) {
    display: none;
  }
}

//Header
.header {
  position: fixed;
  z-index: 1;
  background-color: $white;
  box-shadow: $boxShadowLight;
  width: 100%;

  .overlay {
    opacity: 0;
    position: fixed;
    top: 4.8125rem;
    right: 0px;
    left: 0px;
    bottom: 0px;
    background-image: linear-gradient($sand, transparent);
  }

  &.open {
    .header__btnHamburger {
      > span:first-child {
        transform: rotate(45deg);
      }
      > span:nth-child(2) {
        opacity: 0;
      }

      > span:last-child {
        transform: rotate(-45deg);
      }
    }
  }

  nav {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  &__logo {
    img {
      display: block;
      width: 4.5rem;
      height: auto;
    }
  }

  &__btnHamburger {
    background-color: $white;
    > span {
      display: block;
      width: 1.625rem;
      height: 0.1875rem;
      background-color: $navy;
      transition: all 300ms ease-in-out;
      transform-origin: 4px 2px;

      &:not(:last-child) {
        margin-bottom: 0.1875rem;
      }
    }

    &:hover,
    &:focus {
      outline: none;
    }
  }

  &__links {
    a {
      display: inline-block;
      position: relative;
      transition: color 250ms ease-in-out;

      &:not(:last-child) {
        margin-right: 1.5rem;
      }

      &::before {
        content: "";
        display: block;
        height: 4px;
        position: absolute;
        left: 0;
        right: 0;
        bottom: -15px;
        transition: background-color 250ms ease-in-out;
      }

      &:hover {
        color: $tomato;

        &::before {
          background-color: $tomato;
        }
      }
    }
  }

  &__sm {
    a {
      display: inline-block;
      color: $white;
      background-color: $navy;
      border-radius: 50%;
      width: 1.7rem;
      height: 1.7rem;
      position: relative;
      font-size: 0.875rem;
      transition: all 350ms ease-in-out;

      &:hover {
        background-color: $tomato;
      }

      &:not(:last-child) {
        margin-right: 1rem;
      }

      i {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }

  &__menu {
    position: absolute;
    width: calc(100% - 5rem);
    left: 50%;
    transform: translateX(-50%);
    background-color: $white;
    margin-top: 1.5rem;
    padding: 1.5rem;
    border-radius: 5px;

    a {
      display: block;
      padding: 1rem;
      color: $navy;
      text-align: center;

      &:hover,
      &:focus {
        color: $tomato;
      }
    }

    div {
      width: 100%;
      padding: 1rem;
      text-align: center;
      > a {
        display: inline;
        padding: 0 1.3rem;
      }
    }
  }
}

//Hero
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 100vh;
  min-height: 50rem;

  .slider {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;

    &__item {
      position: absolute;
      width: 100%;
      height: 100%;
      transition: all 300ms ease-in-out;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    > button {
      position: absolute;
      top: 50%;
      font-size: 2rem;
      outline: none;
      color: $white;

      &:disabled {
        opacity: 0.4;
      }

      @include breakpoint-down(small) {
        top: 70%;
      }
    }
    &__nextBtn {
      right: 2rem;
    }
    &__prevBtn {
      left: 2rem;
    }
  }

  &__title {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    font-size: clamp(2.25rem, 8vw, 10rem);
    font-weight: 900;
    letter-spacing: 1.3rem;
    line-height: 1.2;
    color: white;
    text-align: center;
  }

  &__btn {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    bottom: 20%;
    padding: 1rem 1.3rem;
    background-color: $tomato;
    color: white;
    border: none;
    border-radius: 1.5rem;
    transition: background-color 350ms ease-in-out;

    &:hover {
      background-color: $darkTomato;
    }
  }

  &__scroll-icon {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translate(-50%);
    > a {
      display: block;

      > :nth-child(1) {
        position: relative;
        width: 25px;
        height: 40px;
        border-radius: 15px;
        border: 2px solid white;
      }
      > :nth-child(2) {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translate(-50%);
        width: 7px;
        height: 7px;
        background-color: white;
        border-radius: 50%;
        animation: scroll 3s ease-in infinite;
      }
    }
  }
}

//About
.about {
  &__content {
    flex-direction: column;
    position: relative;
    max-width: 68.375rem;

    &:after {
      content: "";
      position: absolute;
      height: 100%;
      width: 100%;
      background: url(https://raw.githubusercontent.com/hzndr/pancake-house-website/main/img/logo_bg.png)
        no-repeat;
      opacity: 0.5;
      top: 186px;

      @include breakpoint-down(medium) {
        left: 50%;
        top: 82%;
        transform: translate(-50%, -50%);
      }
    }
  }

  &__title {
    text-align: center;
  }

  &__text {
    text-align: justify;
  }
}

//Menu
.menu {
  position: relative;

  &::before {
    @include blurry-bg;
  }

  &__header {
    text-align: center;
    margin-bottom: 3rem;
  }

  &__content {
    flex-wrap: wrap;
    align-items: flex-start;
  }
}

.card {
  flex: 1 1 18.75rem;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: $boxShadowLight;
  background-color: $white;
  margin: 0.5rem;
  transition: transform 150ms ease-in-out;

  &:hover {
    & > img {
      transform: scale(1.05);
    }
  }

  &__img {
    width: 100%;
    height: 8rem;
    object-fit: cover;
    object-position: 100% 35%;
    transition: all 500ms ease-in-out;
  }

  &__category {
    text-align: center;
    position: relative;
    background-color: $white;
    margin: -1rem 0 0 0;
    border-radius: 1rem;
    padding-top: 1.5rem;
  }

  &__list {
    position: relative;
    padding: 1rem 1.5rem;
    border-radius: 1rem;
    background-color: white;
  }

  &__item {
    margin-bottom: 2rem;
  }

  &__header {
    border-bottom: 1px solid $sand;
    padding-bottom: 0.3rem;
    margin-bottom: 0.3rem;
    width: 100%;

    &::after {
      content: "";
      clear: both;
      display: table;
    }

    h4 {
      float: left;
      max-width: 90%;
      text-transform: uppercase;
    }

    span {
      float: right;
      font-family: $secondaryFont;
    }
  }
}

// Locations
.locations {
  position: relative;
  text-align: center;
  text-transform: uppercase;

  &__content {
    margin-bottom: 2rem;
  }

  &__card {
    flex: 0 1 350px;
    margin: 2rem;
    line-height: 1.5;
    box-shadow: 2px 2px 2px (0, 0, 0, 0.7);

    h3 {
      margin-top: 0;
    }

    h4 {
      margin-bottom: 1rem;
    }
  }

  &__img {
    position: relative;
    height: 14rem;
    width: 21.875rem;
    margin-bottom: 1.5rem;
    overflow: hidden;
    transition: all 350ms ease-in-out;

    &:hover {
      transform: scale(1.05);

      > h3 {
        font-size: 1.6875rem;
      }
    }

    > img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      height: auto;
      width: 350px;
    }

    > h3 {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 1rem 0;
      margin-bottom: 0;
      background-image: linear-gradient(to top, $navyTransparent, transparent);
      color: $white;
      transition: all 350ms ease-in-out;
    }
  }

  &__open-hours {
    font-family: $secondaryFont;
    > h4 {
      margin-bottom: 1.5rem;
    }
    table {
      margin: 0 auto;
      font-family: $secondaryFont;
      margin-bottom: 2rem;

      th {
        text-align: right;
      }

      td {
        text-align: left;
        word-wrap: break-word;
      }

      td,
      th {
        padding: 0.3rem 1rem;
        @include breakpoint-down(small) {
          text-align: center;
        }
      }
    }
  }
  &__open-now {
    width: 17rem;
    margin: auto;
    padding: 0.7rem 0.5rem 0.5rem;
    transform: rotate(-4deg);
    font-family: $primaryFont;
    font-size: 1.3rem;
    color: $navy;
    border: 1px solid $sand;
    border-radius: 0.7rem;
    vertical-align: middle;

    > span {
      font-weight: 700;
      color: $tomato;
    }
  }
}

//Delivery
.delivery {
  text-align: center;
  position: relative;

  &::before {
    @include blurry-bg;
  }

  &__text {
    margin-bottom: 3rem;
  }

  &__logos {
    > a {
      display: block;
      height: 4rem;
      width: 8rem;
      border-radius: 1rem;
      overflow: hidden;
      margin: 1rem;
      box-shadow: $boxShadowLight;
      transition: transform 300ms ease-in-out;

      &:hover {
        transform: scale(1.1);
      }

      div {
        height: 100%;
        background-size: cover;
        background-position: center center;
      }
    }
  }
}

//Footer
.footer {
  width: 100%;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  font-size: 0.875rem;

  @include breakpoint-down(medium) {
    flex-direction: column;
  }

  &__links {
    flex-shrink: 1;
    text-align: center;
    > a {
      padding: 0.5rem;
      transition: all 200ms ease-in-out;

      &:hover {
        color: $tomato;
      }

      @include breakpoint-down(medium) {
        display: block;
      }
    }
  }

  &__credits {
    padding: 0.5rem 0;
    a {
      font-weight: 800;
      transition: all 200ms ease-in-out;

      &:hover {
        color: $tomato;
      }
    }
  }
}

              
            
!

JS

              
                //Menu
const btnHamburger = document.querySelector(".header__btnHamburger");
const body = document.querySelector("body");
const header = document.querySelector(".header");
const overlay = document.querySelector(".overlay");
const fadeElements = document.querySelectorAll(".has-fade");
const menuLinks = document.querySelectorAll(".header__menu a");

btnHamburger.addEventListener("click", () => {
  if (header.classList.contains("open")) {
    closeMenu();
  } else {
    openMenu();
  }
});

menuLinks.forEach((link) => {
  link.addEventListener("click", () => {
    closeMenu();
  });
});

function closeMenu() {
  body.classList.remove("noscroll");
  header.classList.remove("open");
  fadeElements.forEach((element) => {
    element.classList.remove("fade-in");
    element.classList.add("fade-out");
  });
}

function openMenu() {
  body.classList.add("noscroll"); //Closed menu
  header.classList.add("open");
  fadeElements.forEach((element) => {
    element.classList.remove("fade-out");
    element.classList.add("fade-in");
  });
}

//Slider
const slider = document.querySelector(".slider");
const slides = document.querySelectorAll(".slider__item");
const nextBtn = document.querySelector(".slider__nextBtn");
const prevBtn = document.querySelector(".slider__prevBtn");

slides.forEach((slide, i) => {
  slide.style.left = `${i * 100}%`;
});

let counter = 0;

nextBtn.addEventListener("click", () => {
  counter++;
  carousel();
});
prevBtn.addEventListener("click", () => {
  counter--;
  carousel();
});

function carousel() {
  // Infinite carousel
  // if(counter === slides.length){
  //     counter = 0;
  // };
  // if(counter < 0){
  //     counter = slides.length -1;
  // }

  // Disabled buttons

  if (counter < slides.length - 1) {
    nextBtn.removeAttribute("disabled", "");
  } else {
    nextBtn.setAttribute("disabled", "");
  }

  if (counter > 0) {
    prevBtn.removeAttribute("disabled", "");
  } else {
    prevBtn.setAttribute("disabled", "");
  }

  slides.forEach((slide) => {
    slide.style.transform = `translateX(-${counter * 100}%)`;
  });
}

//Automatic slideshow
// let indexValue = 0;
// function slideShow() {
//   setTimeout(slideShow, 2500);

//   for (let x = 0; x < slides.length; x++) {
//     slides[x].style.display = "none";
//   }
//   indexValue++;
//   if (indexValue > slides.length) {
//     indexValue = 1;
//   }
//   slides[indexValue - 1].style.display = "block";
//
// }
// slideShow();

// Check if restaurants are open now
const openInfo = document.querySelector(".locations__open-closed");
let weekDay = new Date().getDay();
let hour = new Date().getHours();

if (weekDay != 1 && hour >= 12 && hour <= 21) {
  openInfo.textContent = "open";
} else {
  openInfo.textContent = "closed";
}

              
            
!
999px

Console