mricaldip/index.html Secret

## index.html
<body>
    <nav class="navbar">
        <div class="navbar-container container">
            <input type="checkbox" name="" id="">
            <h1 class="logo">MAUs</h1>
            <div class="hamburger-lines"></div>
                <span class="line line1"></span>
                <span class="line line2"></span>
                <span class="line line3"></span>
            <ul class="menu-items">
                <li><a href="#showcase">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#food">Category</a></li>
                <li><a href="#food-menu">Menu</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>

        </div>
    </nav>

    <section class="showcase-area" id="showcase">
        <div class="showcase-container">
            <h1 class="main-title">Eat Right Food</h1>
            <p>Eat healthy food, it is good for your health.</p>
            <a href="#food-menu" class="btn btn-primary">Menu</a>
        </div>

    </section>

    <section id="about">
        <div class="about-wrapper container">
            <div class="about-text">
                <p class="small">About us</p>
                <h2>We've been making healthy food since 2018</h2>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatem aliquid quae voluptates ipsa, voluptas asperiores est voluptate ab earum culpa assumenda id nobis nisi. Velit amet voluptatem pariatur eius vitae dolores recusandae, iste temporibus placeat ea omnis tenetur eum nam!</p>
            </div>
            <div class="about-img">
                <img src="./resources/images/insalataban1.jpg" alt="About Us">
            </div>
        </div>
    </section>

    <section id="food">
        <h2>Types of Food</h2>
        <div class="food-container container">
            <div class="food-type fruit">
                <div class="img-container">
                    <img src="./resources/images/trio1.jpg" alt="">
                    <div class="img-content">
                        <h3>Fruits</h3>
                        <a href="https://en.wikipedia.org/wiki/Fruit" class="btn btn-primary" target="_blank">Learn more</a>
                    </div>
                </div>
            </div>
            <div class="food-type vegetable">
                <div class="img-container">
                    <img src="./resources/images/trio2.jpg" alt="">
                    <div class="img-content">
                        <h3>Vegetables</h3>
                        <a href="https://en.wikipedia.org/wiki/Vegetable" class="btn btn-primary" target="_blank">Learn more</a>
                    </div>
                </div>
            </div>
            <div class="food-type grain">
                <div class="img-container">
                    <img src="./resources/images/trio3.jpg" alt="">
                    <div class="img-content">
                        <h3>Grains</h3>
                        <a href="https://en.wikipedia.org/wiki/Grain" class="btn btn-primary" target="_blank">Learn more</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="food-menu">
        <h2 class="food-menu-heading">
            Food Menu
        </h2>
        <div class="food-menu-container container">
            <div class="food-menu-item">
                <div class="food-image">
                    <img src="./resources/images/menu1.jpg" alt="">
                </div>
                <div class="food-description">
                    <h2 class="food-title">Food Menu Item 1</h2>
                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero.</p>
                    <p class="food-price">&#36; 250</p>
                </div>
            </div>
            <div class="food-menu-item">
                <div class="food-image">
                    <img src="./resources/images/menu2.jpg" alt="">
                </div>
                <div class="food-description">
                    <h2 class="food-title">Food Menu Item 2</h2>
                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero.</p>
                    <p class="food-price">&#36; 250</p>
                </div>
            </div>
            <div class="food-menu-item">
                <div class="food-image">
                    <img src="./resources/images/manu3.jpg" alt="">
                </div>
                <div class="food-description">
                    <h2 class="food-title">Food Menu Item 3</h2>
                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero.</p>
                    <p class="food-price">&#36; 250</p>
                </div>
            </div>
            <div class="food-menu-item">
                <div class="food-image">
                    <img src="./resources/images/menu4.jpg" alt="">
                </div>
                <div class="food-description">
                    <h2 class="food-title">Food Menu Item 4</h2>
                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero.</p>
                    <p class="food-price">&#36; 250</p>
                </div>
            </div>
            <div class="food-menu-item">
                <div class="food-image">
                    <img src="./resources/images/menu5.jpg" alt="">
                </div>
                <div class="food-description">
                    <h2 class="food-title">Food Menu Item 5</h2>
                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero.</p>
                    <p class="food-price">&#36; 250</p>
                </div>
            </div>
            <div class="food-menu-item">
                <div class="food-image">
                    <img src="./resources/images/menu6.jpg" alt="">
                </div>
                <div class="food-description">
                    <h2 class="food-title">Food Menu Item 6</h2>
                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero.</p>
                    <p class="food-price">&#36; 250</p>
                </div>
            </div>
        </div>
    </section>

    <section id="testimonials">
        <h2 class="testimonial-title">What our costumers say</h2>
        <div class="testimonial-container container">
            <div class="testimonial-box">
                <div class="star-rating">
                    <span class="fa fa-star checked"></span>
                    <span class="fa fa-star checked"></span>
                    <span class="fa fa-star checked"></span>
                    <span class="fa fa-star checked"></span>
                    <span class="fa fa-star checked"></span>
                </div>
                <p class="testimonial-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque dolores laboriosam ut dolor.</p>
                <div class="customer-detail">
                    <div class="customer-photo"><img src="./resources/images/autor1.png" alt=""></div>
                    <p class="customer-name">Jorge Ricaldi</p>
                </div>
            </div>
            <div class="testimonial-box">
                <div class="star-rating">
                    <span class="fa fa-star checked"></span>
                    <span class="fa fa-star checked"></span>
                    <span class="fa fa-star checked"></span>
                    <span class="fa fa-star checked"></span>
                    <span class="fa fa-star checked"></span>
                </div>
                <p class="testimonial-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque dolores laboriosam ut dolor.</p>
                <div class="customer-detail">
                    <div class="customer-photo"><img src="./resources/images/autor2.jpg" alt=""></div>
                    <p class="customer-name">Mau Ricaldi</p>
                </div>
            </div>
            <div class="testimonial-box">
                <div class="star-rating">
                    <span class="fa fa-star checked"></span>
                    <span class="fa fa-star checked"></span>
                    <span class="fa fa-star checked"></span>
                    <span class="fa fa-star checked"></span>
                    <span class="fa fa-star checked"></span>
                </div>
                <p class="testimonial-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque dolores laboriosam ut dolor.</p>
                <div class="customer-detail">
                    <div class="customer-photo"><img src="./resources/images/autor3.jpg" alt=""></div>
                    <p class="customer-name">Diana Untiveros</p>
                </div>
            </div>
        </div>
    </section>

    <section id="contact">
        <div class="contact-container container">
            <div class="contact-image">
                <img src="./resources/images/footer1.jpg" alt="">
            </div>
            <div class="form-container">
                <h2>Contact Us</h2>
                <input type="text" name="" id="" placeholder="Name">
                <input type="email" name="" id="" placeholder="E-mail">
                <textarea name="" id="" cols="30" rows="10" placeholder="Type your message here"></textarea>
                <a href="#" class="btn btn-primary">Submit</a>
            </div>
        </div>
    </section>

    <footer id="footer">
        <h2>Restaurant website &copy; all rights reserved.</h2>
    </footer>


    <!--for smooth scrolling-->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});
</script>

</body>
</html>

## style.css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

*,
*::after,
*::before {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html {
    font-size: 62.5%;
}

body{
    font-family: 'Poppins', sans-serif;
}

/* utility classes */

.container {
    max-width: 1200px;
    width: 90%;
    margin: auto;
}

.btn {
    display: inline-block;
    padding: 1em 2.5em;
    text-decoration: none;
    border-radius: 50px;
    cursor: pointer;
    outline: none;
    margin-top: 1em;
    text-transform: uppercase;
    font-weight: 500;
}


.btn-primary {
    color: #fff;
    background: #16a083;
    transition: 0.3s ease-in;
}

.btn-primary:hover {
    background: #0d6351;
}

/* navbar styling */

/* for desktop mode */

.navbar input[type='checkbox'],
.navbar .hamburger-lines {
    display: none;
}

.navbar {
    box-shadow: 0px 5px 10px 0px #aaa;
    position: fixed;
    width: 100%;
    background: #fff;
    color: #000;
    opacity: 0.85;
    z-index: 999;
}

.navbar-container {
    display: flex;
    justify-content: space-between;
    height: 64px;
    align-items: center;
}

.menu-items {
    order: 2;
    display: flex;
}

.menu-items li {
    list-style: none;
    margin-left: 1.5rem;
    font-size: 1.8rem;
}

.logo {
    order: 1;
    font-size: 3rem;
}

.navbar a {
    color: #444;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease-in-out;
}

.navbar a:hover {
    color: #117964;
}

/* showcase styling */

.showcase-area {
    height: 50vh;
    background: linear-gradient(rgba(240,240,240,0.444), rgba(255,255,255,0.444)), url(../images/Background1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.showcase-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 1.6rem;
}

.main-title {
    text-transform: uppercase;
}

/* about us */

#about {
    padding: 50px 0px;
    background: #f5f5f7;
}

.about-wrapper {
    display: flex;
    flex-wrap: wrap;
}

#about h2 {
    font-size: 3.2rem;
}

#about p {
    font-size: 1.6rem;
    color: #555;
}

#about .small {
    font-size: 1.6rem;
    color: #666;
    font-weight: 600;
}

.about-img {
    flex: 1 1 400px;
    padding: 30px;
    transform: translateX(150%);
    animation: about-img-animation 1s ease-in-out forwards;
}
@keyframes about-img-animation {
    100%{
        transform: translate(0);
    }
}

.about-text {
    flex: 1 1 400px;
    padding: 30px;
    margin: auto;
    transform: translateX(-150%);
    animation: about-text-animation 1s ease-in-out forwards;
}
@keyframes about-text-animation {
    100%{
        transform: translate(0);
    }
}

.about-img img {
    display: block;
    height: 400px;
    max-width: 100%;
    margin: auto;
    object-fit: cover;
    object-position: right;
}

/* food category styling */

#food {
    padding: 5rem 0 10rem 0;
}

#food h2 {
    text-align: center;
    font-size: 3rem;
    font-weight: 400;
    margin-bottom: 40px;
    text-transform: uppercase;
    color: #555;
}

.food-container {
    display: flex;
    justify-content: space-between;
}

.food-container img {
    display: block;
    width: 100%;
    margin: auto;
    max-height: 300px;
    object-fit: cover;
    object-position: center;
}

.img-container {
    margin: 0 1rem;
    position: relative;
}

.img-content {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    z-index: 2;
    text-align: center;
    transition: all 0.3s ease-in-out 0.1s;
}

.img-content h3 {
    color: #fff;
    font-size: 3rem;
}

.img-content a {
    font-size: 1.2rem;
}

.img-container::after{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.871);
    /*opacity: 0;*/
    z-index: 1;

    transform: scaleY(0);
    transform-origin: 100% 100%;
    transition: all 0.3s ease-in-out;
}

.img-container:hover::after {
    opacity: 1;
    transform: scaleY(1);
}

.img-container:hover .img-content{
    opacity: 1;
    top: 40%;
}

/* food menu styling */

.food-menu-heading {
    font-size: 4rem;
    text-align: center;
    font-weight: 400;
    color: #666;
}
.food-menu-container {
    display: flex;
    flex-wrap: wrap;
    padding: 50px 0px 30px 0px;
}

.food-menu-container img{
    display: block;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}


.food-menu-item {
    display: flex;
    flex: 1 1 600px;
    justify-content: space-evenly;
    margin-bottom: 3rem;
}

.food-description {
    margin: auto 1.5rem;

}

.food-title {
    font-size: 2.2rem;
    font-weight: 600;
    color: #444;
}

.food-description p{
    font-size: 1.4rem;
    color: #555;
    font-weight: 500;
}

.food-description .food-price {
    color: #117964;
    font-weight: 700;
}

/* Testimonial styling */

#testimonials {
    padding: 5rem 0rem;
    background: rgb(243, 243, 243);
}

.testimonial-title {
    text-align: center;
    font-size: 3rem;
    font-weight: 400;
    color: #555;
}

.testimonial-container {
    display: flex;
    justify-content: space-between;
    font-size: 1.6rem;
    padding: 1rem;
}

.testimonial-box .checked {
    color: #ff9529;
}

.testimonial-box .testimonial-text {
    margin: 1rem 0;
    color: #444;
}

.testimonial-box {
    text-align: center;
    padding: 1rem;
}

.customer-photo img {
    display: block;
    width: 100px;
    height: 100px;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    margin: auto;
}

/* contact us styling */

#contact {
    padding: 5rem 0;
    background: rgb(226, 226, 226);
}

.contact-container {
    display: flex;
    background: #fff;
}

.contact-image {
    width: 50%;
}

.contact-image img{
    display: block;
    height: 400px;
    object-fit: cover;
    object-position: center;
    width: 100%;
}

.form-container {
    padding: 1rem;
    width: 50%;
    margin: auto;
}

.form-container input {
    display: block;
    width: 100%;
    border: none;
    border-bottom: 2px solid #ddd;
    padding: 1rem;
    box-shadow: none;
    outline: none;
    margin-bottom: 1rem;
    color: #444;
    font-weight: 500;
}

.form-container textarea {
    display: block;
    width: 100%;
    border: none;
    border-bottom: 2px solid #ddd;
    padding: 1rem 0;
}

.form-container h2 {
    font-size: 3rem;
    font-weight: 400;
    color: #444;
    margin-bottom: 1rem;
}

.form-container a {
    font-size: 1.2rem;
}

#footer h2 {
    text-align: center;
    font-size: 2rem;
    padding: 3rem;
    font-weight: 10;
    color: #fff;
    background: rgb(65, 65, 65);
}

/* media queries */

@media (max-width: 768px) {
    .navbar {
        opacity: 0.95;
    }

    .navbar-container input[type='checkbox'],
    .navbar-container .hamburger-lines{
        display: block;
    }

    .navbar-container {
        display: block;
        position: relative;
        height: 64px;
    }

    .navbar-container input[type='checkbox'] {
        position: absolute;
        display: block;
        height: 32px;
        width: 40px;
        top: 20px;
        left: 20px;
        z-index: 5;
        /*opacity: 0;*/
    }

    .navbar-container .hamburger-lines {
        display: block;
        height: 32px;
        width: 40px;
        position: absolute;
        top: 20px;
        left: 20px;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .navbar-container .hamburger-lines .line {
        display: block;
        height: 4px;
        width: 100%;
        border-radius: 10px;
        background: #333333;
    }

    .navbar-container .hamburger-lines .line1 {
        transform-origin: 0% 0%;
        transition: transform 0.4s ease-in-out;
    }

    .navbar-container .hamburger-lines .line2 {
        transition: transform 0.4s ease-in-out;
    }

    .navbar-container .hamburger-lines .line3 {
        transform-origin: 0% 100%;
        transition: transform 0.4s ease-in-out;
    }

    .navbar .menu-items {
        padding-top: 100px;
        background: #fff;
        height: 100vh;
        max-width: 300px;
        transform: translateX(-150%);
        display: flex;
        flex-direction: column;
        margin-left: -40px;
        padding-left: 50px;
        transition: transform 0.5s ease-in-out;
        box-shadow: 5px 0px 10px 0px #aaa;
    }

    .navbar .menu-items li {
        margin-bottom: 3rem;
        font-size: 2rem;
        font-weight: 500;
    }

    .logo {
        position: absolute;
        top: 10px;
        right: 15px;
        font-size: 3rem;
    }

    .navbar-container input[type='checkbox']:checked ~ .menu-items {
        transform: translateX(0);
    }

    .navbar-container input[type='checkbox']:checked ~ .hamburger-lines .line1 {
        transform: rotate(45deg);
    }

    .navbar-container input[type='checkbox']:checked ~ .hamburger-lines .line2 {
        transform: scaleY(0);
    }

    .navbar-container input[type='checkbox']:checked ~ .hamburger-lines .line3 {
        transform: rotate(-45deg);
    }

    /* food category @media */

    .food-container {
        flex-direction: column;
        align-items: stretch;
    }

    .food-type:not(:last-child) {
        margin-bottom: 3rem;
    }

    .food-type {
        box-shadow: 5px 5px 10px 0px #aaa;
    }

    .img-container {
        margin: 0;
    }
}
/* small screen */

@media (max-width: 500px) {
    html {
        font-size: 50%;
    }

    .testimonial-container {
        flex-direction: column;
        text-align: center;
    }

    .food-menu-item {
        flex-direction: column;
        text-align: center;
    }

    .food-menu-container img {
        margin: auto;
    }

    .form-container {
        width: 90%;
    }

    .contact-container {
        display: flex;
        flex-direction: column;
    }

    .contact-image {
        width: 90%;
        margin: 3rem;
    }
}

/* landscape mode */

@media (orientation: landscape) and (max-height: 500px) {
    .showcase-area {
        height: 50vmax;
    }
}
	<body>
	<nav class="navbar">
	<div class="navbar-container container">
	<input type="checkbox" name="" id="">
	<h1 class="logo">MAUs</h1>
	<div class="hamburger-lines"></div>
	<span class="line line1"></span>
	<span class="line line2"></span>
	<span class="line line3"></span>
	<ul class="menu-items">
	<li><a href="#showcase">Home</a></li>
	<li><a href="#about">About</a></li>
	<li><a href="#food">Category</a></li>
	<li><a href="#food-menu">Menu</a></li>
	<li><a href="#contact">Contact</a></li>
	</ul>

	</div>
	</nav>

	<section class="showcase-area" id="showcase">
	<div class="showcase-container">
	<h1 class="main-title">Eat Right Food</h1>
	<p>Eat healthy food, it is good for your health.</p>
	<a href="#food-menu" class="btn btn-primary">Menu</a>
	</div>

	</section>

	<section id="about">
	<div class="about-wrapper container">
	<div class="about-text">
	<p class="small">About us</p>
	<h2>We've been making healthy food since 2018</h2>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatem aliquid quae voluptates ipsa, voluptas asperiores est voluptate ab earum culpa assumenda id nobis nisi. Velit amet voluptatem pariatur eius vitae dolores recusandae, iste temporibus placeat ea omnis tenetur eum nam!</p>
	</div>
	<div class="about-img">
	<img src="./resources/images/insalataban1.jpg" alt="About Us">
	</div>
	</div>
	</section>

	<section id="food">
	<h2>Types of Food</h2>
	<div class="food-container container">
	<div class="food-type fruit">
	<div class="img-container">
	<img src="./resources/images/trio1.jpg" alt="">
	<div class="img-content">
	<h3>Fruits</h3>
	<a href="https://en.wikipedia.org/wiki/Fruit" class="btn btn-primary" target="_blank">Learn more</a>
	</div>
	</div>
	</div>
	<div class="food-type vegetable">
	<div class="img-container">
	<img src="./resources/images/trio2.jpg" alt="">
	<div class="img-content">
	<h3>Vegetables</h3>
	<a href="https://en.wikipedia.org/wiki/Vegetable" class="btn btn-primary" target="_blank">Learn more</a>
	</div>
	</div>
	</div>
	<div class="food-type grain">
	<div class="img-container">
	<img src="./resources/images/trio3.jpg" alt="">
	<div class="img-content">
	<h3>Grains</h3>
	<a href="https://en.wikipedia.org/wiki/Grain" class="btn btn-primary" target="_blank">Learn more</a>
	</div>
	</div>
	</div>
	</div>
	</section>

	<section id="food-menu">
	<h2 class="food-menu-heading">
	Food Menu
	</h2>
	<div class="food-menu-container container">
	<div class="food-menu-item">
	<div class="food-image">
	<img src="./resources/images/menu1.jpg" alt="">
	</div>
	<div class="food-description">
	<h2 class="food-title">Food Menu Item 1</h2>
	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero.</p>
	<p class="food-price">$ 250</p>
	</div>
	</div>
	<div class="food-menu-item">
	<div class="food-image">
	<img src="./resources/images/menu2.jpg" alt="">
	</div>
	<div class="food-description">
	<h2 class="food-title">Food Menu Item 2</h2>
	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero.</p>
	<p class="food-price">$ 250</p>
	</div>
	</div>
	<div class="food-menu-item">
	<div class="food-image">
	<img src="./resources/images/manu3.jpg" alt="">
	</div>
	<div class="food-description">
	<h2 class="food-title">Food Menu Item 3</h2>
	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero.</p>
	<p class="food-price">$ 250</p>
	</div>
	</div>
	<div class="food-menu-item">
	<div class="food-image">
	<img src="./resources/images/menu4.jpg" alt="">
	</div>
	<div class="food-description">
	<h2 class="food-title">Food Menu Item 4</h2>
	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero.</p>
	<p class="food-price">$ 250</p>
	</div>
	</div>
	<div class="food-menu-item">
	<div class="food-image">
	<img src="./resources/images/menu5.jpg" alt="">
	</div>
	<div class="food-description">
	<h2 class="food-title">Food Menu Item 5</h2>
	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero.</p>
	<p class="food-price">$ 250</p>
	</div>
	</div>
	<div class="food-menu-item">
	<div class="food-image">
	<img src="./resources/images/menu6.jpg" alt="">
	</div>
	<div class="food-description">
	<h2 class="food-title">Food Menu Item 6</h2>
	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero.</p>
	<p class="food-price">$ 250</p>
	</div>
	</div>
	</div>
	</section>

	<section id="testimonials">
	<h2 class="testimonial-title">What our costumers say</h2>
	<div class="testimonial-container container">
	<div class="testimonial-box">
	<div class="star-rating">
	<span class="fa fa-star checked"></span>
	<span class="fa fa-star checked"></span>
	<span class="fa fa-star checked"></span>
	<span class="fa fa-star checked"></span>
	<span class="fa fa-star checked"></span>
	</div>
	<p class="testimonial-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque dolores laboriosam ut dolor.</p>
	<div class="customer-detail">
	<div class="customer-photo"><img src="./resources/images/autor1.png" alt=""></div>
	<p class="customer-name">Jorge Ricaldi</p>
	</div>
	</div>
	<div class="testimonial-box">
	<div class="star-rating">
	<span class="fa fa-star checked"></span>
	<span class="fa fa-star checked"></span>
	<span class="fa fa-star checked"></span>
	<span class="fa fa-star checked"></span>
	<span class="fa fa-star checked"></span>
	</div>
	<p class="testimonial-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque dolores laboriosam ut dolor.</p>
	<div class="customer-detail">
	<div class="customer-photo"><img src="./resources/images/autor2.jpg" alt=""></div>
	<p class="customer-name">Mau Ricaldi</p>
	</div>
	</div>
	<div class="testimonial-box">
	<div class="star-rating">
	<span class="fa fa-star checked"></span>
	<span class="fa fa-star checked"></span>
	<span class="fa fa-star checked"></span>
	<span class="fa fa-star checked"></span>
	<span class="fa fa-star checked"></span>
	</div>
	<p class="testimonial-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque dolores laboriosam ut dolor.</p>
	<div class="customer-detail">
	<div class="customer-photo"><img src="./resources/images/autor3.jpg" alt=""></div>
	<p class="customer-name">Diana Untiveros</p>
	</div>
	</div>
	</div>
	</section>

	<section id="contact">
	<div class="contact-container container">
	<div class="contact-image">
	<img src="./resources/images/footer1.jpg" alt="">
	</div>
	<div class="form-container">
	<h2>Contact Us</h2>
	<input type="text" name="" id="" placeholder="Name">
	<input type="email" name="" id="" placeholder="E-mail">
	<textarea name="" id="" cols="30" rows="10" placeholder="Type your message here"></textarea>
	<a href="#" class="btn btn-primary">Submit</a>
	</div>
	</div>
	</section>

	<footer id="footer">
	<h2>Restaurant website © all rights reserved.</h2>
	</footer>


	<!--for smooth scrolling-->

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script>
	$(document).ready(function(){
	// Add smooth scrolling to all links
	$("a").on('click', function(event) {

	// Make sure this.hash has a value before overriding default behavior
	if (this.hash !== "") {
	// Prevent default anchor click behavior
	event.preventDefault();

	// Store hash
	var hash = this.hash;

	// Using jQuery's animate() method to add smooth page scroll
	// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
	$('html, body').animate({
	scrollTop: $(hash).offset().top
	}, 800, function(){

	// Add hash (#) to URL when done scrolling (default click behavior)
	window.location.hash = hash;
	});
	} // End if
	});
	});
	</script>

	</body>
	</html>
	@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

	*,
	*::after,
	*::before {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	}

	html {
	font-size: 62.5%;
	}

	body{
	font-family: 'Poppins', sans-serif;
	}

	/* utility classes */

	.container {
	max-width: 1200px;
	width: 90%;
	margin: auto;
	}

	.btn {
	display: inline-block;
	padding: 1em 2.5em;
	text-decoration: none;
	border-radius: 50px;
	cursor: pointer;
	outline: none;
	margin-top: 1em;
	text-transform: uppercase;
	font-weight: 500;
	}


	.btn-primary {
	color: #fff;
	background: #16a083;
	transition: 0.3s ease-in;
	}

	.btn-primary:hover {
	background: #0d6351;
	}

	/* navbar styling */

	/* for desktop mode */

	.navbar input[type='checkbox'],
	.navbar .hamburger-lines {
	display: none;
	}

	.navbar {
	box-shadow: 0px 5px 10px 0px #aaa;
	position: fixed;
	width: 100%;
	background: #fff;
	color: #000;
	opacity: 0.85;
	z-index: 999;
	}

	.navbar-container {
	display: flex;
	justify-content: space-between;
	height: 64px;
	align-items: center;
	}

	.menu-items {
	order: 2;
	display: flex;
	}

	.menu-items li {
	list-style: none;
	margin-left: 1.5rem;
	font-size: 1.8rem;
	}

	.logo {
	order: 1;
	font-size: 3rem;
	}

	.navbar a {
	color: #444;
	text-decoration: none;
	font-weight: 500;
	transition: color 0.3s ease-in-out;
	}

	.navbar a:hover {
	color: #117964;
	}

	/* showcase styling */

	.showcase-area {
	height: 50vh;
	background: linear-gradient(rgba(240,240,240,0.444), rgba(255,255,255,0.444)), url(../images/Background1.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	}

	.showcase-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	font-size: 1.6rem;
	}

	.main-title {
	text-transform: uppercase;
	}

	/* about us */

	#about {
	padding: 50px 0px;
	background: #f5f5f7;
	}

	.about-wrapper {
	display: flex;
	flex-wrap: wrap;
	}

	#about h2 {
	font-size: 3.2rem;
	}

	#about p {
	font-size: 1.6rem;
	color: #555;
	}

	#about .small {
	font-size: 1.6rem;
	color: #666;
	font-weight: 600;
	}

	.about-img {
	flex: 1 1 400px;
	padding: 30px;
	transform: translateX(150%);
	animation: about-img-animation 1s ease-in-out forwards;
	}
	@keyframes about-img-animation {
	100%{
	transform: translate(0);
	}
	}

	.about-text {
	flex: 1 1 400px;
	padding: 30px;
	margin: auto;
	transform: translateX(-150%);
	animation: about-text-animation 1s ease-in-out forwards;
	}
	@keyframes about-text-animation {
	100%{
	transform: translate(0);
	}
	}

	.about-img img {
	display: block;
	height: 400px;
	max-width: 100%;
	margin: auto;
	object-fit: cover;
	object-position: right;
	}

	/* food category styling */

	#food {
	padding: 5rem 0 10rem 0;
	}

	#food h2 {
	text-align: center;
	font-size: 3rem;
	font-weight: 400;
	margin-bottom: 40px;
	text-transform: uppercase;
	color: #555;
	}

	.food-container {
	display: flex;
	justify-content: space-between;
	}

	.food-container img {
	display: block;
	width: 100%;
	margin: auto;
	max-height: 300px;
	object-fit: cover;
	object-position: center;
	}

	.img-container {
	margin: 0 1rem;
	position: relative;
	}

	.img-content {
	position: absolute;
	top: 70%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	z-index: 2;
	text-align: center;
	transition: all 0.3s ease-in-out 0.1s;
	}

	.img-content h3 {
	color: #fff;
	font-size: 3rem;
	}

	.img-content a {
	font-size: 1.2rem;
	}

	.img-container::after{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.871);
	/opacity: 0;/
	z-index: 1;

	transform: scaleY(0);
	transform-origin: 100% 100%;
	transition: all 0.3s ease-in-out;
	}

	.img-container:hover::after {
	opacity: 1;
	transform: scaleY(1);
	}

	.img-container:hover .img-content{
	opacity: 1;
	top: 40%;
	}

	/* food menu styling */

	.food-menu-heading {
	font-size: 4rem;
	text-align: center;
	font-weight: 400;
	color: #666;
	}
	.food-menu-container {
	display: flex;
	flex-wrap: wrap;
	padding: 50px 0px 30px 0px;
	}

	.food-menu-container img{
	display: block;
	width: 250px;
	height: 250px;
	border-radius: 50%;
	object-fit: cover;
	object-position: center;
	}


	.food-menu-item {
	display: flex;
	flex: 1 1 600px;
	justify-content: space-evenly;
	margin-bottom: 3rem;
	}

	.food-description {
	margin: auto 1.5rem;

	}

	.food-title {
	font-size: 2.2rem;
	font-weight: 600;
	color: #444;
	}

	.food-description p{
	font-size: 1.4rem;
	color: #555;
	font-weight: 500;
	}

	.food-description .food-price {
	color: #117964;
	font-weight: 700;
	}

	/* Testimonial styling */

	#testimonials {
	padding: 5rem 0rem;
	background: rgb(243, 243, 243);
	}

	.testimonial-title {
	text-align: center;
	font-size: 3rem;
	font-weight: 400;
	color: #555;
	}

	.testimonial-container {
	display: flex;
	justify-content: space-between;
	font-size: 1.6rem;
	padding: 1rem;
	}

	.testimonial-box .checked {
	color: #ff9529;
	}

	.testimonial-box .testimonial-text {
	margin: 1rem 0;
	color: #444;
	}

	.testimonial-box {
	text-align: center;
	padding: 1rem;
	}

	.customer-photo img {
	display: block;
	width: 100px;
	height: 100px;
	object-fit: cover;
	object-position: center;
	border-radius: 50%;
	margin: auto;
	}

	/* contact us styling */

	#contact {
	padding: 5rem 0;
	background: rgb(226, 226, 226);
	}

	.contact-container {
	display: flex;
	background: #fff;
	}

	.contact-image {
	width: 50%;
	}

	.contact-image img{
	display: block;
	height: 400px;
	object-fit: cover;
	object-position: center;
	width: 100%;
	}

	.form-container {
	padding: 1rem;
	width: 50%;
	margin: auto;
	}

	.form-container input {
	display: block;
	width: 100%;
	border: none;
	border-bottom: 2px solid #ddd;
	padding: 1rem;
	box-shadow: none;
	outline: none;
	margin-bottom: 1rem;
	color: #444;
	font-weight: 500;
	}

	.form-container textarea {
	display: block;
	width: 100%;
	border: none;
	border-bottom: 2px solid #ddd;
	padding: 1rem 0;
	}

	.form-container h2 {
	font-size: 3rem;
	font-weight: 400;
	color: #444;
	margin-bottom: 1rem;
	}

	.form-container a {
	font-size: 1.2rem;
	}

	#footer h2 {
	text-align: center;
	font-size: 2rem;
	padding: 3rem;
	font-weight: 10;
	color: #fff;
	background: rgb(65, 65, 65);
	}

	/* media queries */

	@media (max-width: 768px) {
	.navbar {
	opacity: 0.95;
	}

	.navbar-container input[type='checkbox'],
	.navbar-container .hamburger-lines{
	display: block;
	}

	.navbar-container {
	display: block;
	position: relative;
	height: 64px;
	}

	.navbar-container input[type='checkbox'] {
	position: absolute;
	display: block;
	height: 32px;
	width: 40px;
	top: 20px;
	left: 20px;
	z-index: 5;
	/opacity: 0;/
	}

	.navbar-container .hamburger-lines {
	display: block;
	height: 32px;
	width: 40px;
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	}

	.navbar-container .hamburger-lines .line {
	display: block;
	height: 4px;
	width: 100%;
	border-radius: 10px;
	background: #333333;
	}

	.navbar-container .hamburger-lines .line1 {
	transform-origin: 0% 0%;
	transition: transform 0.4s ease-in-out;
	}

	.navbar-container .hamburger-lines .line2 {
	transition: transform 0.4s ease-in-out;
	}

	.navbar-container .hamburger-lines .line3 {
	transform-origin: 0% 100%;
	transition: transform 0.4s ease-in-out;
	}

	.navbar .menu-items {
	padding-top: 100px;
	background: #fff;
	height: 100vh;
	max-width: 300px;
	transform: translateX(-150%);
	display: flex;
	flex-direction: column;
	margin-left: -40px;
	padding-left: 50px;
	transition: transform 0.5s ease-in-out;
	box-shadow: 5px 0px 10px 0px #aaa;
	}

	.navbar .menu-items li {
	margin-bottom: 3rem;
	font-size: 2rem;
	font-weight: 500;
	}

	.logo {
	position: absolute;
	top: 10px;
	right: 15px;
	font-size: 3rem;
	}

	.navbar-container input[type='checkbox']:checked ~ .menu-items {
	transform: translateX(0);
	}

	.navbar-container input[type='checkbox']:checked ~ .hamburger-lines .line1 {
	transform: rotate(45deg);
	}

	.navbar-container input[type='checkbox']:checked ~ .hamburger-lines .line2 {
	transform: scaleY(0);
	}

	.navbar-container input[type='checkbox']:checked ~ .hamburger-lines .line3 {
	transform: rotate(-45deg);
	}

	/* food category @media */

	.food-container {
	flex-direction: column;
	align-items: stretch;
	}

	.food-type:not(:last-child) {
	margin-bottom: 3rem;
	}

	.food-type {
	box-shadow: 5px 5px 10px 0px #aaa;
	}

	.img-container {
	margin: 0;
	}
	}
	/* small screen */

	@media (max-width: 500px) {
	html {
	font-size: 50%;
	}

	.testimonial-container {
	flex-direction: column;
	text-align: center;
	}

	.food-menu-item {
	flex-direction: column;
	text-align: center;
	}

	.food-menu-container img {
	margin: auto;
	}

	.form-container {
	width: 90%;
	}

	.contact-container {
	display: flex;
	flex-direction: column;
	}

	.contact-image {
	width: 90%;
	margin: 3rem;
	}
	}

	/* landscape mode */

	@media (orientation: landscape) and (max-height: 500px) {
	.showcase-area {
	height: 50vmax;
	}
	}