CINXE.COM
คณะกรรมการ | ศูนย์นวัตกรรมอาหารและบรรจุภัณฑ์
<!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="description" content="Bingo One page parallax responsive HTML Template "> <meta name="author" content="Themefisher.com"> <title>คณะกรรมการ | ศูนย์นวัตกรรมอาหารและบรรจุภัณฑ์</title> <!-- Mobile Specific Meta ================================================== --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Favicon --> <link rel="shortcut icon" type="image/x-icon" href="img/favicon.png" /> <!-- CSS ================================================== --> <!-- RS5.0 Main Stylesheet --> <link rel="stylesheet" type="text/css" href="plugins/revo-slider/css/settings.css"> <!-- RS5.0 Layers and Navigation Styles --> <link rel="stylesheet" type="text/css" href="plugins/revo-slider/css/layers.css"> <link rel="stylesheet" type="text/css" href="plugins/revo-slider/css/navigation.css"> <!-- REVOLUTION STYLE SHEETS --> <link rel="stylesheet" type="text/css" href="plugins/revo-slider/fonts/pe-icon-7-stroke/css/pe-icon-7-stroke.css"> <link rel="stylesheet" type="text/css" href="plugins/revo-slider/fonts/font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="plugins/revo-slider/css/settings.css"> <link rel="stylesheet" type="text/css" href="plugins/revo-slider/css/layers.css"> <link rel="stylesheet" type="text/css" href="plugins/revo-slider/css/navigation.css"> <!-- Themefisher Icon font --> <link rel="stylesheet" href="plugins/themefisher-font/style.css"> <!-- bootstrap.min css --> <link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.min.css"> <!-- Lightbox.min css --> <link rel="stylesheet" href="plugins/lightbox2/dist/css/lightbox.min.css"> <!-- Slick Carousel --> <link rel="stylesheet" href="plugins/slick-carousel/slick/slick.css"> <link rel="stylesheet" href="plugins/slick-carousel/slick/slick-theme.css"> <!-- Main Stylesheet --> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" type="text/css" href="css/colors/red.css" title="light-red"> <!-- Colors --> <!-- <link rel="stylesheet" type="text/css" href="css/colors/green.css" title="green"> <link rel="stylesheet" type="text/css" href="css/colors/red.css" title="light-red"> <link rel="stylesheet" type="text/css" href="css/colors/light-blue.css" title="light-blue"> <link rel="stylesheet" type="text/css" href="css/colors/yellow.css" title="yellow"> <link rel="stylesheet" type="text/css" href="css/colors/light-green.css" title="light-green"> <link rel="stylesheet" type="text/css" href="css/colors/blue.css" title="blue"> --> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-83737325-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-83737325-1'); </script> <!-- End Global site tag (gtag.js) - Google Analytics --> <script> $(".hover").mouseleave( function () { $(this).removeClass("hover"); } ); </script> <style> @import url(https://fonts.googleapis.com/css?family=Raleway:400,500); figure.snip0069 { font-family: 'Raleway', Arial, sans-serif; color: #fff; position: relative; float: left; overflow: hidden; margin: 10px 1%; min-width: 220px; max-width: 310px; width: 100%; text-align: center; } figure.snip0069 * { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Adjust image size and shape */ figure.snip0069 > .image { display: block; position: relative; padding: 15px 0; text-align: center; /* Center the image horizontally */ } figure.snip0069 > .image img { display: inline-block; /* Display as inline-block to maintain circular shape */ width: 400px; /* Set the width */ height: 400px; /* Set the height */ object-fit: cover; /* Fit the image while maintaining aspect ratio */ border-radius: 50%; /* Make the image circular */ overflow: hidden; /* Prevent content overflow */ } figure.snip0069 > .image:before { position: absolute; bottom: 0; content: ''; background: #ffffff; width: 100%; top: 50%; left: 0; right: 0; z-index: -1; } figure.snip0069 figcaption { position: relative; background: #ffffff; } figure.snip0069 figcaption:before { position: absolute; width: 100%; background: #000000; height: 0px; bottom: 0; display: block; content: ''; -webkit-transition: all 0.3s; transition: all 0.3s; } figure.snip0069 h3, figure.snip0069 p { margin: 0; display: inline-block; width: 100%; } figure.snip0069 h3 { padding: 10px 15px; background: #333333; text-transform: uppercase; font-size: 14px; } figure.snip0069 p { font-size: 1.0em; font-weight: 500; background: #ffffff; color: #4d4d4d; padding: 20px 15px 30px; font-weight: bold; /* Set the font to bold */ } figure.snip0069 a { left: 0; right: 0; top: 0; bottom: 0; position: absolute; color: #ffffff; } figure.snip0069.blue h3, figure.snip0069.blue figcaption:before { background: #2980b9; } figure.snip0069.red h3, figure.snip0069.red figcaption:before { background: #c0392b; } figure.snip0069.yellow h3, figure.snip0069.yellow figcaption:before { background: #e67e22; } figure.snip0069.navy h3, figure.snip0069.navy figcaption:before { background: #34495e; } figure.snip0069:hover figcaption:before, figure.snip0069.hover figcaption:before { height: 10px; } .col-md-4.col-sm-6 { display: flex; justify-content: center; /* Center horizontally */ align-items: center; /* Center vertically */ text-align: center; /* Center text content if needed */ } </style> </head> <body id="body"> <!-- Start Preloader ==================================== --> <div id="preloader"> <div class='preloader'> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </div> <!-- End Preloader ==================================== --> <!-- Fixed Navigation ==================================== --> <iframe src="./include/header.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe> <!-- End Fixed Navigation ==================================== --> <section class="single-page-header"> <div class="container"> <div class="row"> <div class="col-md-12"> <h2 style="text-shadow: 2px 1px #17202A;">ADMINNISTRATIVE BOARD</h2> <!-- <ol class="breadcrumb header-bradcrumb"> <li><a href="index.html">Home</a></li> <li class="active">คณะกรรมการ</li> --> </ol> </div> </div> </div> </section> <!-- Start Our Team =========================================== --> <style> body { font-family: Arial, sans-serif; text-align: center; margin: 20px; } .board { display: flex; flex-direction: column; align-items: center; gap: 10px; /* ลดระยะห่างระหว่างแถว */ } .row { display: flex; justify-content: center; gap:100px; /* ลดระยะห่างระหว่างสมาชิก */ align-items: flex-end; position: relative; margin-bottom: 30px; } .member { display: flex; flex-direction: column; align-items: center; /* ทำให้ชื่อและตำแหน่งอยู่ในแนวเดียวกัน */ justify-content: center; text-align: center;/* ป้องกันรูปเกินออกจากกรอบ */ } .member img { width: 200px; /* ลดขนาดรูปให้เล็กลง */ height: auto; object-fit: cover; border-radius: 100px; /* ลดโค้งของขอบ */ } .background-shape { position: absolute; top: 40px; /* ปรับตำแหน่งลง */ width: 220px; height: 250px; background-color: white; border-radius: 50% 50% 0 0; z-index: -1; } .member:hover .background-shape { background-color:orange; } .member span { margin-top: 50px; /* ลดระยะห่างตัวหนังสือจากรูป */ font-weight: bold; z-index: 1; } .name{ display: block; max-width: 220; text-align: center; word-wrap: break-word; } h3.name,p.title{ margin: 10x 0; line-height: 1.4; } .name, .title { display: block; text-align: center;/* ให้แสดงในบรรทัดเดียวกัน */ margin: 0 10px; /* เพิ่มระยะห่างระหว่างชื่อและตำแหน่ง */ /* ทำให้ข้อความอยู่ในแนวระดับเดียวกัน */ } </style> </head> <body> <h2>คณะกรรมการบริหาร ศูนย์นวัตกรรมอาหารและบรรจุภัณฑ์ มหาวิทยาลัยเชียงใหม่</h2> <div class="board"> <!-- ลบแถวแรกออกไป --> <div class="row"> <div class="member"> <div class="background-shape"></div> <img src="images/board/new/46.png" alt="คณะกรรมการ 1"> <h3 class="name">รองศาสตราจารย์ ดร.ยุทธนา พิมลศิริผล</h3> <p class="title">ประธานกรรมการ </p> </div> </div> <!-- แถวที่สองที่มีสมาชิกหลายคน --> <div class="row"> <div class="member"> <div class="background-shape"></div> <img src="images/board/new/48.png" alt="คณะกรรมการ 1"> <h3 class="name">รองศาสตราจารย์ ดร.นิรมล อุตมอ่าง</h3> <p class="title">กรรมการ</p> </div> <div class="member"> <div class="background-shape"></div> <img src="images/board/new/54.png" alt="คณะกรรมการ 2"> <h3 class="name"> อาจารย์ ดร.ชิตาพัณณ์ ใบงิ้ว </h3> <p class="title">กรรมการ</p> </div> <div class="member"> <div class="background-shape"></div> <img src="images/board/new/47.png" alt="คณะกรรมการ 3"> <h3 class="name">นายชาญวิทย์ รัตนราศรี </h3> <p class="title">กรรมการ </p> </div> </div> <!-- แถวแรกที่ย้ายมาที่ด้านล่าง --> <div class="row"> <div class="member"> <div class="background-shape"></div> <img src="images/board/new/43.png" alt="คณะกรรมการ 1"> <h3 class="name">ผู้ช่วยศาสตราจารย์ ดร.เกษมศักดิ์ อุทัยชนะ</h3> <p class="title">กรรมการ </p> </div> <div class="member"> <div class="background-shape"></div> <img src="images/board/new/45.png" alt="คณะกรรมการ 2"> <h3 class="name">ผู้ช่วยศาสตราจารย์ ดร.อุทุมพร สุระยศ</h3> <p class="title">กรรมการ </p> </div> <div class="member"> <div class="background-shape"></div> <img src="images/board/new/44.png" alt="คณะกรรมการ 3"> <h3 class="name">อาจารย์ ดร.วิสุวัฒน์ วรรณมะกอก</h3> <p class="title">กรรมการและเลขานุการ</p> </div> </div> </div> </body> </body> <iframe src="./include/footer.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe> <!-- end footer --> <!-- end Footer Area ========================================== --> <!-- Essential Scripts =====================================--> <!-- Main jQuery --> <script src="plugins/jquery/dist/jquery.min.js"></script> <!-- Bootstrap 3.7 --> <script src="plugins/bootstrap/js/bootstrap.min.js"></script> <!-- Parallax --> <script src="plugins/parallax/jquery.parallax-1.1.3.js"></script> <!-- lightbox --> <script src="plugins/lightbox2/dist/js/lightbox.min.js"></script> <!-- Owl Carousel --> <script src="plugins/slick-carousel/slick/slick.min.js"></script> <!-- Portfolio Filtering --> <script src="plugins/mixitup/dist/mixitup.min.js"></script> <!-- Smooth Scroll js --> <script src="plugins/smooth-scroll/dist/js/smooth-scroll.min.js"></script> <!-- Custom js --> <script src="js/script.js"></script> </body> </html>