File manager - Edit - /home/kridsana/webapp.cm.in.th/673190902/u67319090023/web/style.css
Back
/* Reset CSS */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; line-height: 1.6; background-color: #f4f4f4; color: #333; } /* Navigation */ nav { background-color: #2c3e50; padding: 10px; } nav ul { list-style: none; display: flex; justify-content: space-around; flex-wrap: wrap; } nav ul li { margin: 0 10px; } nav a { color: white; text-decoration: none; font-size: 18px; } /* Header Section (เพิ่ม Animation) */ header { text-align: center; background-color: #2980b9; color: white; padding: 40px 0; background-image: url('R.jpg'); background-size: cover; background-position: center; height: 400px; display: flex; flex-direction: column; align-items: center; justify-content: center; /* เริ่มต้นแบบโปร่งใสและอยู่ต่ำลงมา */ opacity: 0; transform: translateY(50px); transition: opacity 1s ease-out, transform 1s ease-out; } /* เมื่อเพิ่มคลาส .show-header จะแสดงตัวหนังสือแบบเลื่อนขึ้น */ header.show-header { opacity: 1; transform: translateY(0); } header h1 { font-size: 3em; margin-bottom: 10px; text-shadow: 0px 2px 4px black; } header p { font-size: 1.2em; text-shadow: 0px 2px 4px black; } /* Responsive Images */ .hero-image, .feature-image { width: 100%; max-width: 500px; height: auto; margin: 0 auto; border-radius: 10px; } /* Sections */ section { padding: 20px; margin: 20px; background-color: #fff; border-radius: 10px; } section h2 { font-size: 2em; margin-bottom: 10px; } section img { width: 100%; height: auto; margin-top: 15px; border-radius: 10px; } /* Footer */ footer { background-color: #2c3e50; color: white; text-align: center; padding: 10px 0; } /* Form */ form input, form button { padding: 10px; margin: 10px 0; width: 100%; font-size: 1em; } form button { background-color: #2980b9; color: white; border: none; cursor: pointer; } form button:hover { background-color: #3498db; } /* Responsive Design */ @media (max-width: 1024px) { nav ul { flex-direction: column; align-items: center; } header { height: 350px; padding: 30px; } header h1 { font-size: 2.5em; } header p { font-size: 1.1em; } section { padding: 15px; } } @media (max-width: 768px) { nav ul { flex-direction: column; align-items: center; } header { height: 300px; padding: 20px; } header h1 { font-size: 2em; } header p { font-size: 1em; } section { padding: 10px; } } @media (max-width: 480px) { header { height: 250px; padding: 15px; } header h1 { font-size: 1.8em; } header p { font-size: 0.9em; } nav ul { flex-direction: column; text-align: center; } section { padding: 8px; } }
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.4 |
proxy
|
phpinfo
|
Settings