File manager

File manager - Edit - /home/webapp68.cm.in.th/u68319090019/Portfolio/about.html

Back
<!DOCTYPE html> <html lang="th"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>เกี่ยวกับ \| Portfolio</title> <style> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap'); body { font-family: 'Poppins', sans-serif; background: linear-gradient(135deg, #0f1115, #1a1d22); color: #f5f5f5; margin: 0; min-height: 100vh; display: flex; flex-direction: column; } nav { background-color: #1a1d22; padding: 15px 30px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 8px rgba(0,188,212,0.2); position: sticky; top: 0; z-index: 100; } nav a { color: #f5f5f5; margin-left: 20px; text-decoration: none; font-weight: 600; position: relative; transition: color 0.3s ease; } nav a::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -6px; left: 0; background-color: #00bcd4; transition: width 0.3s ease; border-radius: 2px; } nav a:hover { color: #00bcd4; } nav a:hover::after { width: 100%; } section { max-width: 1000px; margin: 60px auto; padding: 30px 40px; background: rgba(26, 29, 34, 0.85); border-radius: 12px; box-shadow: 0 8px 20px rgba(0,188,212,0.15); animation: fadeSlideIn 1s ease forwards; opacity: 0; transform: translateY(30px); display: flex; align-items: flex-start; gap: 40px; flex-wrap: wrap; } .profile-pic { flex: 0 0 240px; width: 240px; height: 240px; border-radius: 50%; object-fit: cover; background-color: #222831; box-shadow: 0 12px 25px rgba(0,188,212,0.5); border: 4px solid #00bcd4; transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; } .profile-pic:hover { transform: scale(1.07); box-shadow: 0 18px 40px rgba(0,188,212,0.7); } .about-text { flex: 1 1 400px; min-width: 280px; } h2 { color: #00bcd4; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 2.2em; } h2 svg { width: 28px; height: 28px; fill: #00bcd4; animation: pulse 2s infinite ease-in-out; } h3 { margin-top: 25px; color: #00bcd4; font-weight: 600; font-size: 1.4em; } p { font-weight: 300; line-height: 1.6; font-size: 1.1em; } p strong { color: #00bcd4; font-weight: 600; } ul { margin-left: 20px; list-style-type: circle; } ul li { margin-bottom: 8px; font-weight: 300; } @keyframes fadeSlideIn { to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } @media (max-width: 700px) { section { flex-direction: column; padding: 25px 20px; } .profile-pic { width: 180px; height: 180px; margin: 0 auto 20px; } h2 { font-size: 1.8em; } } </style> </head> <body> <nav> <div><a href="index.html">ปฏิพน</a></div> <div> <a href="about.html">เกี่ยวกับ</a> <a href="projects.html">งานอดิเรก</a> </div> </nav> <section> <img src="Pictures/2233.jpg" alt="รูปโปรไฟล์ของฉัน" class="profile-pic" /> <div class="about-text"> <h2> เกี่ยวกับฉัน <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg> </h2> <p>ฉันชื่อ <strong>ปฏิพน ฟับประโคน</strong> เป็นนักเรียนนักศึกษาที่มีความหลงใหลในการประกอบคอมพิวเตอร์ และ อื่นๆ</p> <h3>🎓 ประวัติการศึกษา</h3> <p>จบการศึกษาจาก <strong>วิทยาลัยเทคโนโลยีโปลิเทคนิคลานนา</strong> แผนกวิชาช่างยนต์ สาขางานยานยนต์</p> <p>ปัจจุบันกำลังศึกษา <strong>วิทยาลัยเทคนิคเชียงใหม่</strong> สาขาวิชาคอมพิวเตอร์เครือข่าย</p> <h3>💼 ประสบการณ์การฝึกงาน</h3> <p>เคยฝึกงานในตำแหน่ง ช่างยนต์ ตรวจสภาพและแก้ไขปัญหาของรถ ยี่ห้อMG</p> <h3>🛠️ ทักษะที่มี</h3> <ul> <li>HTML</li> <li>การเล่นกีฬา</li> </ul> <h3>💡 ความสนใจ</h3> <p>ชื่นชอบการประกอบคอมพิวเตอร์ต่างๆ</p> </div> </section> </body> </html>

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