Eatery.Cafe

HTML

              
                <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <header class="header">
    <div class="container">
      <div class="header__top">
        <div class="header__top-logo"><a href="#">Eatery<span>.</span>Cafe</a></div>
        <nav class="header__top-menu">
          <a href="#" class="menu-link">Home</a>
          <a href="#" class="menu-link">About</a>
          <a href="#" class="menu-link">Chef</a>
          <a href="#" class="menu-link">Menu</a>
          <a href="#" class="menu-link">Contact</a>
        </nav>
        <a href="tel:0100200340" class="header__top-call">
          Call now!
          <span><i class="fas fa-phone"></i>010 020 0340</span>
        </a>
        <div class="header__top-btn">
          <a href="#" class="btn">Reserve a table</a>
        </div>
      </div> <!--/header__top -->
    </div>
      <div class="header__slider">
        <div class="slider-item" style="background-image: url(https://cdn.pixabay.com/photo/2017/02/15/10/39/food-2068217_960_720.jpg)">
          <div class="slider-item__content">
            <div class="subtitle">Eatery cafe & restaurant</div>
            <h1 class="title">Our mission is to provide an unforgettable experiance</h1>
            <a href="#" class="btn slider-btn">Meet our Chef</a>
          </div>
        </div>
        <div class="slider-item" style="background-image: url(https://cdn.pixabay.com/photo/2018/03/05/06/26/board-3200054_960_720.jpg)">
          <div class="slider-item__content">
            <div class="subtitle">Your perfect breakfast</div>
            <h1 class="title">The best dinning quality can be here too!</h1>
            <a href="#" class="btn slider-btn">Discover Menu</a>
          </div>
        </div>
        <div class="slider-item" style="background-image: url(https://i.pinimg.com/originals/e5/e8/cd/e5e8cdb29ed5ad4903470c07d6475d59.jpg)">
          <div class="slider-item__content">
            <div class="subtitle">New restaurant in town</div>
            <h1 class="title">Enjoy our special menus every Sunday & Friday</h1>
            <a href="#" class="btn slider-btn">Reservation</a>
          </div>
        </div> 
    </div> <!--/container-->
  </header>
  <section class="about">
    <div class="container">
      <div class="about__inner">
        <div class="col col--text">
          <div class="about-content">
            <span class="descr">Read our story</span>
            <h2>We've been Making The Delicious Foods Since             1999</h2>
            <p>Fusce hendrerit malesuada lacinia. Donec                  semper semper sem vitae malesuada. Proin                    scelerisque risus et ipsum semper molestie sed              in nisi. Ut rhoncus congue lectus, rhoncus                  venenatis leo malesuada id.</p>
            <p>Sed elementum vel felis sed scelerisque. In arcu diam, sollicitudin eu nibh ac, posuere tristique magna. You can use this template for your cafe or restaurant website. Please tell your friends about <a href="#">templatemo</a>. Thank you.</p>
          </div>
        </div>
        <div class="col"><img src="https://image.freepik.com/free-photo/funny-chef-looking-food-wood-table-exciteing-mood_1286-803.jpg"></div>
      </div>
    </div>
  </section>
  <section class="chefs">
    <div class="container">
      <div class="chefs__inner">
        <div class="intro-title">
          <h2>Meet our chefs</h2>
          <span class="descr">
            They are nice & friendly
          </span>
        </div>
        <div class="chefs-cards">
          <div class="chefs-cards__item">
            <div class="chefs-cards__item-img">
              <img src="http://www.duccioprussi.it/wp-content/uploads/2014/06/duccio-prussi-personal-chef-360x540.jpg">
              <div class="chefs-cards__item-overflow">
                <div class="overflow-title">
                  Duis vel lacus id magna mattis vehicula
                </div>
                <div class="socials">
                  <div class="socials-item"><a href="#"><i class="fab fa-linkedin fa-lg"></i></a></div>
                  <div class="socials-item"><a href="#"><i class="fas fa-envelope fa-lg"></i></a></div>
                </div>
              </div>
            </div>
            <div class="chefs-cards__item-info">
              <h3>Oliver Newberg</h3>
              <span class="descr">Kitchen Officer</span>
            </div>
          </div>
          <div class="chefs-cards__item">
            <div class="chefs-cards__item-img">
              <img src="https://www.thegrouchoclub.com/media/uploads/2018/04/Erion-360x540.png">
              <div class="chefs-cards__item-overflow">
                <div class="overflow-title">
                  Cras suscipit neque quis odio feugiat
                </div>
                <div class="socials">
                  <div class="socials-item"><a href="#"><i class="fab fa-instagram fa-lg"></i></a></div>
                  <div class="socials-item"><a href="#"><i class="fas fa-envelope fa-lg"></i></a></div>
                </div>
              </div>
            </div>
            <div class="chefs-cards__item-info">
              <h3>Mark Frigert</h3>
              <span class="descr">Owner & Manager</span>
            </div>
          </div>
          <div class="chefs-cards__item">
            <div class="chefs-cards__item-img">
              <img src="https://thebookofman.com/wp-content/uploads/2019/03/D50_2096-360x540.jpg">
              <div class="chefs-cards__item-overflow">
                <div class="overflow-title">
                  Etiam auctor enim tristique faucibus
                </div>
                <div class="socials">
                  <div class="socials-item"><a href="#"><i class="fab fab fa-github fa-lg"></i></a></div>
                  <div class="socials-item"><a href="#"><i class="fab fa-google fa-lg"></i></a></div>
                </div>
              </div>
            </div>
            <div class="chefs-cards__item-info">
              <h3>Stiven Dowkins</h3>
              <span class="descr">Pizza Specialist</span>
            </div>
          </div>
        </div> <!--/chefs-card-->
      </div> <!--/chefs__inner-->
    </div> <!--/container-->
  </section>
  <section class="our-menu">
    <div class="our-menu__inner">
      <h2>Our Menus</h2>
      <span class="descr">Dinning time</span>
      <div class="menu-card">
        <div class="menu-card__item">
          <div class="menu-card__item-img" style="background-image: url(http://www.amsterdamfoodie.nl/wp-content/uploads/2017/10/Limon-restaurant-Zuidas-500x500.jpg)">
            <div class="menu-card__item-overflow menu-overflow">
              <div class="menu-overflow__content">
                <div class="menu-overflow__title">Mini goats cheese logs</div>
                <div class="menu-overflow__composition">
                  Fivemiletown goats cheese wrapped in cured ham,
                  garden leaves and balsamic reduction
                </div>
                <div class="menu-overflow__price">25$</div>
              </div>  
            </div>
          </div>  
        </div>
        <div class="menu-card__item">
          <div class="menu-card__item-img" style="background-image: url(http://www.buckscountymag.com/downloads/2495/download/EarlsRestaurant_Gallery_005-56b392d02db73-500x500.jpg?cb=4afdc640d7fd67a14ddf51fa190a533b)">
            <div class="menu-card__item-overflow menu-overflow">
              <div class="menu-overflow__content">
                <div class="menu-overflow__title">Mini goats cheese logs</div>
                <div class="menu-overflow__composition">
                  Fivemiletown goats cheese wrapped in cured ham,
                  garden leaves and balsamic reduction
                </div>
                <div class="menu-overflow__price">30$</div>
              </div>  
            </div>
          </div>  
        </div>
        <div class="menu-card__item">
          <div class="menu-card__item-img" style="background-image: url(http://www.amsterdamfoodie.nl/wp-content/uploads/2017/04/Faro-restaurant-Porta-de-Sao-Pedro-500x500.jpg)">
            <div class="menu-card__item-overflow menu-overflow">
              <div class="menu-overflow__content">
                <div class="menu-overflow__title">Mini goats cheese logs</div>
                <div class="menu-overflow__composition">
                  Fivemiletown goats cheese wrapped in cured ham,
                  garden leaves and balsamic reduction
                </div>
                <div class="menu-overflow__price">35$</div>
              </div>  
            </div>
          </div>  
        </div>
        <div class="menu-card__item">
          <div class="menu-card__item-img" style="background-image: url(https://www.captainds.com/wp-content/uploads/CaptainsFishFryMeal1-500x500.jpg)">
            <div class="menu-card__item-overflow menu-overflow">
              <div class="menu-overflow__content">
                <div class="menu-overflow__title">Mini goats cheese logs</div>
                <div class="menu-overflow__composition">
                  Fivemiletown goats cheese wrapped in cured ham,
                  garden leaves and balsamic reduction
                </div>
                <div class="menu-overflow__price">28$</div>
              </div>  
            </div>
          </div>  
        </div>
        <div class="menu-card__item">
          <div class="menu-card__item-img" style="background-image: url(http://www.amsterdamfoodie.nl/wp-content/uploads/2016/08/Nooch-Deliveroo-500x500.jpg)">
            <div class="menu-card__item-overflow menu-overflow">
              <div class="menu-overflow__content">
                <div class="menu-overflow__title">Mini goats cheese logs</div>
                <div class="menu-overflow__composition">
                  Fivemiletown goats cheese wrapped in cured ham,
                  garden leaves and balsamic reduction
                </div>
                <div class="menu-overflow__price">20$</div>
              </div>  
            </div>
          </div>  
        </div>
        <div class="menu-card__item">
          <div class="menu-card__item-img" style="background-image: url(https://images.agoramedia.com/wte3.0/gcms/Foods-to-Boost-Fertility-05-500x500.jpg)">
            <div class="menu-card__item-overflow menu-overflow">
              <div class="menu-overflow__content">
                <div class="menu-overflow__title">Mini goats cheese logs</div>
                <div class="menu-overflow__composition">
                  Fivemiletown goats cheese wrapped in cured ham,
                  garden leaves and balsamic reduction
                </div>
                <div class="menu-overflow__price">32$</div>
              </div>  
            </div>
          </div>  
        </div>
      </div>
    </div>
  </section>
  <section class="testimonials">
    <div class="container">
      <h4>Testimonials</h4>
      <div class="testimonials__slider">
        <div class="testimonials__slider-item">
          <div class="slider__item-content">
            <p class="cite">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum ullamcorper nulla non.</p>
            <p class="author">Digital Carlson</p>
          </div>
        </div>
        <div class="testimonials__slider-item">
          <div class="slider__item-content">
            <p class="cite">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum ullamcorper nulla non.</p>
            <p class="author">Digital Carlson</p>
          </div>
        </div>
        <div class="testimonials__slider-item">
          <div class="slider__item-content">
            <p class="cite">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum ullamcorper nulla non.</p>
            <p class="author">Digital Carlson</p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="contacts">
    <div class="container">
      <div class="contacts-inner">
        <div class="map">
          <div id="wrapper-9cd199b9cc5410cd3b1ad21cab2e54d3">
		<div id="map-9cd199b9cc5410cd3b1ad21cab2e54d3"></div><script>(function () {
        var setting = {"height":370,"width":500,"zoom":16,"queryString":"Херсон, Херсонская область, Украина","place_id":"ChIJZ_mbXaIaxEAR_iExjoxHpfM","satellite":false,"centerCoord":[46.64959804253345,32.60778159999995],"cid":"0xf3a5478c8e3121fe","cityUrl":"/ukraine/kherson-35898","id":"map-9cd199b9cc5410cd3b1ad21cab2e54d3","embed_id":"109304"};
        var d = document;
        var s = d.createElement('script');
        s.src = 'https://1map.com/js/script-for-user.js?embed_id=109304';
        s.async = true;
        s.onload = function (e) {
          window.OneMap.initMap(setting)
        };
        var to = d.getElementsByTagName('script')[0];
        to.parentNode.insertBefore(s, to);
      })();</script><a href="https://1map.com/map-embed?embed_id=109304">1map.com</a></div>
        </div>
        <div class="contacts-form">
          <h5>Contact Us</h5>
          <form>

            <!-- Hidden Required Fields -->
            <input type="hidden" name="project_name" value="Eatery.Cafe">
            <input type="hidden" name="admin_email" value="admin@mail.com">
            <input type="hidden" name="form_subject" value="Contacts form">
            <!-- END Hidden Required Fields -->

            <input class="name" type="text" name="Name" placeholder="Full name" required>
            <input class="email" type="text" name="E-mail" placeholder="Email address" required><br>
            <input class="subject" type="text" name="Subject" placeholder="Subject"><br>
            <textarea class="comment" maxlength="260" type="text" name="Comments" placeholder="Tell about your project"></textarea><br>

            <button class="btn contacts--btn">Send Message</button>

        </form>
      </div>
      </div>
    </div>
  </section>
  <footer class="footer" id="footer">
    <div class="container">
      <div class="footer__inner">
        <div class="find-us">
          <h5>Find Us</h5>
          <div class="location">
            123 nulla a cursus rhoncus,
            augue sem viverra 10870
            id ultricies sapien
          </div>
        </div>
        <div class="reservation">
          <h5>Reservation</h5>
          <div class="phones">
            <a href="#">090-080-0650</a>|
            <a href="#">090-070-0430</a>
          </div>
          <div class="mail">
            <a href="#">info@company.com</a>
          </div>
          <div class="line">
            LINE: eatery247
          </div>
        </div>
        <div class="open-hours">
          <h5>Open Hours</h5>
          <div class="shedule">
            <p>Monday: Closed</p>
            <span>Tuesday to Friday</span>
            <p>7:00 AM - 9:00 PM</p>
            <span>Saturday - Sunday</span>
            <p>11:00 AM - 10:00 PM</p>
          </div>  
        </div>
        <div class="socials-copyright">
          <div class="socials">
            <a href="#"><i class="fab fa-facebook-square"></i></a>
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-instagram"></i></a>
            <a href="#"><i class="fab fa-google"></i></a>
          </div>
          <div class="copyright">
            Copyright © 2019
            Eatery.Cafe
          </div>
        </div>
      </div>
    </div>  
  </footer>
</body>
</html>

CSS

              
                //===============================
//          NORMALIZE
//===============================

h1,h2,h3,h4,h5,h6,p{
  padding: 0;
  margin: 0;
}
ul,li{
  list-style: none;
}
a{
  color: inherit;
  text-decoration: none;
}

*{
  box-sizing: border-box;
}

button{
  display: block;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: transparent;
}
*:visited, *:focus, *:active, *:hover{
    outline: 0 none !important;
}

//===============================
//          BULEAN
//===============================

$red: #ce3232;
$dark: #222;

//===============================
//          GLOBAL
//===============================

.btn{
  text-transform: capitalize;
  display: inline-block;
  padding: 12px 25px;
  background-color: $red;
  font-weight: 400;
  transition: all 0.2s;
  &:hover{
    background-color: $dark;
  } 
}

.descr{
  color: #bfbdbd;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;  
}

h2{
  color: #353535;
  font-size: 28px;
  text-transform: capitalize;
}


.socials-item{
  display: inline-block;
  a{
    display: block;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background-color: #333;
    transition: 0.3s all;
    &:hover{
      background-color: $red;
    }
  }
  i{
    padding-top: 17px;
  }
}
  

//===============================
//          MAIN CODE
//===============================
html{
  height: 100%;
  overflow: hidden;
}

body{
  padding: 0;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
  perspective: 1px;
  transform-style: preserv-3d;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}
.container{
  width: 100%;
  max-width: 1170px;
  padding: 0 15px;
  margin: 0 auto;
}

.about,
.chefs,
.our-menu,
.testimonials,
.contacts,
footer{
  padding: 100px 0;

}

//=============================
//              HEADER
//=============================


.header{
  position: relative;
}

.header__top{
  position: absolute;
  top: 40px;
  z-index: 5;
  color: #fff;
  width: 100%;
  max-width:1170px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 14px;
}
.header__top-logo{
  text-transform: capitalize;
  font-size: 22px;
  span{
    color: $red;
    margin: 0 5px;
  }
}

.menu-link{
  margin-left: 40px;
  transition: all 0.3s;
  &:hover{
    color: $red;
  }
}
.header__top-call span{
  transition: all 0.5s linear;
  &:hover{
    text-decoration: underline;
  }
}
//=============================
//              SLIDER
.slider-item{
  height: 700px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.slider-item__content{
  position: absolute;
  top: 50%;
  left: 20%;
  transform: translate(-25%, -50%);
  max-width: 600px;
  .subtitle{
    padding-bottom: 40px;
    letter-spacing: 2px;
    font-size: 14px;
  }
  .title{
    font-size: 38px;
    text-transform: none;
    padding-bottom: 40px;
  }
}
.slider-dots{
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  li button{
    padding: 0;
    margin: 5px 40px 0 0;
    display: block;
    line-height: 0;
    font-size: 0;
    background-color: transparent;
    border: 2px solid #fff;
    outline: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    &:hover {
      background-color: #fff;    
    }
  }
}
.slider-dots li.slick-active button{
  background-color: #fff;
}

//=============================
//              ABOUT

.about__inner{
  display: flex;
  justify-content: space-between;
  .col{
    width: 50%;
    img{
      width: 100%;
    }
  }
}  
.col--text{
  padding-right: 140px;
  h2{
    padding: 20px 0 25px 0;
  }
  p{
    color: #757575;
    line-height: 24px;
    text-transform: none;
    font-weight: 400;
    padding-top: 15px;
    a{
      color: #454545;
    }
  }
}
//=============================
//              CHEFS
.chefs{
  background-color: #f9f9f9;
    text-align: center;
}

.chefs__inner{
  h2{
    text-transform: none;
    padding-bottom: 10px;
  }
}
.chefs-cards{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
}

.chefs-cards__item-img{
  height: 540px;
  position: relative;
  overflow: hidden;
  img{
    transform: scale(1);
    transition: 0.5s all;
  }
  &:hover img{
    transform: scale(1.1);
  }
  &:hover .chefs-cards__item-overflow{
    transform: translateY(0);
    opacity: 1;
  }
}
.chefs-cards__item-overflow{
  position: absolute;
  top: 0;
  left: 0;
  height: inherit;
  background-color: rgba(#000, .8);
  transform: translateY(100%);
  opacity: 0;
  transform-origin: bottom;
  transition: .8s all;

  .overflow-title{
    padding: 250px 80px 20px 80px;
  }
}

.chefs-cards__item-info{
  padding-top: 40px;
  color: #000;
  h3{
    font-size: 20px;
    color: #454545;
    text-transform: capitalize;
  }
  span{
    letter-spacing: 1.5px;
  }
}
//=============================
//          OUR MENU
//=============================


.our-menu{
  text-align: center;
  padding-bottom: 0;
}

.menu-card{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 70px;
  &__item{
    width: 33.3333%;
  }
}

.menu-card__item-img{
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 400px;
  position: relative;
  overflow: hidden;
  &:hover .menu-card__item-overflow{
    opacity: 1;
  }
  &:hover .menu-overflow__content{
    transform: translateY(0);
  }
}
.menu-card__item-overflow{
  text-align: left;
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;
  background-color: rgba(#000, .7);
  padding: 30px;
  opacity: 0;
  transition: 0.5s;
  .menu-overflow__title{
    text-transform: none;
    font-size: 28px;
    padding-bottom: 10px;
  }
  .menu-overflow__composition{
    color: rgba(#fff,.7);
    font-size: 14px;
    width: 300px;
  }
  .menu-overflow__price{
    position: absolute;
    right: 0;
    top: 3px;
    font-size: 26px
  }
}

.menu-overflow__content{
  transform: translateY(30%);
  transition: 0.6s
}

//=============================
//          TESTIMONIALS
//=============================


.testimonials{
  color: #fff;
  text-align: center;
  text-transform: none;
  position: relative;
  transform-style: inherit;
  &::before{
    content:'';
    background-image: url(https://cmkt-image-prd.freetls.fastly.net/0.1.0/ps/3573738/910/656/m2/fpnw/wm0/r8lfaxxffm6rk1wv8wonfhqebp3o4jff9ukohlpkdjtl0uday0uaihkiguxmrbei-.jpg?1510643912&s=f6392a8588317f01781629ade6ce62d7);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    // z-index: -1;
    // transform-origin: center;
    // transform: translateZ(-1px);
  }
  
  h4{
    font-size: 34px;
    padding-bottom: 50px;
  }
}
.testimonials__slider{
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  z-index: 1;
}

.slider__item-content{
  .cite{
    font-size: 20px;
    font-weight: 400;
    line-height: 35px;
    padding:0 20px 20px 20px;
  }
  .author{
    font-size: 20px
  }
}
.testimonials-dots{
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-68%);
  display: flex;
  li button{
      padding: 0;
      margin: 0 5px;
      display: inline-block;
      line-height: 0;
      font-size: 0;
      background-color: transparent;
      border: 2px solid #fff;
      outline: none;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      &:hover {
        background-color: #fff;    
      }
  }
}
.testimonials-dots li.slick-active button{
  background-color: #fff;
}
//=============================
//           CONTACTS
//=============================

.contacts-inner{
  display: flex;
  padding-left: 40px;
  .map{
    width: 100%;
  }
  .contacts-form{
    width: 100%;
    padding-left: 20px;
    h5{
      color: #222;
      font-size: 32px;
      text-transform: none;
      padding-bottom: 30x;
    }
  }
}
form{
  input,textarea{
    font-family: sans-serif;
    border: none;
    border-bottom: 1px solid #ddd;
    padding: 20px;
    margin-right: 25px;
    font-size: 15px;
    color: #777;
  }
  .subject,
  .comment,
  .contacts--btn{
    width: 100%;
    max-width: 477px
  }
  textarea{
    height: 135px;
    resize: none;
  }
}

.contacts--btn{
  color: #fff;
  font-size: 16px;
  padding: 15px;
  margin-top: 25px;
  
}

//=============================
//           FOOTER
//=============================


.footer{
    background-color: #f2f2f2;
}

.footer__inner{
  color: #000;
  display: flex;
  justify-content: space-between;
  align-items: top;
  h5{
    font-size: 22px;
    text-transform: none;
    padding-bottom: 25px;
    color: #111;
    
  }
}
.find-us,
.reservation,
.open-hours{
  width: 40%;
  padding: 30px 40px;
  text-transform: none;
  color: #777;
  font-weight: 400;
  line-height: 25px;
  border-radius: 20px;
  transition: .2s all;
  &:hover{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    h5{
      color: #fff;
    }
  }
}
.socials-copyright{
  padding: 30px 0 30px 20px;
  text-transform: none;
  color: #777;
  font-weight: 400;
  line-height: 25px;
  border-radius: 20px;

}

.find-us{
  &:hover{
    background-image: url(https://moorgatefinance.com/wp-content/uploads/2015/06/home-v2-contact-us-bg.jpg);
    color: #fff;

  }
}

.reservation{
  &:hover{
    background-image: url(http://bomagreen.co.uk/wp-content/uploads/2016/05/reservation.png);
    color: #fff;

  }
}

.open-hours{
    background-image: url(https://localshisha.bg/wp-content/uploads/2019/04/A04A9836.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 20px;
    color: #fff;
  h5{
    color: #fff;
  }
}


.socials-copyright{
  .socials{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: no-wrap;
    a{
      display: block;
      height: 40px;
      width: 40px;
      padding-top: 8px;
      border-radius: 50%;
      text-align: center;
      vertical-align: middle;
      color: $red;
      margin: 0 15px 50px 0;
      transition: .3s all;
      &:hover{
        color: #fff;
        background-color: $red;
      }
    }
  }
}

JS

              
                $(document).ready(function(){
  $('.header__slider').slick({
    slidesToShow: 1,
    infinite: true,
    fade: true,
    speed: 1500,
    autoplay: true,
    autoplaySpeed: 5000,
    appendArrows: false,
    dots: true,
    dotsClass: "slider-dots",
  });
  $('.testimonials__slider').slick({
    infinite: true,
    dots: true,
    dotsClass: "testimonials-dots",
    autoplay: true,
    autoplaySpeed: 5000,
    speed: 1000,
  });
  
  	//E-mail Ajax Send
	$("form").submit(function() { //Change
		var th = $(this);
		$.ajax({
			type: "POST",
			url: "mail.php", //Change
			data: th.serialize()
		}).done(function() {
			alert("Thank you!");
			setTimeout(function() {
				// Done Functions
				th.trigger("reset");
			}, 1000);
		});
		return false;
  });
});

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

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

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions