Scribd
Upload
46 views11 pages

New Design

Uploaded by

Clear Account
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
46 views11 pages

New Design

Uploaded by

Clear Account
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 11

<?

php
session_start();
error_reporting(0);
include('includes/dbconnection.php');
?>
<!DOCTYPE html>
<html lang="zxx">

<head>
<title>Eloquente Catering Food Services</title>

<!-- Google Font -->


<link href="https://fonts.googleapis.com/css2?
family=Cairo:wght@200;300;400;600;900&display=swap"
rel="stylesheet">

<!-- Css Styles -->


<link rel="stylesheet" href="css/bootstrap.min.css"
type="text/css">
<link rel="stylesheet" href="css/font-awesome.min.css"
type="text/css">
<link rel="stylesheet" href="css/elegant-icons.css"
type="text/css">
<link rel="stylesheet" href="css/nice-select.css"
type="text/css">
<link rel="stylesheet" href="css/jquery-ui.min.css"
type="text/css">
<link rel="stylesheet" href="css/owl.carousel.min.css"
type="text/css">
<link rel="stylesheet" href="css/slicknav.min.css"
type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">

<style>
/* General body styling */
body {
font-family: 'Cairo', sans-serif;
color: #333;
background-color: #f9f9f9;
margin-top: 0;
}

/* Hero Section */
.hero {
position: relative;
width: 100%;
height: 70vh; /* Larger hero section height for more
impactful images */
background-size: cover;
background-position: center center;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
margin-top: 70px; /* Ensure the header is not hidden
behind */
}

.hero__text {
color: white;
text-align: center;
font-size: 4rem;
font-weight: bold;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}

.primary-btn {
color: white;
padding: 12px 30px;
font-size: 1.2rem;
background-color: darkred;
border: none;
border-radius: 5px;
text-decoration: none;
transition: background-color 0.3s ease, transform
0.3s ease;
}

.primary-btn:hover {
background-color: #d9534f;
transform: translateY(-3px);
}

/* Image slider styling */


.hero__slider {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
width: 100%;
}

.hero__slider img {
width: 100%;
height: auto;
border-radius: 10px;
transition: transform 0.3s ease;
}

.hero__slider img:hover {
transform: scale(1.1);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* ONLINE FOOD SHOP Text */


.online-food-shop {
text-align: center;
font-size: 30pxrem;
font-weight: bold;
color: darkred;
padding: 60px 0; /* Increased padding for better spacing */
font-family: 'Cairo', sans-serif;
}

/* Optional - if you want the text color to stand out more */


.online-food-shop p {
color: #333;
font-size: 2rem;
}

/* Category Section */
.categories__slider {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 30px;
}

.categories__item {
width: 100%;
height: 250px;
background-size: cover;
background-position: center center;
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
transition: transform 0.3s ease, box-shadow 0.3s
ease;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.categories__item:hover {
transform: scale(1.05);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.categories__item h5 {
color: white;
font-size: 1.5rem;
font-weight: bold;
background: rgba(0, 0, 0, 0.6);
padding: 10px 20px;
border-radius: 5px;
text-align: center;
}

.categories__item a {
text-decoration: none;
color: white;
}

/* Banner Section */
.bottom-banner {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 30px;
}

.bottom-banner .banner__pic {
width: 23%;
position: relative;
overflow: hidden;
border-radius: 10px;
}

.banner__pic img {
width: 100%;
height: 100%;
gap: 15px;
object-fit: cover;
transition: transform 0.3s ease;

.banner__pic:hover img {
transform: scale(1.1);
}

.image-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.6);
color: white;
padding: 10px 20px;
font-size: 1.2rem;
font-weight: bold;
border-radius: 5px;

/* Footer Styling */
footer {
background-color: #333;
color: white;
padding: 30px 0;
}

footer a {
color: #d9534f;
text-decoration: none;
}

footer a:hover {
text-decoration: underline;
}

/* Ensuring proper scrolling */


html, body {
height: 100%;
margin: 0;
}

/* Make sure images and content do not overflow and


ensure scrolling */
.container {
max-width: 1200px;
margin: 0 auto;
}

/* Online Catering Text Section */


.online-catering {
background-color: #f9f9f9;
padding: 60px 0;
margin-top: 40px;
}

.online-catering .section-title {
font-size: 2.5rem;
font-weight: bold;
color: darkred;
margin-bottom: 20px;
}

.online-catering .section-description {
font-size: 1.2rem;
color: #555;
margin-bottom: 30px;
}

.online-catering .primary-btn {
font-size: 1.2rem;
background-color: darkred;
color: white;
padding: 12px 30px;
border-radius: 5px;
text-decoration: none;
}

.online-catering .primary-btn:hover {
background-color: #d9534f;
transform: translateY(-3px);
}
</style>
</head>

<body>
<!-- Page Preloader -->
<div id="preloder">
<div class="loader"></div>
</div>

<?php include'includes/header.php';?>

<!-- Hero Section -->


<section class="hero">
<div class="hero__slider owl-carousel">
<!-- Add image slider with modern "BOOK NOW!" button
-->
<div class="hero__item" style="background-image:
url('img/banner/design.jpeg');">
<a href="#" class="primary-btn">BOOK NOW!</a>
</div>
<div class="hero__item" style="background-image:
url('img/banner/debut.jpg');">
<a href="#" class="primary-btn">BOOK NOW!</a>
</div>
<div class="hero__item" style="background-image:
url('img/banner/garden.jpg');">
<a href="#" class="primary-btn">BOOK NOW!</a>
</div>
</div>
</section>

<!-- ONLINE FOOD SHOP Text -->


<div class="online-food-shop">
<p>ONLINE FOOD SHOP</p>
</div>

<!-- Categories Section Begin -->


<section class="categories mt-5">
<div class="container">
<div class="row">
<div class="categories__slider owl-carousel">
<?php
$sql="SELECT * from tblfood order by rand()
limit 6";
$query = $dbh->prepare($sql);
$query->execute();
$results=$query->fetchAll(PDO::FETCH_OBJ);
if($query->rowCount() > 0) {
foreach($results as $row) { ?>
<div class="col-lg-3">
<div class="categories__item set-bg
mb-3" data-setbg="admin/itemimages/<?php echo $row->ItemImage;?>"
style="border-radius: 10px; overflow: hidden;">
<h5 class="text-center py-3">
<a href="food-details.php?
pid=<?php echo $row->ID;?>" class="text-dark" style="text-
decoration: none;"><?php echo $row->PackageName;?></a>
</h5>
</div>
</div>
<?php }} ?>
</div>
</div>
</div>
</section>
<!-- Categories Section End -->

<!-- Banner Section with Clickable Images Begin -->


<div class="banner">
<div class="container">
<div class="row justify-content-center">
<div class="bottom-banner">
<div class="banner__pic">
<a href="products.php">
<img src="img/banner/party.jpg"
alt="Party Trays">
</a>
<div class="image-text">Party Trays</div>
</div>
<div class="banner__pic">
<a href="products.php">
<img src="img/banner/packmeal.jpg"
alt="Packed Meal">
</a>
<div class="image-text">Packed Meal</div>
</div>
<div class="banner__pic">
<a href="products.php">
<img src="img/banner/cake.jpg"
alt="Desserts">
</a>
<div class="image-text">Dessert</div>
</div>
<div class="banner__pic">
<a href="products.php">
<img src="img/banner/tea.jpg"
alt="Drinks">
</a>
<div class="image-text">Drinks</div>
</div>
</div>
</div>
</div>
</div>

<!-- Hero Section -->


<section class="hero">
<div class="hero__slider owl-carousel">
<!-- Add image slider with modern "BOOK NOW!" button
-->
<div class="hero__item" style="background-image:
url('img/banner/design.jpeg');">
</div>
<div class="hero__item" style="background-image:
url('img/banner/debut.jpg');">
</div>
<div class="hero__item" style="background-image:
url('img/banner/garden.jpg');">
</div>
</div>
</section>
<!-- image -->

<!-- Banner Section with Clickable Images End -->

<!-- Add a new text section between the images and hero slider --
>
<div class="online-catering">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8 text-justify">
<h2 class="section-title">Create a Stunning
Ambiance for Your Celebration</h2>
<p class="section-description">
Let us bring your vision to life! Our expert
in-house event stylists will collaborate with you to design and
execute a unique atmosphere tailored to your celebration. Whether
you're looking for a specific theme or a seamless blend of
styles, we offer a curated selection of pre-designed event
concepts for inspiration.
</p>
</div>
<div class="col-lg-8 text-center">
<a href="products.php" class="primary-
btn">Explore More</a>
</div>
</div>
</div>
</div>

<!-- Online Catering Text Section End -->

<!-- Categories Section Begin -->


<section class="categories mt-5">
<div class="container">
<div class="row">
<!-- Birthday Catering -->
<div class="col-lg-3 col-md-4 col-sm-6 mb-3">
<div class="categories__item set-bg" data-
setbg="img/banner/birthday-catering.jpg" style="border-radius:
10px; overflow: hidden; position: relative;">
<div class="image-text" style="position:
absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.6); color: white; padding: 10px
20px; font-size: 1.2rem; font-weight: bold; border-radius: 5px;">
Birthday
</div>
</div>
</div>
<!-- Kid's Catering -->
<div class="col-lg-3 col-md-4 col-sm-6 mb-3">
<div class="categories__item set-bg" data-
setbg="img/banner/kids-catering.jpg" style="border-radius: 10px;
overflow: hidden; position: relative;">
<div class="image-text" style="position:
absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.6); color: white; padding: 10px
20px; font-size: 1.2rem; font-weight: bold; border-radius: 5px;">
Kids
</div>
</div>
</div>

<!-- Corporate Catering -->


<div class="col-lg-3 col-md-4 col-sm-6 mb-3">
<div class="categories__item set-bg" data-
setbg="img/banner/corporate-catering.jpg" style="border-radius:
10px; overflow: hidden; position: relative;">
<div class="image-text" style="position:
absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.6); color: white; padding: 10px
20px; font-size: 1.2rem; font-weight: bold; border-radius: 5px;">
Corporate
</div>
</div>
</div>

<!-- Private Catering -->


<div class="col-lg-3 col-md-4 col-sm-6 mb-3">
<div class="categories__item set-bg" data-
setbg="img/banner/private-catering.jpg" style="border-radius:
10px; overflow: hidden; position: relative;">
<div class="image-text" style="position:
absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.6); color: white; padding: 10px
20px; font-size: 1.2rem; font-weight: bold; border-radius: 5px;">
Private Party
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Categories Section End -->

<!-- Categories Section End -->


<!-- Banner Section End -->

<!-- Banner Section End -->

<!-- Footer Section Begin -->


<?php include_once('includes/footer.php'); ?>
<!-- Footer Section End -->

<!-- Js Plugins -->


<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.nice-select.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.slicknav.js"></script>
<script src="js/mixitup.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/main.js"></script>

<script>
$(document).ready(function(){
$(".owl-carousel").owlCarousel({
items: 1,
margin: 10,
loop: true,
autoplay: true,
autoplayTimeout: 3000,
autoplayHoverPause: true,
nav: false,
dots: true
});
});
</script>

</body>
</html>

You might also like