<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
	<style>
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@100;200;300;400;500;600;700&display=swap');

*{
    font-family: 'Sarabun', sans-serif;
    margin:0; padding:0;
    box-sizing: border-box;
    outline: none; border:none;
    text-decoration: none;
    text-transform: capitalize;
    transition: .2s linear;
}

.container{
    background-image: linear-gradient(to left, #4926a1, #0f0495, #0f0495, #0f0495, #4926a1);
    padding:15px 9%;
    padding-bottom: 100px;
}

.container .heading1{
    text-align: center;
    padding-bottom: 15px;
    color:#ffff00;
    text-shadow: 0 5px 10px rgba(0,0,0,.2);
    font-size: 35px;
}
.container .heading2{
    text-align: center;
    padding-bottom: 15px;
    color:#ffffff;
    text-shadow: 0 5px 10px rgba(0,0,0,.2);
    font-size: 25px;
}
.container .heading3{
    text-align: center;
    padding-bottom: 15px;
    color:#ffff00;
    text-shadow: 0 5px 10px rgba(0,0,0,.2);
    font-size: 14px;
}

.container .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap:15px;
}

.container .box-container .box{
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
    border-radius: 5px;
    background: #fff;
    text-align: center;
    padding:30px 20px;
}

.container .box-container .box img{
    height: 80px;
}

.container .box-container .box h3{
    color:#1231EB;
    font-size: 22px;
    padding:10px 0;
}

.container .box-container .box p{
    color:#777;
    font-size: 15px;
    line-height: 1.8;
}

.container .box-container .box .btn{
    margin-top: 10px;
    display: inline-block;
    background:#CA15D9;
    color:#fff;
    font-size: 17px;
    border-radius: 5px;
    padding: 8px 25px;
}

.container .box-container .box .btn:hover{
    letter-spacing: 1px;
}

.container .box-container .box:hover{
    box-shadow: 0 10px 15px rgba(0,0,0,.3);
    transform: scale(1.03);
}

@media (max-width:768px){
    .container{
        padding:20px;
    }
}

.container2 .box-container2{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap:15px;
}

.container2 .box-container2 .box{
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
    border-radius: 5px;
    background: #fff;
    text-align: center;
    padding:30px 20px;
}

.container2 .box-container2 .box img{
    height: 80px;
}

.container2 .box-container2 .box h3{
    color:#1231EB;
    font-size: 22px;
    padding:10px 0;
}

.container2 .box-container2 .box p{
    color:#777;
    font-size: 15px;
    line-height: 1.8;
}

.container2 .box-container2 .box .btn{
    margin-top: 10px;
    display: inline-block;
    background:#CA15D9;
    color:#fff;
    font-size: 17px;
    border-radius: 5px;
    padding: 8px 25px;
}

.container2 .box-container2 .box .btn:hover{
    letter-spacing: 1px;
}

.container2 .box-container2 .box:hover{
    box-shadow: 0 10px 15px rgba(0,0,0,.3);
    transform: scale(1.03);
}

@media (max-width:768px){
    .container{
        padding:20px;
    }
}

<?!= include('css') ?>

</style>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  </head>
  <div class="container">
  	<div class="row">
	<div class="col-md-12">
    <h5 align="left" style="margin-top: 10px"></h5>
    <h5 class="heading1">ระบบตรวจสอบผลการเรียนออนไลน์ สังกัดสำนักงาน สกร.จังหวัดลำพูน</h5>
	<h5 class="heading2">ตามหลักสูตรการศึกษานอกระบบระดับการศึกษาขั้นพื้นฐานพุทธศักราช 2551</h5>

<div class="container">
	<div class="row">
		<div class="col-md-12">
			<h5 align="left" style="margin-top: 10px"></h5>
<center>    <a href="http://lpn.nfe.go.th/lpn/" class="btn btn-info"target="_blank" class="btn">เว็บ สกร.ลำพูน</a> 
			<a href="https://sites.google.com/lpn.nfe.go.th/edu/home" class="btn btn-warning"target="_blank" class="btn">EDUCATION  LPN</a> 
			<a href="https://sites.google.com/lpn.nfe.go.th/information-system-nfe/home" class="btn btn-primary"target="_blank" class="btn">ระบบข้อมูลสารสนเทศ</a>
			<a href="http://182.53.128.36/lpn/index2.php?name=block&file=codeblock&id=24" class="btn btn-info"target="_blank" class="btn">คลังสื่อออนไลน์</a> 
			<a href="https://www.facebook.com/lpn.nfe/" class="btn btn-success"target="_blank" class="btn">Pagefacebook</a> 
			<a href="https://www.facebook.com/lpnlamphun" class="btn btn-warning"target="_blank" class="btn">facebook</a>
			<a href="https://www.facebook.com/nfe.thawat/" class="btn btn-primary"target="_blank" class="btn">เทคโนโลยีสารสนเทศ</a>
</center>

<div class="container">
		<div class="box-container">
        <div class="box">
            <img src="https://sv1.picz.in.th/images/2022/07/07/V8IP5y.png" alt="">
            <h3>สกร.อำเภอเมืองลำพูน</h3>
            <a href="http://182.53.128.36/gradeonline/mueang/" target="_blank" class="btn">เข้าสู่ระบบ</a>
        </div>

        <div class="box">
            <img src="https://sv1.picz.in.th/images/2022/07/07/V8IP5y.png" alt="">
            <h3>สกร.อำเภอป่าซาง</h3>
            <a href="http://182.53.128.36/gradeonline/pasang/" target="_blank" class="btn">เข้าสู่ระบบ</a>
        </div>

        <div class="box">
            <img src="https://sv1.picz.in.th/images/2022/07/07/V8IP5y.png" alt="">
            <h3>สกร.อำเภอบ้านโฮ่ง</h3>
            <a href="http://182.53.128.36/gradeonline/banthong/"  target="_blank" class="btn">เข้าสู่ระบบ</a>
        </div>

        <div class="box">
            <img src="https://sv1.picz.in.th/images/2022/07/07/V8IP5y.png" alt="">
            <h3>สกร.อำเภอแม่ทา</h3>
            <a href="http://182.53.128.36/gradeonline/maetha/" target="_blank" class="btn">เข้าสู่ระบบ</a>
        </div>
</div><br>
<div class="container2">
		<div class="box-container2">
        <div class="box">
            <img src="https://sv1.picz.in.th/images/2022/07/07/V8IP5y.png" alt="">
            <h3>สกร.อำเภอลี้</h3>
            <a href="http://182.53.128.36/gradeonline/li/" target="_blank" class="btn">เข้าสู่ระบบ</a>
        </div>

        <div class="box">
            <img src="https://sv1.picz.in.th/images/2022/07/07/V8IP5y.png" alt="">
            <h3>สกร.อำเภอทุ่งหัวช้าง</h3>
            <a href="http://182.53.128.36/gradeonline/thunghuachang/" target="_blank" class="btn">เข้าสู่ระบบ</a>
        </div>

        <div class="box">
            <img src="https://sv1.picz.in.th/images/2022/07/07/V8IP5y.png" alt="">
            <h3>สกร.อำเภอบ้านธิ</h3>
            <a href="http://182.53.128.36/gradeonline/banthi/"  target="_blank" class="btn">เข้าสู่ระบบ</a>
        </div>

        <div class="box">
            <img src="https://sv1.picz.in.th/images/2022/07/07/V8IP5y.png" alt="">
            <h3>สกร.อำเภอ<br>เวียงหนองล่อง</h3>
            <a href="http://182.53.128.36/gradeonline/wiangnonglong/" target="_blank" class="btn">เข้าสู่ระบบ</a>
        </div>
</div><br>
<div class="container">
     <h5 class="heading3">@&nbsp;&nbsp;กลุ่มงานสารสนเทศ สำนักงาน สกร.จังหวัดลำพูน&nbsp;&nbsp;@</h5>