index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, minimum-scale=1, maximum-scale=1">
    <title>Yummy</title>
    <meta content="Meal App" name="description">
    <meta content="meal,beef,chicken,Dessert,Lamb,Miscellaneous,Pasta,Pork,Seafood,Side,Starter,Vegan,Vegetarian,Breakfast,Goat" name="keywords">
    <meta property="og:site_name" content="Yummy">
    <meta property="og:title" content="Yummy">
    <meta property="og:type" content="website">
    <meta property="og:description" content="getting Meal information">
    <meta name="author" content="Housam Ramadan">
    <meta property="og:image" content="https://develekko.github.io/movie/assets/images/logo.png">
    <meta property="og:url" content="https://develekko.github.io/yummy">
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="627" />
    <meta property="og:image:alt" content="yummy logo"/>
    <meta itemprop="image" content="https://develekko.github.io/movie/assets/images/logo.png">
    <link rel="shortcut icon" href="assets/images/logo.png" type="image/x-icon">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/all.min.css">
    <link rel="stylesheet" href="assets/css/animate.min.css">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/style_index.css">
    <link rel="stylesheet" href="assets/css/media_index.css">
</head>
<body>
    <!-- =============== Slide Navbar ================= -->
    <nav class="position-fixed top-0 start-0 vh-100 text-center">
        <div class="nav-logo activeFrame animate__animated animate__bounceInDown">
            <img src="assets/images/logo.png" class="img-fluid " alt="">
        </div>
        <div class="nav-menu">
            <i class="fa-solid fa-align-justify"></i>
        </div>
        <div class="nav-social">
            <i class="fa-solid fa-globe"></i>
            <i class="fa-solid fa-share-nodes"></i>
        </div>
    </nav>
    <div class="side-nav position-fixed top-0 start-0 vh-100">
        <div class="menu">
            <ul>
                <li><a attr="search">Search</a></li>
                <li><a attr="categories.php">Categories</a></li>
                <li><a attr="list.php?a=list">Area</a></li>
                <li><a attr="list.php?i=list">Ingredients</a></li>
                <li><a attr="contact">Contact Us</a></li>
            </ul>
        </div>
        <div class="copyrights">
            <div class="sideNavSocial">
                <a href="#"><i class="fa-brands fa-facebook-f"></i></a>
                <a href="#"><i class="fa-brands fa-twitter"></i></a>
                <a href="#"><i class="fa-solid fa-globe"></i></a>
            </div>
            <p class="pt-3">Copyright © 2022 All Rights Reserved. <br>Created by <a href="https://github.com/Develekko" class="link-danger fw-bold animate__animated" target="_blank">Housam Ramadan</a></p>
        </div>
    </div>
    <!-- =============== Hero ssection ================= -->  
    <section id="hero" class="container ">
        <div id="searchBox" class="container">
            <div class="row animate__animated"> 
            </div>
        </div> 
            <div class="row box g-4 mt-3 text-white py-5"></div>
    </section>
        <!-- =============== contact ssection ================= --> 
    <section id="contact" class="container text-white py-5">
    </section>
    <div id="back-to-top"><a href="#"><i class="fa-solid fa-arrow-up-long"></i></a></div>
    <div class="loading">
        <span class="loader"></span>
    </div>
    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/bootstrap.bundle.min.js"></script>
    <script src="assets/js/index.js" type="module"></script>
</body>
</html>