Gestionnaire de fichiers - Editer - /home/kridsana/webapp.cm.in.th/673190902/u67319090017/Portfolio/styles.css
Arrière
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=Kanit: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=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:ital,wght@0,100..900;1,100..900&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } :root { --white: #f4f4f4; } html,body { overflow-x: hidden !important; } body { font-family: 'Anton', sans-serif; background-color: var(--white); } .container { max-width: 1320px; padding: 0; margin: 0 auto; } [data-aos] { will-change: transform, opacity; } .hero { max-width: 100%; height: 92vh; background: url("images/img-main.png"); background-repeat: no-repeat; background-size: cover; /* ทำให้รูปเต็มพื้นที่ */ background-position: center; /* จัดรูปภาพให้อยู่ตรงกลาง */ box-shadow: -1rem 1vh 2rem rgba(0, 0, 0, 0.3); border-radius: 0 0 0 20vw; background-position: 87% center; /* หรือ right center */ .title-main-website { padding-top: 10rem; padding: 20px; h1 { font-size: clamp(3.5rem, 10vw, 13rem); color: var(--white); display: flex; justify-content: start; span { color: #B43F3F; margin-left: 20px; } } h3 { font-size: clamp(3rem, 10vw, 8rem); color: var(--white); } } } /*Social*/ .social { .nav-social { display: flex; justify-content: center; align-items: center; margin-top: -40px; .social-link { display: flex; background-color: var(--white); box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3); border-radius: clamp(0.8rem, 1vw, 1.563rem); height: auto; margin: 0; padding: 0; li { margin: 0.625rem; list-style: none; img { width: clamp(1.75rem, 5vw, 3.74rem); height: auto; transition: transform 0.3s ease; opacity: 75%; } } a:hover { justify-content: space-between; img { transform: scale(1.05); opacity: 95%; } } } } } h2 { font-size: clamp(3rem, 10vw, 5rem); margin-top: 20px; text-align: center; } h5 { font-size: clamp(2rem, 5vw, 2.813rem); margin-top: 20px; } /* ABOUT */ .about { padding: 20px; margin-top: clamp(2vh, 10vw, 6vh); img { width: clamp(25rem, 10vw, 24rem); height: auto; margin-top: 20px; border-radius: 30px; } p { font-family: 'Kanit', sans-serif; font-size: clamp(0.8rem, 3vw, 1.25rem); opacity: 95%; } .detial-about { list-style: none; li { font-size: clamp(1rem, 3vw, 1.563rem); strong { font-family: 'Roboto',sans-serif; font-weight: 900; } span { font-family: 'Roboto', sans-serif; font-weight: 400; } } } } /* My Projects */ .project { color: var(--white); background-color: #373A40; padding: 30px; margin-top: 50px; h2 { margin-bottom: 20px; } .card-scroll-wrapper { overflow-x: scroll; scroll-behavior: smooth; -ms-overflow-style: none; /* IE/Edge */ scrollbar-width: none; /* Firefox */ cursor: grab; .card-scroll-wrapper.dragging { cursor: grabbing; } /*แสดงแบบเลื่อน*/ .card-scroll-wrapper.collapsed { overflow-x: auto; white-space: nowrap; } .project-card-container.collapsed { display: flex; width: max-content; } /*แสดงทั้งหมด*/ .card-scroll-wrapper.expanded { overflow: visible; } .project-card-container.expanded { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1vw)); width: 100%; } /*แสดงแบบเลื่อน*/ .card-scroll-wrapper.collapsed { overflow-x: auto; white-space: nowrap; } .project-card-container.collapsed { display: flex; width: max-content; } /*แสดงทั้งหมด*/ .card-scroll-wrapper.expanded { overflow: visible; } .project-card-container.expanded { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1vw)); width: 100%; } .project-card-container { font-family: 'Kanit', sans-serif; display: flex; align-items: center; justify-content: center; gap: 20px; width: max-content; cursor: grab; .card { flex: 0 0 auto; width: 100%; max-width: 250px; height: auto; background-color: var(--white); opacity: 85%; border-radius: 12px; padding: 0; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); transition: transform 0.5s ease-in; a { display: block; text-decoration: none; img { width: 100%; height: 180px; object-fit: cover; /* ตัดภาพให้พอดีโดยไม่บิด */ padding: 5px; border-radius: 15px; word-wrap: break-word; overflow-wrap: break-word; white-space: normal; display: block; /* ป้องกันภาพเกิน padding */ transition: transform 0.5s ease; } img:hover { transform: scale(1.01); border-radius: 12px 12px 0 0; padding: 0; } h2 { font-size: clamp(1.2rem, 3vw, 2rem); font-weight: 600; color: #373A40; padding: 5px; margin: 10px 0 5px; margin-top: -5px; letter-spacing: 0.5px; text-align: start; word-wrap: break-word; overflow-wrap: break-word; white-space: normal; display: block; } p { color: #373A40; font-size: clamp(0.7rem, 3vw, 1.5rem); font-weight: 500; padding: 5px; margin-top: -10px; text-align: start; opacity: 90%; word-wrap: break-word; overflow-wrap: break-word; white-space: normal; display: block; } } } .card:hover { opacity: 100%; box-shadow: 0 0 16px rgba(0, 0, 0, 0.3); } } } .scroll-btn { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(255, 255, 255, 0.8); color: #333; border: none; font-size: 1.2rem; cursor: pointer; z-index: 10; padding: 0.5vw; border-radius: 10px; transition: background-color 0.3s ease; } .scroll-btn:hover { background-color: rgba(255,255,255,0.9); } .scroll-btn.left { left: 10px; } .scroll-btn.right { right: 10px; } .card-scroll-wrapper { position: relative; } .see-all-container { text-align: center; margin-top: 20px; .see-all-btn { font-family: 'Kanit', sans-serif; font-weight: 600; padding: 10px 10px; background-color: #B43F3F; color: var(--white); border: none; border-radius: 10px; opacity: 90%; cursor: pointer; margin-top: 10px; transition: background-color 0.3s ease; } .see-all-btn:hover { opacity: 100%; } } } /* .skills { color: var(--white); background-color: #373A40; padding-top: 5px; padding-bottom: 30px; padding: 20px; .container { width: 90%; max-width: 1200px; margin: auto; .skill { font-family: 'Kanit',sans-serif; font-weight: 600; margin-bottom: 2vh; p { margin: 0 0 0.5vh 0; font-size: 1.2em; letter-spacing: 0.1rem; } .skill-bar { width: 100%; background-color: #D7D7D7; border-radius: 1vh; overflow: hidden; height: 2.5vh; .skill-level { height: 100%; color: white; text-align: right; padding-right: 1vh; line-height: 2.5vh; font-size: 1em; border-radius: 1vh 0 0 1vh; } .html { width: 75%; background-color: #FE7743; } .css { width: 75%; background-color: #3D74B6; } .javascript { width: 50%; background-color: #FADA7A; } .php { width: 20%; background-color: #9B7EBD; } .c { width: 70%; background-color: #34699A; } .python { width: 70%; background-color: #FFCB61; } } } } }*/ /* RESUME */ .resume { margin-top: clamp(2vh, 10vw, 6vh); h2 { margin-bottom: 30px; } .bg-school { box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2); border-radius: 20px; img { width: clamp(6rem, 10vw, 10rem); height: auto; } .text-resume { font-family: 'Roboto', sans-serif; h3{ font-size: clamp(1rem, 3vw, 2rem); font-weight: 900; opacity: 95%; } h4 { font-size: clamp(0.7rem, 3vw, 1.5rem); font-weight: 800; opacity: 88%; margin-top: -5px; } p { font-size: clamp(0.5rem, 2vw, 1.1rem); font-family: 'Kanit', sans-serif; } } } } /* CONTACT */ .contact { color: var(--white); background-color: #373A40; padding-top: 5px; padding-bottom: 30px; margin-top: clamp(2vh, 10vw, 6vh); p { font-family: 'Kanit', sans-serif; font-weight: 800; font-size: clamp(1rem, 3vw, 2rem); a { color: #8EACCD; } } .nav-social { display: flex; justify-content: center; align-items: center; .social-link { display: flex; height: auto; margin: 0; padding: 0; li { margin: 0.625rem; list-style: none; img { width: clamp(1.5rem, 5vw, 3.5rem); height: auto; transition: transform 0.3s ease-in-out; opacity: 75%; } } a:hover { justify-content: space-between; img { transform: scale(1.1); opacity: 95%; } } } } .line-txt-form { background-color: var(--white); width: 40%; height: 1px; opacity: 50%; margin: 20px auto; } .form { font-family: 'Kanit', sans-serif; font-weight: 600; .card { color: var(--white); background-color: #373A40; border: none; label { font-size: clamp(1.2rem, 3vw, 2rem) } .txt { font-weight: 600; color: #373A40; margin-top: 5px; border: none; border-radius: 15px; height: 50px; } } .error { font-family: 'Kanit', sans-serif !important; padding-left: 10px; display: none; color: #ff4c4c; font-size: 0.9rem; margin-top: 5px; } input.invalid, textarea.invalid { border: 1px solid #ff4c4c; } } button { font-family: 'Kanit', sans-serif; font-weight: 600; color: var(--white); background-color: #B43F3F; margin-top: 10px; transition: transform 0.3s ease; border-radius: 10px; opacity: 90%; } button:hover { color: var(--white); background-color: #B43F3F; opacity: 100%; } } input, textarea { padding-left: 15px; box-sizing: border-box; } textarea { padding-top: 13px; } input::placeholder,textarea::placeholder { font-family: 'Roboto', sans-serif; font-weight: 600; font-size: clamp(0.8rem, 2vw, 1.1rem); color: #373A40; opacity: 0.7; padding: 0; } input:focus, textarea:focus { outline: none; } /* Animation */ .typewriter { overflow: hidden; white-space: nowrap; width: 0; /* เริ่มจากไม่มีความกว้าง */ border-right: 2px solid #fff; /* เส้นกระพริบ (cursor) */ animation: typing 3s steps(9, end) 3s infinite, blink 1s step-end infinite; } @keyframes typing { from { width: 0 } to { width: 9ch } } /* เอฟเฟกต์เส้นกระพริบ */ @keyframes blink { 50% { border-right-color: transparent; } } .fade-in { opacity: 0; transform: translateY(20px); transition-property: opacity, transform; transition-timing-function: ease; transition-duration: 2s; /* default 3s */ } .fade-in.animate { opacity: 1; transform: translateY(0); } /* media */ @media (max-width: 768px) { .hero { max-height: 80vh; border-radius: 0 0 0 10vw; /* ปรับมุมให้เล็กลงถ้าต้องการ */ } .social.nav-social { margin-top: -20px; } .skills .container { width: 95%; } .skills .skill p { font-size: 1em; } .skills .skill-bar { height: 2vh; } .skills .skill-level { font-size: 0.9em; line-height: 2vh; padding-right: 0.5vh; } } /* Responsive สำหรับมือถือแนวตั้ง */ @media (max-width: 576px) { .social .nav-social { margin-top: -25px; } .skills .skill p { font-size: 0.95em; } .skills .skill-bar { height: 1.8vh; } .skills .skill-level { font-size: 0.8em; line-height: 1.8vh; padding-right: 0.3vh; } }
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Génération de la page: 0.32 |
proxy
|
phpinfo
|
Réglages