Workshop Port InspireIT65 (Branch 9852) (Copy 9944)

Workshop Port InspireIT65 (Branch 9852) (Copy 9944..

✨ 1_เศรษฐโชค ตั้งศิริวัฒนวงศ์_บุรีรัมย์

<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:linear-gradient(to bottom,#FFEE58,#AA00FF66);
        font-family:sans-serif;
        font-family: 'Yuji Mai', cursive;
      }
      a{
        color:#2979FF;
        text-decoration: none;
      }
      .social{
        font-size:2em;
      }
      .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:#647687;
        font-weight:bold;
        font-size:6em;
      }
      .cl-2{
        color:#AA00FF;
      }
      .cl-3{
        color:#647687;
        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:800;
        color:#81D4FA;;
        background-position:center;
        display:flex;
        justify-content:center;
        align-items:center;
        box-sizing:border-box;
        margin:.5em;
        background-size:cover;
        text-shadow:0px 3px 1px #000;
        /* แก้สีข้างล่าง */
        background-image:linear-gradient(to bottom,#84FFFF,#AA00FF66),var(--bg);
      }
      
      .img{
        width:100%;
        border-radius:5em;
      }
      h1{
        font-size:5rem;
      }
      h2{
        font-size:1.8rem;
      }
      h3{
        font-size:1.4rem;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <center>
        <h3 class="cl-1">
          Portfolio
        </h3>
        <h1 class="cl-3">
          นาย เศรษฐโชค ตั้งศิริวัฒนวงศ์
        </h1>
        <br>
        <p>
          โรงรียนวิทยาศาสตร์จุฬาภรณราชวิทยาลัย บุรีรัมย์
        </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-3">
          สิ่งที่ส่งผลต่อการกระทำ 
        </h3>
        <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://upload.wikimedia.org/wikipedia/commons/6/6d/Good_Food_Display_-_NCI_Visuals_Online.jpg')">
            <h3>
              FOOD
            </h3>
          </div>
          <div class="card-item" style="--bg:url('https://i1.adis.ws/i/dreams/251-00322_main-shot_01_murphy-ottoman-bed-frame')">
            <h3>
              BED
            </h3>
          </div>
        </div>
        <br>
        <h3 class="cl-2">
          MY SELF
        </h3>
        <ul style="text-align:left">
          <li>ทำเฉพาะสิ่งที่ชอบและไม่ทำสิ่งที่ไม่ชอบ
          </li>
          <li>มีผมหยักที่โครตเท่
          </li>
          <li>เล่นเกมกาชาเกลือสุดๆ
          </li>
          <li>มีความสามารถพื้นฐานหลายอย่าง
          </li>
          <li>ใช้เงินเก่งกว่าคนมีเงิน
          </li>
          <li>มีแฟนแล้ว
          </li>
        </ul>
        <img data-aos="zoom-out-down" data-aos-duration="3000" src="https://media.discordapp.net/attachments/850811759707422775/909057584445665290/IMG_20210919_135818_359.jpg?width=344&height=612" class="img" >
      </center>
    </div>
      <script>AOS.init();</script>
  </body>
        <div class="card-parent">
          <div class="card-item" style="--bg:url('https://d1csarkz8obe9u.cloudfront.net/posterpreviews/certification-design-template-2124bd028602e3b9f4b3e9eaa86f5574_screen.jpg?ts=1611813279');">
            <h3>
              CERTIFICATION
            </h3>
          </div>
          <div class="card-item" style="--bg:url('https://image.shutterstock.com/image-photo/multiethnic-group-people-activity-concept-260nw-229793107.jpg')">
            <h3>
              ACTIVITY
            </h3>
          </div>
        </div>
</html>