File manager - Edit - /home/webapp68.cm.in.th/u68319090021/Folio/index.html
Back
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0" name="viewport"> <title>Sawasskorn Buntha</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"> <!-- Fonts --> <link href="https://fonts.googleapis.com" rel="preconnect"> <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> <!-- Vendor CSS Files --> <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/aos/aos.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"> <!-- Main CSS File --> <link href="assets/css/main.css" rel="stylesheet"> <!-- ======================================================= * Template Name: iPortfolio * Template URL: https://bootstrapmade.com/iportfolio-bootstrap-portfolio-websites-template/ * Updated: Jun 29 2024 with Bootstrap v5.3.3 * Author: BootstrapMade.com * License: https://bootstrapmade.com/license/ ======================================================== --> </head> <body class="index-page"> <header id="header" class="header dark-background d-flex flex-column"> <i class="header-toggle d-xl-none bi bi-list"></i> <div class="profile-img"> <img src="assets/img/my-profile-img.jpg" alt="" class="img-fluid rounded-circle"> </div> <a href="index.html" class="logo d-flex align-items-center justify-content-center"> <!-- Uncomment the line below if you also wish to use an image logo --> <!-- <img src="assets/img/logo.png" alt=""> --> <h1 class="sitename">Sawasskorn Buntha</h1> </a> <div class="social-links text-center"> <a href="#" class="twitter"><i class="bi bi-twitter-x"></i></a> <a href="#" class="facebook"><i class="bi bi-facebook"></i></a> <a href="#" class="instagram"><i class="bi bi-instagram"></i></a> <a href="#" class="google-plus"><i class="bi bi-skype"></i></a> <a href="#" class="linkedin"><i class="bi bi-linkedin"></i></a> </div> <nav id="navmenu" class="navmenu"> <ul> <li><a href="#hero" class="active"><i class="bi bi-house navicon"></i>Home</a></li> <li><a href="#about"><i class="bi bi-person navicon"></i> About</a></li> <li><a href="#resume"><i class="bi bi-file-earmark-text navicon"></i> Resume</a></li> <li><a href="#portfolio"><i class="bi bi-images navicon"></i> Portfolio</a></li> <li><a href="#services"><i class="bi bi-hdd-stack navicon"></i> Services</a></li> <li class="dropdown"><a href="#"><i class="bi bi-menu-button navicon"></i> <span>Dropdown</span> <i class="bi bi-chevron-down toggle-dropdown"></i></a> <ul> <li><a href="#">Dropdown 1</a></li> <li class="dropdown"><a href="#"><span>Deep Dropdown</span> <i class="bi bi-chevron-down toggle-dropdown"></i></a> <ul> <li><a href="#">Deep Dropdown 1</a></li> <li><a href="#">Deep Dropdown 2</a></li> <li><a href="#">Deep Dropdown 3</a></li> <li><a href="#">Deep Dropdown 4</a></li> <li><a href="#">Deep Dropdown 5</a></li> </ul> </li> <li><a href="#">Dropdown 2</a></li> <li><a href="#">Dropdown 3</a></li> <li><a href="#">Dropdown 4</a></li> </ul> </li> <li><a href="#contact"><i class="bi bi-envelope navicon"></i> Contact</a></li> </ul> </nav> </header> <main class="main"> <!-- Hero Section --> <section id="hero" class="hero section dark-background"> <img src="assets/img/hero-bg.jpg" alt="" data-aos="fade-in" class=""> <div class="container" data-aos="fade-up" data-aos-delay="100"> <h2>Sawasskorn Buntha</h2> <p>I'm <span class="typed" data-typed-items="Designer, Developer, Freelancer, Photographer">Designer</span><span class="typed-cursor typed-cursor--blink" aria-hidden="true"></span><span class="typed-cursor typed-cursor--blink" aria-hidden="true"></span></p> </div> </section><!-- /Hero Section --> <!-- About Section --> <section id="about" class="about section"> <!-- Section Title --> <div class="container section-title" data-aos="fade-up"> <div class="row gy-4 justify-content-center"> <div class="col-lg-4"> <img src="assets/img/my-profile-img.jpg" class="img-fluid" alt=""> </div> <div class="col-lg-8 content"> <div class="row"> <div class="col-lg-6"> <ul> <li><i class="bi bi-chevron-right"></i> <strong>Birthday:</strong> <span>15 September 2004</span></li> <li><i class="bi bi-chevron-right"></i> <strong>Phone:</strong> <span>+669 5927 1588</span></li> <li><i class="bi bi-chevron-right"></i> <strong>City:</strong> <span>New York, USA</span></li> </ul> </div> <div class="col-lg-6"> <ul> <li><i class="bi bi-chevron-right"></i> <strong>Age:</strong> <span>20</span></li> <li><i class="bi bi-chevron-right"></i> <strong>Email:</strong> <span>kafilde66@example.com</span></li> <li><i class="bi bi-chevron-right"></i> <strong>Freelance:</strong> <span>Available</span></li> </ul> </div> </div> </div> </div> </div> </section><!-- /About Section --> <!-- Stats Section --> <section id="stats" class="stats section"> <div class="container" data-aos="fade-up" data-aos-delay="100"> <div class="row gy-4"> <div class="col-lg-3 col-md-6"> <div class="stats-item"> <i class="bi bi-emoji-smile"></i> <span data-purecounter-start="0" data-purecounter-end="232" data-purecounter-duration="1" class="purecounter"></span> <p><strong>Happy Clients</strong> <span>consequuntur quae</span></p> </div> </div><!-- End Stats Item --> <div class="col-lg-3 col-md-6"> <div class="stats-item"> <i class="bi bi-journal-richtext"></i> <span data-purecounter-start="0" data-purecounter-end="521" data-purecounter-duration="1" class="purecounter"></span> <p><strong>Projects</strong> <span>adipisci atque cum quia aut</span></p> </div> </div><!-- End Stats Item --> <div class="col-lg-3 col-md-6"> <div class="stats-item"> <i class="bi bi-headset"></i> <span data-purecounter-start="0" data-purecounter-end="1453" data-purecounter-duration="1" class="purecounter"></span> <p><strong>Hours Of Support</strong> <span>aut commodi quaerat</span></p> </div> </div><!-- End Stats Item --> <div class="col-lg-3 col-md-6"> <div class="stats-item"> <i class="bi bi-people"></i> <span data-purecounter-start="0" data-purecounter-end="32" data-purecounter-duration="1" class="purecounter"></span> <p><strong>Hard Workers</strong> <span>rerum asperiores dolor</span></p> </div> </div><!-- End Stats Item --> </div> </div> </section><!-- /Stats Section --> <!-- Skills Section --> <section id="skills" class="skills section light-background"> <!-- Section Title --> <div class="container section-title" data-aos="fade-up"> <h2>Skills</h2> </div><!-- End Section Title --> <div class="container" data-aos="fade-up" data-aos-delay="100"> <div class="row skills-content skills-animation"> <div class="col-lg-6"> <div class="progress"> <span class="skill"><span>HTML</span> <i class="val">2%</i></span> <div class="progress-bar-wrap"> <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100"></div> </div> </div><!-- End Skills Item --> <div class="progress"> <span class="skill"><span>CSS</span> <i class="val">5%</i></span> <div class="progress-bar-wrap"> <div class="progress-bar" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100"></div> </div> </div><!-- End Skills Item --> <div class="progress"> <span class="skill"><span>JavaScript</span> <i class="val">5%</i></span> <div class="progress-bar-wrap"> <div class="progress-bar" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100"></div> </div> </div><!-- End Skills Item --> </div> <div class="col-lg-6"> <div class="progress"> <span class="skill"><span>PHP</span> <i class="val">8%</i></span> <div class="progress-bar-wrap"> <div class="progress-bar" role="progressbar" aria-valuenow="8" aria-valuemin="0" aria-valuemax="100"></div> </div> </div><!-- End Skills Item --> <div class="progress"> <span class="skill"><span>WordPress/CMS</span> <i class="val">9%</i></span> <div class="progress-bar-wrap"> <div class="progress-bar" role="progressbar" aria-valuenow="9" aria-valuemin="0" aria-valuemax="100"></div> </div> </div><!-- End Skills Item --> <div class="progress"> <span class="skill"><span>Photoshop</span> <i class="val">15%</i></span> <div class="progress-bar-wrap"> <div class="progress-bar" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div> </div> </div><!-- End Skills Item --> </div> </div> </div> </section><!-- /Skills Section --> <!-- Resume Section --> <section id="resume" class="resume section"> </section><!-- /Resume Section --> <!-- Portfolio Section --> <section id="portfolio" class="portfolio section light-background"> <!-- Section Title --> <div class="container section-title" data-aos="fade-up"> </div><!-- End Section Title --> <div class="container"> <div class="isotope-layout" data-default-filter="*" data-layout="masonry" data-sort="original-order"> <ul class="portfolio-filters isotope-filters" data-aos="fade-up" data-aos-delay="100"> <li data-filter="*" class="filter-active">All</li> <li data-filter=".filter-app">App</li> <li data-filter=".filter-product">Product</li> <li data-filter=".filter-branding">Branding</li> <li data-filter=".filter-books">Books</li> </ul><!-- End Portfolio Filters --> <div class="row gy-4 isotope-container" data-aos="fade-up" data-aos-delay="200"> <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-app"> <div class="portfolio-content h-100"> <img src="assets/img/portfolio/app-1.jpg" class="img-fluid" alt=""> <div class="portfolio-info"> <h4>App 1</h4> <p>Lorem ipsum, dolor sit amet consectetur</p> <a href="assets/img/portfolio/app-1.jpg" title="App 1" data-gallery="portfolio-gallery-app" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a> <a href="portfolio-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a> </div> </div> </div><!-- End Portfolio Item --> <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-product"> <div class="portfolio-content h-100"> <img src="assets/img/portfolio/product-1.jpg" class="img-fluid" alt=""> <div class="portfolio-info"> <h4>Product 1</h4> <p>Lorem ipsum, dolor sit amet consectetur</p> <a href="assets/img/portfolio/product-1.jpg" title="Product 1" data-gallery="portfolio-gallery-product" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a> <a href="portfolio-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a> </div> </div> </div><!-- End Portfolio Item --> <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-branding"> <div class="portfolio-content h-100"> <img src="assets/img/portfolio/branding-1.jpg" class="img-fluid" alt=""> <div class="portfolio-info"> <h4>Branding 1</h4> <p>Lorem ipsum, dolor sit amet consectetur</p> <a href="assets/img/portfolio/branding-1.jpg" title="Branding 1" data-gallery="portfolio-gallery-branding" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a> <a href="portfolio-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a> </div> </div> </div><!-- End Portfolio Item --> <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-books"> <div class="portfolio-content h-100"> <img src="assets/img/portfolio/books-1.jpg" class="img-fluid" alt=""> <div class="portfolio-info"> <h4>Books 1</h4> <p>Lorem ipsum, dolor sit amet consectetur</p> <a href="assets/img/portfolio/books-1.jpg" title="Branding 1" data-gallery="portfolio-gallery-book" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a> <a href="portfolio-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a> </div> </div> </div><!-- End Portfolio Item --> <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-app"> <div class="portfolio-content h-100"> <img src="assets/img/portfolio/app-2.jpg" class="img-fluid" alt=""> <div class="portfolio-info"> <h4>App 2</h4> <p>Lorem ipsum, dolor sit amet consectetur</p> <a href="assets/img/portfolio/app-2.jpg" title="App 2" data-gallery="portfolio-gallery-app" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a> <a href="portfolio-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a> </div> </div> </div><!-- End Portfolio Item --> <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-product"> <div class="portfolio-content h-100"> <img src="assets/img/portfolio/product-2.jpg" class="img-fluid" alt=""> <div class="portfolio-info"> <h4>Product 2</h4> <p>Lorem ipsum, dolor sit amet consectetur</p> <a href="assets/img/portfolio/product-2.jpg" title="Product 2" data-gallery="portfolio-gallery-product" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a> <a href="portfolio-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a> </div> </div> </div><!-- End Portfolio Item --> <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-branding"> <div class="portfolio-content h-100"> <img src="assets/img/portfolio/branding-2.jpg" class="img-fluid" alt=""> <div class="portfolio-info"> <h4>Branding 2</h4> <p>Lorem ipsum, dolor sit amet consectetur</p> <a href="assets/img/portfolio/branding-2.jpg" title="Branding 2" data-gallery="portfolio-gallery-branding" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a> <a href="portfolio-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a> </div> </div> </div><!-- End Portfolio Item --> <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-books"> <div class="portfolio-content h-100"> <img src="assets/img/portfolio/books-2.jpg" class="img-fluid" alt=""> <div class="portfolio-info"> <h4>Books 2</h4> <p>Lorem ipsum, dolor sit amet consectetur</p> <a href="assets/img/portfolio/books-2.jpg" title="Branding 2" data-gallery="portfolio-gallery-book" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a> <a href="portfolio-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a> </div> </div> </div><!-- End Portfolio Item --> <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-app"> <div class="portfolio-content h-100"> <img src="assets/img/portfolio/app-3.jpg" class="img-fluid" alt=""> <div class="portfolio-info"> <h4>App 3</h4> <p>Lorem ipsum, dolor sit amet consectetur</p> <a href="assets/img/portfolio/app-3.jpg" title="App 3" data-gallery="portfolio-gallery-app" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a> <a href="portfolio-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a> </div> </div> </div><!-- End Portfolio Item --> <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-product"> <div class="portfolio-content h-100"> <img src="assets/img/portfolio/product-3.jpg" class="img-fluid" alt=""> <div class="portfolio-info"> <h4>Product 3</h4> <p>Lorem ipsum, dolor sit amet consectetur</p> <a href="assets/img/portfolio/product-3.jpg" title="Product 3" data-gallery="portfolio-gallery-product" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a> <a href="portfolio-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a> </div> </div> </div><!-- End Portfolio Item --> <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-branding"> <div class="portfolio-content h-100"> <img src="assets/img/portfolio/branding-3.jpg" class="img-fluid" alt=""> <div class="portfolio-info"> <h4>Branding 3</h4> <p>Lorem ipsum, dolor sit amet consectetur</p> <a href="assets/img/portfolio/branding-3.jpg" title="Branding 2" data-gallery="portfolio-gallery-branding" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a> <a href="portfolio-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a> </div> </div> </div><!-- End Portfolio Item --> <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-books"> <div class="portfolio-content h-100"> <img src="assets/img/portfolio/books-3.jpg" class="img-fluid" alt=""> <div class="portfolio-info"> <h4>Books 3</h4> <p>Lorem ipsum, dolor sit amet consectetur</p> <a href="assets/img/portfolio/books-3.jpg" title="Branding 3" data-gallery="portfolio-gallery-book" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a> <a href="portfolio-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a> </div> </div> </div><!-- End Portfolio Item --> </div><!-- End Portfolio Container --> </div> </div> </section><!-- /Portfolio Section --> <!-- Services Section --> <section id="services" class="services section"> <!-- Section Title --> <div class="container section-title" data-aos="fade-up"> </div><!-- End Section Title --> <div class="container"> <div class="row gy-4"> </div> </section><!-- /Services Section --> <!-- Testimonials Section --> <section id="testimonials" class="testimonials section light-background"> <!-- Section Title --> <div class="container section-title" data-aos="fade-up"> <h2>Testimonials</h2> </div><!-- End Section Title --> <div class="container" data-aos="fade-up" data-aos-delay="100"> <div class="swiper init-swiper"> <script type="application/json" class="swiper-config"> { "loop": true, "speed": 600, "autoplay": { "delay": 5000 }, "slidesPerView": "auto", "pagination": { "el": ".swiper-pagination", "type": "bullets", "clickable": true }, "breakpoints": { "320": { "slidesPerView": 1, "spaceBetween": 40 }, "1200": { "slidesPerView": 3, "spaceBetween": 1 } } } </script> </section><!-- /Testimonials Section --> <!-- Contact Section --> <section id="contact" class="contact section"> <!-- Section Title --> <div class="container section-title" data-aos="fade-up"> <h2>Contact</h2> </div><!-- End Section Title --> <div class="container" data-aos="fade-up" data-aos-delay="100"> <div class="row gy-4"> <div class="col-lg-5"> <div class="info-wrap"> <div class="info-item d-flex" data-aos="fade-up" data-aos-delay="200"> <i class="bi bi-geo-alt flex-shrink-0"></i> <div> <h3>Address</h3> <p> House 2, Village No. 2, Hang Dong Subdistrict, Hot District, Chiang Mai Province</p> </div> </div><!-- End Info Item --> <div class="info-item d-flex" data-aos="fade-up" data-aos-delay="300"> <i class="bi bi-telephone flex-shrink-0"></i> <div> <h3>Call Us</h3> <p>095-927-1588</p> </div> </div><!-- End Info Item --> <div class="info-item d-flex" data-aos="fade-up" data-aos-delay="400"> <i class="bi bi-envelope flex-shrink-0"></i> <div> <h3>Email Us</h3> <p>kafilde@gmail.com</p> </div> </div><!-- End Info Item --> <iframe src="https://maps.app.goo.gl/BxJPWQpkUxNXPGce9"></iframe> </div> </div> <div class="col-lg-7"> <form action="forms/contact.php" method="post" class="php-email-form" data-aos="fade-up" data-aos-delay="200"> <div class="row gy-4"> <div class="col-md-6"> <label for="name-field" class="pb-2">Your Name</label> <input type="text" name="name" id="name-field" class="form-control" required=""> </div> <div class="col-md-6"> <label for="email-field" class="pb-2">Your Email</label> <input type="email" class="form-control" name="email" id="email-field" required=""> </div> <div class="col-md-12"> <label for="subject-field" class="pb-2">Subject</label> <input type="text" class="form-control" name="subject" id="subject-field" required=""> </div> <div class="col-md-12"> <label for="message-field" class="pb-2">Message</label> <textarea class="form-control" name="message" rows="10" id="message-field" required=""></textarea> </div> <div class="col-md-12 text-center"> <div class="loading">Loading</div> <div class="error-message"></div> <div class="sent-message">Your message has been sent. Thank you!</div> <button type="submit">Send Message</button> </div> </div> </form> </div><!-- End Contact Form --> </div> </div> </section><!-- /Contact Section --> </main> <footer id="footer" class="footer position-relative light-background"> <div class="container"> <div class="copyright text-center "> <p>© <span>Copyright</span> <strong class="px-1 sitename">iPortfolio</strong> <span>All Rights Reserved</span></p> </div> <div class="credits"> <!-- All the links in the footer should remain intact. --> <!-- You can delete the links only if you've purchased the pro version. --> <!-- Licensing information: https://bootstrapmade.com/license/ --> <!-- Purchase the pro version with working PHP/AJAX contact form: [buy-url] --> Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a> Distributed by <a href="https://themewagon.com">ThemeWagon</a> </div> </div> </footer> <!-- Scroll Top --> <a href="#" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a> <!-- Preloader --> <div id="preloader"></div> <!-- Vendor JS Files --> <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="assets/vendor/php-email-form/validate.js"></script> <script src="assets/vendor/aos/aos.js"></script> <script src="assets/vendor/typed.js/typed.umd.js"></script> <script src="assets/vendor/purecounter/purecounter_vanilla.js"></script> <script src="assets/vendor/waypoints/noframework.waypoints.js"></script> <script src="assets/vendor/glightbox/js/glightbox.min.js"></script> <script src="assets/vendor/imagesloaded/imagesloaded.pkgd.min.js"></script> <script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script> <script src="assets/vendor/swiper/swiper-bundle.min.js"></script> <!-- Main JS File --> <script src="assets/js/main.js"></script> </body> </html>
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.4 |
proxy
|
phpinfo
|
Settings