File: /home/suanchonac/public_html/sk-courseonline/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>หลักสูตรสวนกุหลาบฯศึกษา</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,300i,400,400i,500,500i,600,600i,700,700i|Playfair+Display:400,400i,700,700i,900,900i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Prompt&display=swap" rel="stylesheet">
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
</head>
<body id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand" href="http://www.suanchon.ac.th/"> โรงเรียนสวนกุหลาบวิทยาลัย ชลบุรี</a>
<button class="navbar-toggler text-uppercase font-weight-bold bg-primary text-white rounded" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="#portfolio">หลักสูตร</a></li>
<!--
<li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="#about">About</a></li>
-->
</ul>
</div>
</div>
</nav>
<!-- Masthead-->
<header class="masthead bg-primary text-white text-center">
<div class="container d-flex align-items-center flex-column">
<!-- Masthead Avatar Image-->
<img class="masthead-avatar mb-5" src="assets/img/sk-logo.png" alt="..." />
<!-- Masthead Heading-->
<h1 class="masthead-heading text-uppercase mb-0">หลักสูตรสวนกุหลาบฯศึกษาในยุคดิจิทัล</h1>
<!-- Icon Divider-->
<div class="divider-custom divider-light">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-line"></div>
</div>
<!-- Masthead Subheading-->
<p class="masthead-subheading font-weight-light mb-0">Suankularb Wittayalai Educational Curriculum</p>
<br>
<p>หลักสูตรสวนกุหลาบฯศึกษา เป็นแนวทางการจัดศึกษาเพื่อพัฒนาวัฒนธรรมคุณภาพในการสร้างพลเมืองดีของชาติสาหรับสถานศึกษาที่ใช้ชื่อสวนกุหลาบ เพื่อมุ่งปลูกฝังพัฒนาผู้เรียนให้มีความภาคภูมิใจในสถาบันสวนกุหลาบ มีภูมิธรรม ภูมิรู้ ภูมิปัญญา ภูมิคุ้มกัน และภูมิฐาน สามารถเป็นสมาชิกที่ดี สามารถเป็นสมาชิกที่ดีสามารถเชิดชูเกียรติและศักดิ์ศรีแห่งความเป็นสวนกุหลาบวิทยาลัย</p>
</div>
</header>
<!-- Portfolio Section-->
<section class="page-section portfolio" id="portfolio">
<div class="container">
<!-- Portfolio Section Heading-->
<h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">หลักสูตร</h2>
<!-- Icon Divider-->
<div class="divider-custom">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-line"></div>
</div>
<!-- Portfolio Grid Items-->
<div class="row justify-content-center">
<!-- Portfolio Item 1-->
<div class="col-md-6 col-lg-4 mb-5">
<div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal1">
<div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
<div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
</div>
<a href="files/course.pdf">
<img class="img-fluid" src="assets/img/portfolio/cabin.png" alt="..." /></a>
</div>
</div>
<!-- Portfolio Item 2-->
<div class="col-md-6 col-lg-4 mb-5">
<div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal2">
<div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
<div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/portfolio/cake.png" alt="..." />
</div>
</div>
<!-- Portfolio Item 3-->
<div class="col-md-6 col-lg-4 mb-5">
<div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal3">
<div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
<div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/portfolio/knowledge.png" alt="..." />
</div>
</div>
<!-- Portfolio Item 4-->
<div class="col-md-6 col-lg-4 mb-5 mb-lg-0">
<div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal4">
<div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
<div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/portfolio/circus.png" alt="..." />
</div>
</div>
<!-- Portfolio Item 5-->
<div class="col-md-6 col-lg-4 mb-5 mb-md-0">
<div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal5">
<div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
<div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/portfolio/game.png" alt="..." />
</div>
</div>
<!-- Portfolio Item 6-->
<div class="col-md-6 col-lg-4">
<div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal6">
<div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
<div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/portfolio/questionnaire.png" alt="..." />
</div>
</div>
</div>
</div>
</section>
<!-- About Section-->
<!--
<section class="page-section bg-primary text-white mb-0" id="about">
<div class="container">
<!-- About Section Heading-->
<!--
<h2 class="page-section-heading text-center text-uppercase text-white">About</h2>
<!-- Icon Divider-->
<!--
<div class="divider-custom divider-light">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-line"></div>
</div>
<!-- About Section Content-->
<!--
<div class="row">
<div class="col-lg-4 ms-auto"><p class="lead">Freelancer is a free bootstrap theme created by Start Bootstrap. The download includes the complete source files including HTML, CSS, and JavaScript as well as optional SASS stylesheets for easy customization.</p></div>
<div class="col-lg-4 me-auto"><p class="lead">You can create your own custom avatar for the masthead, change the icon in the dividers, and add your email address to the contact form to make it fully functional!</p></div>
</div>
<!-- About Section Button-->
<!--
<div class="text-center mt-4">
<a class="btn btn-xl btn-outline-light" href="https://startbootstrap.com/theme/freelancer/">
<i class="fas fa-download me-2"></i>
Free Download!
</a>
</div>
</div>
</section>
<!-- Footer-->
<footer class="footer text-center">
<div class="container">
<div class="row">
<!-- Footer Location-->
<div class="col-lg-4 mb-5 mb-lg-0">
<h4 class="text-uppercase mb-4">โรงเรียนสวนกุหลาบวิทยาลัย ชลบุรี</h4>
<p class="lead mb-0">
8 หมู่3 ตำบลบ่อวิน
<br />
อำเภอศรีราชา จังหวัดชลบุรี 20130
</p>
</div>
<!-- Footer Social Icons-->
<div class="col-lg-4 mb-5 mb-lg-0">
<h4 class="text-uppercase mb-4">ติดต่อเรา</h4>
<a class="btn btn-outline-light btn-social mx-1" href="https://www.facebook.com/suanchon"><i class="fab fa-fw fa-facebook-f"></i></a>
<a class="btn btn-outline-light btn-social mx-1" href="http://www.suanchon.ac.th"><i class="fab fa-fw fa-dribbble"></i></a>
</div>
<!-- Footer About Text-->
<!--
<div class="col-lg-4">
<h4 class="text-uppercase mb-4">About Freelancer</h4>
<p class="lead mb-0">
Freelance is a free to use, MIT licensed Bootstrap theme created by
<a href="http://startbootstrap.com">Start Bootstrap</a>
.
</p>
</div>
-->
</div>
</div>
</footer>
<!-- Copyright Section-->
<div class="copyright py-4 text-center text-white">
<div class="container"><small>Copyright © โรงเรียนสวนกุหลาบวิทยาลัย ชลบุรี : ผู้จัดทำเว็บไซต์ คุณครูพิชยุตม์ สมุทรเขต</small></div>
</div>
<!-- Portfolio Modals-->
<!-- Portfolio Modal 1-->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" aria-labelledby="portfolioModal1" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header border-0"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button></div>
<div class="modal-body text-center pb-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<!-- Portfolio Modal - Title-->
<h2 class="portfolio-modal-title text-secondary text-uppercase mb-0">คำอธิบายหลักสูตร</h2>
<!-- Icon Divider-->
<div class="divider-custom">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-line"></div>
</div>
<!-- Portfolio Modal - Image-->
<img class="img-fluid rounded mb-5" src="assets/img/portfolio/cabin.png" alt="..." />
<!-- Portfolio Modal - Text-->
<a href="files/course.pdf"><p class="mb-4">เอกสารคำอธิบายหลักสูตร</p></a>
<button class="btn btn-primary" href="" data-bs-dismiss="modal">
<i class="fas fa-times fa-fw"></i>
Close Window
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Modal 2-->
<div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" aria-labelledby="portfolioModal2" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header border-0"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button></div>
<div class="modal-body text-center pb-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<!-- Portfolio Modal - Title-->
<h2 class="portfolio-modal-title text-secondary text-uppercase mb-0">แผนการจัดการเรียนรู้</h2>
<!-- Icon Divider-->
<div class="divider-custom">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-line"></div>
</div>
<!-- Portfolio Modal - Image-->
<img class="img-fluid rounded mb-5" src="assets/img/portfolio/cake.png" alt="..." />
<!-- Portfolio Modal - Text-->
<a href="files/plan1.pdf">
<p class="mb-4">แผนการจัดการเรียนรู้ที่ 1 เรื่อง ความเป็นมา</p>
</a>
<a href="files/plan2.pdf">
<p class="mb-4">แผนการจัดการเรียนรู้ที่ 2 เรื่อง ผลสำเร็จ เกียรติยศ เกียรติภูมิ</p>
</a>
<a href="files/plan3.pdf">
<p class="mb-4">แผนการจัดการเรียนรู้ที่ 3 เรื่อง จุดเด่นของสวนฯเรา</p>
</a>
<a href="files/content5plan1.pdf">
<p class="mb-4">สาระที่ 5 แผนการจัดการเรียนรู้ที่ 1 : สุวิชาโน ภวํ โหติ</p>
</a>
<a href="files/content5plan2.pdf">
<p class="mb-4">สาระที่ 5 แผนการจัดการเรียนรู้ที่ 2 : อัตลักษณ์</p>
</a>
<button class="btn btn-primary" href="" data-bs-dismiss="modal">
<i class="fas fa-times fa-fw"></i>
Close Window
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Modal 3-->
<div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" aria-labelledby="portfolioModal3" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header border-0"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button></div>
<div class="modal-body text-center pb-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<!-- Portfolio Modal - Title-->
<h2 class="portfolio-modal-title text-secondary text-uppercase mb-0">ใบความรู้</h2>
<!-- Icon Divider-->
<div class="divider-custom">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-line"></div>
</div>
<!-- Portfolio Modal - Image-->
<img class="img-fluid rounded mb-5" src="assets/img/portfolio/knowledge.png" alt="..." />
<!-- Portfolio Modal - Text-->
<a href="http://newweb.suanchon.ac.th/school">
<p class="mb-4">ประวัติความเป็นมาของโรงเรียนสวนกุหลาบวิทยาลัย ชลบุรี</p>
</a>
<a href="https://www.youtube.com/watch?v=37gyuwm3Z_o">
<p class="mb-4">Suanchon Model</p>
</a>
<button class="btn btn-primary" href="" data-bs-dismiss="modal">
<i class="fas fa-times fa-fw"></i>
Close Window
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Modal 4-->
<div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" aria-labelledby="portfolioModal4" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header border-0"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button></div>
<div class="modal-body text-center pb-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<!-- Portfolio Modal - Title-->
<h2 class="portfolio-modal-title text-secondary text-uppercase mb-0">วิดีทัศน์</h2>
<!-- Icon Divider-->
<div class="divider-custom">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-line"></div>
</div>
<!-- Portfolio Modal - Image-->
<img class="img-fluid rounded mb-5" src="assets/img/portfolio/circus.png" alt="..." />
<!-- Portfolio Modal - Text-->
<a href="https://youtu.be/qHHt4_jRsb0">
<p class="mb-4">วิดีทัศน์ความเป็นมาโรงเรียนสวนกุหลาบวิทยาลัย ชลบุรี</p>
</a>
<button class="btn btn-primary" href="" data-bs-dismiss="modal">
<i class="fas fa-times fa-fw"></i>
Close Window
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Modal 5-->
<div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" aria-labelledby="portfolioModal5" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header border-0"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button></div>
<div class="modal-body text-center pb-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<!-- Portfolio Modal - Title-->
<h2 class="portfolio-modal-title text-secondary text-uppercase mb-0">แบบทดสอบ</h2>
<!-- Icon Divider-->
<div class="divider-custom">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-line"></div>
</div>
<!-- Portfolio Modal - Image-->
<img class="img-fluid rounded mb-5" src="assets/img/portfolio/game.png" alt="..." />
<!-- Portfolio Modal - Text-->
<a href="https://wordwall.net/play/27313/069/312">
<p class="mb-4">แบบทดสอบ เรื่อง "ความเป็นมาของโรงเรียนสวนกุหลาบวิทยาลัย ชลบุรี"</p>
</a>
<a href="https://wordwall.net/play/27313/069/312">
<p class="mb-4">แบบฝึกหัด เรื่อง "ผลสำเร็จ เกียรติยศ เกียรติภูมิ"</p>
</a>
<button class="btn btn-primary" href="" data-bs-dismiss="modal">
<i class="fas fa-times fa-fw"></i>
Close Window
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Modal 6-->
<div class="portfolio-modal modal fade" id="portfolioModal6" tabindex="-1" aria-labelledby="portfolioModal6" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header border-0"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button></div>
<div class="modal-body text-center pb-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<!-- Portfolio Modal - Title-->
<h2 class="portfolio-modal-title text-secondary text-uppercase mb-0">แบบประเมิน</h2>
<!-- Icon Divider-->
<div class="divider-custom">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-line"></div>
</div>
<!-- Portfolio Modal - Image-->
<img class="img-fluid rounded mb-5" src="assets/img/portfolio/questionnaire.png" alt="..." />
<!-- Portfolio Modal - Text-->
<a href="https://forms.gle/WcTHfHdiiNh5z2DE7">
<p class="mb-4">แบบประเมินคุณภาพครอบครัวสวนกุหลาบวิทยาลัย ระดับชั้นมัธยมศึกษาตอนต้น (ม.1-ม.3) ปีการศึกษา 2565</p>
</a>
<a href="https://forms.gle/QNyDBiSaD83zP1wF9">
<p class="mb-4">แบบประเมินคุณภาพครอบครัวสวนกุหลาบวิทยาลัย ระดับชั้นมัธยมศึกษาตอนปลาย(ม.4-ม.6) ปีการศึกษา 2565</p>
</a>
<a href="https://forms.gle/HTGexxLhE2qRqyBV6">
<p class="mb-4">แบบประเมินคุณภาพคุณภาพครูที่ปรึกษาสวนกุหลาบฯ ระดับชั้นมัธยมศึกษา ปีการศึกษา 2565</p>
</a>
<a href="https://forms.gle/57cXM8arLT9ZMqFV6">
<p class="mb-4">แบบประเมินคุณภาพคุณภาพครูผู้สอนสวนกุหลาบฯ ระดับชั้นมัธยมศึกษา ปีการศึกษา 2565</p>
</a>
<a href="https://forms.gle/P1wCvTT64fENozHV6">
<p class="mb-4">แบบประเมินมาตรฐานผู้บริหารคุณภาพกุหลาบหลวง ปีการศึกษา 2565</p>
</a>
<button class="btn btn-primary" href="" data-bs-dismiss="modal">
<i class="fas fa-times fa-fw"></i>
Close Window
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
<!-- * * SB Forms JS * *-->
<!-- * * Activate your form at https://startbootstrap.com/solution/contact-forms * *-->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
<script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
</body>
</html>