Workshop Port InspireIT65 (Branch 9983) (Copy 9986)

Workshop Port InspireIT65 (Branch 9983) (Copy 9986..

✨ Vevdow Boonyotha

<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=Yuji%20Mai&display=swap');
      body{
        /*   แก้สี*/
        background:#D8BFD8;
        font-family:Impact;
        text-align:center;
      }
      a{
        color:#006600;
        text-decoration: none;
      }
      .social{
        font-size:2em;
      }
      .main{
   		background:#fff;
         padding-bottom: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:#9400D3;
       	font-weight:bold;
      	font-size:3em;
      }
      .cl-2{
   		color:#0097A7;
      }
      .cl-3{
			color:#9400D3;
        	font-weight:bold;
        	font-size:2em;
      }
      .card-parent{
			width:100%;
        	display:flex;
        	flex-flow:row wrap;
        	justify-content:center;
      }
      .card-parent2{
			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,#039FF3,#039A),ver(--bg);
      }
      .img{
			width:100%;
        	border-radius:.5em;
      }
      h1{
			font-size:2em;
      }
      h2{
			font-size:1.8em;
      }
      h3{
			font-size:1.4em;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <center>
      <h3 class="cl-3">
         Portfolio<br>
         แฟ้มสะสมผลงาน
      </h3>
      <p>
        แววดาว บุญโยธา 😎<br>
        Wawdow Boonyotha<br>
        <br>
        โรงเรียนเตรียมอุดมศึกษาพัฒนาการ นนทบุรี
      </p>
     
      <p class="social">
       
        <a href="_____" class="">
          <i class="fab fa-instagram">
          </i>
        </a>
        
        <a href="_____" class="">
          <i class="fab fa-facebook">
          </i>
        </a>
        
         <a href="_____" class="">
          <i class="fab fa-line">
          </i>
        </a>
        
      <h2 class="cl-2">
		สิ่งที่สนใจ
      </h2>
      <br>
        <div class="card-parent">
           <div class="card-item" style="--bg:url('https://gamerism.co/wp-content/uploads/2021/04/unity-heratic.jpg');">
            <h3>
              Game
            </h3>
          </div>
          <div class="card-item" style="--bg:url('https://www.engdict.com/data/dict/media/images_public/compu-00013205_normal.png')">
            <h3>
              Computer
            </h3>
          </div>
        </div>
          <div class="card-item" style="--bg:url('https://www.isranews.org/images/2019/thaireform/7/Coding2607.jpg')">
            <h3>
              Coding	
            </h3>
          </div>
        </div>
        <br>
        <h3 class="cl-2">
          สิ่งที่ภาคภูมิใจ
        </h3>
        <ul style="text-align:left">
				<li>GPAX:3.40
          </li>
          	<li>เข้าร่วมกิจกรรมWorkshop Port InspireIT65
          </li>
        </ul>
      </center>
    </div>
      <script>AOS.init();</script>
  </body>
</html>