File manager - Edit - /home/webapp68.cm.in.th/u68319090014/Project01/style.css
Back
/* --- VARIABLES --- */ :root { --primary: #5D4037; --accent: #C5A059; --accent-hover: #D4AF37; --text-dark: #2c3e50; --bg-body: #f9f9f9; --white: #ffffff; --shadow-card: 0 10px 30px rgba(0,0,0,0.05); } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Sarabun', sans-serif; background-color: var(--bg-body); color: var(--text-dark); line-height: 1.7; display: flex; flex-direction: column; min-height: 100vh; } h1, h2, h3 { font-weight: 600; line-height: 1.3; margin-bottom: 1rem; } a { text-decoration: none; transition: all 0.3s ease; } /* --- HERO SECTION (แก้สีทึบออกแล้ว) --- */ header.hero-header { background: linear-gradient(135deg, rgba(44, 30, 25, 0.5), rgba(93, 64, 55, 0.3)), url('images/temple.jpg') center/cover fixed; background-color: #333; color: var(--white); padding: 130px 20px; text-align: center; } header.hero-header h1 { font-size: 3.5rem; text-shadow: 0 4px 15px rgba(0,0,0,0.6); margin-bottom: 0.5rem; } header.hero-header p { font-size: 1.2rem; color: rgba(255,255,255,0.95); text-shadow: 0 2px 10px rgba(0,0,0,0.6); } /* --- GLASS MORPHISM NAV --- */ nav.main-nav { background: rgba(255, 255, 255, 0.9); /* โปร่งแสง */ backdrop-filter: blur(10px); /* เอฟเฟกต์กระจกฝ้า */ box-shadow: 0 2px 15px rgba(0,0,0,0.05); position: sticky; top: 0; z-index: 1000; padding: 0 20px; border-bottom: 1px solid rgba(0,0,0,0.05); } nav.main-nav .nav-container { max-width: 1100px; margin: 0 auto; display: flex; justify-content: center; flex-wrap: wrap; } nav.main-nav a { color: var(--primary); padding: 20px 25px; font-weight: 500; border-bottom: 3px solid transparent; } nav.main-nav a:hover, nav.main-nav a.active { color: var(--accent); border-bottom: 3px solid var(--accent); } /* --- CONTENT & CARDS --- */ .container { max-width: 1000px; width: 90%; margin: 50px auto; flex: 1; } .card { background: var(--white); padding: 40px; border-radius: 12px; box-shadow: var(--shadow-card); margin-bottom: 40px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0,0,0,0.1); } .section-title { color: var(--primary); font-size: 2rem; border-left: 5px solid var(--accent); padding-left: 20px; } /* --- ANIMATION CLASSES --- */ .reveal { position: relative; transform: translateY(50px); opacity: 0; transition: all 0.8s ease; } .reveal.active { transform: translateY(0); opacity: 1; } /* --- UI ELEMENTS --- */ .news-item { border-bottom: 1px solid #eee; padding: 25px 0; } .news-item:last-child { border-bottom: none; } .news-item h3 { color: var(--primary); margin-bottom: 10px; } .news-item small { color: #999; } .form-control { width: 100%; padding: 15px; border: 1px solid #ddd; border-radius: 8px; margin-bottom: 20px; font-family: inherit; } .btn { padding: 12px 35px; background: var(--primary); color: white; border-radius: 50px; border: none; cursor: pointer; box-shadow: 0 4px 10px rgba(93,64,55,0.3); } .btn:hover { background: var(--accent); transform: translateY(-2px); } footer { background: #252525; color: #aaa; text-align: center; padding: 50px 20px; margin-top: auto; } @media (max-width: 768px) { header.hero-header h1 { font-size: 2.2rem; } nav.main-nav a { padding: 15px 10px; font-size: 0.9rem; } .card { padding: 25px; } }
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.48 |
proxy
|
phpinfo
|
Settings