สำนักงานเขตพื้นที่การศึกษาประถมศึกษาเชียงใหม่ เขต 1

<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>เว็บไซต์ส่งเสริมงานอาชีพ</title>

<style>
    *{
        margin:0;
        padding:0;
        box-sizing:border-box;
        font-family:'Segoe UI',sans-serif;
    }

    body{
        min-height:100vh;
        background: linear-gradient(135deg,#1e3c72,#2a5298,#00c6ff);
        background-size:400% 400%;
        animation:bgMove 12s ease infinite;
        padding:30px;
    }

    @keyframes bgMove{
        0%{background-position:0% 50%;}
        50%{background-position:100% 50%;}
        100%{background-position:0% 50%;}
    }

    .container{
        max-width:1200px;
        margin:auto;
    }

    .title{
        text-align:center;
        color:white;
        font-size:42px;
        font-weight:bold;
        margin-bottom:30px;
        text-shadow:0 0 20px rgba(255,255,255,.8);
    }

    .grid{
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
        gap:20px;
    }

    .card{
        background:rgba(255,255,255,0.15);
        backdrop-filter:blur(12px);
        border-radius:20px;
        padding:20px;
        border:1px solid rgba(255,255,255,0.3);
        transition:0.4s;
        color:white;
        box-shadow:0 10px 25px rgba(0,0,0,.2);
    }

    .card:hover{
        transform:translateY(-10px) scale(1.03);
        box-shadow:0 20px 40px rgba(0,0,0,.35);
    }

    .school{
        font-size:22px;
        font-weight:bold;
        margin-bottom:10px;
        color:#FFD700;
    }

    .btn{
        display:inline-block;
        margin-top:15px;
        padding:10px 18px;
        background:linear-gradient(45deg,#ff6b6b,#ffd93d);
        color:#000;
        text-decoration:none;
        border-radius:30px;
        font-weight:bold;
        transition:.3s;
    }

    .btn:hover{
        transform:scale(1.08);
    }

    footer{
        text-align:center;
        color:white;
        margin-top:30px;
        opacity:0.8;
    }
</style>
</head>
<body>

<div class="container">

    <div class="title">
        🌟 เว็บไซต์ส่งเสริมงานอาชีพของสถานศึกษา 🌟
    </div>

    <div class="grid">

        <div class="card">
            <div class="school">🏫 วัดเปาสามขา</div>
            <a class="btn" href="https://sites.google.com/chiangmaiarea1.go.th/psklearntoearn" target="_blank">
                เข้าชมเว็บไซต์
            </a>
        </div>

        <div class="card">
            <div class="school">🏫 บ้านออนหลวย</div>
            <a class="btn" href="https://sites.google.com/view/onluayseller" target="_blank">
                เข้าชมเว็บไซต์
            </a>
        </div>

        <div class="card">
            <div class="school">🏫 บ้านออนกลาง</div>
            <a class="btn" href="https://sites.google.com/view/banonklangschool" target="_blank">
                เข้าชมเว็บไซต์
            </a>
        </div>

        <div class="card">
            <div class="school">🏫 วัดห้วยแก้ว</div>
            <a class="btn" href="https://sites.google.com/view/hk-bekery" target="_blank">
                เข้าชมเว็บไซต์
            </a>
        </div>

        <div class="card">
            <div class="school">🏫 บ้านแม่ตะไคร้</div>
            <a class="btn" href="https://sites.google.com/view/careermaetakrai" target="_blank">
                เข้าชมเว็บไซต์
            </a>
        </div>

        <div class="card">
            <div class="school">🏫 ทาเหนือวิทยา</div>
            <a class="btn" href="https://sites.google.com/chiangmaiarea1.go.th/thanuaschool" target="_blank">
                เข้าชมเว็บไซต์
            </a>
        </div>

    </div>

    <footer>
        สำนักงานเขตพื้นที่การศึกษาประถมศึกษาเชียงใหม่ เขต 1
    </footer>

</div>

</body>
</html>