82 lines
3.6 KiB
PHP
82 lines
3.6 KiB
PHP
<?php
|
|
// Include the about data
|
|
include('../assests/data/aboutdata.php');
|
|
?>
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Hotel Website - About Us</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css"
|
|
integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ=="
|
|
crossorigin="anonymous" referrerpolicy="no-referrer" />
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
|
|
<link rel="stylesheet" href="../assests/css/styles.css">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<section id="about" class="bg-gray-100 bgabout">
|
|
<div class="md:container mx-auto py-12 px-4 sm:px-6 lg:px-8">
|
|
<!-- About Section -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 items-center gap-8">
|
|
<!-- Text Content -->
|
|
<div class="max-w-lg">
|
|
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">About Us</h2>
|
|
<p class="mt-4 text-gray-600 text-base sm:text-lg">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis eros at lacus feugiat hendrerit sed ut tortor. Suspendisse et magna quis elit efficitur consequat. Mauris eleifend velit a pretium iaculis. Donec sagittis velit et magna euismod, vel aliquet nulla malesuada. Nunc pharetra massa lectus, a fermentum arcu volutpat vel.
|
|
</p>
|
|
<div class="mt-8">
|
|
<a href="#" class="text-blue-500 hover:text-blue-600 font-medium">
|
|
Learn more about us <span class="ml-2">→</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- Image Content -->
|
|
<div class="mt-12 md:mt-0">
|
|
<img src="../assests/images/about-image.jpg"
|
|
alt="About Us Image"
|
|
class="object-cover rounded-lg shadow-md w-full max-w-sm md:max-w-4xl mx-auto md:h-[350px] h-[0px]">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Icon Section -->
|
|
<div class="grid md:grid-cols-1 gap-8 mt-[75px]">
|
|
<?php foreach (array_chunk($aboutdata, 3) as $chunk) : ?>
|
|
<div class="p-4 shadow-xl bg-white border-double border-t-8 border-[#C03030] relative bottom-[80px]">
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
|
|
<?php foreach ($chunk as $item) : ?>
|
|
<div class="text-start flex items-start">
|
|
<!-- Icon -->
|
|
<div>
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-full mr-4 <?php echo $item['icon_color']; ?> bg-gray-200">
|
|
<i class="<?php echo $item['icon']; ?> text-2xl"></i>
|
|
</div>
|
|
</div>
|
|
<!-- Content -->
|
|
<div>
|
|
<h3 class="mt-2 text-lg font-semibold text-gray-900">
|
|
<?php echo $item['name']; ?>
|
|
</h3>
|
|
<p class="mt-1 text-gray-600 text-sm">
|
|
<?php echo $item['description']; ?>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
|
|
</body>
|
|
|
|
</html>
|