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'; ?>
<!-- facebook -->
<style>
.fb-like-box, .fb-like-box span, .fb-like-box span iframe[style] { max-width: 100% !important; }
/* ตัดหัวข้อ h3 ให้เหลือ 2 บรรทัด*/
.probootstrap-featured-news-box h3 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.4em;
max-height: calc(1.4em * 2);
}
/* ตัดรายละเอียดข่าวให้เหลือ 3 บรรทัด */
.probootstrap-featured-news-box .probootstrap-text p {
display: -webkit-box;
-webkit-line-clamp: 3; /* จำนวนบรรทัด */
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.6em; /* ระยะบรรทัด */
max-height: calc(1.6em * 3);
}
/* ===== Activity Section Heading ===== */
.activity-heading{
padding: 30px 15px 10px;
}
.activity-heading h2{
font-size: 34px;
font-weight: 700;
color: #1f2937; /* เทาเข้ม อ่านง่าย */
margin-bottom: 10px;
letter-spacing: .5px;
}
.activity-subtitle{
font-size: 15px;
color: #9ca3af;
margin-bottom: 18px;
}
/* เส้นคั่นสวย ๆ */
.activity-divider{
display: inline-block;
width: 90px;
height: 4px;
border-radius: 10px;
background: linear-gradient(90deg, #34d399, #3b82f6);
}
/* Responsive */
@media (max-width: 767px){
.activity-heading h2{
font-size: 26px;
}
.activity-subtitle{
font-size: 14px;
}
}
/* บังคับให้ข้อความยาวตัดขึ้นบรรทัดใหม่ */
.break-text{
word-break: break-word;
overflow-wrap: break-word;
word-wrap: break-word;
white-space: normal;
}
/* (ถ้าต้องการคุมจำนวนบรรทัดด้วย) */
.news-title{
display: -webkit-box;
-webkit-line-clamp: 2; /* กี่บรรทัด */
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-desc{
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
color: #6b7280;
}
/* กำหนดพื้นที่รูปให้คงที่ */
.probootstrap-service-2 .image{
width: 100%;
height: 220px; /* ปรับความสูงได้ตามต้องการ */
overflow: hidden;
}
/* กล่องครอบรูป */
.probootstrap-service-2 .image-bg{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #f3f4f6; /* พื้นหลังเวลาเหลือขอบ */
}
/* รูปภาพ */
.probootstrap-service-2 .image-bg img{
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain; /* ⭐ แสดงภาพทั้งรูป */
}
/* กล่องรูป */
.probootstrap-service-2 .image{
width: 100%;
height: 260px; /* ปรับความสูงได้ */
overflow: hidden;
}
/* ครอบรูป */
.probootstrap-service-2 .image-bg{
width: 100%;
height: 100%;
}
/* รูปภาพ */
.probootstrap-service-2 .image-bg img{
width: 100%;
height: 100%;
object-fit: cover; /* ⭐ เต็มกรอบ (ครอป) */
object-position: center;
display: block;
}
/* ===== Teacher Section Heading ===== */
.teacher-heading{
position: relative;
padding: 34px 15px 18px;
margin-bottom: 10px;
}
/* ลายจุดเบา ๆ ให้หัวข้อไม่โล่ง */
.teacher-heading:before{
content:"";
position:absolute;
left: 50%;
top: 8px;
transform: translateX(-50%);
width: 520px;
height: 120px;
background:
radial-gradient(circle, rgba(59,130,246,.12) 1px, transparent 1.5px);
background-size: 14px 14px;
opacity: .7;
pointer-events:none;
}
.teacher-kicker{
display: inline-block;
font-size: 13px;
color: #6b7280;
background: rgba(59,130,246,.08);
border: 1px solid rgba(59,130,246,.15);
padding: 6px 12px;
border-radius: 999px;
margin-bottom: 10px;
}
.teacher-kicker i{ margin-right: 6px; }
.teacher-heading h2{
font-size: 36px;
font-weight: 800;
color: #111827;
margin: 6px 0 10px;
letter-spacing: .3px;
}
.teacher-subtitle{
margin: 0 auto 16px;
max-width: 520px;
font-size: 15px;
color: #9ca3af;
line-height: 1.7;
}
/* เส้นคั่นไล่สีดูพรีเมียม */
.teacher-divider{
display: inline-block;
width: 110px;
height: 5px;
border-radius: 999px;
background: linear-gradient(90deg, #34d399, #3b82f6);
box-shadow: 0 10px 24px rgba(59,130,246,.15);
}
/* Responsive */
@media (max-width: 767px){
.teacher-heading:before{ width: 92%; }
.teacher-heading h2{ font-size: 28px; }
.teacher-subtitle{ font-size: 14px; }
}
/* ===== Hero Heading Overlay ===== */
.hero-heading{
position: relative;
padding: 40px 20px;
margin-bottom: 20px;
z-index: 2;
}
/* กล่อง overlay โปร่งใส */
.hero-heading:before{
content:"";
position:absolute;
inset:0;
background: linear-gradient(
to bottom,
rgba(0,0,0,.45),
rgba(0,0,0,.25)
);
border-radius: 16px;
z-index:-1;
backdrop-filter: blur(2px);
}
/* หัวข้อ */
.hero-heading h2{
color: #ffffff;
font-size: 42px;
font-weight: 800;
letter-spacing: .5px;
margin: 0 0 14px;
text-shadow: 0 6px 20px rgba(0,0,0,.45);
}
/* เส้นคั่น */
.hero-divider{
display: inline-block;
width: 120px;
height: 4px;
border-radius: 999px;
background: linear-gradient(90deg, #22c55e, #3b82f6);
box-shadow: 0 8px 20px rgba(0,0,0,.35);
}
/* Responsive */
@media (max-width: 767px){
.hero-heading{
padding: 26px 15px;
}
.hero-heading h2{
font-size: 26px;
}
}
/* ===== Hero Title on Slider ===== */
.hero-title-wrap{
position: relative;
padding: 36px 28px;
border-radius: 18px;
background: linear-gradient(
to bottom,
rgba(0,0,0,.45),
rgba(0,0,0,.25)
);
box-shadow: 0 25px 60px rgba(0,0,0,.35);
backdrop-filter: blur(2px);
}
/* ป้ายเล็กด้านบน */
.hero-badge{
display: inline-block;
margin-bottom: 12px;
padding: 6px 14px;
font-size: 14px;
color: #ecfeff;
background: rgba(34,197,94,.25);
border: 1px solid rgba(34,197,94,.45);
border-radius: 999px;
letter-spacing: .3px;
}
/* หัวข้อหลัก */
.hero-title-wrap h1{
color: #ffffff;
font-size: 48px;
font-weight: 900;
letter-spacing: .8px;
margin: 0 0 14px;
text-shadow: 0 8px 25px rgba(0,0,0,.55);
}
/* เส้นคั่น */
.hero-divider{
display: inline-block;
width: 140px;
height: 4px;
border-radius: 999px;
background: linear-gradient(90deg, #22c55e, #3b82f6);
box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
/* Responsive */
@media (max-width: 767px){
.hero-title-wrap{
padding: 24px 18px;
}
.hero-title-wrap h1{
font-size: 28px;
}
.hero-badge{
font-size: 12px;
}
}
</style>
<?php
include 'admin/function_date.php';
?>
</head>
<body>
<div class="probootstrap-page-wrapper">
<!-- Fixed navbar -->
<?php include 'header.php'; ?>
<!-- เมนูด้านบน -->
<section class="flexslider">
<ul class="slides">
<li style="background-image: url(img/slider_1.jpg)" class="overlay">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="probootstrap-slider-text text-center">
<h1 class="probootstrap-heading probootstrap-animate"></h1>
</div>
</div>
</div>
</div>
</li>
<li style="background-image: url(img/slider_2.jpg)" class="overlay">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="probootstrap-slider-text text-center hero-title-wrap">
<span class="hero-badge probootstrap-animate">
กิจกรรมพัฒนาทักษะ
</span>
<h1 class="probootstrap-heading probootstrap-animate">
Math Camp Activities
</h1>
<span class="hero-divider"></span>
</div>
</div>
</div>
</div>
</li>
<li style="background-image: url(img/slider_3.jpg)" class="overlay">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="probootstrap-slider-text text-center hero-title-wrap">
<span class="hero-badge probootstrap-animate">
กิจกรรมเพื่อพัฒนาทักษะการพูดภาษาอังกฤษ
</span>
<h1 class="probootstrap-heading probootstrap-animate">
Activities to develop English speaking skills
</h1>
<span class="hero-divider"></span>
</div>
</div>
</div>
</div>
</li>
<li style="background-image: url(img/slider_4.jpg)" class="overlay">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="probootstrap-slider-text text-center hero-title-wrap">
<span class="hero-badge probootstrap-animate">
ช่วยให้นักเรียนแต่ละคนของเราได้พัฒนาศักยภาพอย่างเต็มที่
</span>
<h1 class="probootstrap-heading probootstrap-animate">
Helping Each of Our Students Fulfill the Potential
</h1>
<span class="hero-divider"></span>
</div>
</div>
</div>
</div>
</li>
</ul>
</section>
<section class="probootstrap-section ep-welcome-banner probootstrap-animate">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="welcome-content">
<div class="welcome-tagline">Watchaichumpol Municipality School</div>
<h2 class="welcome-title">Welcome to <span>English Program (EP)</span></h2>
<div class="welcome-divider"></div>
</div>
</div>
</div>
</div>
<div class="banner-overlay"></div>
</section>
<section class="probootstrap-section">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="probootstrap-flex-block">
<div class="probootstrap-text probootstrap-animate">
<h3>English Program (EP) คือ อะไร</h3>
<p>EP คือห้องเรียนพิเศษในโครงการจัดการเรียนการสอนตามหลักสูตรกระทรวงศึกษาธิการเป็นภาษาอังกฤษ โดยได้รับการอนุมัติให้ดำเนินโครงการจากเลขาธิการคณะกรรมการศึกษาขั้นพื้นฐานก่อนเปิดดำเนินการ ในระดับประถมศึกษาจัดการเรียนการสอนเป็นภาษาต่างประเทศ(ภาษาอังกฤษ) คณิตศาสตร์ วิทยาศาสตร์ สุขศึกษาและพลศึกษา โดยคำนึงถึงความรู้ ความเข้าใจในสาระของศาสตร์นั้นควบคู่กับภาษาอังกฤษ ไม่น้อยกว่า 18 ชั่วโมงต่อสัปดาห์</p>
<p><a href="#" class="btn btn-primary">เรียนรู้เพิ่มเติม</a></p>
</div>
<div class="probootstrap-image probootstrap-animate" style="background-image: url(img/imag_index.jpg)">
</div>
</div>
</div>
</div>
</div>
</section>
<?php
$content_id = 004;
$sql_content = "SELECT * FROM content WHERE content_id = $content_id ";
$result_content = mysqli_query($link, $sql_content);
$row_content = mysqli_fetch_array($result_content);
echo $row_content['content'];
?>
<section class="probootstrap-section probootstrap-section-colored probootstrap-bg probootstrap-custom-heading probootstrap-tab-section" style="background-image: url(img/benner_new.jpg)">
<div class="container">
<div class="row">
<div class="col-md-12 text-center section-heading probootstrap-animate">
<h2 class="mb0">ข่าวสาร</h2>
</div>
</div>
</div>
<div class="probootstrap-tab-style-1">
<ul class="nav nav-tabs probootstrap-center probootstrap-tabs no-border">
<li class="active"><a data-toggle="tab" href="#featured-news">ข่าวเด่น</a></li>
<li><a data-toggle="tab" href="#upcoming-events">ข่าวประชาสัมพันธ์</a></li>
</ul>
</div>
</section>
<?php
$newstype_id1 = 001;
$sql_type1 = "SELECT * FROM news INNER JOIN newstype ON news.newstype_id = newstype.newstype_id WHERE news.newstype_id = $newstype_id1 and news.news_status = '0' ORDER BY news_id DESC LIMIT 6";
$result_type1 = mysqli_query($link, $sql_type1);
?>
<section class="probootstrap-section probootstrap-section">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="tab-content">
<div id="featured-news" class="tab-pane fade in active">
<div class="row">
<div class="col-md-12">
<div class="owl-carousel" id="owl1">
<?php
while ($row_type1 = mysqli_fetch_array($result_type1)) {
?>
<?php
$date1 = $row_type1['new_date'];
$show_date1 = displaydate($date1);
?>
<div class="item">
<a href="news_details.php?news_id=<?php echo $row_type1['news_id']; ?>" class="probootstrap-featured-news-box">
<figure class="probootstrap-media"><img src="admin/images/<?php echo $row_type1['news_images']; ?>" alt="Free Bootstrap Template by ProBootstrap.com" class="img-responsive"></figure>
<div class="probootstrap-text">
<h3><?php echo $row_type1['news_topic']; ?></h3>
<p><?php echo $row_type1['topic_detail']; ?>......</p>
<span class="probootstrap-date"><i class="icon-calendar"></i><?php echo $show_date1; ?></span>
</div>
</a>
</div>
<?php } ?>
<!-- END item -->
</div>
</div>
</div>
<!-- END row -->
<div class="row">
<div class="col-md-12 text-center">
<p><a href="headline_news.php" class="btn btn-primary">ข่าวทั้งหมด</a></p>
</div>
</div>
</div>
<?php
$newstype_id2 = 002;
$sql_type2 = "SELECT * FROM news INNER JOIN newstype ON news.newstype_id = newstype.newstype_id WHERE news.newstype_id = $newstype_id2 and news.news_status = '0' ORDER BY news_id DESC LIMIT 3";
$result_type2 = mysqli_query($link, $sql_type2);
?>
<div id="upcoming-events" class="tab-pane fade">
<div class="row">
<div class="col-md-12">
<div class="owl-carousel" id="owl2">
<?php
while ($row_type2 = mysqli_fetch_array($result_type2)) {
?>
<?php
$date2 = $row_type2['new_date'];
$show_date2 = displaydate($date2);
?>
<div class="item">
<a href="news_details.php?news_id=<?php echo $row_type2['news_id']; ?>" class="probootstrap-featured-news-box">
<figure class="probootstrap-media"><img src="admin/images/<?php echo $row_type2['news_images']; ?>" alt="Free Bootstrap Template by ProBootstrap.com" class="img-responsive"></figure>
<div class="probootstrap-text">
<h3><?php echo $row_type2['news_topic']; ?></h3>
<p><?php echo $row_type2['topic_detail']; ?> ...</p>
<span class="probootstrap-date"><i class="icon-calendar"></i><?php echo $show_date2; ?></span>
</div>
</a>
</div>
<?php } ?>
<!-- END item -->
<!-- END item -->
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<p><a href="press_release.php" class="btn btn-primary">ข่าวทั้งหมด</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="probootstrap-section probootstrap-bg-white probootstrap-border-top">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center section-heading probootstrap-animate activity-heading">
<h2>ประมวลภาพกิจกรรม</h2>
<p class="activity-subtitle">รวมภาพกิจกรรมและผลงานที่ผ่านมา</p>
<span class="activity-divider"></span>
</div>
</div>
<?php
$newstype_id3 = 003;
$sql_type3 = "SELECT * FROM news INNER JOIN newstype ON news.newstype_id = newstype.newstype_id WHERE news.newstype_id = $newstype_id3 and news.news_status = '0' ORDER BY news_id DESC LIMIT 4";
$result_type3 = mysqli_query($link, $sql_type3);
?>
<!-- END row -->
<div class="row">
<?php
while ($row_type3 = mysqli_fetch_array($result_type3)) {
?>
<?php
$date3 = $row_type3['new_date'];
$show_date3 = displaydate($date3);
?>
<div class="col-md-6">
<div class="probootstrap-service-2 probootstrap-animate">
<div class="image">
<div class="image-bg">
<img src="admin/images/<?php echo $row_type3['news_images']; ?>" alt="Free Bootstrap Template by ProBootstrap.com">
</div>
</div>
<div class="text">
<span class="probootstrap-meta"><i class="icon-calendar2"></i> <?php echo $show_date3; ?></span>
<h3 class="news-title break-text"><?php echo $row_type3['news_topic']; ?></h3>
<p class="news-desc break-text"><?php echo $row_type3['topic_detail']; ?>...</p>
<p><a href="news_details.php?news_id=<?php echo $row_type3['news_id']; ?>" class="btn btn-primary">อ่านต่อ</a> <span class="enrolled-count"><?php echo $row_type3['counter']; ?> ครั้ง</span></p>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
</section>
<section class="probootstrap-section">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center section-heading probootstrap-animate teacher-heading">
<span class="teacher-kicker"><i class="icon-graduation-cap"></i> ทีมงานและบุคลากร</span>
<h2>ครูผู้ทรงคุณวุฒิ</h2>
<p class="teacher-subtitle">คณะครูมากประสบการณ์ พร้อมดูแลและพัฒนาผู้เรียนอย่างใกล้ชิด</p>
<span class="teacher-divider"></span>
</div>
</div>
<!-- END row -->
<?php
$content_id = 002;
$sql_content = "SELECT * FROM content WHERE content_id = $content_id ";
$result_content = mysqli_query($link, $sql_content);
$row_content = mysqli_fetch_array($result_content);
echo $row_content['content'];
?>
</div>
</section>
<section class="probootstrap-section probootstrap-bg probootstrap-section-colored probootstrap-testimonial" style="background-image: url(img/class_room.jpg);">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 text-center section-heading probootstrap-animate hero-heading">
<h2>สภาพการจัดการเรียนการสอน</h2>
<span class="hero-divider"></span>
</div>
</div>
<!-- END row -->
<div class="row">
<div class="col-md-12 probootstrap-animate">
<div class="owl-carousel owl-carousel-testimony owl-carousel-fullwidth">
<div class="item">
<div class="probootstrap-tab-section text-center">
<figure>
<img src="img/1.jpg" alt="Free Bootstrap Template by ProBootstrap.com">
</figure>
<blockquote class="quote">“รับนักเรียน ชั้นประถมศึกษาปีที่ 1 ห้องเรียนละ 35 คนและใช้หลักสูตรของกระทรวงศึกษาธิการ.”</blockquote>
</div>
</div>
<div class="item">
<div class="probootstrap-tab-section text-center">
<figure>
<img src="img/2.jpg" alt="Free Bootstrap Template by ProBootstrap.com">
</figure>
<blockquote class="quote">“ใช้ภาษาอังกฤษเป็นสื่อในการจัดกรรมการเรียนการสอน.”</blockquote>
</div>
</div>
<div class="item">
<div class="probootstrap-tab-section text-center">
<figure>
<img src="img/3.jpg" alt="Free Bootstrap Template by ProBootstrap.com">
</figure>
<blockquote class="quote">“การเรียนการสอนจะเป็นการผสมผสาน การอนุรักษ์ขนบธรรมเนียมวัฒนธรรมไทยและการเรียนรู้วัฒนธรรมต่างชาติ.” </blockquote>
</div>
</div>
<div class="item">
<div class="probootstrap-tab-section text-center">
<figure>
<img src="img/4.jpg" alt="Free Bootstrap Template by ProBootstrap.com">
</figure>
<blockquote class="quote">“ครูชาวต่างชาติและครูคนไทย ร่วมกำหนดขอบเขตสาระการเรียนรู้.” </blockquote>
</div>
</div>
</div>
</div>
</div>
<!-- END row -->
</div>
</section>
<section class="probootstrap-section probootstrap-bg-white probootstrap-border-top">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center section-heading probootstrap-animate activity-heading">
<h2>ผลงานนักเรียน</h2>
<p class="activity-subtitle">รวมผลงานของนักเรียนที่ผ่านมา</p>
<span class="activity-divider"></span>
</div>
</div>
<?php
$newstype_id4 = 004;
$sql_type4 = "SELECT * FROM news INNER JOIN newstype ON news.newstype_id = newstype.newstype_id WHERE news.newstype_id = $newstype_id4 and news.news_status = '0' ORDER BY news_id DESC LIMIT 4";
$result_type4 = mysqli_query($link, $sql_type4);
?>
<!-- END row -->
<div class="row">
<?php
while ($row_type4 = mysqli_fetch_array($result_type4)) {
?>
<?php
$date4 = $row_type4['new_date'];
$show_date4 = displaydate($date4);
?>
<div class="col-md-6">
<div class="probootstrap-service-2 probootstrap-animate">
<div class="image">
<div class="image-bg">
<img src="admin/images/<?php echo $row_type4['news_images']; ?>" alt="Free Bootstrap Template by ProBootstrap.com">
</div>
</div>
<div class="text">
<span class="probootstrap-meta"><i class="icon-calendar2"></i> <?php echo $show_date4; ?></span>
<h3 class="news-title break-text"><?php echo $row_type4['news_topic']; ?></h3>
<p class="news-desc break-text"><?php echo $row_type4['topic_detail']; ?>...</p>
<p><a href="news_details.php?news_id=<?php echo $row_type4['news_id']; ?>" class="btn btn-primary">อ่านต่อ</a> <span class="enrolled-count"><?php echo $row_type4['counter']; ?> ครั้ง</span></p>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
</section>
<section class="probootstrap-section">
<?php
$content_id = 005;
$sql_content = "SELECT * FROM content WHERE content_id = $content_id ";
$result_content = mysqli_query($link, $sql_content);
$row_content = mysqli_fetch_array($result_content);
echo $row_content['content'];
?>
</section>
<section class="probootstrap-section">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center section-heading probootstrap-animate">
<h2>วัตถุประสงค์&เป้าหมาย</h2>
<p class="lead">เมื่อนักเรียนสำเร็จการศึกษาระดับชั้นประถมศึกษาปีที่ 6 แล้วจะมีคุณลักษณะต่อไปนี้.</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="service left-icon probootstrap-animate">
<div class="icon"><i class="icon-checkmark"></i></div>
<div class="text">
<h3>นักเรียนมีความรู้ด้านภาษาอังกฤษ</h3>
<p>สามารถใช้ภาษาอังกฤษติดต่อสื่อสารในชีวิตประจำวันได้.</p>
</div>
</div>
<div class="service left-icon probootstrap-animate">
<div class="icon"><i class="icon-checkmark"></i></div>
<div class="text">
<h3>สามารถพัฒนาตนเองให้รู้จักคิดวิเคราะห์แก้ปัญหา</h3>
<p>พัฒนาตนเองให้รู้จักคิดวิเคราะห์แก้ปัญหาสืบค้นข้อมูลเพื่อการเรียนรู้ตลอดชีวิต
.</p>
</div>
</div>
<div class="service left-icon probootstrap-animate">
<div class="icon"><i class="icon-checkmark"></i></div>
<div class="text">
<h3>เชื่อมั่นในตนเอง</h3>
<p>ความไว้วางใจในศักยภาพของตนเอง ที่จะเผชิญหน้ากับสถานการณ์ต่างๆ.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="service left-icon probootstrap-animate">
<div class="icon"><i class="icon-checkmark"></i></div>
<div class="text">
<h3>นักเรียนได้ฝึกทักษะด้านภาษาอังกฤษ</h3>
<p>ทักษะด้านภาษาอังกฤษ มีความรู้ ความเข้าใจ และเจตคติที่ดีในการใช้ภาษาอังกฤษอย่างสัมฤทธิ์ผล.</p>
</div>
</div>
<div class="service left-icon probootstrap-animate">
<div class="icon"><i class="icon-checkmark"></i></div>
<div class="text">
<h3>นักเรียนได้รับประสบการณ์ทางสังคม</h3>
<p>เช่น การเรียนรู้วัฒนธรรม ขนบธรรมเนียม ประเพณีจากครูผู้สอนชาวต่างชาติโดยตรง.</p>
</div>
</div>
<div class="service left-icon probootstrap-animate">
<div class="icon"><i class="icon-checkmark"></i></div>
<div class="text">
<h3>นักเรียนมีความมั่นใจในการสื่อสารภาษาอังกฤษ</h3>
<p>มีความมั่นใจในการสื่อสารภาษาอังกฤษในระดับพื้นฐานเหมาะสมตามวัย.</p>
</div>
</div>
</div>
</div>
<!-- END row -->
</div>
</section>
<?php include 'footer.php'; ?>
<!-- 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