Workshop Port InspireIT65 (Branch 9878) (Copy 9981..
✨ eng thanaphatB
<html> <head> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> <title>แฟมสะสมผลงานของ...</title> <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> <style> @import url('https://fonts.googleapis.com/css2?family=Sriracha&display=swap'); body{ /* แก้สี */ background:#455A64EA; font-family:sans-serif; font-family: 'Sriracha', cursive; } a{ color:#C62828; text-decoration: none; } .social{ font-size:em; } .main{ background:#fff; padding:1em 1em; border-radius:1em; width:100%; max-width:600px; margin:2rem auto; } h1,h2,h3,h4,h5,h6,p{ margin:0; } /* แก้สีอักษร */ .cl-1{ color:#F57F17; font-weight:bold; font-size:3em; } .cl-2{ color:#C62828; } .card-parent{ width:100%; display:flex; flex-flow:row wrap; justify-content:center; } .card-item{ --bg:url('https://media.discordapp.net/attachments/907606638767255553/909015241684308008/photo-1633113212423-dc2828784c7e.jpeg'); width:calc(50% - 1em); height:120px; padding:1em; border-radius:0.5rem; font-weight:700; color:white; display:flex; justify-content:center; align-items:center; box-sizing:border-box; margin:.5em; background-size:cover; background-position:center; text-shadow:0px 2px 1px #0008; /* แก้สีข้างล่าง */ background-image:linear-gradient(to bottom,#AAFBC02D,#546E7A),var(--bg); } .img{ width:100%; border-radius:.5em; } h1{ font-size:2rem; } h2{ font-size:1.8rem; } h3{ font-size:1.4rem; } </style> </head> <body> <div class="main"> <center> <h3 class="cl-2"> PORTFOLIO </h3> <h1 class="cl-1"> THANAPHAT BOONLEANG </h1> <br> <p> thanaphat9992@gmail.com </p> <br> <p class="social"> <a href="_____" class=""> <i class="fab fa-instagram"> </i> </a> <a href="_____" class=""> <i class="fab fa-twitter"> </i> </a> <a href="_____" class=""> <i class="fab fa-facebook"> </i> </a> <a href="mailto:jabont@hotmail.com" class=""> <i class="fab fa-email"> </i> </a> <a href="_____" class=""> <i class="fab fa-linkedin"> </i> </a> <a href="_____" class=""> <i class="fab fa-line"> </i> </a> </p> <br> <h3 class="cl-2"> skill </h3> <br> <div class="card-parent"> <div class="card-item" style="--bg:url('https://cdn.discordapp.com/attachments/864574653820043265/909117004210913300/9k.png');"> <h3> network </h3> </div> <div class="card-item" style="--bg:url('https://cdn.discordapp.com/attachments/864574653820043265/909117820934184990/maxresdefault.png')"> <h3> eletric </h3> </div> </div> <br> <div class="card-parent"> <div class="card-item" style="--bg:url('https://media.discordapp.net/attachments/864574653820043265/909118758872817745/2Q.png');"> <h3> design </h3> </div> <div class="card-item" style="--bg:url('https://cdn.discordapp.com/attachments/864574653820043265/910041122112430090/2Q.png')"> <h3> vidio </h3> </div> </div> <br> <h3 class="cl-2"> <i class="fas fa-heart"></i> ผลงานและความภาคภูมิใจ <i class="fas fa-heart"></i> </h3> <ul style="text-align:left"> <li>รับหน้าที่สภานักเรียนโรงเรียนเบญจมราชูประจำปี2563ทิศฝ่ายงานบริการ </li> <li>ดูแลงาน videpresentation ของโณงเรียนและสภานักเรียน </li> <li>ช่วยดูแลเรื่องของผังสถานที่สำหรับ กิจกรรมต่างของสภานักเรียน </ul> <br> </center> <br> <h3 class="cl-2"> <i class="fas fa-heart"></i> ACTIVITY <i class="fas fa-heart"></i> <h3> <li> video presentation ของโรงเรียน <div class="card-parent"> <div class="card-item" style="--bg:url(https://cdn.discordapp.com/attachments/864574653820043265/909100749747781682/242501148_451680346185016_6482977283447510272_n.png);"> <h3> เกษียณครู 65 </h3> </div> <div class="card-item" style="--bg:url('https://cdn.discordapp.com/attachments/864574653820043265/909100780575948830/242506670_193520422854230_6204500514458242779_n.png')"> <h3> ปฐมนิเทศ 63 </h3> </div> </div> <img data-aos="fade-up" data-aos-duration="3000" src="https://cdn.discordapp.com/attachments/864574653820043265/909101732963975298/DSC02041.JPG" class="img" > <h3> <li> เครื่องกดเจลไร้สัมผัสจาก kitBright borad <img data-aos="fade-up" data-aos-duration="3000" src="https://cdn.discordapp.com/attachments/864574653820043265/910360092405293086/DSC07103.JPG" class="img" > <h3> <li> สภานักเรียนโรงเรียนเบญจมราชูทิศ ฝ่ายงานบริการ <img data-aos="fade-up" data-aos-duration="3000" src="https://cdn.discordapp.com/attachments/864574653820043265/910363101478662174/clip_image002.png" class="img" > <br> <div class="card-parent"> <div class="card-item" style="--bg:url('https://cdn.discordapp.com/attachments/864574653820043265/910360886709981194/64_.jpg');"> <h3> กิจกรรมเลือกตั้งสภานักเรียน 2563 </h3> </div> <div class="card-item" style="--bg:url('https://cdn.discordapp.com/attachments/864574653820043265/910360874919788614/129943212_3730631750316438_7525506480647139866_o.jpg')"> <h3> กิจกรรมถวยเทียนชัย ประจำปี 2563 </h3 </div> </div> <br> <div class="card-parent"> <div class="card-item" style="--bg:url('https://cdn.discordapp.com/attachments/864574653820043265/910360891264991232/-2__2.jpg');"> <h3> กิจกรรมค่ายสานสัมธ์พี่น้องสภานักเรียน 2563 </h3> </div> <div class="card-item" style="--bg:url('https://cdn.discordapp.com/attachments/864574653820043265/910360884218589184/LINE_ALBUM___0.jpg')"> <h3> กิจกรรมเลือกตั้งสภานักเรียน 2564 </h3> </div> </div> <br> </div> <br> <h3 class="cl-2"> <i class="fas fa-heart"></i> CERTIFIED <i class="fas fa-heart"></i> <h3> <li> เข้าร่วมอบรมเรื่อง smart grid <img data-aos="flip-down" data-aos-duration="3000" src="https://cdn.discordapp.com/attachments/864574653820043265/910360881676845086/certificate_23849_557687-557687-16168382159320.jpg" class="img" > <h3> <li> เข้าร่วมอบรม basic software and computer science <img data-aos="flip-down" data-aos-duration="3000" src="https://cdn.discordapp.com/attachments/864574653820043265/910360879118319656/242417414_410585394059262_2302851580241229677_n.jpg" class="img" > <h3> <li> ผ่านการเข้าร่วมห้องเรียนจำลอง วิศวะกรรมไฟฟ้า <img data-aos="flip-down" data-aos-duration="3000" src="https://cdn.discordapp.com/attachments/864574653820043265/910360877239238766/242130984_2341316142674621_1906461302673969755_n.jpg" class="img" > </div> <script>AOS.init();</script> </body> </html>