File manager

File manager - Edit - /home/kridsana/webapp.cm.in.th/673190902/u67319090017/Kohlarn/style.css

Back
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Kanit:wght@200;300;400;500;600;700;800;900&family=Oswald:wght@200..700&family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:wght@400;500;700;900&family=Sarabun:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,800&display=swap'); body { font-family: 'Kanit', sans-serif; color: #1B262C; font-weight: 300; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; max-width: 70vw; min-width: 80%; margin: auto; background-color: white; } @media (max-width: 576px) { body { max-width: 90vw; min-width: 95%; } } .navbar { max-width: 70vw; min-width: 100%; font-family: 'Anton', sans-serif; font-weight: 200; font-size: 1em; background-color: rgba(255, 255, 255, 0.9); box-shadow: 0.1vh 0.1vh 1vh rgba(0, 0, 0, 0.3); border-radius: 0 0 1vh 1vh; margin: 0; padding: 0.2vh 0 0 0; position: sticky; } .container-fluid { display: flex; align-items: center; }.nav-link { font-family: 'Kanit', sans-serif; font-weight: bold; padding: 0; } .nav-link:hover { color: #83B4FF !important; } .nav-link.active { color: #0F4C75 !important; font-size: 1.2em; } .navbar-toggler { position: absolute; height: 100%; right: 0; top: 0; } @media (min-width: 768px) { .navbar-toggler { display: none; /* ซ่อนปุ่ม hamburger บนหน้าจอขนาดใหญ่ / } .navbar-collapse { display: flex; / แสดงเมนูปกติ / flex-direction: row; / จัดเรียงเมนูในแนวนอน / justify-content: flex-end; / จัดเมนูให้ชิดขวา / } .navbar-nav { display: flex; gap: 20px; } } @media (max-width: 767px) { .navbar { border-radius: 0 1vh 1vh 1vh; } .navbar-toggler { display: block; } .navbar-collapse { max-width: 70vw; min-width: 100%; position: absolute; top: 100%; right: 0; background-color: rgba(255, 255, 255, 0.9); margin-top: 0.3vh; display: none; / ซ่อนเมนูตอนแรก / box-shadow: 0.1vh 0.2vh 1.5vh rgba(0, 0, 0, 0.3); border-radius: 0 0 3vh 3vh; } .navbar-collapse.show { display: block; / แสดงเมนูเมื่อคลิกปุ่ม hamburger / } .navbar-nav { flex-direction: column; / เมนูในแนวตั้งเมื่อขนาดหน้าจอเล็ก / align-items: flex-end; } .nav-item { display: flex; margin: 1vh; } } .nav-text { color: white; } .main-kohlarn { display: inline; margin-top: 20px; } .main-kohlarn { display: inline; margin-top: 20px; } .main-img { width: 100%; height: auto; border-radius: 0 0 10vh 0; box-shadow: 0.5vh 0.5vh 2vh rgba(0, 0, 0, 0.3); margin:0; padding: 0; } .title { font-size: 1.5em; font-weight: 600; color: #0F4C75; } .text { margin-top: 2vh; } .description { font-size: 1em; } .icon-kohlarn , .icon-kohlarn-button,.icon-kohlarn-th, .resort-icon { display: flex; flex-wrap: wrap; justify-content: center; } .icon-kohlarn a , .icon-kohlarn-button a { text-decoration: none; color: #226089; } .card { border-radius: 2vh; margin: 2vh 0.7vh 0.5vh 0.7vh; font-family: 'Prompt', sans-serif; color: #226089; } .icon-kohlarn .card img , .icon-kohlarn-button .card img ,.icon-kohlarn-th .card img{ height: auto; width: clamp(8vh, 2vw, 10vh); padding-top: clamp(0.5vh, 2vw, 1.5vh); } .icon-kohlarn-button .card p { font-size: clamp(0.8em, 2vw, 1em); color: #226089; margin-top: -1vh; font-weight: 300; font-family: 'Kanit', sans-serif; } .icon-kohlarn-th .card p { font-size: clamp(0.5em, 2vw, 1em); font-family: 'Kanit', sans-serif; color: #226089; margin-top: -1vh; font-weight: 300; } h3 { font-weight: 600; margin-top: 5vh; } h4 { color: #0F4C75; } h5 { font-size: clamp(1em, 2vw, 1.5em); font-family: 'Kanit', sans-serif; color: #226089; } h6 { font-size: clamp(1em, 2vw, 1.5em); font-family: 'Anton', sans-serif; color: #226089; } .icon-kohlarn-button .card:hover { box-shadow: 0.5vh 0.5vh 2vh rgba(0, 0, 0, 0.3); } .resort img , .restaurant img{ width: 100%; / ปรับขนาดภาพให้เต็ม container / max-height: 80vh; / กำหนดความสูงคงที่ / object-fit: cover; / ปรับภาพให้เต็มพื้นที่โดยไม่เสียสัดส่วน / border-radius: 3vh; / (ถ้าต้องการ) ทำให้ขอบโค้งมน / } .resort span , .restaurant span{ font-family: 'Kanit', sans-serif; font-size: 1.1em; font-weight: 500; } .resort ul li{ font-family: 'Kanit', sans-serif; font-weight: 400; font-size: clamp(0.9em, 2vw, 1.1em); margin: 1vh 0 1vh 0; } .resort ul li a { text-decoration: none; color: #226089; } .resort ul li:hover{ color: #3D3C42; } .resort ul li a:hover{ color: #83B4FF; } .restaurant a { font-family: 'Kanit', sans-serif; font-weight: 500; font-size: clamp(0.9em, 2vw, 1em); margin: 1vh 0 1vh 0; color: #4780a5 !important; } .restaurant a:hover { color: #83B4FF !important ; cursor: pointer; } .card .time-travel { font-size: 0.9em; margin-top: -1.5vh; display: flex; text-align: center; } .text-h5 { font-size: clamp(0.8em, 1vw, 1.4em); font-family: 'Kanit', sans-serif; color: #226089; font-weight: 500; margin-bottom: 1vh; } .img-beach { width: 100%; / ปรับขนาดภาพให้เต็ม container / max-height: 80vh; / กำหนดความสูงคงที่ / object-fit: cover; / ปรับภาพให้เต็มพื้นที่โดยไม่เสียสัดส่วน / border-radius: 3vh; / (ถ้าต้องการ) ทำให้ขอบโค้งมน / } .img-activity{ width: 100%; / ปรับขนาดภาพให้เต็ม container / max-height: 80vh; / กำหนดความสูงคงที่ / object-fit: cover; / ปรับภาพให้เต็มพื้นที่โดยไม่เสียสัดส่วน / border-radius: 3vh; / (ถ้าต้องการ) ทำให้ขอบโค้งมน / } .title-sunset { font-size: 1.2em; font-weight: 400; color: #0F4C75; } .text-fishing { margin-top: -2vh ; margin-left: 3vh; } .article img { border-radius: 2vh; width: 100%; / ปรับขนาดภาพให้เต็ม container / max-height: 25vh; / กำหนดความสูงคงที่ / object-fit: cover; / ปรับภาพให้เต็มพื้นที่โดยไม่เสียสัดส่วน */ } .article a { text-decoration: none; font-family: 'Prompt', sans-serif; color: #3D3C42; font-weight: 500; } .article a:hover { color: #226089; } .line-text-follo-me { background-color: #3D3C42; width: 80%; height: 0.3vh; margin: 0 auto; } .follow-me { margin-top: 10vh; } .follow-me h3 { font-size: 1em; margin-top: 3vh; } .follow-me ul { list-style-type: none; } .follow-me ul li a { color: #3D3C42; font-size: 2em; }

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