https://kru.ac.th/kru/intro/

1<!DOCTYPE html>
2<html lang="th">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>มหาวิทยาลัยราชภัฏกาญจนบุรี</title>
7    <meta name="description" content="มหาวิทยาลัยราชภัฏกาญจนบุรี ตั้งอยู่เลขที่ 70 หมู่ 4 บ้านพุพระ ตำบลหนองบัว อำเภอเมือง จังหวัดกาญจนบุรี 71190 , โทร 034-534059-60 , Fax 034-534057 ">
8    <meta name="keywords" content="ราชภัฏ,เรียนต่อ,สาธิต,กพอ,บริการวิชาการ,มหาวิทยาลัย,มหาวิทยาลัยราชภัฏกาญจนบุรี,Kanchanaburi Rajabhat University">
9    <meta name="author" content="Miss.Nitta Traidecha">
10    <meta name="robots" content="index,follow">
11
12    <!-- Favicons -->
13    <link href="img/favicon.ico" rel="icon">
14    <link href="img/kru-touch-icon.png" rel="apple-touch-icon">
15
16      <!-- Canonical URL (ใส่ URL จริงของหน้าหลัก) -->
17        <link rel="canonical" href="https://www.kru.ac.th/kru/main.php">
18    
19    <!-- นำเข้าฟอนต์ Google Fonts เพื่อความโมเดิร์นและอ่านง่าย -->
20    <link rel="preconnect" href="https://fonts.googleapis.com">
21    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
22    <link href="https://fonts.googleapis.com/css2?family=Kanit:wght@400;600&family=Sarabun:wght@400;600&display=swap" rel="stylesheet">
23
24    <style>
25        :root {
26            --primary-gold: #FFD700;       /* สีเหลืองทองหลักของ KRU */
27            --primary-gold-hover: #E6B800; /* สีเหลืองทองเข้มตอนชี้เมาส์ */
28            --dark-footer: #121212;        /* สีดำสไตล์โมเดิร์น */
29        }
30
31        body, html {
32            margin: 0;
33            padding: 0;
34            height: 100%;
35            display: flex;
36            flex-direction: column;
37            font-family: 'Sarabun', 'Kanit', sans-serif; /* เปลี่ยนเป็นฟอนต์ยุคใหม่ */
38            overflow: hidden; 
39            background-color: #ffffff;
40            
41            /* start black
42            -webkit-filter: grayscale(100%); 
43            filter: grayscale(100%); */
44        }
45
46        /* 🎗️ โบว์ดำไว้อาลัย */
47        .black-ribbon {
48            position: fixed;
49            z-index: 99999; 
50            width: 450px;   
51            height: auto;
52            pointer-events: none; 
53        }
54
55        .stick-left { left: 0; }
56        .stick-right { right: 0; }
57        .stick-top { top: 0; }
58        .stick-bottom { bottom: 0; }
59
60        /* ส่วนครอบเนื้อหาหลัก */
61        .content-wrapper {
62            flex: 1; 
63            display: flex;
64            flex-direction: column;
65        }
66
67        /* 🖼️ ส่วนที่ 1: แบนเนอร์แสดงผลเต็มพื้นที่ด้านบน */
68        .background {
69            background-image: url('assets/new_kru.jpg');
70            background-size: cover;      
71            background-position: center; 
72            background-repeat: no-repeat;
73            flex: 1;
74            display: flex;
75            justify-content: center;
76            align-items: center;
77            position: relative;
78        }
79
80        /* ⬛ ส่วนที่ 2: แถบสีดำด้านล่างดีไซน์ใหม่ให้ดูหรูหราขึ้น */
81        .footer {
82            height: 90px; /* เพิ่มพื้นที่ความสูงให้ดูโปร่งสไตล์เว็บบอร์ดบริหาร */
83            background-color: var(--dark-footer);
84            width: 100%;
85            display: flex;
86            justify-content: center;
87            align-items: center;
88            gap: 24px; /* เว้นระยะห่างระหว่างปุ่มให้พอดีสายตา */
89            position: relative;
90            z-index: 10;
91            box-shadow: 0 -6px 20px rgba(0,0,0,0.4); /* เพิ่มมิติเงาหนาขึ้นเพื่อให้รอยตัดดูคมชัด */
92            box-sizing: border-box;
93        }
94
95        /* 🔘 ปรับโฉมปุ่มกดใหม่ให้โค้งมนและมีมิติกระโดดออกมา */
96        .footer button {
97            background-color: var(--primary-gold);
98            border: none;
99            padding: 0; 
100            cursor: pointer;
101            border-radius: 30px; /* เปลี่ยนเป็นทรงโค้งมนสไตล์โมเดิร์น (Capsule Button) */
102            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* ใส่เงาใต้ปุ่ม */
103            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* เอฟเฟกต์การเคลื่อนไหวที่นุ่มนวล */
104            overflow: hidden;
105        }
106
107        /* เอฟเฟกต์ตอนที่เมาส์ชี้ไปที่ปุ่ม (Hover Effect) */
108        .footer button:hover {
109            background-color: var(--primary-gold-hover);
110            transform: translateY(-4px); /* ปุ่มลอยขึ้นเล็กน้อย */
111            box-shadow: 0 8px 20px rgba(255, 215, 0, 0.35); /* เรืองแสงสีทองใต้ปุ่ม */
112        }
113
114        /* เอฟเฟกต์ตอนกดปุ่ม */
115        .footer button:active {
116            transform: translateY(-1px);
117            box-shadow: 0 4px 8px rgba(255, 215, 0, 0.2);
118        }
119
120        /* ตัวลิงก์ภายในปุ่ม จัดระเบียบข้อความและระยะห่าง */
121        .footer button a {
122            display: inline-block;
123            padding: 14px 40px; /* เพิ่มขนาดพื้นที่กดให้กว้างเต็มตา */
124            color: #121212; /* เปลี่ยนสีตัวอักษรเป็นสีดำเข้มแบบโมเดิร์น */
125            text-decoration: none;
126            font-weight: 600; /* ปรับตัวอักษรให้หนากำลังดี */
127            font-size: 16px;
128            letter-spacing: 0.5px; /* เว้นระยะตัวอักษรเล็กน้อยให้ดูอินเตอร์ */
129            width: 100%;
130            box-sizing: border-box;
131            font-family: 'Kanit', sans-serif; /* ใช้ฟอนต์ Kanit บนปุ่มเพื่อความสวยงาม */
132        }
133
134        /* 📱 จัดการ Responsive สำหรับมือถือและแท็บเล็ต */
135        @media (max-width: 768px) {
136            .background {
137                background-position: 55% center; /* โฟกัสกลุ่มคนบนหน้าจอมือถือ */
138            }
139            .footer {
140                height: 100px; /* เพิ่มความสูงเผื่อในจอมือถือ */
141                gap: 16px;
142                padding: 0 15px;
143            }
144            .footer button {
145                border-radius: 25px;
146            }
147            .footer button a {
148                padding: 12px 24px;
149                font-size: 15px;
150            }
151            .black-ribbon {
152                width: 90px; /* ย่อโบว์ดำลงในมือถือเพื่อไม่ให้บังหน้าจอ */
153            }
154        }
155
156        /* สำหรับหน้าจอมือถือที่เล็กมากๆ */
157        @media (max-width: 400px) {
158            .footer {
159                gap: 10px;
160            }
161            .footer button a {
162                padding: 11px 18px;
163                font-size: 14px;
164            }
165        }
166    </style>
167</head>
168<body>
169
170    <!-- โบว์ไว้อาลัย (ลอยอยู่ชั้นบนสุด) -->
171    <img src="assets/12.png" class="black-ribbon stick-left stick-top" alt="โบว์ไว้อาลัย">
172
173    <!-- ส่วนที่ 1: แสดงภาพแบนเนอร์เต็มด้านบน -->
174    <div class="content-wrapper">
175        <div class="background">
176            <!-- คงพื้นที่ว่างไว้สำหรับโชว์ภาพพื้นหลังแบนเนอร์ประชาสัมพันธ์ -->
177        </div>
178    </div>
179
180    <!-- ส่วนที่ 2: แถบสีดำสไตล์พรีเมียมแยกขาดด้านล่างสำหรับปุ่มกด -->
181    <div class="footer">
182        <button><a href="https://reg2.kru.ac.th/admissions2/" target="_blank">สมัครเรียน</a></button>  
183        <button><a href="https://www.kru.ac.th/kru/">เข้าสู่เว็บไซต์</a></button>
184    </div>
185
186</body>
187</html>