File: /home/suanchonac/domains/suanchon.ac.th/private_html/oh/index.php
<!DOCTYPE html>
<?php
  include_once("counter.php");
  $counter = new Counter();
?>
<html lang="en">
<head>
  <!-- meta -->
  <meta charset="utf-8">
  <meta name="author" content="Mr.Thosaphorn Srangnanok (ครูทศพร  สร้างนานอก)" />
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title>Oh</title>
  <meta content="" name="keywords">
  <meta content="" name="description">
  <!-- 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">
  <!-- Bootstrap CSS File -->
  <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <!-- Libraries CSS Files -->
  <link href="lib/ionicons/css/ionicons.min.css" rel="stylesheet">
  <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
  <link href="lib/magnific-popup/magnific-popup.css" rel="stylesheet">
  <link href="lib/hover/hover.min.css" rel="stylesheet">
  <!-- Main Stylesheet File -->
  <link href="css/style.css" rel="stylesheet">
  <!-- Responsive css -->
  <link href="css/responsive.css" rel="stylesheet">
  <!-- Favicon -->
  <link rel="shortcut icon" href="images/favicon.png">
</head>
<body>
  <!-- start section navbar -->
  <nav id="main-nav">
    <div class="row">
      <div class="container">
        <div class="logo">
          <a href="index.html"><img src="images/logo.png" alt="logo"></a>
        </div>
        <div class="responsive"><i data-icon="m" class="ion-navicon-round"></i></div>
        <ul class="nav-menu list-unstyled">
          <li><a href="#header" class="smoothScroll">Home</a></li>
          <li><a href="#about" class="smoothScroll">About</a></li>
          <li><a href="#portfolio" class="smoothScroll">Portfolio</a></li>
          <li><a href="#journal" class="smoothScroll">learning</a></li>
          <li><a href="#contact" class="smoothScroll">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- End section navbar -->
  <!-- start section header -->
  <div id="header" class="home">
    <div class="container">
      <div class="header-content">
        <h1><font color="#304476">I'm <span class="typed"></span></font></h1>
        <p><font color="#304476">teacher, designer, developer, photographer</font></p>
        <ul class="list-unstyled list-social">
          <li><a href="https://web.facebook.com/oh.thosaphorn" target="_blank"><i class="ion-social-facebook"></i></a></li>
          <li><a href="#"><i class="ion-social-twitter"></i></a></li>
          <li><a href="https://www.instagram.com/ohtsk" target="_blank"><i class="ion-social-instagram"></i></a></li>
          <li><a href="#"><i class="ion-social-googleplus"></i></a></li>
          <li><a href="#"><i class="ion-social-tumblr"></i></a></li>
          <li><a href="#"><i class="ion-social-dribbble"></i></a></li>
        </ul>
      </div>
    </div>
  </div>
  <!-- End section header -->
  <!-- start section about us -->
  <div id="about" class="paddsection">
    <div class="container">
      <div class="row justify-content-between">
        <div class="col-lg-4 ">
          <div class="div-img-bg">
            <div class="about-img">
              <img src="images/me.jpg" class="img-responsive" alt="me">
            </div>
          </div>
          		<div class="journal-txt" align="center">
               		<p class="separator"><h4><a href="profile/profile.html" target="_blank"><font size="+2"> <i class="ion-eye"></i> ดูประวัติ</font></a></h4></p>
                </div>
        		</div>
        <div class="col-lg-7">
          <div class="about-descr">
            <p class="p-heading">นายทศพร สร้างนานอก (ครูโอ๋)</p>
            <p class="p-heading">ระดับการศึกษา<br><font size="4">     ปริญญาโท   : สมอง จิตใจและการเรียนรู้</font><br><font size="4">                      วิทยาศาสตรมหาบัณฑิต มหาวิทยาลัยบูรพา</font><br><font size="4">     บัณฑิตศึกษา : วิชาชีพครู</font><br><font size="4">                      ครุศาสตรบัณฑิต มหาวิทยาลัยราชภัฏราชนครินทร์</font><br><font size="4">     ปริญญาตรี  : วิทยาการคอมพิวเตอร์</font><br><font size="4">                      วิทยาศาสตรบัณฑิต มหาวิทยาลัยบูรพา</font><br><font size="4">     มัธยมศึกษา  : โรงเรียนเมืองพลพิทยาคม</font><br><font size="4">                      จังหวัดขอนแก่น</font></p>
            <p class="p-heading">ครู<br><font size="4">     ๐ ปี 2562 - ปัจจุบัน</font><br><font size="4">                    - ข้าราชการครู โรงเรียนสวนกุหลาบวิทยาลัย ชลบุรี</font><br><font size="4">     ๐ ปี 2559 - 2562</font><br><font size="4">                    - ครู โรงเรียนเมืองพัทยา 5 (บ้านเนินพัทธยาเหนือ)</font><br><font size="4">     ๐ ปี 2554 - 2559</font><br><font size="4">                    - อาจารย์ วิทยาลัยอาชีวศึกษาคิงส์ตัน พัทยา</font><br><font size="4">     ๐ ปี 2554 - 2554</font><br><font size="4">                    - โปรแกรมเมอร์</font></p>
            <p class="separator"></p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- end section about us -->
  <!-- start section services -->
  <div id="services">
    <div class="container">
        <div class="services-carousel owl-theme">
          <div class="services-block">
            <i class="ion-ios-browsers-outline"></i>
            <span>Development</span>
            <p class="separator">Web development, ActionScript 3.0, Flash animation, PHP, CSS, HTML5, JavaScript, jQuery, SQL, Microsoft SQL Server, C++, C#</p>
          </div>
          <div class="services-block">
            <i class="ion-ios-lightbulb-outline"></i>
            <span>Educate</span>
            <p class="separator">Teach computer programs, Computing Science, Digital technology, Adobe Photoshop, Adobe Illustrator, Adobe Flash Professional, Adobe Dreamweaver, Photography, </p>
          </div>
          <div class="services-block">
            <i class="ion-ios-color-wand-outline"></i>
            <span>DESIGN</span>
            <p class="separator">Web design, Poster design, Banners design</p>
          </div>
          <div class="services-block">
            <i class="ion-ios-analytics-outline"></i>
            <span>Skills</span>
            <p class="separator">การใช้คอมพิวเตอร์ระดับสูง, งานออกแบบ, งานถ่ายภาพ, งานตัดต่อ, งานประชาสัมพันธ์, งานด้านการเรียนการสอน</p>
          </div>
          <div class="services-block">
            <i class="ion-ios-camera-outline"></i>
            <span>PHOTOGRAPHY</span>
            <p class="separator">Portrait, Landscape, Macro, Photo Retouching</p>
          </div>
        </div>
    </div>
  </div>
  <!-- end section services -->
  <!-- start section portfolio -->
  <div id="portfolio" class="text-center paddsection">
    <div class="container">
      <div class="section-title text-center">
        <h2>My Portfolio</h2>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="portfolio-list">
            <ul class="nav list-unstyled" id="portfolio-flters">
              <li class="filter filter-active" data-filter=".all">all</li>
              <li class="filter" data-filter=".branding">Education</li>
              <li class="filter" data-filter=".mockups">mockups</li>
              <li class="filter" data-filter=".webdesign">web design</li>
              <li class="filter" data-filter=".photography">photography</li>
            </ul>
          </div>
          <div class="portfolio-container">
            <div class="col-lg-4 col-md-6 portfolio-thumbnail all webdesign">
              <a class="popup-img" href="images/portfolio/1.jpg">
                <img src="images/portfolio/1.jpg" alt="img">
              </a>
            </div>
            <div class="col-lg-4 col-md-6 portfolio-thumbnail all webdesign">
              <a class="popup-img" href="images/portfolio/2.jpg">
                <img src="images/portfolio/2.jpg"  alt="img">
              </a>
            </div>
            <div class="col-lg-4 col-md-6 portfolio-thumbnail all webdesign">
              <a class="popup-img" href="images/portfolio/3.jpg">
                <img src="images/portfolio/3.jpg" alt="img">
              </a>
            </div>
            <div class="col-lg-4 col-md-6 portfolio-thumbnail all webdesign">
              <a class="popup-img" href="images/portfolio/4.jpg">
                <img src="images/portfolio/4.jpg" alt="img">
              </a>
            </div>
            <div class="col-lg-4 col-md-6 portfolio-thumbnail all webdesign">
              <a class="popup-img" href="images/portfolio/5.jpg">
                <img src="images/portfolio/5.jpg" alt="img">
              </a>
            </div>
            
            <div class="col-lg-4 col-md-6 portfolio-thumbnail all webdesign">
              <a class="popup-img" href="images/portfolio/21.JPG">
                <img src="images/portfolio/21.JPG" alt="img">
              </a>
            </div>
            <div class="col-lg-4 col-md-6 portfolio-thumbnail all photography">
              <a class="popup-img" href="images/portfolio/6.jpg">
                <img src="images/portfolio/6.jpg" alt="img">
              </a>
            </div>
            <div class="col-lg-4 col-md-6 portfolio-thumbnail all mockups">
              <a class="popup-img" href="images/portfolio/7.jpg">
                <img src="images/portfolio/7.jpg" alt="img">
              </a>
            </div>
            <div class="col-lg-4 col-md-6 portfolio-thumbnail all mockups">
              <a class="popup-img" href="images/portfolio/8.jpg">
                <img src="images/portfolio/8.jpg" alt="img">
              </a>
            </div>
            <div class="col-lg-4 col-md-6 portfolio-thumbnail all mockups">
              <a class="popup-img" href="images/portfolio/9.jpg">
                <img src="images/portfolio/9.jpg" alt="img">
              </a>
            </div>
            <div class="col-lg-4 col-md-6 portfolio-thumbnail all mockups">
              <a class="popup-img" href="images/portfolio/10.jpg">
                <img src="images/portfolio/10.jpg" alt="img">
              </a>
            </div>
            
            <div class="col-lg-4 col-md-6 portfolio-thumbnail all branding">
              <a class="popup-img" href="images/portfolio/11.jpg">
                <img src="images/portfolio/11.jpg" alt="img">
              </a>
            </div>
            
            <div class="col-lg-4 col-md-6 portfolio-thumbnail all branding">
              <a class="popup-img" href="images/portfolio/12.jpg">
                <img src="images/portfolio/12.jpg" alt="img">
              </a>
            </div>
            
            <div class="col-lg-4 col-md-6 portfolio-thumbnail all photography">
              <a class="popup-img" href="images/portfolio/13.jpg">
                <img src="images/portfolio/13.jpg" alt="img">
              </a>
            </div>
            
            <div class="col-lg-4 col-md-6 portfolio-thumbnail all mockups">
              <a class="popup-img" href="images/portfolio/15.jpg">
                <img src="images/portfolio/15.jpg" alt="img">
              </a>
            </div>
            <div class="col-lg-4 col-md-6 portfolio-thumbnail all branding">
              <a class="popup-img" href="images/portfolio/16.jpg">
                <img src="images/portfolio/16.jpg" alt="img">
              </a>
            </div>
           
            <div class="col-lg-4 col-md-6 portfolio-thumbnail all photography">
              <a class="popup-img" href="images/portfolio/17.jpg">
                <img src="images/portfolio/17.jpg" alt="img">
              </a>
            </div>
           
            <div class="col-lg-4 col-md-6 portfolio-thumbnail all mockups">
              <a class="popup-img" href="images/portfolio/M-1.JPG">
                <img src="images/portfolio/M-1.JPG" alt="img">
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- End section portfolio -->
  <!-- start section journal -->
  <div id="journal" class="text-left paddsection">
    <div class="container">
      <div class="section-title text-center">
        <h2>journal</h2>
        <hr>
      </div>
    </div>
    <div class="container">
      <div class="journal-block">
        <div class="row">
          <div class="col-lg-4 col-md-6">
            <div class="journal-info">
              <a href="blog-single.html" target="_blank"><img src="images/blog-post-1.jpg" class="img-responsive" alt="img"></a>
              <div class="journal-txt">
                <h4><a href="doc/59910155.pdf" target="_blank" class="link-views" file-name="59910155.pdf">ATTENTION GAME  <i class="ion-eye"></i> <?=$counter->get_counter("59910155.pdf")?></a></h4>
                <p class="separator">A DEVELOPMENT OF ATTENTION GAME IN PRIMARY SCHOOL STUDENTS
                </p>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-6">
            <div class="journal-info">
              <a href="doc/AttentionProgram.pdf" target="_blank" class="link-views" file-name="AttentionProgram.pdf"><img src="images/ATP.jpg" class="img-responsive" alt="img"></a>
              <div class="journal-txt">
                <h4><a href="doc/AttentionProgram.pdf" target="_blank" class="link-views" file-name="AttentionProgram.pdf">ATTENTION PROGRAM  <i class="ion-eye"></i> <?=$counter->get_counter("AttentionProgram.pdf")?></a></h4>
                <p class="separator">โปรแกรมเสริมสร้างความตั้งใจจดจ่อ
                </p>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-6">
            <div class="journal-info">
              <a href="https://he01.tci-thaijo.org/index.php/JRTAN/article/view/241597/164308" target="_blank"><img src="images/blog-post-3.jpg" class="img-responsive" alt="img"></a>
              <div class="journal-txt">
                <h4><a href="https://he01.tci-thaijo.org/index.php/JRTAN/article/view/241597" target="_blank">A Development of Attention Game in Primary School Students</a></h4>
                <p class="separator">การพัฒนาเกมเสริมสร้างความตั้งใจจดจ่อในนักเรียน
                </p>
              </div>
            </div>
          </div>
          
          <div class="col-lg-4 col-md-6">
            <div class="journal-info">
              <a href="doc/older.pdf" target="_blank"><img src="images/blog-post-4.jpg" class="img-responsive" alt="img"></a>
              <div class="journal-txt">
                <h4><a href="doc/older.pdf" target="_blank">โครงการพัฒนาศักยภาพด้านการรู้คิด</a></h4>
                <p class="separator">เสริมสร้างศักยภาพสมองสู่สังคม (ความจำใช้งานสำหรับผู้สูงอายุ)
                </p>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-6">
            <div class="journal-info">
              <a href="http://www.suanchon.ac.th/net/" target="_blank"><img src="images/blog-post-5.jpg" class="img-responsive" alt="img"></a>
              <div class="journal-txt">
                <h4><a href="http://www.suanchon.ac.th/net/" target="_blank">คู่มือการใช้ Wifi</a></h4>
                <p class="separator">โรงเรียนสวนกุหลาบวิทยาลัย ชลบุรี
                </p>
              </div>
            </div>
          </div>
          
          <div class="col-lg-4 col-md-6">
            <div class="journal-info">
              <a href="certificate/Certificate.html" target="_blank"><img src="images/blog-post-9.jpg" class="img-responsive" alt="img"></a>
              <div class="journal-txt">
                <h4><a href="certificate/Certificate.html" target="_blank">เกียรติบัตร</a></h4>
                <p class="separator">รวบรวมเกียรติบัตร ระหว่างปี 2562-2564
                </p>
              </div>
            </div>
          </div>
<!-------------------------------------ด้าน 3 ด้าน------------------------------------------>
    <div class="container">
      <div class="section-title text-center">
      <br><br><br>
        <h2>ผลงานที่เกิดจากการปฏิบัติหน้าที่</h2>
        <hr>
      </div>
    </div>
    <div class="container">
      <div class="journal-block">
        <div class="row">
          <div class="col-lg-4 col-md-6">
            <div class="journal-info">
              <a href="http://oh.suanchon.ac.th/learn/"><img src="images/blog-post-6.jpg" class="img-responsive" alt="img"></a>
              <div class="journal-txt">
                <h4><a href="http://oh.suanchon.ac.th/learn/">ด้านการจัดการเรียนการสอน</a></h4>
                <p class="separator">จัดทำและพัฒนาหลักสูตรรายวิชาหรือสาระการเรียนรู้ที่รับผิดชอบ โดยมีการวิเคราะห์มาตรฐานการเรียนรู้และตัวชี้วัด
                </p>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-6">
            <div class="journal-info">
              <a href="#" target="_blank"><img src="images/blog-post-7.jpg" class="img-responsive" alt="img"></a>
              <div class="journal-txt">
                <h4><a href="#" target="_blank">ด้านการบริหารจัดการชั้นเรียน</a></h4>
                <p class="separator">การจัดสภาพแวดล้อม บรรยากาศในชั้นเรียนที่ส่งเสริมและเอื้อต่อการเรียนรู้
                </p>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-6">
            <div class="journal-info">
              <a href="#" target="_blank"><img src="images/blog-post-8.jpg" class="img-responsive" alt="img"></a>
              <div class="journal-txt">
                <h4><a href="#" target="_blank">ด้านการพัฒนาตนเองและพัฒนาวิชาชีพ</a></h4>
                <p class="separator">แผนการพัฒนาตนเองและดำเนินการตามแผนอย่างเป็นระบบและต่อเนื่อง
                </p>
              </div>
            </div>
          </div>
          
 <!-------------------------------------------------------------------------------------------------->
 		
       <div class="container">
      		<div class="section-title text-center"><br>
        		<h2>แผนการจัดการเรียนรู้</h2>
      		</div>
        </div>
 
 
           <div class="col-lg-4 col-md-6">
            <div class="journal-info">
              <a href="doc/com-4-2564.pdf" target="_blank" class="link-views" file-name="com-4-2564.pdf"><img src="images/p-2564-1.jpg" class="img-responsive" alt="img"></a>
              <div class="journal-txt">
                <h4><a href="doc/com-4-2564.pdf" target="_blank" class="link-views" file-name="com-4-2564.pdf" >วิทยาการคำนวณ</a></h4>
                <p class="separator"><font color="#b79f7e"><i class="ion-android-contact"></i> ครูโอ๋ <i class="ion-calendar"></i> 8 มิถุนายน 2564
				  <i class="ion-eye"></i> <?=$counter->get_counter("com-4-2564.pdf")?></font></p>
                <p class="separator">วิชา วิทยาการคำนวณ ว31103<br>ชั้นมัธยมศึกษาปีที่ 4</p>
              </div>
            </div>
          </div>
       
          <div class="col-lg-4 col-md-6">
            <div class="journal-info">
              <a href="doc/computer-2563.pdf" target="_blank" class="link-views" file-name="computer-2563.pdf"><img src="images/p-2562-1.jpg" class="img-responsive" alt="img"></a>
              <div class="journal-txt">
                <h4><a href="doc/computer-2563.pdf" target="_blank" class="link-views" file-name="computer-2563.pdf" >เทคโนโลยี (วิทยาการคำนวณ)</a></h4>
                <p class="separator"><font color="#b79f7e"><i class="ion-android-contact"></i> ครูโอ๋ <i class="ion-calendar"></i> 18 พฤษภาคม 2563
				  <i class="ion-eye"></i> <?=$counter->get_counter("computer-2563.pdf")?></font></p>
                <p class="separator">วิชา เทคโนโลยี (วิทยาการคำนวณ) ว21103<br>ชั้นมัธยมศึกษาปีที่ 1</p>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-6">
            <div class="journal-info">
              <a href="doc/computer2.pdf" target="_blank" class="link-views" file-name="computer2.pdf"><img src="images/blog-post-7.png" class="img-responsive" alt="img"></a>
              <div class="journal-txt">
                <h4><a href="doc/computer2.rar" target="_blank" class="link-views" file-name="computer2.pdf">เทคโนโลยี (การออกแบบและเทคโนโลยี) <i class="ion-android-download"></i></a></h4>
                <p class="separator"><font color="#b79f7e"><i class="ion-android-contact"></i> ครูโอ๋ <i class="ion-calendar"></i> 29 พฤศจิกายน 2563
				  <i class="ion-eye"></i> <?=$counter->get_counter("computer2.pdf")?></font></p>
                <p class="separator">วิชา เทคโนโลยี (การออกแบบและเทคโนโลยี) ว21104<br>ชั้นมัธยมศึกษาปีที่ 1</p>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-6">
            <div class="journal-info">
              <a href="doc/cg.pdf" target="_blank" class="link-views" file-name="cg.pdf"><img src="images/blog-post-cg8.png" class="img-responsive" alt="img"></a>
              <div class="journal-txt">
                <h4><a href="doc/cg.pdf" target="_blank" class="link-views" file-name="cg.pdf">แผนการจัดการเรียนรู้</a></h4>
                <p class="separator"><font color="#b79f7e"><i class="ion-android-contact"></i> ครูโอ๋ <i class="ion-calendar"></i> 15 พฤษภาคม 2563
				  <i class="ion-eye"></i> <?=$counter->get_counter("cg.pdf")?></font></p>
                <p class="separator">วิชา คอมพิวเตอร์กราฟิกในงานโฆษณา ว32286<br>ชั้นมัธยมศึกษาปีที่ 5</p>
              </div>
            </div>
          </div>
          
          <div class="col-lg-4 col-md-6">
            <div class="journal-info">
              <a href="" target="_blank" class="link-views" file-name="computer-2563.pdf"><img src="images/blog-post-11.png" class="img-responsive" alt="img"></a>
              <div class="journal-txt">
                <h4><a href="" target="_blank" class="link-views" file-name="" >คณิตศาสตร์คอมพิวเตอร์</a></h4>
                <p class="separator"><font color="#b79f7e"><i class="ion-android-contact"></i> ครูโอ๋ <i class="ion-calendar"></i> 18 พฤษภาคม 2563
				  <i class="ion-eye"></i> </font></p>
                <p class="separator">วิชา คณิตศาสตร์คอมพิวเตอร์ ว31283<br>ชั้นมัธยมศึกษาปีที่ 4</p>
              </div>
            </div>
          </div>
          
          <div class="col-lg-4 col-md-6">
            <div class="journal-info">
              <a href="" target="_blank" class="link-views" file-name="computer-2563.pdf"><img src="images/blog-post-10.png" class="img-responsive" alt="img"></a>
              <div class="journal-txt">
                <h4><a href="" target="_blank" class="link-views" file-name="" >คณิตศาสตร์คอมพิวเตอร์เพื่อการแก้ปัญหา</a></h4>
                <p class="separator"><font color="#b79f7e"><i class="ion-android-contact"></i> ครูโอ๋ <i class="ion-calendar"></i> 18 พฤษภาคม 2563
				  <i class="ion-eye"></i> </font></p>
                <p class="separator">วิชา คณิตศาสตร์คอมพิวเตอร์เพื่อการแก้ปัญหา ว32285<br>ชั้นมัธยมศึกษาปีที่ 5</p>
              </div>
            </div>
          </div>
          <div class="container">
      		<div class="section-title text-center"><br><br>
        		<h2>Suggestion</h2>
      		</div>
    	  </div>
<!--รายงานประเมินครูผู้ช่วย-----------------------------------------------------------------------------------------------------------------------
          <div class="col-lg-4 col-md-6">
            <div class="journal-info">
              <a href="doc/p-oh-2562-1.pdf" target="_blank"><img src="images/blog-post-3.png" class="img-responsive" alt="img"></a>
              <div class="journal-txt">
                <h4><a href="doc/teacher-1-2562.rar" target="_blank">ประเมินครูผู้ช่วย ครั้งที่ 1</a></h4>
                <p class="separator">รายงานการปฏิบัติงานเพื่อรับการประเมินครูผู้ช่วย<br>ครั้งที่ 1/2562
                </p>
              </div>
            </div>
          </div>
         <div class="col-lg-4 col-md-6">
            <div class="journal-info">
              <a href="doc/p-oh-2562-2.pdf" target="_blank"><img src="images/blog-post-4.png" class="img-responsive" alt="img"></a>
              <div class="journal-txt">
                <h4><a href="doc/teacher-2-2562.rar" target="_blank">ประเมินครูผู้ช่วย ครั้งที่ 2</a></h4>
                <p class="separator">รายงานการปฏิบัติงานเพื่อรับการประเมินครูผู้ช่วย<br>ครั้งที่ 2/2562 วันที่ 21 ก.ค. 2562 - 20 ม.ค. 2563
                </p>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-6">
            <div class="journal-info">
            <a href="doc/p-oh-2563-3.pdf" target="_blank"><img src="images/blog-post-32563.png" class="img-responsive" alt="img"></a>
              <div class="journal-txt">
                <h4><a href="doc/teacher-3-2563.rar" target="_blank">ประเมินครูผู้ช่วย ครั้งที่ 3</a></h4>
                <p class="separator">รายงานการปฏิบัติงานเพื่อรับการประเมินครูผู้ช่วย<br>ครั้งที่ 3/2563 วันที่ 21 ม.ค. 2563 - 20 ก.ค. 2563
                </p>
              </div>
            </div>
          </div>
---------------------------------------------------------------------------------------------------------------------------------------------------->
          <div class="col-lg-4 col-md-6">
            <div class="journal-info">
              <a href="doc/homeo64.pdf" target="_blank" class="link-views" file-name="homeo64.pdf"><img src="images/blog-post-cg14.png" class="img-responsive" alt="img"></a>
              <div class="journal-txt">
                <h4><a href="doc/homeo64.pdf" target="_blank" class="link-views" file-name="homeo64.pdf">รายงานการเยี่ยมบ้านนักเรียน</i></a></h4>
                <p class="separator"><font color="#b79f7e"><i class="ion-android-contact"></i> ครูโอ๋ <i class="ion-calendar"></i> 21 กันยายน 2564
				  <i class="ion-eye"></i> <?=$counter->get_counter("homeo64.pdf")?></font></p>
                <p class="separator">รายงานการเยี่ยมบ้านนักเรียน<br>ภาคเรียนที่ 1 ปีการศึกษา 2564</p>
              </div>
            </div>
          </div>  
          
          
          <div class="col-lg-4 col-md-6">
            <div class="journal-info">
              <a href="doc/SDQ64.pdf" target="_blank" class="link-views" file-name="SDQ64.pdf"><img src="images/blog-post-cg13.png" class="img-responsive" alt="img"></a>
              <div class="journal-txt">
                <h4><a href="doc/SDQ64.pdf" target="_blank" class="link-views" file-name="SDQ64.pdf">ประเมินพฤติกรรมนักเรียน (SDQ)</i></a></h4>
                <p class="separator"><font color="#b79f7e"><i class="ion-android-contact"></i> ครูโอ๋ <i class="ion-calendar"></i> 20 สิงหาคม 2564
				  <i class="ion-eye"></i> <?=$counter->get_counter("SDQ64.pdf")?></font></p>
                <p class="separator">รายงานการประเมินพฤติกรรมนักเรียน (SDQ)<br>ภาคเรียนที่ 1 ปีการศึกษา 2564</p>
              </div>
            </div>
          </div>  
          <div class="col-lg-4 col-md-6">
            <div class="journal-info">
              <a href="doc/su64.pdf" target="_blank" class="link-views" file-name="su64.pdf"><img src="images/blog-post-cg12.png" class="img-responsive" alt="img"></a>
              <div class="journal-txt">
                <h4><a href="doc/su64.rar" target="_blank" class="link-views" file-name="su64.pdf">รายงาน "วันงดดื่มสุราแห่งชาติ"<i class="ion-android-download"></i></a></h4>
                <p class="separator"><font color="#b79f7e"><i class="ion-android-contact"></i> ครูโอ๋ <i class="ion-calendar"></i> 25 กรกฎาคม 2564
				  <i class="ion-eye"></i> <?=$counter->get_counter("su64.pdf")?></font></p>
                <p class="separator">รายงานการอบรมออนไลน์ "วันงดดื่มสุราแห่งชาติ"<br>ภาคเรียนที่ 1 ปีการศึกษา 2564</p>
              </div>
            </div>
          </div>  
          <div class="col-lg-4 col-md-6">
            <div class="journal-info">
              <a href="doc/online642.pdf" target="_blank" class="link-views" file-name="online642.pdf"><img src="images/blog-post-cg11.png" class="img-responsive" alt="img"></a>
              <div class="journal-txt">
                <h4><a href="doc/online642.rar" target="_blank" class="link-views" file-name="online642.pdf">รายงานการประชุมผู้ปกครองออนไลน์ <i class="ion-android-download"></i></a></h4>
                <p class="separator"><font color="#b79f7e"><i class="ion-android-contact"></i> ครูโอ๋ <i class="ion-calendar"></i> 27 มิถุนายน 2564
				  <i class="ion-eye"></i> <?=$counter->get_counter("online642.pdf")?></font></p>
                <p class="separator">รายงานการประชุมผู้ปกครองออนไลน์<br>ภาคเรียนที่ 1 ปีการศึกษา 2564</p>
              </div>
            </div>
          </div>  
          <div class="col-lg-4 col-md-6">
            <div class="journal-info">
              <a href="doc/online64.pdf" target="_blank" class="link-views" file-name="online64.pdf"><img src="images/blog-post-cg10.png" class="img-responsive" alt="img"></a>
              <div class="journal-txt">
                <h4><a href="doc/online64.rar" target="_blank" class="link-views" file-name="online64.pdf">รายงานการจัดการเรียนการสอนออนไลน์ <i class="ion-android-download"></i></a></h4>
                <p class="separator"><font color="#b79f7e"><i class="ion-android-contact"></i> ครูโอ๋ <i class="ion-calendar"></i> 27 มิถุนายน 2564
				  <i class="ion-eye"></i> <?=$counter->get_counter("online64.pdf")?></font></p>
                <p class="separator">รายงานการจัดการเรียนการสอนออนไลน์<br>ภาคเรียนที่ 1 ปีการศึกษา 2564</p>
              </div>
            </div>
          </div>  
          
          <div class="col-lg-4 col-md-6">
            <div class="journal-info">
              <a href="doc/Oh-PLC1-2562.pdf" target="_blank" class="link-views" file-name="Oh-PLC1-2562.pdf"><img src="images/blog-post-5.png" class="img-responsive" alt="img"></a>
              <div class="journal-txt">
                <h4><a href="doc/PLC.rar" target="_blank" class="link-views" file-name="Oh-PLC1-2562.pdf">Professional Learning Community <i class="ion-android-download"></i></a></h4>
                <p class="separator"><font color="#b79f7e"><i class="ion-android-contact"></i> ครูโอ๋ <i class="ion-calendar"></i> 15 พฤษภาคม 2563
				  <i class="ion-eye"></i> <?=$counter->get_counter("Oh-PLC1-2562.pdf")?></font></p>
                <p class="separator">สมุดบันทึกกิจกรรม ชุมชนการเรียนรู้ทางวิชาชีพ (PLC)<br>ภาคเรียนที่ 1 ปีการศึกษา 2562</p>
              </div>
            </div>
          </div>       
          <div class="col-lg-4 col-md-6">
            <div class="journal-info">
              <a href="doc/Home.pdf" target="_blank" class="link-views" file-name="Home.pdf"><img src="images/Home-2562-1.jpg" class="img-responsive" alt="img"></a>
              <div class="journal-txt">
                <h4><a href="doc/Home.pdf" target="_blank" class="link-views" file-name="Home.pdf">แบบรายงานการเยี่ยมบ้านนักเรียน</a></h4>
                <p class="separator"><font color="#b79f7e"><i class="ion-android-contact"></i> ครูโอ๋ <i class="ion-calendar"></i> 5 สิงหาคมคม 2562
				  <i class="ion-eye"></i> <?=$counter->get_counter("Home.pdf")?></font></p>
                <p class="separator">แบบรายงานการเยี่ยมบ้านนักเรียน ปีการศึกษา 2562<br>นักเรียนชั้นมัธยมศึกษาปีที่ 107</p>
              </div>
            </div>
          </div>
          
           <div class="col-lg-4 col-md-6">
            <div class="journal-info">
              <a href="doc/home2563.pdf" target="_blank" class="link-views" file-name="home2563.pdf"><img src="images/p-2563-1.jpg" class="img-responsive" alt="img"></a>
              <div class="journal-txt">
                <h4><a href="doc/home2563.rar" target="_blank" class="link-views" file-name="home2563.pdf">รายงานผลการเยี่ยมบ้านนักเรียน <i class="ion-android-download"></i></a></h4>
                <p class="separator"><font color="#b79f7e"><i class="ion-android-contact"></i> ครูโอ๋ <i class="ion-calendar"></i> 26 สิงหาคมคม 2563
				  <i class="ion-eye"></i> <?=$counter->get_counter("home2563.pdf")?></font></p>
                <p class="separator">แบบรายงานการเยี่ยมบ้านนักเรียน ปีการศึกษา 2563<br>นักเรียนชั้นมัธยมศึกษาปีที่ 110</p>
              </div>
            </div>
          </div>
         
          <div class="col-lg-4 col-md-6">
            <div class="journal-info">
              <a href="doc/research-oh.pdf" target="_blank" class="link-views" file-name="research-oh.pd"><img src="images/blog-post-6.png" class="img-responsive" alt="img"></a>
              <div class="journal-txt">
                <h4><a href="doc/research-oh.pdf" target="_blank" class="link-views" file-name="research-oh.pd">วิจัยปฏิบัติการในชั้นเรียน</a></h4>
                <p class="separator"><font color="#b79f7e"><i class="ion-android-contact"></i> ครูโอ๋ <i class="ion-calendar"></i> 1 สิงหาคมคม 2562
				  <i class="ion-eye"></i> <?=$counter->get_counter("research-oh.pd")?></font></p>
                <p class="separator">ผลการใช้กระบวนการเรียนรู้แบบรวมพลัง 5 ขั้นตอน ร่วมกับการใช้แผนผังความคิด ที่มีต่อผลสัมฤทธิ์ฯ
                </p>
              </div>
            </div>
          </div>
          
          <div class="col-lg-4 col-md-6">
            <div class="journal-info">
              <img src="images/blog-post-8.png" class="img-responsive" alt="img">
              <div class="journal-txt">
                <h4>e-book</h4>
                <p class="separator">วิชาคอมพิวเตอร์กราฟิกในงานโฆษณา
                </p>
              </div>
            </div>
          </div>      
         
<!--ID Plan----------------------------------------------------------------------------------------------------------------------------------------      
          <div class="col-lg-4 col-md-6">
            <div class="journal-info">
              <a href="doc/mo-2563.pdf" target="_blank"><img src="images/blog-post-cg9.png" class="img-responsive" alt="img"></a>
              <div class="journal-txt">
                <h4><a href="doc/mo-2563.rar" target="_blank">รายงานผลการปฏิบัติงานข้าราชการครูฯ</a></h4>
                <p class="separator">ครั้งที่ 2 (1 เม.ย. 2563 - 30 ก.ย. 2563)
                </p>
              </div>
            </div>
          </div>
        
          <div class="col-lg-4 col-md-6">
            <div class="journal-info">
              <a href="doc/ID-Plan-OhTHOSAPHORN-SRANGNANOK-2-2562.pdf" target="_blank"><img src="images/blog-post-2.jpg" class="img-responsive" alt="img"></a>
              <div class="journal-txt">
                <h4><a href="doc/ID-Plan-OhTHOSAPHORN-SRANGNANOK-2-2562.rar">ID Plan : THOSAPHORN</a></h4>
                <p class="separator">แผนพัฒนาตนเองและพัฒนาวิชาชีพเป็นรายบุคคล :<br>ครูทศพร สร้างนานอก
                </p>
              </div>
            </div>
          </div>
--------------------------------------------------------------------------------------------------------------------------------------------->
<!--สื่อการสอน-------------------------------------------------------------------------------------------------------------------------------->      
    <div class="container">
      <div class="section-title text-center">
        <h2>สื่อการสอน</h2>
        <hr>
      </div>
    </div>
		  <div class="col-lg-4 col-md-6">
            <div class="journal-info">
              <a href="doc/excel.pdf" target="_blank" class="link-views" file-name="excel.pdf"><img src="images/onlinelearning/excel.jpg" class="img-responsive" alt="img"></a>
              <div class="journal-txt">
                <h4><a href="doc/excel.pdf" target="_blank" class="link-views" file-name="excel.pdf">โปรแกรมตารางคำนวณ (Spreadsheet)</a></h4>
                <p class="separator"><font color="#b79f7e"><i class="ion-android-contact"></i> ครูโอ๋ <i class="ion-calendar"></i> 16 สิงหาคม 2564
                  <i class="ion-eye"></i> <?=$counter->get_counter("excel.pdf")?></font></p>
                <p class="separator">วิชาโปรแกรมประยุกต์</p>
              </div>
            </div>
          </div>
		  <div class="col-lg-4 col-md-6">
            <div class="journal-info">
              <a href="doc/website-605.pdf" target="_blank" class="link-views" file-name="website-605.pdf"><img src="images/onlinelearning/cp-7-mathcom.jpg" class="img-responsive" alt="img"></a>
              <div class="journal-txt">
                <h4><a href="doc/website-605.pdf" target="_blank" class="link-views" file-name="website-605.pdf">การออกแบบและพัฒนาเว็บไซต์</a></h4>
                <p class="separator"><font color="#b79f7e"><i class="ion-android-contact"></i> ครูโอ๋ <i class="ion-calendar"></i> 8 มิถุนายน 2564
                  <i class="ion-eye"></i> <?=$counter->get_counter("website-605.pdf")?></font></p>
                <p class="separator">วิชาการออกแบบและพัฒนาเว็บไซต์</p>
              </div>
            </div>
          </div>
		  <div class="col-lg-4 col-md-6">
            <div class="journal-info">
              <a href="doc/w.pdf" target="_blank" class="link-views" file-name="w.pdf"><img src="images/onlinelearning/w.jpg" class="img-responsive" alt="img"></a>
              <div class="journal-txt">
                <h4><a href="doc/w.pdf" target="_blank" class="link-views" file-name="w.pdf">โปรแกรมประมวลผลคำ (Word)</a></h4>
                <p class="separator"><font color="#b79f7e"><i class="ion-android-contact"></i> ครูโอ๋ <i class="ion-calendar"></i> 8 มิถุนายน 2564
                  <i class="ion-eye"></i> <?=$counter->get_counter("w.pdf")?></font></p>
                <p class="separator">วิชาโปรแกรมประยุกต์</p>
              </div>
            </div>
          </div>
          
		  <div class="col-lg-4 col-md-6">
            <div class="journal-info">
              <a href="doc/cp-6-mathcom.pdf" target="_blank" class="link-views" file-name="cp-6-mathcom.pdf"><img src="images/onlinelearning/cp-6-mathcom.jpg" class="img-responsive" alt="img"></a>
              <div class="journal-txt">
                <h4><a href="doc/cp-6-mathcom.pdf" target="_blank" class="link-views" file-name="cp-6-mathcom.pdf">กราฟต้นไม้ (Tree)</a></h4>
                <p class="separator"><font color="#b79f7e"><i class="ion-android-contact"></i> ครูโอ๋ <i class="ion-calendar"></i> 3 กุมภาพันธ์ 2564
                  <i class="ion-eye"></i> <?=$counter->get_counter("cp-6-mathcom.pdf")?></font></p>
                <p class="separator">วิชาคณิตศาสตร์คอมพิวเตอร์</p>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-6">
            <div class="journal-info">
              <a href="doc/cp-5-mathcom.pdf" target="_blank" class="link-views" file-name="cp-5-mathcom.pdf"><img src="images/onlinelearning/cp-5-mathcom.jpg" class="img-responsive" alt="img"></a>
              <div class="journal-txt">
                <h4><a href="doc/cp-5-mathcom.pdf" target="_blank" class="link-views" file-name="cp-5-mathcom.pdf">เมทริกซ์ (Matrix)</a></h4>
                <p class="separator"><font color="#b79f7e"><i class="ion-android-contact"></i> ครูโอ๋ <i class="ion-calendar"></i> 1 กุมภาพันธ์ 2564
                  <i class="ion-eye"></i> <?=$counter->get_counter("cp-5-mathcom.pdf")?></font></p>
                <p class="separator">วิชาคณิตศาสตร์คอมพิวเตอร์</p>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-6">
            <div class="journal-info">
              <a href="doc/cp-4-mathcom.pdf" target="_blank" class="link-views" file-name="cp-4-mathcom.pdf"><img src="images/onlinelearning/cp-4-mathcom.jpg" class="img-responsive" alt="img"></a>
              <div class="journal-txt">
                <h4><a href="doc/cp-4-mathcom.pdf" target="_blank" class="link-views" file-name="cp-4-mathcom.pdf">พีชคณิตบูลีน (Boolean Algebra)</a></h4>
                <p class="separator"><font color="#b79f7e"><i class="ion-android-contact"></i> ครูโอ๋ <i class="ion-calendar"></i> 1 กุมภาพันธ์ 2564
                  <i class="ion-eye"></i> <?=$counter->get_counter("cp-4-mathcom.pdf")?></font></p>
                <p class="separator">วิชาคณิตศาสตร์คอมพิวเตอร์</p>
              </div>
            </div>
          </div>
          
          <div class="col-lg-4 col-md-6">
            <div class="journal-info">
              <a href="doc/CP-6-2564.pdf" target="_blank" class="link-views" file-name="CP-6-2564.pdf"><img src="images/onlinelearning/p-1.PNG" class="img-responsive" alt="img"></a>
              <div class="journal-txt">
                <h4><a href="doc/CP-6-2564.pdf" target="_blank" class="link-views" file-name="CP-6-2564.pdf">กระบวนการออกแบบเชิงวิศวกรรม</a></h4>
                <p class="separator"><font color="#b79f7e"><i class="ion-android-contact"></i> ครูโอ๋ <i class="ion-calendar"></i> 25 มกราคม 2564
                  <i class="ion-eye"></i> <?=$counter->get_counter("CP-6-2564.pdf")?></font></p>
                <p class="separator">วิชาเทคโนโลยี (การออกแบบและเทคโนโลยี)</p>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-6">
            <div class="journal-info">
              <a href="doc/CP-5-2564.pdf" target="_blank" class="link-views" file-name="CP-5-2564.pdf"><img src="images/onlinelearning/p-2.PNG" class="img-responsive" alt="img"></a>
              <div class="journal-txt">
                <h4><a href="doc/CP-5-2564.pdf" target="_blank" class="link-views" file-name="CP-5-2564.pdf">กลไก ไฟฟ้าและอิเล็กทรอนิกส์</a></h4>
                <p class="separator"><font color="#b79f7e"><i class="ion-android-contact"></i> ครูโอ๋ <i class="ion-calendar"></i> 11 มกราคม 2564
                  <i class="ion-eye"></i> <?=$counter->get_counter("CP-5-2564.pdf")?></font></p>
                <p class="separator">วิชาเทคโนโลยี (การออกแบบและเทคโนโลยี)</p>
              </div>
            </div>
          </div>
<!--Online learning-------------------------------------------------------------------------------------------------------------------------------->      
    <div class="container"><br><br>
      <div class="section-title text-center">
        <h2>Online learning</h2>
      </div>
    </div>
    
          <div class="col-lg-4 col-md-6">
            <div class="journal-info">
              <a href="https://youtu.be/XbOBEtbs1Y0" target="_blank"><img src="images/onlinelearning/m-8.png" class="img-responsive" alt="img"></a>
              <div class="journal-txt">
                <h4><a href="https://youtu.be/XbOBEtbs1Y0" target="_blank"><i class="ion-social-youtube"></i> ฟังก์ชัน MAX, MIN</a></h4>
                <p class="separator"><font color="#b79f7e"><i class="ion-android-contact"></i> ครูโอ๋ <i class="ion-calendar"></i> 6 กันยายน 2564</font></p>
                <p class="separator">วิชาโปรแกรมประยุกต์ ม.1</p>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-6">
            <div class="journal-info">
              <a href="https://youtu.be/LQQl12lbHLs" target="_blank"><img src="images/onlinelearning/m-7.png" class="img-responsive" alt="img"></a>
              <div class="journal-txt">
                <h4><a href="https://youtu.be/LQQl12lbHLs" target="_blank"><i class="ion-social-youtube"></i> Excel & Google Sheets</a></h4>
                <p class="separator"><font color="#b79f7e"><i class="ion-android-contact"></i> ครูโอ๋ <i class="ion-calendar"></i> 18 สิงหาคม 2564</font></p>
                <p class="separator">วิชาโปรแกรมประยุกต์ ม.1</p>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-6">
            <div class="journal-info">
              <a href="https://youtu.be/0QD8mavnOC4" target="_blank"><img src="images/onlinelearning/m-6.png" class="img-responsive" alt="img"></a>
              <div class="journal-txt">
                <h4><a href="https://youtu.be/0QD8mavnOC4" target="_blank"><i class="ion-social-youtube"></i> การเขียน Flowchart</a></h4>
                <p class="separator"><font color="#b79f7e"><i class="ion-android-contact"></i> ครูโอ๋ <i class="ion-calendar"></i> 2 สิงหาคม 2564</font></p>
                <p class="separator">วิชาวิทยาการคำนวณ ม.4</p>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-6">
            <div class="journal-info">
              <a href="https://youtu.be/tfBjjtcxPx0" target="_blank"><img src="images/onlinelearning/m-5.png" class="img-responsive" alt="img"></a>
              <div class="journal-txt">
                <h4><a href="https://youtu.be/tfBjjtcxPx0" target="_blank"><i class="ion-social-youtube"></i> Word & Google doc</a></h4>
                <p class="separator"><font color="#b79f7e"><i class="ion-android-contact"></i> ครูโอ๋ <i class="ion-calendar"></i> 5 กรกฎาคม 2564</font></p>
                <p class="separator">วิชาโปรแกรมประยุกต์</p>
              </div>
            </div>
          </div>
          
          <div class="col-lg-4 col-md-6">
            <div class="journal-info">
              <a href="https://youtu.be/J6gNH2Zcrqw" target="_blank"><img src="images/onlinelearning/m-4.png" class="img-responsive" alt="img"></a>
              <div class="journal-txt">
                <h4><a href="https://youtu.be/J6gNH2Zcrqw" target="_blank"><i class="ion-social-youtube"></i> กลไก ไฟฟ้าและอิเล็กทรอนิกส์</a></h4>
                <p class="separator"><font color="#b79f7e"><i class="ion-android-contact"></i> ครูโอ๋ <i class="ion-calendar"></i> 11 มกราคม 2564</font></p>
                <p class="separator">วิชาเทคโนโลยี (การออกแบบและเทคโนโลยี)</p>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-6">
            <div class="journal-info">
              <a href="https://youtu.be/2uQ6kVA0_lM" target="_blank"><img src="images/onlinelearning/m-3.png" class="img-responsive" alt="img"></a>
              <div class="journal-txt">
                <h4><a href="https://youtu.be/2uQ6kVA0_lM" target="_blank"><i class="ion-social-youtube"></i> พีชคณิตบูลีน</a></h4>
                <p class="separator"><font color="#b79f7e"><i class="ion-android-contact"></i> ครูโอ๋ <i class="ion-calendar"></i> 6 มกราคม 2564</font></p>
                <p class="separator">วิชาคณิตศาสตร์คอมพิวเตอร์ ม.ปลาย</p>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-6">
            <div class="journal-info">
              <a href="https://youtu.be/5q-e9vy3upA" target="_blank"><img src="images/onlinelearning/M-2.PNG" class="img-responsive" alt="img"></a>
              <div class="journal-txt">
                <h4><a href="https://youtu.be/5q-e9vy3upA" target="_blank"><i class="ion-social-youtube"></i> การสร้างจดหมายเวียน (Mail merge)</a></h4>
                <p class="separator"><font color="#b79f7e"><i class="ion-android-contact"></i> ครูโอ๋ <i class="ion-calendar"></i> 1 กันยายน 2563</font></p>
                <p class="separator">วิชาโปรแกรมประยุกต์</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- End Online learning -->
  <!-- start sectoion contact -->
  <div id="contact" class="paddsection">
    <div class="container">
      <div class="contact-block1">
        <div class="row">
          <div class="col-lg-6">
            <div class="contact-contact">
              <h2 class="mb-30">GET IN TOUCH</h2>
              <ul class="contact-details">
                <li><span>71/263 Pruksaville 71, Sukhumvit Rd.</span></li>
                <li><span>Banglamung, Chonburi 20150</span></li>
                <li><span>Admin@suanchon.ac.th</span></li>
                <img src="images/oh-line.png" width="150" height="150">
              </ul>
            </div>
          </div>
          <div class="col-lg-6">
            <form action="" method="post" role="form" class="contactForm">
              <div class="row">
                <div id="sendmessage">Your message has been sent. Thank you!</div>
                <div id="errormessage"></div>
                <div class="col-lg-6">
                  <div class="form-group contact-block1">
                    <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
                    <div class="validation"></div>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="form-group">
                    <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
                    <div class="validation"></div>
                  </div>
                </div>
                <div class="col-lg-12">
                  <div class="form-group">
                    <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
                    <div class="validation"></div>
                  </div>
                </div>
                <div class="col-lg-12">
                  <div class="form-group">
                    <textarea class="form-control" name="message" rows="12" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
                    <div class="validation"></div>
                  </div>
                </div>
                <div class="col-lg-12">
                  <input type="submit" class="btn btn-defeault btn-send" value="Send message">
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- start sectoion contact -->
  <!-- start section footer -->
  <div id="footer" class="text-center">
    <div class="container">
      <div class="socials-media text-center">
        <ul class="list-unstyled">
          <li><a href="https://web.facebook.com/oh.thosaphorn" target="_blank"><i class="ion-social-facebook"></i></a></li>
          <li><a href="#"><i class="ion-social-twitter"></i></a></li>
          <li><a href="https://www.instagram.com/ohtsk" target="_blank"><i class="ion-social-instagram"></i></a></li>
          <li><a href="#"><i class="ion-social-googleplus"></i></a></li>
          <li><a href="#"><i class="ion-social-tumblr"></i></a></li>
          <li><a href="#"><i class="ion-social-dribbble"></i></a></li>
        </ul>
      </div>
      <p>© Copyrights Oh. All rights reserved.</p>
      <div class="credits">
      </div>
    </div>
  </div>
  <!-- End section footer -->
  <!-- JavaScript Libraries -->
  <script src="lib/jquery/jquery.min.js"></script>
  <script src="lib/jquery/jquery-migrate.min.js"></script>
  <script src="lib/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="lib/typed/typed.js"></script>
  <script src="lib/owlcarousel/owl.carousel.min.js"></script>
  <script src="lib/magnific-popup/magnific-popup.min.js"></script>
  <script src="lib/isotope/isotope.pkgd.min.js"></script>
  <!-- Contact Form JavaScript File -->
  <script src="contactform/contactform.js"></script>
  <!-- Template Main Javascript File -->
  <script src="js/main.js"></script>
  <script>
    $(document).ready(function() {
      $('.link-views').click(function() {
        
        var counter_file = $(this).attr("file-name");
        $.ajax({
          type: "POST",
          url: "counter_log.php",
          data: { counter_file_name: counter_file }
        }).done(function( msg ) {
          // alert( "Data Saved: " + msg );
        });
      });
    });
  </script>
</body>
</html>