<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content="คอลัมน์ลองอ่านดู ฉบับ e-book"> <meta name="author" content="รศ.วิไลวรรณ ทองประยูร"> <title>คอลัมน์ลองอ่านดู ฉบับ e-book</title> <!-- Bootstrap Core CSS --> <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom Fonts --> <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css"> <link href="vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet"> <!-- Custom CSS --> <link href="css/stylish-portfolio.min.css" rel="stylesheet"> </head> <body id="page-top"> <!-- Navigation --> <a class="menu-toggle rounded" href="#"> <i class="fas fa-bars"></i> </a> <nav id="sidebar-wrapper"> <ul class="sidebar-nav"> <li class="sidebar-brand"> <a class="js-scroll-trigger" href="#page-top">คอลัมน์ลองอ่านดู</a> </li> <li class="sidebar-nav-item"> <a class="js-scroll-trigger" href="#page-top">Home</a> </li> <li class="sidebar-nav-item"> <a class="js-scroll-trigger" href="#about">About</a> </li> <li class="sidebar-nav-item"> <a class="js-scroll-trigger" href="#services">Services</a> </li> <li class="sidebar-nav-item"> <a class="js-scroll-trigger" href="#portfolio">Portfolio</a> </li> <li class="sidebar-nav-item"> <a class="js-scroll-trigger" href="#contact">Contact</a> </li> </ul> </nav> <!-- Header --> <header class="masthead d-flex"> <div class="container text-center my-auto"> <h1 class="mb-1">คอลัมน์ลองอ่านดู</h1> <h3 class="mb-5"> <em>ฉบับ e-book</em></h3> <a class="btn btn-primary btn-xl js-scroll-trigger" href="#e-book">ปี 2549</a> </div> <div class="overlay"></div> </header> <!-- E-Book --> <section class="content-section bg-light" id="e-book"> <div class="container text-center"> <div class="row"> <div class="col-lg-10 mx-auto"> <img src="img/mebook49.png" alt="" usemap="#Map" class="img-fluid"> <map name="Map"> <area shape="rect" coords="110,219,256,398" href="../book/2549/p1/index.html"target="_blank"> <area shape="rect" coords="411,222,554,393" href="../book/2549/p2/index.html" target="_blank"> <area shape="rect" coords="726,225,866,392" href="../book/2549/p3/index.html" target="_blank"> </map> <h2> </h2> </div> </div> </div> </section> <!-- E-Book --> <section class="content-section bg-light" id="e-book1"> <div class="container text-center"> <div class="row"> <div class="col-lg-10 mx-auto"> <img src="img/mebook49.png" alt="" class="img-fluid"> <h2> </h2> </div> </div> </div> </section> <!-- Services --> <section class="content-section bg-primary text-white text-center" id="services"> <div class="container"> <div class="content-section-heading"> <h3 class="text-secondary mb-0">Services</h3> <h2 class="mb-5">What We Offer</h2> </div> <div class="row"> <div class="col-lg-3 col-md-6 mb-5 mb-lg-0"> <span class="service-icon rounded-circle mx-auto mb-3"> <i class="icon-screen-smartphone"></i> </span> <h4> <strong>Responsive</strong> </h4> <p class="text-faded mb-0">Looks great on any screen size!</p> </div> <div class="col-lg-3 col-md-6 mb-5 mb-lg-0"> <span class="service-icon rounded-circle mx-auto mb-3"> <i class="icon-pencil"></i> </span> <h4> <strong>Redesigned</strong> </h4> <p class="text-faded mb-0">Freshly redesigned for Bootstrap 4.</p> </div> <div class="col-lg-3 col-md-6 mb-5 mb-md-0"> <span class="service-icon rounded-circle mx-auto mb-3"> <i class="icon-like"></i> </span> <h4> <strong>Favorited</strong> </h4> <p class="text-faded mb-0">Millions of users <i class="fas fa-heart"></i> Start Bootstrap!</p> </div> <div class="col-lg-3 col-md-6"> <span class="service-icon rounded-circle mx-auto mb-3"> <i class="icon-mustache"></i> </span> <h4> <strong>Question</strong> </h4> <p class="text-faded mb-0">I mustache you a question...</p> </div> </div> </div> </section> <!-- Callout --> <section class="callout"> <div class="container text-center"> <h2 class="mx-auto mb-5">Welcome to <em>your</em> next website!</h2> <a class="btn btn-primary btn-xl" href="https://startbootstrap.com/template-overviews/stylish-portfolio/">Download Now!</a> </div> </section> <!-- Portfolio --> <section class="content-section" id="portfolio"> <div class="container"> <div class="content-section-heading text-center"> <h3 class="text-secondary mb-0">Portfolio</h3> <h2 class="mb-5">Recent Projects</h2> </div> <div class="row no-gutters"> <div class="col-lg-6"> <a class="portfolio-item" href="#"> <span class="caption"> <span class="caption-content"> <h2>Stationary</h2> <p class="mb-0">A yellow pencil with envelopes on a clean, blue backdrop!</p> </span> </span> <img class="img-fluid" src="img/portfolio-1.jpg" alt=""> </a> </div> <div class="col-lg-6"> <a class="portfolio-item" href="#"> <span class="caption"> <span class="caption-content"> <h2>Ice Cream</h2> <p class="mb-0">A dark blue background with a colored pencil, a clip, and a tiny ice cream cone!</p> </span> </span> <img class="img-fluid" src="img/portfolio-2.jpg" alt=""> </a> </div> <div class="col-lg-6"> <a class="portfolio-item" href="#"> <span class="caption"> <span class="caption-content"> <h2>Strawberries</h2> <p class="mb-0">Strawberries are such a tasty snack, especially with a little sugar on top!</p> </span> </span> <img class="img-fluid" src="img/portfolio-3.jpg" alt=""> </a> </div> <div class="col-lg-6"> <a class="portfolio-item" href="#"> <span class="caption"> <span class="caption-content"> <h2>Workspace</h2> <p class="mb-0">A yellow workspace with some scissors, pencils, and other objects.</p> </span> </span> <img class="img-fluid" src="img/portfolio-4.jpg" alt=""> </a> </div> </div> </div> </section> <!-- Call to Action --> <section class="content-section bg-primary text-white"> <div class="container text-center"> <h2 class="mb-4">The buttons below are impossible to resist...</h2> <a href="#" class="btn btn-xl btn-light mr-4">Click Me!</a> <a href="#" class="btn btn-xl btn-dark">Look at Me!</a> </div> </section> <!-- Map --> <section id="contact" class="map"> <iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.com/maps/d/embed?mid=1yDQMvOsgtTSrxJ4xOLghSVaoAhcUpjiF"></iframe> <br/> <small> <a href="https://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&aq=0&oq=twitter&sll=28.659344,-81.187888&sspn=0.128789,0.264187&ie=UTF8&hq=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&t=m&z=15&iwloc=A"></a> </small> </section> <!-- Footer --> <footer class="footer text-center"> <div class="container"> <ul class="list-inline mb-5"> <li class="list-inline-item"> <a class="social-link rounded-circle text-white mr-3" href="#"> <i class="icon-social-facebook"></i> </a> </li> <li class="list-inline-item"> <a class="social-link rounded-circle text-white mr-3" href="#"> <i class="icon-social-twitter"></i> </a> </li> <li class="list-inline-item"> <a class="social-link rounded-circle text-white" href="#"> <i class="icon-social-github"></i> </a> </li> </ul> <p class="text-muted small mb-0">Copyright © www.mmm.ru.ac.th 2018</p> </div> </footer> <!-- Scroll to Top Button--> <a class="scroll-to-top rounded js-scroll-trigger" href="#page-top"> <i class="fas fa-angle-up"></i> </a> <!-- Bootstrap core JavaScript --> <script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <!-- Plugin JavaScript --> <script src="vendor/jquery-easing/jquery.easing.min.js"></script> <!-- Custom scripts for this template --> <script src="js/stylish-portfolio.min.js"></script> </body> </html>
