File: /home/suanchonac/public_html/609/07427/iPortfolio/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>นายฐิติพันธุ์ ถินพรรณ์ เลขที่ 7</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Prompt:wght@500&display=swap" rel="stylesheet">
<style type="text/css">
body{
font-family: 'Prompt', sans-serif;
}
</style>
<!-- Vendor CSS Files -->
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="assets/css/style.css" rel="stylesheet">
</head>
<body>
<!-- ======= Mobile nav toggle button ======= -->
<i class="bi bi-list mobile-nav-toggle d-xl-none"></i>
<!-- ======= Header ======= -->
<header id="header">
<div class="d-flex flex-column">
<div class="profile">
<img src="assets/img/profile-img.jpg" alt="" class="img-fluid rounded-circle">
<h1 class="text-light"><a href="index.html">Thitipan Tinpan</a></h1>
<div class="social-links mt-3 text-center">
<a href="#" class="twitter"><i class="bx bxl-twitter"></i></a>
<a href="#" class="facebook"><i class="bx bxl-facebook"></i></a>
<a href="#" class="instagram"><i class="bx bxl-instagram"></i></a>
<a href="#" class="google-plus"><i class="bx bxl-skype"></i></a>
<a href="#" class="linkedin"><i class="bx bxl-linkedin"></i></a>
</div>
</div>
<nav id="navbar" class="nav-menu navbar">
<ul>
<li><a href="#hero" class="nav-link scrollto active"><i class="bx bx-home"></i> <span>Home</span></a></li>
<li><a href="#about" class="nav-link scrollto"><i class="bx bx-user"></i> <span>About</span></a></li>
<li><a href="#resume" class="nav-link scrollto"><i class="bx bx-file-blank"></i> <span>Resume</span></a></li>
<li><a href="#portfolio" class="nav-link scrollto"><i class="bx bx-book-content"></i> <span>Portfolio</span></a></li>
<li><a href="#services" class="nav-link scrollto"><i class="bx bx-server"></i> <span>Services</span></a></li>
<li><a href="#contact" class="nav-link scrollto"><i class="bx bx-envelope"></i> <span>Contact</span></a></li>
</ul>
</nav><!-- .nav-menu -->
</div>
</header><!-- End Header -->
<!-- ======= Hero Section ======= -->
<section id="hero" class="d-flex flex-column justify-content-center align-items-center">
<div class="hero-container" data-aos="fade-in">
<h1>Thitipan Tinpan</h1>
<p>I'm <span class="typed" data-typed-items="Musician, Composer, Pianist, snare drummer"></span></p>
</div>
</section><!-- End Hero -->
<main id="main">
<!-- ======= About Section ======= -->
<section id="about" class="about">
<div class="container">
<div class="section-title">
<h2>About</h2>
<p>I want to apply here because it is an institution that has art living here from here which is an institutional village where it is impossible to be challenged by music and art.</p>
</div>
<div class="row">
<div class="col-lg-4" data-aos="fade-right">
<img src="assets/img/profile-img.jpg" class="img-fluid" alt="">
</div>
<div class="col-lg-8 pt-4 pt-lg-0 content" data-aos="fade-left">
<h3>Composer & Musician</h3>
<p class="fst-italic">
</p>
<div class="row">
<div class="col-lg-6">
<ul>
<li><i class="bi bi-chevron-right"></i> <strong>Birthday:</strong> <span>21 Feb 2006</span></li>
<li><i class="bi bi-chevron-right"></i> <strong>Website:</strong> <span>www.example.com</span></li>
<li><i class="bi bi-chevron-right"></i> <strong>Phone:</strong> <span>080-3094461</span></li>
<li><i class="bi bi-chevron-right"></i> <strong>City:</strong> <span>chonburi,sriracha</span></li>
</ul>
</div>
<div class="col-lg-6">
<ul>
<li><i class="bi bi-chevron-right"></i> <strong>Age:</strong> <span>17</span></li>
<li><i class="bi bi-chevron-right"></i> <strong>Degree:</strong> <span>student</span></li>
<li><i class="bi bi-chevron-right"></i> <strong>PhEmailone:</strong> <span>solltinpan@gmail.com</span></li>
<li><i class="bi bi-chevron-right"></i> <strong>School:</strong> <span>Suankularb Wittayalai Chonburi School</span></li>
</ul>
</div>
</div>
<p>I am always ready to learn new things and able to work under high pressure and learn quickly.
and ready to adapt to various situations</p>
<p> </p>
</div>
</div>
</div>
</section><!-- End About Section -->
<!-- ======= Skills Section ======= -->
<section id="skills" class="skills section-bg">
<div class="container">
<div class="section-title">
<h2>Skills</h2>
<p>100-75 means well done 74-50 means moderate 49-25 means done but not very well </p>
</div>
<div class="row skills-content">
<div class="col-lg-6" data-aos="fade-up">
<div class="progress">
<span class="skill">Piano <i class="val">100%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress">
<span class="skill">Drum Set <i class="val">60%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress">
<span class="skill">Snare Drum <i class="val">75%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="col-lg-6" data-aos="fade-up" data-aos-delay="100">
<div class="progress">
<span class="skill">Bass <i class="val">40%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress">
<span class="skill">guitar <i class="val">50%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress">
<span class="skill">fl studio <i class="val">65%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
</section><!-- End Skills Section -->
<!-- ======= Resume Section ======= -->
<section id="resume" class="resume">
<div class="container">
<div class="section-title">
<h2>Resume</h2>
<p>I am always ready to learn new things and able to work under high pressure and learn quickly. and ready to adapt to various situations.</p>
</div>
<div class="row">
<div class="col-lg-6" data-aos="fade-up">
<h3 class="resume-title">สรุป </h3>
<div class="resume-item pb-0">
<h4>นาย ฐิติพันธุ์ ถินพรรณ์ </h4>
<p><em>เกิดและโตที่ชลบุรี </em></p>
<ul>
<li>203/7 หมู่3 ต.บึง อ.ศรีราชา จ.ชลบุรี </li>
<li>0803094461 </li>
<li>solltinpan@gmail.com</li>
</ul>
</div>
<h3 class="resume-title">การศึกษา </h3>
<div class="resume-item">
<h4>ประธมศึกษา </h4>
<h5>2554 - 2559</h5>
<p>สำเร็จการศึษาระดับประธมต้นและประธมปลายที่โรงเรียนมารีวิทย์บ่อวิน</p>
</div>
<div class="resume-item">
<h4>มัธยมศึกษา</h4>
<h5>2560 - 2566</h5>
<p>สำเร็จการศึกษาชั้นมัธยมต้นที่โรงเรียนสวนกุหลาบวิทยาลัยชลบุรีกำลังศึกษาระดับชั้นมัธยมปลายที่โรงเรียนสวนกุหลาบวิทยาลับชลบุรี</p>
</div>
</div>
<div class="col-lg-6" data-aos="fade-up" data-aos-delay="100">
<h3 class="resume-title">ประสบการณ์ </h3>
<div class="resume-item">
<h4>ผลงาน 2022-2023</h4>
<p><em> </em></p>
<ul>
<li>รองชนะเลิศอันดับ2 ดนตรี กวี ศิลป์ 2565 </li>
<li>งาน อวดดี รองชนะเลิศอันดับ2 </li>
<li>Kitanut Music Contest 2022 รองชนะเลิศอันดับ2 </li>
<li>MPR Music Contest 10 รองชนะเลิศอันดับสอง </li>
<li>PATTAYA MUSIC CONTEST รองชนะเลิศอันดับ1</li>
<li>KERATY ชนะเลิศอันับที่1</li>
<li>เข้ารอบ10วง RSU 20</li>
<li>งานต่อต้านยาเสพติดวัดราษฎร์นิยมธรรม รองชนะเลิศอันดับ2 </li>
<li>เล่นเปิดวง Big Ass</li>
<li>เล่นเปิดวง Lipta</li>
<li>เล่นเปิดวง only monday</li>
<li>เล่นเปิดวง loserpop</li>
</ul>
</div>
</div>
</div>
</div>
</section><!-- End Resume Section -->
<!-- ======= Portfolio Section ======= -->
<section id="portfolio" class="portfolio section-bg">
<div class="container">
<div class="section-title">
<h2>Portfolio</h2>
<p>เหตุผลที่อยากเข้าดุริยางสาขาดนตรีแจ๊ส เพราะมีความหลงไหลในดนตรีแจ๊สจากอาจารย์ที่โรงเรียน
ความหลงใหลนั้นทำให้ผมอยากหาสถานที่ที่สามารถหาความรู้มาพัฒนาตนเอง และ สามารถนำความรู้ที่ได้นั้นสร้างสรรค์ผลงานออกมา
จึงได้เลือกที่จะเข้ามหาวิทยาลัยศิลปากรแห่งนี้นั้นเอง</p>
</div>
<div class="row" data-aos="fade-up">
<div class="col-lg-12 d-flex justify-content-center">
<ul id="portfolio-flters">
<li data-filter="*" class="filter-active">รางวัลทั้งหมด </li>
<li data-filter=".filter-app">รางวัลที่ภาคภูมิใจ</li>
</ul>
</div>
</div>
<div class="row portfolio-container" data-aos="fade-up" data-aos-delay="100">
<div class="col-lg-4 col-md-6 portfolio-item filter-app">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-1.jpg" class="img-fluid" alt="">
<div class="portfolio-links">
<a href="assets/img/portfolio/portfolio-1.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="App 1"><i class="bx bx-plus"></i></a>
<a href="portfolio-details.html" title="More Details"><i class="bx bx-link"></i></a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-web">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-2.jpg" class="img-fluid" alt="">
<div class="portfolio-links">
<a href="assets/img/portfolio/portfolio-2.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="Web 3"><i class="bx bx-plus"></i></a>
<a href="portfolio-details.html" title="More Details"><i class="bx bx-link"></i></a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-app">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-3.jpg" class="img-fluid" alt="">
<div class="portfolio-links">
<a href="assets/img/portfolio/portfolio-3.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="App 2"><i class="bx bx-plus"></i></a>
<a href="portfolio-details.html" title="More Details"><i class="bx bx-link"></i></a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-card">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-4.jpg" class="img-fluid" alt="">
<div class="portfolio-links">
<a href="assets/img/portfolio/portfolio-4.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="Card 2"><i class="bx bx-plus"></i></a>
<a href="portfolio-details.html" title="More Details"><i class="bx bx-link"></i></a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-web">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-5.jpg" class="img-fluid" alt="">
<div class="portfolio-links">
<a href="assets/img/portfolio/portfolio-5.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="Web 2"><i class="bx bx-plus"></i></a>
<a href="portfolio-details.html" title="More Details"><i class="bx bx-link"></i></a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-app">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-6.jpg" class="img-fluid" alt="">
<div class="portfolio-links">
<a href="assets/img/portfolio/portfolio-6.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="App 3"><i class="bx bx-plus"></i></a>
<a href="portfolio-details.html" title="More Details"><i class="bx bx-link"></i></a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-card">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-7.jpg" class="img-fluid" alt="">
<div class="portfolio-links">
<a href="assets/img/portfolio/portfolio-7.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="Card 1"><i class="bx bx-plus"></i></a>
<a href="portfolio-details.html" title="More Details"><i class="bx bx-link"></i></a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-card">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-8.jpg" class="img-fluid" alt="">
<div class="portfolio-links">
<a href="assets/img/portfolio/portfolio-8.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="Card 3"><i class="bx bx-plus"></i></a>
<a href="portfolio-details.html" title="More Details"><i class="bx bx-link"></i></a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-web">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-9.jpg" class="img-fluid" alt="">
<div class="portfolio-links">
<a href="assets/img/portfolio/portfolio-9.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="Web 3"><i class="bx bx-plus"></i></a>
<a href="portfolio-details.html" title="More Details"><i class="bx bx-link"></i></a>
</div>
</div>
</div>
</div>
</div>
</section><!-- End Portfolio Section -->
<!-- ======= Testimonials Section ======= -->
<section id="testimonials" class="testimonials section-bg">
<div class="container">
<div class="section-title">
<h2>Testimonials</h2>
<p>.</p>
</div>
<div class="testimonials-slider swiper" data-aos="fade-up" data-aos-delay="100">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="testimonial-item" data-aos="fade-up">
<p>
<i class="bx bxs-quote-alt-left quote-icon-left"></i>
ฐิติพันธ์ุ ถินพรรณ์ (ซอล 609) ซอลเป็นนักเรียนที่หมั่นฝึกฝน และพัฒนาตนเองอยู่เสมอ เป็นเด็กที่ขยันเรียนรู้ อารมณ์ดี และเป็นกันเองกับทุกคนเสมอ ในฐานะที่เป็นครูแผนการเรียนศิลปกรรม สวนกุหลาบวิทยาลัย ชลบุรี รู้สึกภูมิใจที่ซอลปฏิบัติตนเป็นคนดี มีวินัย และภูมิใจในความเป็นตัวเองเสมอ
<i class="bx bxs-quote-alt-right quote-icon-right"></i>
</p>
<img src="assets/img/testimonials/testimonials-1.jpg" class="testimonial-img" alt="">
<h3>Napon Jansanguan</h3>
<h4>Thai Music Teacher</h4>
</div>
</div><!-- End testimonial item -->
<div class="swiper-slide">
<div class="testimonial-item" data-aos="fade-up" data-aos-delay="100">
<p>
<i class="bx bxs-quote-alt-left quote-icon-left"></i>นายฐิติพันธุ์ ฐินพรรณ์ นักเรียนชั้นมัธยมศึกษาปีที่ 609 โรงเรียนสวนกุหลาบวิทยาลัย ชลบุรี ว่าเป็นนักเรียนที่มีความประพฤติเรียบร้อย มีความอ่อนน้อมถ่อมตน มีวินัย รับผิดชอบในการเรียนเป็นอย่างดี และมีความสามารถทางด้านดนตรีสากล ด้านการปฏิบัติเครื่องดนตรี เปียโนและคีย์บอร์ด สามารถบรรเลงได้เป็นอย่างดี
<i class="bx bxs-quote-alt-right quote-icon-right"></i>
</p>
<img src="assets/img/testimonials/testimonials-2.jpg" class="testimonial-img" alt="">
<h3>Pratan Sraploy</h3>
<h4>Music Teacher</h4>
</div>
</div><!-- End testimonial item -->
<div class="swiper-slide">
<div class="testimonial-item" data-aos="fade-up" data-aos-delay="200">
<p>
<i class="bx bxs-quote-alt-left quote-icon-left"></i><font size="-2">
นายฐิติพันธุ์ ถินพรรณ์ นักเรียนชั้นมัธยมศึกษาปีที่ 6 ห้อง 609 แผนการเรียนศิลปกรรม โรงเรียนสวนกุหลาบวิทยาลัย ชลบุรี เป็นผู้ที่มีความรู้ ความสามารถทางด้านของวิชาการ และด้านกิจกรรม มีความเอาใจใส่ในด้านของการเรียน ขยันหมั่นเพียร ใฝ่รู้ใฝ่เรียนมีความรับผิดชอบในงานที่ได้รับมอบหมาย อีกทั้งยังคอยช่วยเหลือกิจกรรมของโรงเรียนอย่างสม่ำเสมอ จนเป็นที่ยอมรับของอาจารย์และเพื่อน ๆ น้อง ๆ และมีความโดดเด่นทางด้านการเรียนเป็นอย่างมากถึงแม้จะมีหน้าที่ในการปฏิบัติกิจกรรมทางด้านดนตรีสากล (เครื่องดนตรีเอกเปียโน) ให้กับโรงเรียนอย่างสม่ำเสมอ แต่ก็ไม่เคยทิ้งในเรื่องของการเรียนในรายวิชาอื่น ๆ และยังเป็นเด็กนักเรียนที่มีมนุษย์สัมพันธ์ดี มีจิตใจโอบอ้อมอารี เอื้ออาทรต่อผู้อื่น เป็นที่รักใคร่ของอาจารย์และบุคคลใกล้ชิดตลอดมา</font>
<i class="bx bxs-quote-alt-right quote-icon-right"></i>
</p>
<img src="assets/img/testimonials/testimonials-3.jpg" class="testimonial-img" alt="">
<h3>KruEye Kittiyayam</h3>
<h4>Music Teacher</h4>
</div>
</div><!-- End testimonial item -->
<div class="swiper-slide">
<div class="testimonial-item" data-aos="fade-up" data-aos-delay="300">
<p>
<i class="bx bxs-quote-alt-left quote-icon-left"></i>
นายฐิติพันธ์ ถินพรรณ์ (ซอล)
นักเรียนชั้นมัธยมศึกษาปีที่ 609
โรงเรียนสวนกุหลาบวิทยาลัยชลบุรีเป็นนักเรียนที่มีเกียรติมีศักดิ์ศรีมีความน่ายกย่องในด้านต่างๆเป็นนักเรียนที่ร่าเริงแจ่มใสมีมารยาทที่ดีวางตัวเหมาะสมมีความขยันตั้งใจเรียนทำงานเป็นระบบรอบคอบมีระเบียบวินัยรับผิดชอบในงานที่ได้รับมอบหมาย
นักเรียนได้รับปฎิบัติหน้าที่ในด้านต่างๆที่โรงเรียนจัดกิจกรรมนักเรียนสามารถทำได้อย่างเต็มที่เต็มความสามารถ
เป็นที่รักของครูและเพื่อนเพื่อนตลอดจนรุ่นน้องในโรงเรียน
<i class="bx bxs-quote-alt-right quote-icon-right"></i>
</p>
<img src="assets/img/testimonials/testimonials-4.jpg" class="testimonial-img" alt="">
<h3>Chanon poontawee</h3>
<h4>
Artist</h4>
</div>
</div><!-- End testimonial item -->
<div class="swiper-slide">
<div class="testimonial-item" data-aos="fade-up" data-aos-delay="400">
<p>
<i class="bx bxs-quote-alt-left quote-icon-left"></i>
นาย ฐิติพันธุ์ ถินพรรณ์ เรียกสนิทกัน ซอลลี่😊
ในฐานนักดนตรี เป็นเด็กที่ชอบสร้างสรรค์เสียงอันไพเราะ ชอบเรียนรู้ และมีความพร้อมที่จะรับมือกับสถานการณ์ได้ดี มีไหวพริบ กล้าแสดงออก และรู้จักวางตัว และรู้ตนเองเสมอเวลาทำสิ่งใด เป็นคนชัดเจน ทั้งการแสดงออก และแสดงความรู้สึกได้เหมาะสมเป็นอย่างดี ความดีใจในฐานะครูผู้สอน ดีใจที่เขาเป็นเด็กดี และพร้อมเปิดรับการเรียนรู้ใหม่ๆ เสมอ♥️
<i class="bx bxs-quote-alt-right quote-icon-right"></i>
</p>
<img src="assets/img/testimonials/testimonials-5.jpg" class="testimonial-img" alt="">
<h3>Mrs.Sirichan. Nammomtri</h3>
<h4>Entrepreneur</h4>
</div>
</div><!-- End testimonial item -->
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</section><!-- End Testimonials Section -->
<!-- ======= Contact Section ======= -->
<section id="contact" class="contact">
<div class="container">
<div class="section-title">
<h2>Contact</h2>
<p></p>
</div>
<div class="row" data-aos="fade-in">
<div class="col-lg-5 d-flex align-items-stretch">
<div class="info">
<div class="address">
<i class="bi bi-geo-alt"></i>
<h4>Location:</h4>
<p> 203/7 หมู่3 ตำบล บึง อำเภอ ศรีราชา จังหวัด ชลบุรี</p>
<p> </p>
</div>
<div class="email">
<i class="bi bi-envelope"></i>
<h4>Email:</h4>
<p>solltinpan@gmail.com</p>
</div>
<div class="phone">
<i class="bi bi-phone"></i>
<h4>Call:</h4>
<p>0803094461 </p>
</div>
<iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d2748.0182407179122!2d100.96275196788304!3d13.08113672747891!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1zMjAzLzfguKvguKHguLnguYggMyDguJXguLPguJrguKUg4Lia4Li24LiHIOC4reC4s-C5gOC4oOC4reC4qOC4o-C4teC4o-C4suC4iuC4siDguIrguKXguJrguLjguKPguLU!5e0!3m2!1sth!2sth!4v1693366513832!5m2!1sth!2sth" width="100%" height="290px;" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
<div class="col-lg-7 mt-5 mt-lg-0 d-flex align-items-stretch">
<form action="forms/contact.php" method="post" role="form" class="php-email-form">
<div class="row">
<div class="form-group col-md-6">
<label for="name">Your Name</label>
<input type="text" name="name" class="form-control" id="name" required>
</div>
<div class="form-group col-md-6">
<label for="name">Your Email</label>
<input type="email" class="form-control" name="email" id="email" required>
</div>
</div>
<div class="form-group">
<label for="name">Subject</label>
<input type="text" class="form-control" name="subject" id="subject" required>
</div>
<div class="form-group">
<label for="name">Message</label>
<textarea class="form-control" name="message" rows="10" required></textarea>
</div>
<div class="my-3">
<div class="loading">Loading</div>
<div class="error-message"></div>
<div class="sent-message">Your message has been sent. Thank you!</div>
</div>
<div class="text-center"><button type="submit">Send Message</button></div>
</form>
</div>
</div>
</div>
</section><!-- End Contact Section -->
</main><!-- End #main -->
<!-- ======= Footer ======= -->
<footer id="footer">
<div class="container">
<div class="copyright">
© Copyright <strong><span>Thitipan Tinpan</span></strong>
</div>
<div class="credits">
<!-- All the links in the footer should remain intact. -->
<!-- You can delete the links only if you purchased the pro version. -->
<!-- Licensing information: https://bootstrapmade.com/license/ -->
<!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/iportfolio-bootstrap-portfolio-websites-template/ -->
Designed by Thitipan Tinpan <a href="https://bootstrapmade.com/"> </a>
</div>
</div>
</footer><!-- End Footer -->
<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
<!-- Vendor JS Files -->
<script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
<script src="assets/vendor/aos/aos.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="assets/vendor/typed.js/typed.umd.js"></script>
<script src="assets/vendor/waypoints/noframework.waypoints.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<!-- Template Main JS File -->
<script src="assets/js/main.js"></script>
</body>
</html>