Mini Shell
<html lang="en">
<head>
<meta name="google-site-verification" content="Dbh47cW2wGAwjoCZVegEdRzmZI7pynQTeHiWTbt2P6Y" />
<title>โรงเรียนเทศบาลวัดชัยชุมพล CCP | English Program</title>
<meta name="description" content="โรงเรียนเทศบาลวัดชัยชุมพล | Watchaichumpol municipality school">
<?php include 'head.php'; ?>
<style>
/* ลดความสูงแถบม่วงให้เล็กลง */
.hero-section{
position: relative;
padding: 16px 0 22px; /* <-- ปรับตรงนี้ให้เตี้ยลงได้อีก */
overflow: hidden;
color: #fff;
/* พื้นหลังม่วงแบบ gradient (นุ่มขึ้น) */
background: radial-gradient(1200px 400px at 20% 20%, rgba(255,255,255,.18), transparent 55%),
linear-gradient(135deg, #6a5af9 0%, #7b6cff 50%, #8f85ff 100%);
box-shadow: 0 10px 26px rgba(106, 90, 249, 0.22);
}
/* ตัวอักษรให้ดูบาลานซ์กับแถบที่เตี้ยลง */
.hero-section h1{
margin: 0;
font-size: 24px; /* ปรับได้ */
font-weight: 500;
letter-spacing: .3px;
}
/* ------------------------------
Abstract line pattern (พื้นหลังลายเส้น/abstract)
------------------------------ */
.hero-section::before{
content:"";
position:absolute;
inset:-40px;
pointer-events:none;
/* ลายเส้นบางๆ + วงกลมไฮไลท์ */
background:
radial-gradient(600px 260px at 75% 35%, rgba(255,255,255,.16), transparent 60%),
radial-gradient(420px 220px at 20% 75%, rgba(255,255,255,.10), transparent 62%),
/* เส้นเฉียงแบบเบา ๆ */
repeating-linear-gradient(
135deg,
rgba(255,255,255,.08) 0px,
rgba(255,255,255,.08) 1px,
transparent 1px,
transparent 14px
);
opacity: .75;
transform: rotate(-2deg);
}
/* ------------------------------
Wave SVG (โค้งสวยกว่า + เนียนกับ body)
------------------------------ */
.hero-wave{
position:absolute;
left:0;
right:0;
bottom:-1px;
height:32px; /* <-- ความสูง wave */
line-height:0;
}
.hero-wave svg{
width:100%;
height:100%;
display:block;
}
.hero-wave path{
fill:#ffffff; /* สีเดียวกับ body */
}
/* เผื่อมี section ถัดไปติดกัน ให้ไม่ชิดจนเกินไป */
.probootstrap-section + .probootstrap-section{
margin-top: 0;
}
/* Responsive */
@media (max-width: 768px){
.hero-section{ padding: 44px 0 62px; }
.hero-section h1{ font-size: 30px; }
.hero-wave{ height: 64px; }
}
</style>
<!--[if lt IE 9]>
<script src="js/vendor/html5shiv.min.js"></script>
<script src="js/vendor/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="probootstrap-search" id="probootstrap-search">
<a href="#" class="probootstrap-close js-probootstrap-close"><i class="icon-cross"></i></a>
<form action="#">
<input type="search" name="s" id="search" placeholder="Search a keyword and hit enter...">
</form>
</div>
<div class="probootstrap-page-wrapper">
<!-- Fixed navbar -->
<div class="probootstrap-header-top">
<div class="container">
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-9 probootstrap-top-quick-contact-info">
<span><i class="icon-location2"></i>Brooklyn, NY 10036, United States</span>
<span><i class="icon-phone2"></i>+1-123-456-7890</span>
<span><i class="icon-mail"></i>[email protected]</span>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 probootstrap-top-social">
<ul>
<li><a href="#"><i class="icon-twitter"></i></a></li>
<li><a href="#"><i class="icon-facebook2"></i></a></li>
<li><a href="#"><i class="icon-instagram2"></i></a></li>
<li><a href="#"><i class="icon-youtube"></i></a></li>
<li><a href="#" class="probootstrap-search-icon js-probootstrap-search"><i class="icon-search"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-default probootstrap-navbar">
<div class="container">
<div class="navbar-header">
<div class="btn-more js-btn-more visible-xs">
<a href="#"><i class="icon-dots-three-vertical "></i></a>
</div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html" title="ProBootstrap:Enlight">Enlight</a>
</div>
<div id="navbar-collapse" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html">Home</a></li>
<li><a href="courses.html">Courses</a></li>
<li><a href="teachers.html">Teachers</a></li>
<li><a href="events.html">Events</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Pages</a>
<ul class="dropdown-menu">
<li><a href="about.html">About Us</a></li>
<li><a href="courses.html">Courses</a></li>
<li class="active"><a href="course-single.html">Course Single</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li class="dropdown-submenu dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle"><span>Sub Menu</span></a>
<ul class="dropdown-menu">
<li><a href="#">Second Level Menu</a></li>
<li><a href="#">Second Level Menu</a></li>
<li><a href="#">Second Level Menu</a></li>
<li><a href="#">Second Level Menu</a></li>
</ul>
</li>
<li><a href="news.html">News</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</nav>
<section class="probootstrap-section probootstrap-section-colored hero-section">
<div class="container">
<div class="row">
<div class="col-md-12 text-left section-heading probootstrap-animate">
<h1>Chemical Engineering</h1>
</div>
</div>
</div>
<!-- Wave SVG -->
<div class="hero-wave" aria-hidden="true">
<svg viewBox="0 0 1440 160" preserveAspectRatio="none">
<path d="M0,96 C240,160 480,32 720,96 C960,160 1200,32 1440,96 L1440,160 L0,160 Z"></path>
</svg>
</div>
</section>
<section class="probootstrap-section probootstrap-section-sm">
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-8 probootstrap-animate">
<nav aria-label="breadcrumb">
<ol class="breadcrumb" style="background: none; padding-left: 0; font-size: 14px;">
<li><a href="#"><i class="icon-home"></i> หน้าหลัก</a></li>
<li class="active">ประมวลภาพกิจกรรม</li>
</ol>
</nav>
<div id="probootstrap-content">
<h2 style="margin-top: 0; font-weight: bold;">2222</h2>
<div class="post-meta" style="margin-bottom: 20px; color: #999; font-size: 13px;">
<span style="margin-right: 15px;"><i class="icon-calendar"></i> 01 ตุลาคม 2563</span>
<span><i class="icon-user"></i> นายทวีศักดิ์ โต๊ะหลี</span>
</div>
<p>1111</p>
<div class="main-image">
<img src="img/image_fb198a.jpg" alt="Activity Image" class="img-responsive" style="border-radius: 4px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
</div>
</div>
</div>
<div class="col-md-4 col-sm-4" id="probootstrap-sidebar">
<div class="probootstrap-sidebar-inner probootstrap-animate" style="margin-bottom: 30px; padding: 0;">
<form action="#" class="probootstrap-search-form">
<div class="form-group" style="position: relative;">
<input type="text" class="form-control" placeholder="ค้นหา..." style="padding-right: 40px; border-radius: 4px;">
<button type="submit" style="position: absolute; right: 10px; top: 8px; border: none; background: none;"><i class="icon-search"></i></button>
</div>
</form>
</div>
<div class="probootstrap-sidebar-inner probootstrap-animate">
<h3 style="border-bottom: 2px solid #f2f2f2; padding-bottom: 10px; margin-bottom: 20px;">ประมวลภาพกิจกรรม</h3>
<ul class="probootstrap-side-menu list-unstyled">
<li style="margin-bottom: 20px;">
<a href="#" style="display: flex; align-items: flex-start; text-decoration: none; color: inherit;">
<img src="img/thumb1.jpg" alt="thumb" style="width: 70px; height: 50px; object-fit: cover; margin-right: 15px; border-radius: 3px;">
<div>
<h5 style="margin: 0 0 5px 0; font-size: 14px; line-height: 1.4;">2222</h5>
<small style="color: #999;"><i class="icon-calendar"></i> 01 ตุลาคม 2563</small>
</div>
</a>
</li>
<li style="margin-bottom: 20px;">
<a href="#" style="display: flex; align-items: flex-start; text-decoration: none; color: inherit;">
<img src="img/thumb2.jpg" alt="thumb" style="width: 70px; height: 50px; object-fit: cover; margin-right: 15px; border-radius: 3px;">
<div>
<h5 style="margin: 0 0 5px 0; font-size: 14px; line-height: 1.4;">ศึกษาดูงานการจัดการเรียนการสอน SMTP,EP ณ โรงเรียนสังกัด ทน.เชียงราย</h5>
<small style="color: #999;"><i class="icon-calendar"></i> 10 กันยายน 2563</small>
</div>
</a>
</li>
<li style="margin-bottom: 20px;">
<a href="#" style="display: flex; align-items: flex-start; text-decoration: none; color: inherit;">
<img src="img/thumb3.jpg" alt="thumb" style="width: 70px; height: 50px; object-fit: cover; margin-right: 15px; border-radius: 3px;">
<div>
<h5 style="margin: 0 0 5px 0; font-size: 14px; line-height: 1.4;">โครงการอาเซียนศึกษา</h5>
<small style="color: #999;"><i class="icon-calendar"></i> 10 กันยายน 2563</small>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<footer class="probootstrap-footer probootstrap-bg">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="probootstrap-footer-widget">
<h3>About The School</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro provident suscipit natus a cupiditate ab minus illum quaerat maxime inventore Ea consequatur consectetur hic provident dolor ab aliquam eveniet alias</p>
<h3>Social</h3>
<ul class="probootstrap-footer-social">
<li><a href="#"><i class="icon-twitter"></i></a></li>
<li><a href="#"><i class="icon-facebook"></i></a></li>
<li><a href="#"><i class="icon-github"></i></a></li>
<li><a href="#"><i class="icon-dribbble"></i></a></li>
<li><a href="#"><i class="icon-linkedin"></i></a></li>
<li><a href="#"><i class="icon-youtube"></i></a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-md-push-1">
<div class="probootstrap-footer-widget">
<h3>Links</h3>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Courses</a></li>
<li><a href="#">Teachers</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div class="col-md-4">
<div class="probootstrap-footer-widget">
<h3>Contact Info</h3>
<ul class="probootstrap-contact-info">
<li><i class="icon-location2"></i> <span>198 West 21th Street, Suite 721 New York NY 10016</span></li>
<li><i class="icon-mail"></i><span>[email protected]</span></li>
<li><i class="icon-phone2"></i><span>+123 456 7890</span></li>
</ul>
</div>
</div>
</div>
<!-- END row -->
</div>
<div class="probootstrap-copyright">
<div class="container">
<div class="row">
<div class="col-md-8 text-left">
<p>© 2017 <a href="https://probootstrap.com/">ProBootstrap:Enlight</a>. All Rights Reserved. Designed & Developed with <i class="icon icon-heart"></i> by <a href="https://probootstrap.com/">ProBootstrap.com</a></p>
</div>
<div class="col-md-4 probootstrap-back-to-top">
<p><a href="#" class="js-backtotop">Back to top <i class="icon-arrow-long-up"></i></a></p>
</div>
</div>
</div>
</div>
</footer>
</div>
<!-- END wrapper -->
<script src="js/scripts.min.js"></script>
<script src="js/main.min.js"></script>
<script src="js/custom.js"></script>
</body>
</html>
Zerion Mini Shell 1.0