Gestionnaire de fichiers - Editer - /home/kridsana/webapp.cm.in.th/673190901/u67319090010/Portfolio/style.css
Arrière
* { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; color: #faf9f3; } header{ position: relative; padding-top: 20px; padding-bottom: 20px; } /* Navbar */ .navigation-bar{ display: flex; position: fixed; justify-content: space-between; background: #1f232d; padding: 8px; width: 100%; top: 0; z-index: 1000; } .logo{ align-items: center; padding: 10px; } .logo a{ border-radius: 4px; text-decoration: none; font-weight: bold; font-size: 16px; padding: 14px; } .menu{ display: flex; list-style: none; align-items: center; } .menu li{ margin-left: 20px; align-items: center; } .menu li a{ padding: 14px; border-radius: 4px; font-size: 14px; text-decoration-line: none; font-weight: bolder; } .logo a:hover, .menu li a:hover{ background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)); } /* End Navbar */ body{ background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url('https://webapp.cm.in.th/673190901/u67319090010/Portfolio/img/Background.gif'); background-position: center; background-size:auto; background-attachment: fixed; } /* Section Hero */ .hero { height: 100vh; display: flex; justify-content: center; align-items: center; gap: 80px; } .hero-img{ transform: translateX(100px); filter: blur(20px); opacity: 0; animation: slideX 0.5s 0.9s forwards; /*animation: slide? 0.5s 0.7s<<--(This is Delay Show first Set sec Low) forwards;*/ } .hero-img img{ width: 420px; border-radius: 100%; } .hero-content { display: flex; flex-direction: column; background-color: #000033; box-shadow: 0px 0px 20px rgba(0, 162, 255, 0.5); padding: 32px; width: 50%; height: fit-content; border-radius: 10px; transform: translateX(-100px); filter: blur(20px); opacity: 0; animation: slideX 0.5s 0.7s forwards; } .hero-content h1{ font-size: 48px; align-self: center; } .hero-content p{ margin-top: 10px; font-size: 28px; align-self: center; } .hero-content h1, .hero-content p{ transform: translateY(100px); filter: blur(20px); opacity: 0; animation: slideY 0.5s 1s forwards; } .hero-content h3{ margin-top: 30px; font-size: 46px; color: #af76ff; transform: translateY(100px); filter: blur(20px); opacity: 0; animation: slideY 0.5s 1.3s forwards; } .hero-content h2{ font-size: 48px; margin-top: 30px; } .text-typing{ margin-top: 30px; font-size: 42px; align-self: center; font-weight: bolder; } .type-writer{ position: relative; } .hero-content h2, .text-typing, .type-writer{ transform: translateY(100px); filter: blur(20px); opacity: 0; animation: slideY 0.5s 1.6s forwards; } .type-writer::before{ content: "Programmer"; color: orange; animation: words 20s infinite; } .type-writer::after{ content: " "; position: absolute; background-color: #000033; border-left: 4px solid #ffff; width: calc(101% + 8px); height: 105%; right: -8px; animation: cursor 0.8s infinite, typing 20s steps(17) infinite; } /* Type Writer */ @keyframes cursor{ to{ border-left: 4px solid #ffff0000; } } @keyframes words{ 0%,25%{ content: "Hi! My name is Tanatat."; } 26%,40%{ content: "My nickname is Gene!"; } 41%,60%{ content: "I can do IoT ,Programming."; } 61%,80%{ content: "Website Development."; } 81%,100%{ content: "And Networking System."; } } @keyframes typing { 10%,15%,30%,35%,50%,55%,70%,75%,90%,95%{ width: 0; } 5%,20%,25%,40%,45%,60%,65%,80%,85%{ width: calc(100% + 8px); } } /* End Type Writer */ /* End Section Hero */ /* Section About Me */ .about-me { min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 50px 20px; } .paragraph{ font-size: 18px; margin-bottom: 15px; } .my_info { background: rgba(20, 20, 50); /* กรอบโปร่งแสงโทนสีน้ำเงินเข้ม */ padding: 40px; border-radius: 12px; box-shadow: 0px 0px 20px rgba(0, 162, 255, 0.5); max-width: 800px; width: 100%; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; } .my_info.fade-in { opacity: 1; transform: translateY(0); } .my_info h2 { font-size: 32px; margin-bottom: 15px; color: #79b8ff; border-bottom: 2px solid #79b8ff; display: inline-block; padding-bottom: 5px; } .my_info p { font-size: 18px; color: #ddd; margin-bottom: 10px; } .education { margin-top: 20px; } .education h3 { font-size: 22px; color: #ddd; margin-top: 10px; } @keyframes fadeIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* End Section About Me */ .skills{ min-height: 100vh; padding: 80px 20px; } .skills h2 { font-size: 48px; font-weight: bold; margin-bottom: 40px; color: #f4f4f4; text-shadow: 2px 2px 10px rgba(255, 255, 255, 0.2); } .skills-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; padding: 20px; } .skill-card { background: rgba(20, 20, 50); border-radius: 10px; padding: 20px; box-shadow: 0 6px 15px rgba(255, 255, 255, 0.3); backdrop-filter: blur(10px); transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; opacity: 0; transform: translateY(20px); } .skill-card:hover { transform: scale(1.05); box-shadow: 0px 0px 20px rgba(0, 162, 255, 0.5); } .skill-card h3 { font-size: 24px; font-weight: bold; color: #ffffff; margin-bottom: 10px; } .skill-card ul { list-style: none; padding: 0; color: #ffffff; opacity: 0.8; } .skill-card ul li { font-size: 18px; margin-bottom: 5px; } /* Animation Fade-in */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .skill-card.visible { animation: fadeInUp 0.8s ease-out forwards; } footer { background-color: #333; text-align: center; padding: 1em 0; } footer p{ font-weight: bold; color: #5f5f5f; } footer p a, footer p i{ text-decoration: none; color: #b0b0b0; font-size: 16.5px; } /* Transitions */ @keyframes slideY{ to{ opacity: 1; filter: blur(0); transform: translateY(0); } } @keyframes slideX{ to{ opacity: 1; filter: blur(0); transform: translateX(0); } } /* End Transitions */ /* Responsive */ @media (max-width: 1270px){ .hero-content h1{ font-size: 46px; } } @media (max-width: 1080px) { .hero-img img{ width: 300px; border-radius: 100%; } .hero-content h1{ font-size: 38px; align-self: center; } .hero-content p{ margin-top: 10px; font-size: 24px; align-self: center; } .hero-content h2{ font-size: 36px; margin-top: 10px; } .text-typing{ margin-top: 20px; font-size: 34px; } } @media (max-width: 768px) { .hero-img img{ width: 300px; border-radius: 100%; } .hero-content h1{ font-size: 26px; } .hero-content p{ margin-top: 10px; font-size: 16px; } .hero-content h3{ margin-top: 10px; font-size: 24px; } .hero-content h2{ font-size: 26px; margin-top: 10px; } .text-typing{ margin-top: 20px; font-size: 24px; } .hero { flex-direction: column; /* ย้าย hero-content ไปข้างล่าง */ } .hero-content { width: 90%; } .skills-container{ justify-content: center; } } @media (max-width: 480px) { .logo a{ padding: 4px; font-size: 8px; } .menu li a{ padding: 4px; font-size: 8px; } .hero{ flex-direction: column; gap: 10px; } .hero-img img{ width: 200px; border-radius: 100%; } .hero-content{ width: 80%; } .hero-content h1{ font-size: 20px; } .hero-content p{ margin-top: 9px; font-size: 10px; } .hero-content h3{ margin-top: 9px; font-size: 18px; } .hero-content h2{ margin-top: 9px; font-size: 18px; } .text-typing{ margin-top: 9px; font-size: 18px; } } /* end Responsive */ /* <---------------- End index.html --------------> */ /* <---------------- certificates.html --------------> */ .certificates { text-align: center; padding: 80px 20px; min-height: 100vh; } .certificates h2 { font-size: 48px; font-weight: bold; margin-bottom: 40px; color: #f4f4f4; text-shadow: 2px 2px 10px rgba(255, 255, 255, 0.2); } .certificate { display: flex; align-items: center; background: rgba(20, 20, 50, 0.2); border-radius: 10px; padding: 20px; margin-bottom: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); backdrop-filter: blur(10px); transition: transform 0.5s ease-in-out, filter 0.5s ease-in-out, opacity 0.5s ease-in-out; transform: translateX(-100px); filter: blur(20px); opacity: 0; } /* เมื่อเลื่อนมาถึงจะแสดงทีละอัน */ .certificate.visible { transform: translateX(0); filter: blur(0); opacity: 1; } .certificate img { width: 400px; height: auto; border-radius: 5px; margin-right: 20px; box-shadow: 2px 2px 10px rgba(255, 255, 255, 0.2); transition: transform 0.3s ease-in-out; } .certificate img:hover { transform: scale(1.1); } .certificate-info { text-align: left; color: #ffffff; } .certificate-info h3 { font-size: 24px; font-weight: bold; margin-bottom: 5px; } .certificate-info p { font-size: 18px; margin-bottom: 2px; opacity: 0.8; } /* Responsive Design */ @media (max-width: 768px) { .certificate { flex-direction: column; text-align: center; } .certificate img { margin-bottom: 10px; margin-right: 0; width: 300px; } } /* <---------------- End certificates.html --------------> */ /* <---------------- contact.html --------------> */ .contact { min-height: 100vh; text-align: center; padding: 80px 20px; } .contact h2 { font-size: 48px; font-weight: bold; margin-bottom: 40px; color: #f4f4f4; text-shadow: 2px 2px 10px rgba(255, 255, 255, 0.2); } .contact-container { display: flex; flex-direction: column; align-items: center; gap: 20px; } .contact-item { display: flex; align-items: center; gap: 15px; background: rgba(255, 255, 255, 0.1); padding: 15px 25px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); backdrop-filter: blur(10px); font-size: 20px; color: #ffffff; transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; opacity: 0; transform: translateY(20px); } .contact-item i { font-size: 28px; color: #00bcd4; } .contact-item a { color: #ffffff; text-decoration: none; transition: color 0.3s; } .contact-item a:hover { color: #00e5ff; } .contact-item:hover { transform: scale(1.05); box-shadow: 0 6px 15px rgba(255, 255, 255, 0.3); } /* Animation Fade-in */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .contact-item.visible { animation: fadeInUp 0.8s ease-out forwards; } /* Responsive Design */ @media (max-width: 768px) { .contact-container { width: 100%; padding: 0 20px; } .contact-item { width: 100%; justify-content: center; } .contact-item i { font-size: 16px; color: #00bcd4; } }
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Génération de la page: 0.08 |
proxy
|
phpinfo
|
Réglages