File manager

File manager - Edit - /home/webapp68.cm.in.th/u68319090021/watduangdee/css/style.css

Back
/* ===== RESET ===== / { margin:0; padding:0; box-sizing:border-box; } /* ===== BODY ===== / body{ font-family: "Tahoma", sans-serif; background: radial-gradient(circle at top, #fffaf2, #efe6d8); color:#333; line-height:1.7; } / ===== NAVBAR ===== / nav{ background: rgba(123,0,0,0.95); padding:14px 0; text-align:center; position:sticky; top:0; z-index:1000; box-shadow:0 2px 8px rgba(0,0,0,0.3); } nav a{ color:#fff; text-decoration:none; margin:0 15px; font-weight:bold; transition:0.3s; } nav a:hover{ color:#ffd700; text-shadow:0 0 6px rgba(255,215,0,0.9); } / ===== GOLD LINE ===== / hr{ border:none; height:4px; background:#d4af37; } / ===== HERO BANNER ===== / .hero-banner{ background:url("images/banner.jpg") center/cover no-repeat; height:380px; position:relative; } .hero-banner::after{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.2)); } .hero-text{ position:absolute; bottom:25px; left:25px; background:rgba(0,0,0,0.55); padding:18px 25px; border-radius:8px; box-shadow:0 8px 20px rgba(0,0,0,0.5); } .hero-text h1{ color:white; margin:0; font-size:32px; } .hero-text p{ color:#ffdca8; margin-top:5px; } / ===== HEADER (กรณีหน้าอื่นใช้) ===== / .header{ background:url("images/header.jpg") center/cover no-repeat; height:180px; display:flex; align-items:center; justify-content:center; color:white; text-shadow:2px 2px 5px black; font-size:32px; font-weight:bold; } / ===== CONTAINER ===== / .container{ width:85%; max-width:1100px; margin:40px auto; } / ===== PAGE TITLE ===== / .page-title{ text-align:center; font-size:28px; color:#7b0000; margin-bottom:20px; } .page-title::after{ content:"✦ ✦ ✦"; display:block; color:#d4af37; margin-top:6px; letter-spacing:6px; } / ===== CONTENT BOX ===== / .content-box{ background:#fff8e7; padding:25px; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,0.12); } / ===== TEXT ===== / p,li{ font-size:16px; line-height:1.8; } / ===== NEWS ===== / .news-item{ margin-bottom:20px; padding-bottom:15px; border-bottom:1px solid #ddd; } .news-item h4{ color:#5a3a1b; } / ===== HISTORY / SERVICE IMAGE ===== / .history-img, .service-img{ width:100%; max-height:350px; object-fit:cover; border-radius:8px; margin-bottom:15px; box-shadow:0 4px 10px rgba(0,0,0,0.2); } / ===== ACTIVITY LIST TEXT ===== / .activity-list{ list-style:none; padding:0; } .activity-list li{ background:#ffe4b5; margin:10px 0; padding:12px; border-radius:8px; font-size:18px; } / ===== ACTIVITY ITEM WITH IMAGE ===== / .activity-item{ display:flex; align-items:center; background:#fff; margin-bottom:15px; padding:12px; box-shadow:0 0 6px #ccc; border-radius:8px; transition:0.3s; } .activity-item:hover{ transform:translateY(-4px); box-shadow:0 6px 15px rgba(0,0,0,0.25); } .activity-item img{ width:120px; height:80px; object-fit:cover; border-radius:6px; margin-right:15px; } .activity-item p{ margin:0; font-weight:bold; color:#5a3a1b; } / ===== GALLERY ===== / .gallery{ display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin-top:20px; } .gallery img{ width:100%; height:190px; object-fit:cover; border-radius:10px; box-shadow:0 5px 15px rgba(0,0,0,0.25); transition:0.4s ease; cursor:pointer; } .gallery img:hover{ transform:scale(1.05); box-shadow:0 10px 25px rgba(0,0,0,0.35); } / ===== FOOTER ===== / footer{ background:#7b0000; color:white; text-align:center; padding:18px; margin-top:40px; } / ===== RESPONSIVE ===== / @media(max-width:768px){ .hero-banner{ height:260px; } .hero-text h1{ font-size:24px; } .container{ width:92%; } } / ===== Glass UI ===== / .glass-box{ background:rgba(255,255,255,0.85); backdrop-filter: blur(8px); border-radius:15px; padding:30px; box-shadow:0 8px 20px rgba(0,0,0,0.15); } / ===== Hero Banner ===== / .hero-banner{ background:url("images/banner.jpg") center/cover no-repeat; height:320px; position:relative; } .hero-text{ position:absolute; bottom:20px; left:20px; background:rgba(0,0,0,0.55); padding:15px 20px; border-radius:8px; } .hero-text h1{color:white;margin:0;} .hero-text p{color:#ffdca8;margin:5px 0 0 0;} / ===== History Image ===== / .history-img{ width:100%; max-height:350px; object-fit:cover; border-radius:10px; margin-bottom:20px; } / ===== Modern Button ===== / .btn-modern{ display:inline-block; padding:10px 24px; background:linear-gradient(135deg,#7b0000,#b30000); color:white; border-radius:30px; text-decoration:none; font-weight:bold; box-shadow:0 4px 10px rgba(123,0,0,0.4); transition:0.3s; } .btn-modern:hover{ transform:scale(1.05); box-shadow:0 6px 15px rgba(123,0,0,0.6); } / ===== Fade Animation ===== / .fade-up{ opacity:0; transform:translateY(40px); transition:all 0.8s ease; } .fade-up.show{ opacity:1; transform:translateY(0); } .service-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap:25px; margin-top:20px; } .service-card{ background:rgba(255,255,255,0.9); padding:20px; border-radius:12px; box-shadow:0 6px 15px rgba(0,0,0,0.15); text-align:center; transition:0.3s; } .service-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin-top:15px; } .service-card{ background:#ffffff; border-radius:10px; padding:15px; text-align:center; box-shadow:0 4px 10px rgba(0,0,0,0.12); transition:0.25s; } .service-card:hover{ transform:translateY(-4px); box-shadow:0 8px 16px rgba(0,0,0,0.18); } .service-card h3{ font-size:17px; color:#6b0000; margin-bottom:6px; } .service-card p{ font-size:14px; line-height:1.5; height:60px; / ล็อคความสูงข้อความ / overflow:hidden; / กันการ์ดยืดยาว / } .service-img-box{ margin-top:10px; border-radius:8px; overflow:hidden; } .service-img-box img{ width:100%; height:120px; / ล็อคความสูงรูป */ object-fit:cover; display:block; } .service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap: 25px; margin-top: 20px; } .service-card { background: #ffffff; border-radius: 14px; padding: 18px; text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,0.12); transition: transform 0.3s ease, box-shadow 0.3s ease; } .service-card:hover { transform: translateY(-6px); box-shadow: 0 8px 18px rgba(0,0,0,0.18); } .service-card h3 { color: #7b0000; margin-bottom: 8px; font-size: 20px; } .service-card p { font-size: 15px; line-height: 1.6; color: #333; min-height: 70px; } .service-img-box { margin-top: 12px; border-radius: 10px; overflow: hidden; } .service-img-box img { width: 100%; height: 160px; object-fit: cover; display: block; }

| ver. 1.4 | Github | . | PHP 7.4.33 | Generation time: 0.68 | proxy | phpinfo | Settings