File manager

File manager - Edit - /home/kridsana/webapp.cm.in.th/663012801/u66301280015/portfolios/style.css

Back
@import url('https://fonts.googleapis.com/css2?family=K2D:wght@100&display=swap'); :root { --website-color: rgb(20, 25, 35); --hover-color: rgb(0, 155, 255); --text-color: rgb(255, 255, 255); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: "K2D", sans-serif; font-weight: 100; font-style: normal; } html { background-color: var(--website-color); scroll-behavior: smooth; } @media screen and (max-width: 748px) { html, body { width: 150%; } } /* ========== Navigation Bar ========== / .nav-bar { display: flex; justify-content: space-between; height: 60px; align-items: center; padding: 2.5rem 5rem; position: sticky; top: 0; background-color: var(--website-color); z-index: 1000; & .nav-bar-menu { display: flex; list-style: none; & li { margin: 0 0.5rem; & .active-link { background-color: rgb(0, 155, 255); } & a { color: var(--text-color); text-decoration: none; padding: 1em 1em; transition: background-color 150ms ease; border-radius: 10px; } & a:hover { background-color: rgb(150, 0, 255); } } @media screen and (max-width: 992px) { display: none; } } & .toggle-btn { color: var(--text-color); font-size: 2rem; cursor: pointer; display: none; @media screen and (max-width: 992px) { display: block; } } & .dropdown-menu { display: none; position: absolute; top: 75px; height: 0; width: 300px; background-color: rgba(255, 255, 255, 0.25); backdrop-filter: blur(15px); border-radius: 10px; overflow: hidden; transition: height 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); & li a{ color: rgb(20, 25, 35); padding: 1rem; display: flex; align-items: center; justify-content: center; text-decoration: none; } @media screen and (max-width: 992px) { display: block; right: 5rem; } @media screen and (max-width: 828px) { left: 2rem; width: unset; right: 2rem; } } & .dropdown-menu.open { height: 215px; } } / ========== Home Page ========== / .short { background-image: url('./image/night_light.png'); background-position: center; background-size: cover; padding: 17.5rem 5rem; z-index: 1; & .short-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 20px; align-items: center; & .short-data { text-align: center; padding: 1rem; & img { width: 50%; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.35); @media screen and (max-width: 992px) { width: 60%; } } & .short-data-write { text-align: left; color: var(--text-color); & .short-hello { font-size: 2rem; @media screen and (max-width: 828px) { font-size: 1.5rem; } } & .short-name { padding: 1rem 0; font-size: 3rem; & .shorth-name-ightlight { background: linear-gradient(to right, #845ec2, #d65db1, #ff6f91, #ff9671, #ffc75f, #f9f871); background-clip: text; color: transparent; animation: shorth-name-ightlight 5s linear infinite; background-size: 200% 200%; } @media screen and (max-width: 828px) { font-size: 2rem; } } & .short-role { font-size: 1.5rem; & .type { color: rgb(0, 255, 255); align-items: center; --d:2s; / duration / display:inline-block; vertical-align: bottom; } & .type > span { display:grid; overflow: hidden; height:1.25em; } & .type span span { width:0%; max-width:max-content; overflow: hidden; height:inherit; word-break:break-all; animation: c 0.5s infinite steps(1), t var(--d) linear infinite alternate, m calc(var(--d)2var(--n)) steps(var(--n)) infinite; } & .type span span:before { content:" "; display:inline-block; } @media screen and (max-width: 828px) { font-size: 1.5rem; } } @media screen and (max-width: 992px) { text-align: center; } } } @media screen and (max-width: 828px) { grid-template-columns: repeat(1, 1fr); } } } @keyframes shorth-name-ightlight { 0% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } } @keyframes t{ 90%,100% {width:100%} } @keyframes c{ 0%,100%{box-shadow:5px 0 0 #0000} 50% {box-shadow:5px 0 0 rgb(255, 255, 255) } } @keyframes m{ 100% {transform:translateY(calc(-100%var(--n)))} } /* ========== Home Page ========== / / ========== Marquee Logo ========== / .marquee-logo { padding: 2.5rem 5rem; background: #fff; z-index: 1; / & .marquee-logo-h1 { display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 2rem; } / & .marquee-wrapper { width: 90%; max-width: 1536px; margin-inline: auto; position: relative; height: 100px; overflow: hidden; mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0)); & .marquee-item { display: flex; align-items: center; justify-content: center; width: 200px; height: 100px; position: absolute; left: max(calc(300px 16), 100%); animation-name: scrollLeft; animation-duration: 30s; animation-timing-function: linear; animation-iteration-count: infinite; & img { height: 100%; } @media screen and (max-width: 748px) { left: max(calc(200px * 17), 100%); } } & .item1 { animation-delay: calc(30s / 17 * (17 - 1) * -1); } & .item2 { animation-delay: calc(30s / 17 * (17 - 2) * -1); } & .item3 { animation-delay: calc(30s / 17 * (17 - 3) * -1); } & .item4 { animation-delay: calc(30s / 17 * (17 - 4) * -1); } & .item5 { animation-delay: calc(30s / 17 * (17 - 5) * -1); } & .item6 { animation-delay: calc(30s / 17 * (17 - 6) * -1); } & .item7 { animation-delay: calc(30s / 17 * (17 - 7) * -1); } & .item8 { animation-delay: calc(30s / 17 * (17 - 8) * -1); } & .item9 { animation-delay: calc(30s / 17 * (17 - 9) * -1); } & .item10 { animation-delay: calc(30s / 17 * (17 - 10) * -1); } & .item11 { animation-delay: calc(30s / 17 * (17 - 11) * -1); } & .item12 { animation-delay: calc(30s / 17 * (17 - 12) * -1); } & .item13 { animation-delay: calc(30s / 17 * (17 - 13) * -1); } & .item14 { animation-delay: calc(30s / 17 * (17 - 14) * -1); } & .item15 { animation-delay: calc(30s / 17 * (17 - 15) * -1); } & .item16 { animation-delay: calc(30s / 17 * (17 - 16) * -1); } & .item17 { animation-delay: calc(30s / 17 * (17 - 17) * -1); } } } @keyframes scrollLeft { to { left: -200px; } } /* ========== Marquee Logo ========== / / ========== About Me Page ========== / .aboutme { padding: 5rem 5rem; background: radial-gradient(circle, transparent 20%, #141923 20%, #141923 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, #141923 20%, #141923 80%, transparent 80%, transparent) 25px 25px, linear-gradient(#006464 2px, transparent 2px) 0 -1px, linear-gradient(90deg, #006464 2px, #141923 2px) -1px 0; background-size: 50px 50px, 50px 50px, 25px 25px, 25px 25px; z-index: 1; & .aboutme-text { align-items: center; text-align: center; margin: 0 auto 50px; padding: 1rem; animation: fader 5s linear; animation-timeline: view(); animation-range: entry 0 cover 30%; color: var(--text-color); background: rgba(255, 255, 255, 0.05); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.1); & .aboutme-h1 { font-size: 36px; padding: 1rem; } & .aboutme-p { font-size: 18px; padding: 1rem; } } & .synopsis-education { padding: 1rem; color: var(--text-color); text-align: center; margin: 0 auto 50px; animation: fader 5s linear; animation-timeline: view(); animation-range: entry 0 cover 30%; background: rgba(255, 255, 255, 0.05); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.1); & .synopsis-education-h1 { font-size: 36px; } & .synopsis-education-eachlevel { padding: 15px; width: 95%; margin: 0 auto 15px; background: rgb(30, 35, 45); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); & .synopsis-education-p { font-size: 20px; } & p { padding: 5px; } } } & .synopsis-experience { padding: 1rem; color: var(--text-color); text-align: center; margin: 0 auto 50px; animation: fader 5s linear; animation-timeline: view(); animation-range: entry 0 cover 30%; background: rgba(255, 255, 255, 0.05); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.1); & .synopsis-experience-h1 { font-size: 36px; } & .synopsis-experience-all { padding: 15px; width: 95%; margin: 0 auto 15px; background: rgb(30, 35, 45); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); & .synopsis-experience-p { font-size: 20px; } & p { padding: 5px; } } } & .synopsis-skill { padding: 1rem; color: var(--text-color); text-align: center; margin: 0 auto 50px; animation: fader 5s linear; animation-timeline: view(); animation-range: entry 0 cover 30%; background: rgba(255, 255, 255, 0.05); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.1); & .synopsis-skill-h1 { font-size: 36px; } & .synopsis-skill-all { padding: 15px; width: 95%; margin: 0 auto 15px; background: rgb(30, 35, 45); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); & .synopsis-skill-p { font-size: 20px; } & p { padding: 5px; } } } & .synopsis-skill-bar-lang { padding: 1rem; color: var(--text-color); text-align: center; margin: 0 auto 50px; animation: fader 5s linear; animation-timeline: view(); animation-range: entry 0 cover 30%; background: rgba(255, 255, 255, 0.05); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.1); & .synopsis-skill-bar-lang-all { padding: 15px; width: 95%; margin: 0 auto 15px; background: rgb(30, 35, 45); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); & .synopsis-skill-bar-lang-all-p { font-size: 20px; padding: 1rem 0; } & .synopsis-skill-bar-lang-all-p:nth-child(1) { position:relative; float:left; top:-22px; } & .synopsis-skill-bar-lang-all-p:nth-child(2) { position:relative; float:right; top:-22px; } & p { padding: 5px; } & .skill-bar-lang.thai { clear: both; background-color:#262626; padding:5px; border:1px solid rgb(0, 155, 255); border-radius:10px; & .skill-bar-level-lang { background-color:rgb(0, 155, 255); width:100%; height:10px; border-radius:10px; } } & .skill-bar-lang.eng { clear: both; background-color:#262626; padding:5px; border:1px solid rgb(0, 155, 255); border-radius:10px; & .skill-bar-level-lang { background-color:rgb(0, 155, 255); width:100%; height:10px; border-radius:10px; } } } } & .synopsis-skill-bar-program { padding: 1rem; color: var(--text-color); text-align: center; margin: 0 auto 5rem; animation: fader 5s linear; animation-timeline: view(); animation-range: entry 0 cover 30%; background: rgba(255, 255, 255, 0.05); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.1); & .synopsis-skill-bar-program-all { padding: 15px; width: 95%; margin: 0 auto 15px; background: rgb(30, 35, 45); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); & .synopsis-skill-bar-program-all-p { font-size: 20px; padding: 1rem 0; } & .synopsis-skill-bar-program-all-p:nth-child(1) { position:relative; float:left; top:-22px; } & .synopsis-skill-bar-program-all-p:nth-child(2) { position:relative; float:right; top:-22px; } & p { padding: 5px; } & .skill-bar-program.html { clear: both; background-color:#262626; padding:5px; border:1px solid #E34F26; border-radius:10px; & .skill-bar-level-program { background-color: #E34F26; width:100%; height:10px; border-radius:10px; } } & .skill-bar-program.php { clear: both; background-color:#262626; padding:5px; border:1px solid #777BB4; border-radius:10px; & .skill-bar-level-program { background-color: #777BB4; width:100%; height:10px; border-radius:10px; } } & .skill-bar-program.css { clear: both; background-color:#262626; padding:5px; border:1px solid #1572B6; border-radius:10px; & .skill-bar-level-program { background-color: #1572B6; width:100%; height:10px; border-radius:10px; } } & .skill-bar-program.javascript { clear: both; background-color:#262626; padding:5px; border:1px solid #F7DF1E; border-radius:10px; & .skill-bar-level-program { background-color: #F7DF1E; width:100%; height:10px; border-radius:10px; } } & .skill-bar-program.cpp { clear: both; background-color:#262626; padding:5px; border:1px solid #00599C; border-radius:10px; & .skill-bar-level-program { background-color: #00599C; width:100%; height:10px; border-radius:10px; } } & .skill-bar-program.sql { clear: both; background-color:#262626; padding:5px; border:1px solid #00758F; border-radius:10px; & .skill-bar-level-program { background-color: #00758F; width:100%; height:10px; border-radius:10px; } } } } & .tool-use { animation: fader 5s linear; animation-timeline: view(); animation-range: entry 0 cover 30%; z-index: 1; & .tool-use-h1 { background-color: rgb(30, 35, 45); color: #ffffff; text-align: center; font-size: 36px; padding: 15px; margin: 0 auto 5rem; width: 22.5rem; border-radius: 20px; border: 1px solid rgb(255, 255, 255); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); @media screen and (max-width: 540px) { width: 100%; } } & .tool-use-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 5rem; max-width: 100%; & .tool-use-column { padding: 15px; background-color: rgb(30, 35, 45); border-radius: 20px; text-align: center; width: 300px; height: 250px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid rgb(255, 255, 255); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); & img { width: 150px; height: 150px; object-fit: contain; margin: 0 auto 15px; display: block; } & p { font-size: 20px; color: var(--text-color); margin-top: auto; text-align: center; } } } } } @keyframes fader { from { opacity: 0; scale: 0.5; } to { opacity: 1; scale: 1; } } / ========== About Me Page ========== / / ========== Project Page ========== / .project-background { padding: 5rem 5rem; z-index: 1; background: url(./image/background-animation.png) repeat 0 0; -webkit-animation: bg-scrolling-reverse 0.92s infinite linear; -moz-animation: bg-scrolling-reverse 0.92s infinite linear; -o-animation: bg-scrolling-reverse 0.92s infinite linear; animation: bg-scrolling-reverse 0.92s infinite linear; & .project-background-h1 { color: #000000; text-align: center; font-size: 36px; padding: 15px; margin: 0 auto 5rem; width: 17.5rem; background: rgba(255, 255, 255); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(15px); @media screen and (max-width: 540px) { width: 100%; } } & .project-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 5rem; max-width: 100%; & .project-container-column { background: white; padding: 15px; border-radius: 20px; text-align: center; width: 400px; display: flex; flex-direction: column; justify-content: space-between; height: 100%; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); & .project-image-container { display: flex; align-items: center; justify-content: center; height: 250px; overflow: hidden; & img { max-width: 100%; max-height: 100%; border-radius: 10px; } } & .project-content { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 10px; & .project-content-title { font-size: 1.7em; font-weight: bold; margin: 10px 0; } & .project-content-description { font-size: 1.1em; color: #333; max-height: 100px; overflow-y: auto; text-align: left; padding: 5px; width: 90%; background: rgb(200, 200, 200); border-radius: 5px; } } & .project-btn.web { display: inline-block; margin-top: 15px; padding: 10px 20px; background-color: #007BFF; color: white; text-decoration: none; border-radius: 10px; transition: 0.3s; } & .project-btn.web:hover { background-color: #0056b3; } & .project-btn.img { display: inline-block; margin-top: 15px; padding: 10px 20px; background-color: rgb(255, 150, 0); color: white; text-decoration: none; border-radius: 10px; transition: 0.3s; cursor: pointer; } & .project-btn.img:hover { background-color: rgb(200, 100, 0); } & .project-popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); justify-content: center; align-items: center; z-index: 1001; & img { margin-bottom: 50px; max-width: 90%; max-height: 90%; border-radius: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.5); z-index: 1001; } & .project-close { position: absolute; top: 10px; right: 30px; font-size: 30px; color: white; cursor: pointer; z-index: 2; z-index: 1002; } & .project-next { position: absolute; top: 50%; transform: translateY(-50%); font-size: 30px; color: white; background: rgba(0,0,0,0.3); border: none; cursor: pointer; padding: 10px; border-radius: 50%; z-index: 1002; } & .project-prev { position: absolute; top: 50%; transform: translateY(-50%); font-size: 30px; color: white; background: rgba(0,0,0,0.3); border: none; cursor: pointer; padding: 10px; border-radius: 50%; z-index: 1002; } & .project-prev { left: 20px; } & .project-next { right: 20px; } & .project-image-counter { position: absolute; bottom: 25px; left: 50%; transform: translateX(-50%); color: white; background: rgba(0,0,0,0.5); padding: 5px 20px; border-radius: 15px; font-size: 14px; z-index: 1001; } & .project-image-error { color: red; margin: 10px 0; } } } } } @-webkit-keyframes bg-scrolling-reverse { 100% { background-position: 50px 50px; } } @-moz-keyframes bg-scrolling-reverse { 100% { background-position: 50px 50px; } } @-o-keyframes bg-scrolling-reverse { 100% { background-position: 50px 50px; } } @keyframes bg-scrolling-reverse { 100% { background-position: 50px 50px; } } / ========== Project Me Page ========== / / ========== Contact Me Page ========== / .contact { padding: 12.5rem 5rem; background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradient 15s ease infinite; z-index: 1; & .contact-container-h1 { color: #ffffff; text-align: center; font-size: 36px; padding: 15px; margin: 0 auto 5rem; width: 22.5rem; border-radius: 20px; border: 2px solid rgb(255, 255, 255); @media screen and (max-width: 540px) { width: 100%; } } & .contact-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 5rem; max-width: 100%; margin: 0 auto 5rem; & .contact-container-column { padding: 15px; border-radius: 20px; text-align: center; width: 300px; display: flex; flex-direction: column; justify-content: space-between; height: 100%; border: 2px solid rgb(255, 255, 255); & p:nth-child(1) { font-size: 180px; color: var(--text-color); } & p:nth-child(2) { font-size: 20px; margin: 0 auto 15px; color: var(--text-color) } & p:nth-child(3) { font-size: 20px; color: var(--text-color); } } } & .footer { text-align: center; color: var(--text-color); font-size: 18px; } } @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } / ========== Contact Me Page ========== / / ========== Loading animation ========== / .loader-screen { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: var(--website-color); display: flex; justify-content: center; align-items: center; z-index: 1001; } .lds-roller { / change color here / color: var(--hover-color) } .lds-roller, .lds-roller div, .lds-roller div:after { box-sizing: border-box; } .lds-roller { display: inline-block; position: relative; width: 80px; height: 80px; } .lds-roller div { animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; transform-origin: 40px 40px; } .lds-roller div:after { content: " "; display: block; position: absolute; width: 7.2px; height: 7.2px; border-radius: 50%; background: currentColor; margin: -3.6px 0 0 -3.6px; } .lds-roller div:nth-child(1) { animation-delay: -0.036s; } .lds-roller div:nth-child(1):after { top: 62.62742px; left: 62.62742px; } .lds-roller div:nth-child(2) { animation-delay: -0.072s; } .lds-roller div:nth-child(2):after { top: 67.71281px; left: 56px; } .lds-roller div:nth-child(3) { animation-delay: -0.108s; } .lds-roller div:nth-child(3):after { top: 70.90963px; left: 48.28221px; } .lds-roller div:nth-child(4) { animation-delay: -0.144s; } .lds-roller div:nth-child(4):after { top: 72px; left: 40px; } .lds-roller div:nth-child(5) { animation-delay: -0.18s; } .lds-roller div:nth-child(5):after { top: 70.90963px; left: 31.71779px; } .lds-roller div:nth-child(6) { animation-delay: -0.216s; } .lds-roller div:nth-child(6):after { top: 67.71281px; left: 24px; } .lds-roller div:nth-child(7) { animation-delay: -0.252s; } .lds-roller div:nth-child(7):after { top: 62.62742px; left: 17.37258px; } .lds-roller div:nth-child(8) { animation-delay: -0.288s; } .lds-roller div:nth-child(8):after { top: 56px; left: 12.28719px; } @keyframes lds-roller { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } / ========== Loading animation ========== */

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