Workshop Port InspireIT65 (Branch 9668) (Copy 10010)

Workshop Port InspireIT65 (Branch 9668) (Copy 1001..

✨ รัญลดา สุจริตธรรม

<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');
      @import url('https://fonts.googleapis.com/css2?family=Athiti:wght@200&display=swap');
      @import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');
      body{
        /*         แก้สี */
        background:#161E54;
      }
      h1,h3,p,li{
        font-family:Athiti;
      }
      p,li{
			font-weight: bold;
      }
      a{
        color:#6200EA;
        text-decoration: none;
      }
      .social{
        font-size:2em;
        margin 10px;
      }
      .main{
        background:#fff;
        padding:1em 5em;
        border-radius:1em;
        width:100%;
        max-width:600px;
        margin:2rem auto;
      }
      h1,h2,h3,h4,h5,h6,p{
        margin:0;
      }
      /*       แก้สีอักษร */
      .cl-1{
        color:#6200EA;
        font-weight:bold;
        font-size:2.6em;
      }
      .cl-2{
        color:#AA00FF;
        margin-top:1.2rem;
      }
      .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,#AA00FF33,#AA00FF66),var(--bg);
      }
      .img{
        width:80%;
        border-radius:.5em;
        margin-bottom: 20px;
      }
      h1{
        font-size:2rem;
      }
      h2{
        font-size:1.8rem;
      }
      h3{
        font-size:1.4rem;
      }
      p{
			font-size: 1.4rem;
      }
     a:hover{
     font-size:2.5rem;
     transition:0.3s;
     color:black;
     }
      .cercontainer{
		  display:flex;
        width:calc(50% - 0.5em);
        justify-content: center;
        width:100%;
      }
      .cercontainer img{
		  max-width:50%;
        width:50%;
        max-height:30%;
        padding:0px 10px;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <center>
        <h3 class="cl-2">
          แฟ้มสะสมผลงาน
        </h3>
        <h1 class="cl-1">
          นางสาวรัญลดา สุจริตธรรม
        </h1>
        <br>
        <p>
          โรงรียนสตรีภูเก็ต จ.ภูเก็ต
        </p>
        <p>
          Email: treejan555@gmail.com
        </p>
        <br>
        <p class="social">
          <a href="https://www.instagram.com/shamoi99/" class="icon" target = "_blank">
            <i class="fab fa-instagram">
            </i>
          </a>
          <a href="_____" class="">
            <i class="fab fa-twitter">
            </i>
          </a>
          <a href="https://www.facebook.com/ranlada.sudjarittham/" class="" target = "_blank">
            <i class="fab fa-facebook">
            </i>
          </a>
          <a href="mailto:jabont@hotmail.com" class="">
				<i class="fas fa-envelope"></i>
          </a>
          <a href="https://line.me/ti/p/~janza510" class="">
            <i class="fab fa-line">
            </i>
          </a>
        </p>
        <br>
        <h3 class="cl-2">
          ความสนใจ 
        </h3>
        <br>
        <div class="card-parent">
          <div class="card-item" style="--bg:url('https://images.pexels.com/photos/270348/pexels-photo-270348.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');">
            <h3>
              Programming
            </h3>
          </div>
          <div class="card-item" style="--bg:url('https://images.pexels.com/photos/163036/mario-luigi-yoschi-figures-163036.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')">
            <h3>
          		Game
            </h3>
          </div>
          <div class="card-item" style="--bg:url('https://images.pexels.com/photos/102127/pexels-photo-102127.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')">
            <h3>การวาดภาพ</h3>
          </div>
          <div class="card-item" style="--bg:url('https://cdn.pixabay.com/photo/2015/10/16/11/40/tarot-991041_960_720.jpg')">
            <h3>Astrology</h3>
          </div>
        </div>
        <br>
        <h3 class="cl-2">
          <i class="far fa-calendar-alt"></i>
          กิจกรรมและผลงาน
          <i class="far fa-calendar-alt"></i>
        </h3>
        <ul style="text-align:left">
          <li>
            เข้าร่วมค่าย Cick camp ที่คณะกรรมศาสตร์ มหาวิทยาลัยมหิดล
          </li>
          <li>
            เข้าร่วมกิจกรรม TNI ONLINE OPEN CAMPUS 2021 คณะเทคโนโลยีสารสนเทศ
          </li>

<li>
            ร่วมเป็นอาสาสมัครผลิตสื่อเพื่อคนตาบอด โดยการพิมพ์หนังสือลง Microsoft Word
          </li>
        </ul> 
        <br>
        </center>
        <div class = "cercontainer">
          <img data-aos="zoom-in" data-aos-duration="700" src="https://media.discordapp.net/attachments/875603729326411786/910236595075055686/IT.jpg?width=670&height=473" class="img" >
        <img data-aos="zoom-in" data-aos-duration="700" src="https://scontent.fbkk14-1.fna.fbcdn.net/v/t1.15752-9/258468093_635151827620322_3419349159715131366_n.jpg?_nc_cat=110&ccb=1-5&_nc_sid=ae9488&_nc_eui2=AeEaSAlaVedQ8kdLNrM6QzTP9KXUx5Feu6P0pdTHkV67o9tS-XJFwuSRW-AzODnvRLrAsXH3hpPlNIL0-uPl-xm2&_nc_ohc=90MD8YctapwAX9uB1X3&tn=vR7sVHbpkcgBUnKu&_nc_ht=scontent.fbkk14-1.fna&oh=eac0ead36d96f22b65f202df52f6dca9&oe=61BC6C9C" class="img" >
        </div>
    </div>
      <script>AOS.init();</script>
  </body>
</html>