File manager - Edit - /home/kridsana/webapp.cm.in.th/673190902/u67319090024/webapp/New Project/lol.css
Back
/* ตั้งค่าพื้นฐาน */ body { font-family: 'Arial', sans-serif; margin: 0; padding: 0; background-color: #f3f3f3; color: #333; } /* ทำให้ Header เป็นรูป */ header { background-image: url('848c6f7c93898b02c1b1b62c0d821332.jpg'); /* เปลี่ยนเป็นรูปของคุณ */ background-size: cover; /* ปรับให้รูปเต็มพื้นที่ */ background-position: center; /* จัดกึ่งกลางรูป */ background-repeat: no-repeat; /* ไม่ให้รูปซ้ำ */ height: 400px; /* ปรับความสูงของรูป */ display: flex; align-items: center; /* จัดให้เนื้อหาภายในอยู่ตรงกลาง */ justify-content: center; box-shadow: 0px 4px 6px rgba(104, 189, 238, 0.3); filter: brightness(70%) contrast(130%) saturate(130%); } /* ทำให้เมนูนำทางดูสวยงาม */ nav { position: absolute; /* ลอยอยู่บนรูป */ top: 20px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.6); /* ทำให้พื้นหลังเมนูโปร่งแสง */ padding: 10px 20px; border-radius: 10px; } /* ปรับสีของเมนู */ nav ul { list-style: none; display: flex; gap: 20px; padding: 0; } nav ul li { display: inline; } nav ul li a { color: white; text-decoration: none; font-size: 18px; font-weight: bold; padding: 10px 15px; transition: 0.3s; } nav ul li a:hover { background: rgba(255, 255, 255, 0.3); border-radius: 5px; } /* ซ่อนรูปที่ซ้ำกันใน Section หน้าแรก */ #home { display: flex; align-items: center; justify-content: center; gap: 20px; /* ระยะห่างระหว่างรูปกับข้อความ */ padding: 20px; } #home img { width: 40%; /* ปรับขนาดรูป */ max-width: 400px; border-radius: 10px; /* ทำให้ขอบมน */ } #home div { width: 50%; /* กำหนดขนาดข้อความ */ } /* ซ่อนทุกหน้าโดยดีฟอลต์ ยกเว้นหน้าแรก */ section { display: flex; flex-direction: row; justify-content: center; /* หรือ space-between, space-around ขึ้นอยู่กับการจัดตำแหน่ง */ padding: 40px; text-align: center; } section img { width: 80%; max-width: 600px; border-radius: 10px; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); margin-right: 20px; /* เพิ่มระยะห่างระหว่างรูป */ } .image-container { display: flex; flex-direction: row; /* ทำให้รูปภาพเรียงในแนวตั้ง */ flex-wrap: wrap; /* รูปภาพจะเริ่มเว้นบรรทัดเมื่อเกินจำนวน */ justify-content: space-between; /* เว้นระยะระหว่างรูปภาพ */ align-items: center; /* จัดภาพให้อยู่กึ่งกลาง */ gap: 7px; /* เว้นระยะระหว่างภาพ */ } .thumbnail { width: 80px; /* ขนาดภาพย่อ */ height: auto; margin: 5px; cursor: pointer; border: 2px solid transparent; transition: transform 0.3s ease, border 0.3s ease; } .thumbnail:hover { transform: scale(1.1); /* ขยายภาพเล็กน้อยเมื่อเลื่อนเมาส์ */ border: 2px solid #3498db; /* เพิ่มกรอบสีน้ำเงินเมื่อเมาส์อยู่เหนือ */ } /* ฟอร์มติดต่อ */ form { background: white; padding: 20px; max-width: 400px; margin: auto; border-radius: 8px; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); } form label { display: block; text-align: left; margin-top: 10px; } form input, form textarea { width: 100%; padding: 8px; margin-top: 5px; border-radius: 5px; border: 1px solid #ccc; } button { background-color: #4CAF50; color: white; padding: 10px; border: none; cursor: pointer; margin-top: 10px; width: 100%; } button:hover { background-color: #388E3C; } /* ส่วนท้ายเว็บไซต์ */ /* แสดงหน้าแรกตอนโหลด */ #home { display: block; } /* รองรับอุปกรณ์มือถือ */ @media (max-width: 600px) { section img { width: 100%; } }
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.38 |
proxy
|
phpinfo
|
Settings