Viewing file:  front_running_courses.php (4.06 KB) -rw-r--r--
Select action/file-type:
 (+) |  (+) |  (+) | Code (+) | Session (+) |  (+) | SDB (+) |  (+) |  (+) |  (+) |  (+) |  (+) |
<?php
// Database connection
include 'admin/connect.php';
// Query to retrieve courses from the database
$sql = "SELECT ID, course_name, course_photo FROM courses";
$result = $conn->query($sql);
// Array of background colors
$colors = [
'#ffcccc', // Light Red
'#ccffcc', // Light Green
'#ccccff', // Light Blue
'#ffffcc', // Light Yellow
'#ccffff', // Light Cyan
'#ffccff', // Light Magenta
'#ffe5cc', // Light Orange
'#e6ccff' // Light Purple
];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Courses Offered</title>
<link rel="stylesheet" href="path/to/bootstrap.css"> <!-- Bootstrap CSS -->
<style>
/* Service Section Styling */
.service-section {
padding: 50px 0;
background-color: #f9f9f9;
}
.sec-title-two h4 {
font-size: 28px;
font-weight: 700;
color: #333;
}
.service-item-one {
padding: 20px;
border: 1px solid #e1e1e1;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
overflow: hidden;
text-align: center;
}
.service-item-one:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
transform: translateY(-10px);
}
.icon-box {
width: 100%; /* Full width of the column */
height: 200px; /* Fixed height */
overflow: hidden; /* Prevent overflow of the image */
}
.icon-box img {
width: 100%; /* Full width of the icon box */
height: 100%; /* Full height of the icon box */
object-fit: cover; /* Maintain aspect ratio and cover the area */
transition: transform 0.3s ease; /* Transition effect for hover */
}
.service-item-one:hover .icon-box img {
transform: scale(1.1); /* Scale effect on hover */
}
h6 a {
display: block;
font-size: 18px;
font-weight: 600;
color: #333;
margin-top: 10px;
transition: color 0.3s ease;
}
h6 a:hover {
color: #007bff;
}
/* Responsive Grid */
@media (min-width: 768px) {
.services-carousel .service-item-one {
margin-bottom: 30px;
}
}
</style>
</head>
<body>
<section class="service-section sp-five">
<div class="container">
<div class="sec-title-two pb-one text-center">
<h4>Courses Offered</h4>
</div>
<div class="row">
<?php
if ($result->num_rows > 0) {
// Output each course as a Bootstrap column
$index = 0; // Initialize index for colors
while ($row = $result->fetch_assoc()) {
// Cycle through the colors array
$bgColor = $colors[$index % count($colors)];
?>
<div class="col-md-4 col-sm-6">
<div class="service-item-one" style="background-color: <?php echo $bgColor; ?>;">
<!-- Course Image -->
<!-- Course Name -->
<h6>
<a href="courses.php?id=<?php echo $row['ID']; ?>">
<?php echo $row['course_name']; ?>
</a>
</h6>
</div>
</div>
<?php
$index++; // Increment index for the next course
}
} else {
echo "<p>No courses found.</p>";
}
// Close database connection
$conn->close();
?>
</div>
</div>
</section>
<!-- Include Bootstrap JS -->
<script src="path/to/bootstrap.js"></script>
</body>
</html>
|