ok
Mini Shell
<?php include 'header.php'; ?>
<style>
@keyframes tonext {
75% {
left: 0;
}
95% {
left: 100%;
}
98% {
left: 100%;
}
99% {
left: 0;
}
}
@keyframes tostart {
75% {
left: 0;
}
95% {
left: -300%;
}
98% {
left: -300%;
}
99% {
left: 0;
}
}
@keyframes snap {
96% {
scroll-snap-align: center;
}
97% {
scroll-snap-align: none;
}
99% {
scroll-snap-align: none;
}
100% {
scroll-snap-align: center;
}
}
* {
box-sizing: border-box;
scrollbar-color: transparent transparent; /* thumb and track color */
scrollbar-width: 0px;
}
* {
-ms-overflow-style: none;
}
ol, li {
list-style: none;
margin: 0;
padding: 0;
}
@media screen and (max-width: 375px){
.carousel {
position: relative;
padding-top: 100%;
filter: drop-shadow(0 0 10px #0003);
perspective: 100px;
}
}
@media (min-width: 1200px){
.carousel {
position: relative;
padding-top: 46%;
filter: drop-shadow(0 0 10px #0003);
perspective: 100px;
}
}
.carousel__viewport {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
overflow-x: scroll;
counter-reset: item;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
}
.carousel__slide {
position: relative;
flex: 0 0 100%;
width: 100%;
background-image: url("images/banner1.jpg");
counter-increment: item;
}
.carousel__slide:nth-child(even) {
background-color: #99f;
}
.carousel__slide:before {
content: counter(item);
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%,-40%,70px);
color: #fff;
font-size: 2em;
display:none;
}
.carousel__snapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
scroll-snap-align: center;
}
@media (hover: hover) {
.carousel__snapper {
animation-name: tonext, snap;
animation-timing-function: ease;
animation-duration: 4s;
animation-iteration-count: infinite;
}
.carousel__slide:last-child .carousel__snapper {
animation-name: tostart, snap;
}
}
@media (prefers-reduced-motion: reduce) {
.carousel__snapper {
animation-name: none;
}
}
.carousel:hover .carousel__snapper,
.carousel:focus-within .carousel__snapper {
animation-name: none;
}
.carousel__navigation {
position: absolute;
right: 0;
bottom: 0;
left: 0;
text-align: center;
}
.carousel__navigation-list,
.carousel__navigation-item {
display: inline-block;
}
.carousel__navigation-button {
display: inline-block;
width: 1.5rem;
height: 1.5rem;
background-color: #333;
background-clip: content-box;
border: 0.25rem solid transparent;
border-radius: 50%;
font-size: 0;
transition: transform 0.1s;
}
.carousel::before,
.carousel::after,
.carousel__prev,
.carousel__next {
position: absolute;
top: 0;
margin-top: 37.5%;
width: 4rem;
height: 4rem;
transform: translateY(-50%);
border-radius: 50%;
font-size: 0;
outline: 0;
}
.carousel::before,
.carousel__prev {
left: -1rem;
}
.carousel::after,
.carousel__next {
right: -1rem;
}
.carousel::before,
.carousel::after {
content: '';
z-index: 1;
background-color: #333;
background-size: 1.5rem 1.5rem;
background-repeat: no-repeat;
background-position: center center;
color: #fff;
font-size: 2.5rem;
line-height: 4rem;
text-align: center;
pointer-events: none;
}
.carousel::before {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E");
}
.carousel::after {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E");
}
@media screen and (max-width: 375px){
.bannerstyle {
padding: 0 0em 0;
text-align: center;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
margin-left: 0%;
}
}
@media (min-width: 1200px){
.bannerstyle {
padding: 6em 0 8em 0;
text-align: center;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
margin-left: 200%;
}
}
.main-navigation ul li a {
color: #ffffff;
}
</style>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th {
color:white;
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
background-color: #a51c30;
}
td {
color:white;
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
tr:hover {background-color: hsla(0,0%,61.2%,.5019607843137255);}
th:hover {
background-color: #be6a24;
}
.main-about-us {
background-color: #f3f4f8;
padding-top: 39px;
padding-bottom: 39px;
}
.main-instructor {
padding-top: 35px;
padding-bottom: 120px;
}
.main-blog {
padding-top: 23px;
padding-bottom: 90px;
}
</style>
<div id="homepage-slider" class="st-slider">
<input type="radio" class="cs_anchor radio" name="slider" id="slide1"/ style="display:none;">
<input type="radio" class="cs_anchor radio" name="slider" id="slide2"/ style="display:none;">
<input type="radio" class="cs_anchor radio" name="slider" id="slide3"/ style="display:none;">
<input type="radio" class="cs_anchor radio" name="slider" id="play1" checked=""/ style="display:none;">
<div class="images">
<div class="images-inner">
<?php
$statement = $pdo->prepare("SELECT * FROM tbl_banner where status=1");
$statement->execute();
error_log("SELECT * FROM tbl_banner");
$result = $statement->fetchAll(PDO::FETCH_ASSOC);
foreach ($result as $row_banner) {
?>
<div class="image-slide">
<div class="image bg-yellow" style="background-color:yellow;background: url(admin/<?=$row_banner['image']?>);">
</div>
</div>
<?php } ?>
</div>
</div>
<div class="home-banner-links-fixed" style="width: 330px;">
<ul>
<li>
<i class="fa fa-caret-down"></i> Upcoming Events
</li>
<li>
<marquee width="100%" direction="up" height="200px">
<?php
$statement1 = $pdo->prepare("SELECT * FROM tbl_events ");
$statement1->execute();
$result_event = $statement1->fetchAll(PDO::FETCH_ASSOC);
foreach ($result_event as $row_events) {
?>
<p style="color: white;border-bottom: 2px solid white;">
<?=$row_events["name"]?>
</p>
<?php }?>
</marquee>
</li>
</ul>
</div>
</div>
<!--Course Category Start-->
<section style="padding-top: 2%;">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="course-category-title">
<h2 class="h2-subtitle">Course Category</h2>
<h2 class="h2-title">Explore Popular Courses</h2>
</div>
</div>
</div>
<div class="row">
<?php
$statement2 = $pdo->prepare("SELECT * FROM tbl_courses WHERE course_type=1 AND status=1");
$statement2->execute();
$res_course = $statement2->fetchAll(PDO::FETCH_ASSOC);
foreach ($res_course as $row_courses) {
?>
<div class="col-xl-4 col-lg-6 col-md-6">
<div class="course-category-box">
<div class="course-category-icon">
<img class="dis-yes" src="assets/images/course-category-icon-1.png" alt="icon">
<img class="dis-no" src="assets/images/course-category-icon-1-w.png" alt="icon">
</div>
<div class="course-category-content">
<a href="course-details.php?course=<?=$row_courses['id']?>"><h3 class="h3-title"><?=$row_courses['course_name']?></h3></a>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
</section>
<!--Course Category End-->
<!--About Us Start-->
<section class="main-about-us">
<div class="container">
<div class="row align-items-center">
<?php
$statement4 = $pdo->prepare("SELECT * FROM tbl_about WHERE type=1 AND status=1");
$statement4->execute();
$res_about = $statement4->fetchAll(PDO::FETCH_ASSOC);
?>
<div class="col-lg-6">
<div class="about-img-box wow fadeInLeft animated" data-wow-delay=".4s">
<div class="about-img">
<img src="admin/<?=$res_about[0]['image']?>" alt="about us">
</div>
</div>
</div>
<div class="col-lg-6">
<div class="about-us-content">
<div class="about-us-title">
<h2 class="h2-subtitle">About Us</h2>
<?php foreach ($res_about as $row_aboutss) {?>
<h2 class="h2-title"><?=$row_aboutss["title"]?></h2>
</div>
<p><?=nl2br($row_aboutss["about_description"])?></p>
<?php } ?>
<a href="about.php" class="sec-btn">Explore More</a>
</div>
</div>
</div>
</div>
</section>
<!--About Us End-->
<!--Online Courses Start-->
<section class="main-online-courses">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-8">
<div class="online-courses-title">
<h2 class="h2-subtitle">Our Online Courses</h2>
<h2 class="h2-title">Find The Right Online Course For You</h2>
</div>
</div>
<div class="col-lg-4">
<div class="online-courses-title-btn">
<a href="#" class="sec-btn">View All Course</a>
</div>
</div>
</div>
<div class="row courses-slider">
<?php
$statement = $pdo->prepare("SELECT * FROM tbl_courses WHERE course_type=2 AND status=1");
$statement->execute();
$res_course = $statement->fetchAll(PDO::FETCH_ASSOC);
foreach ($res_course as $row_courses) {
?>
<div class="col-lg-4">
<div class="course-box">
<div class="course-img">
<img src="admin/<?= $row_courses["image"]?>" alt="course" style="width: 355px;height: 255px;">
<ul>
<li><a href="javascript:void(0);" class="course-tag-orange"></a></li>
<li><a href="javascript:void(0);" class="course-tag-blue"></a></li>
</ul>
</div>
<div class="course-content">
<a href="online-course.php?course=<?=$row_courses['id']?>">
<h3 class="h3-title" style="font-size: 19px;"><?= $row_courses["course_name"]?></h3>
</a>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
</section>
<!--Online Courses End-->
<!--Core Features Start-->
<section class="main-core-features">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="core-features-content">
<div class="core-features-title">
<h2 class="h2-subtitle">Core Features</h2>
<h2 class="h2-title">See What Our Mission Are</h2>
</div>
<div class="core-features-box">
<div class="core-feature-icon feature-blue">
<img src="assets/images/feature-icon-1.png" alt="icon">
</div>
<div class="core-feature-text">
<h3 class="h3-title">Student Life</h3>
<p>Nulla vestibulum pretium nibh at dignissim. Aliquam vehicula consectetur dignissim dictum.</p>
</div>
</div>
<div class="core-features-box">
<div class="core-feature-icon feature-pink">
<img src="assets/images/feature-icon-2.png" alt="icon">
</div>
<div class="core-feature-text">
<h3 class="h3-title">Best Online Class</h3>
<p>Nulla vestibulum pretium nibh at dignissim. Aliquam vehicula consectetur dignissim dictum.</p>
</div>
</div>
<div class="core-features-box mb-0">
<div class="core-feature-icon feature-purple">
<img src="assets/images/feature-icon-3.png" alt="icon">
</div>
<div class="core-feature-text">
<h3 class="h3-title">24x7 Program</h3>
<p>Nulla vestibulum pretium nibh at dignissim. Aliquam vehicula consectetur dignissim dictum.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="core-features-img" style="background-image: url(assets/images/coure-features-img.jpg);"></div>
</section>
<!--Core Features End-->
<!--Instructor Start-->
<section class="main-instructor" style="padding-bottom: 0px;">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="instructor-title">
<h2 class="h2-subtitle">Best coach</h2>
<h2 class="h2-title">Our Expert Instructor</h2>
</div>
</div>
</div>
<div class="row instructor-slider">
<?php
$statement = $pdo->prepare("SELECT * FROM tbl_faculty where status=1");
$statement->execute();
$row_faculty = $statement->fetchAll(PDO::FETCH_ASSOC);
foreach ($row_faculty as $row_faculty){
?>
<div class="col-lg-3">
<div class="instructor-box">
<div class="instructor-img">
<img src="admin/<?=$row_faculty['image']?>" alt="Instructor" style="height: 300px;">
</div>
<a href="#"><h3 class="h3-title"><?=$row_faculty['name']?></h3></a>
<p><?=$row_faculty['designation']?></p>
</div>
</div>
<?php } ?>
</div>
</div>
</section>
<!--Instructor End-->
<!--Blog Start-->
<section class="main-blog">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="blog-title">
<h2 class="h2-subtitle">Our Blog</h2>
<h2 class="h2-title">Latest Blog & News</h2>
</div>
</div>
</div>
<div class="row blog-slider">
<?php
$statement = $pdo->prepare("SELECT * FROM tbl_blog");
$statement->execute();
$res_blog = $statement->fetchAll(PDO::FETCH_ASSOC);
foreach ($res_blog as $row_blog){
?>
<div class="col-lg-4">
<div class="blog-box">
<div class="blog-img">
<img src="admin/<?=$row_blog['image']?>" alt="blog" style="width: 355px;height: 255px;">
</div>
<div class="blog-content">
<h3 class="h3-title"><?=$row_blog['title']?></h3>
<div class="blog-box-line"></div>
<div class="blog-date-comment">
<div class="blog-date">
<div class="blog-date-icon">
<img src="assets/images/calendar.png" alt="icon">
</div>
<a href="javascript:void(0);"><p><?=$row_blog['date']?></p></a>
</div>
<div class="blog-box-line"></div>
<div class="blog-comment">
<div class="blog-comment-icon">
<i class="bi bi-alarm" style="color: #ff5219;"></i>
</div>
<a href="javascript:void(0);"><p><?=$row_blog['time']?></p></a>
</div>
</div>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
</section>
<!--Blog End-->
<!--Cta Start-->
<section class="main-cta" style="padding-top: 0px;padding-bottom: 198px;">
<div class="container">
<div class="row align-items-center cta-bg">
<div class="cta-bg-img">
<img src="assets/images/cta-bg-img.png" alt="bg">
</div>
<div class="col-lg-6">
<div class="cta-title">
<h2 class="h2-title">Start Your Best Online Classes With Us</h2>
</div>
</div>
<div class="col-lg-6">
<div class="cta-btn">
<a href="contact.php" class="sec-btn">Contact Us</a>
</div>
</div>
</div>
</div>
</section>
<!--Cta End-->
<style>
.image {
width: 1364px;
height: 580px;
/*background:url(images/mini.jpg);*/
}
.radio {
/*display: none;*/
}
.images {
overflow: hidden;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
}
.images-inner {
width: 500%;
transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
}
.image-slide {
width: 20%;
float: left;
}
.image-slide,
.fake-radio,
.radio-btn {
transition: all 0.5s ease-out;
}
.fake-radio {
float: right;
}
/* Move slides overflowed container */
#slide1:checked ~ .images .images-inner {
margin-left: 0;
}
#slide2:checked ~ .images .images-inner {
margin-left: -100%;
}
#slide3:checked ~ .images .images-inner {
margin-left: -200%;
}
/* Color of bullets */
#slide1:checked ~ div .fake-radio .radio-btn:nth-child(1),
#slide2:checked ~ div .fake-radio .radio-btn:nth-child(2),
#slide3:checked ~ div .fake-radio .radio-btn:nth-child(3) {
background: red;
}
.radio-btn {
width: 9px;
height: 9px;
border-radius: 5px;
background: gray;
display: inline-block !important;
margin: 0 1px;
cursor: pointer;
}
/* Color of bullets - END */
/* Text of slides */
#slide1:checked ~ .labels .label:nth-child(1),
#slide2:checked ~ .labels .label:nth-child(2),
#slide3:checked ~ .labels .label:nth-child(3) {
opacity: 1;
}
.label {
opacity: 0;
position: absolute;
}
/* Text of slides - END */
/* Calculate AUTOPLAY for BULLETS */
@keyframes bullet {
0%, 33.32333333333334% {
background: red;
}
33.333333333333336%, 100% {
background: gray;
}
}
#play1:checked ~ div .fake-radio .radio-btn:nth-child(1) {
animation: bullet 12300ms infinite -1000ms;
}
#play1:checked ~ div .fake-radio .radio-btn:nth-child(2) {
animation: bullet 12300ms infinite 3100ms;
}
#play1:checked ~ div .fake-radio .radio-btn:nth-child(3) {
animation: bullet 12300ms infinite 7200ms;
}
/* Calculate AUTOPLAY for BULLETS - END */
/* Calculate AUTOPLAY for SLIDES */
@keyframes slide {
0%, 25.203252032520325% { margin-left: 0; }
33.333333333333336%, 58.53658536585366% { margin-left: -100%; }
66.66666666666667%, 91.869918699187% { margin-left: -200%; }
}
.st-slider > #play1:checked ~ .images .images-inner {
animation: slide 12300ms infinite;
}
/* Calculate AUTOPLAY for SLIDES - END */
/* Calculate AUTOPLAY for CAPTION */
@keyframes caption {
0%, 33.32333333333334% {
opacity: 1;
}
33.333333333333336%, 100% {
opacity: 0;
}
}
#play1:checked ~ .labels .label:nth-child(1) {
animation: caption 12300ms infinite -1000ms;
}
#play1:checked ~ .labels .label:nth-child(2) {
animation: caption 12300ms infinite 3100ms;
}
#play1:checked ~ .labels .label:nth-child(3) {
animation: caption 12300ms infinite 7200ms;
}
/* Calculate AUTOPLAY for CAPTION - END */
</style>
<style>
.home-banner-links-fixed {
position: absolute;
right: 50px;
z-index: 7;
top: 200px;
}
.home-banner-links-fixed ul li:first-child {
background-color: #ff5219;
color: aliceblue;
}
.home-banner-links-fixed ul li {
display: block;
background-color: rgba(0,0,0,.45098039215686275);
border-top: 1px solid #fff;
color:#a5cd39;
padding: 8px;
}
.bg-Tangerine {
background-color: #00ffe7!important;
}
</style>
<?php include 'footer.php'; ?>
Zerion Mini Shell 1.0