Week 1 (Branch 682) (Copy 686)

✨ PANAS CHAROENRUK

<html>
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Let's Start
    </title>
    <style>

@-webkit-keyframes card {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes card {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes card {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
      body{
        background:skyblue;
        margin:2em;
        font-family:"Anuphan";
      }
      @font-face {
	font-family: "Anuphan";
	src: url('https://www.jabont.com/jayss/fonts/Anuphan/Anuphan-Regular.woff2') format('woff2');
	font-weight: 500;
}
      .namecard1{
        width:100%;
        margin:auto;
        background:white;
        padding:2em;
        background: linear-gradient(93deg, #2C2E3E, #EE2B47, #2C2E3E);
    background-size: 600% 600%;

-webkit-animation: card 7s ease infinite;
    -moz-animation: card 7s ease infinite;
    animation: card 7s ease infinite;
      }
      
      .namecard2{
        width:100%;
        margin:auto;
        background:white;
        padding:2em;
        background: linear-gradient(93deg, #4D6DE3, #212121, #212121);
    background-size: 600% 600%;

-webkit-animation: card 7s ease infinite;
    -moz-animation: card 7s ease infinite;
    animation: card 7s ease infinite;
      }
      .namecard3{
        width:100%;
        margin:auto;
        background:white;
        padding:2em;
        background: linear-gradient(93deg, #FF5733, #FFBD33, #FFBD33);
    background-size: 600% 600%;

-webkit-animation: card 7s ease infinite;
    -moz-animation: card 7s ease infinite;
    animation: card 7s ease infinite;
      }
      .namecard4{
        width:100%;
        margin:auto;
        background:white;
        padding:2em;
        background: linear-gradient(93deg, #FD2EB3, #FB8D62, #FB8D62);
    background-size: 600% 600%;

-webkit-animation: card 7s ease infinite;
    -moz-animation: card 7s ease infinite;
    animation: card 7s ease infinite;
      }
      .namecard5{
        width:100%;
        margin:auto;
        background:white;
        padding:2em;
        background: linear-gradient(93deg, #D3D6DB, #415F9D
, #415F9D
);
    background-size: 600% 600%;

-webkit-animation: card 7s ease infinite;
    -moz-animation: card 7s ease infinite;
    animation: card 7s ease infinite;
      }
      .namecard6{
        width:100%;
        margin:auto;
        background:white;
        padding:2em;
        background: linear-gradient(93deg, #FFFB85, #FA5B75
, #FA5B75
);
    background-size: 600% 600%;

-webkit-animation: card 7s ease infinite;
    -moz-animation: card 7s ease infinite;
    animation: card 7s ease infinite;
      }
      .namecard7{
        width:100%;
        margin:auto;
        background:white;
        padding:2em;
        background: linear-gradient(93deg, #F6F6F6, #1E56A0
, #1E56A0
);
    background-size: 600% 600%;

-webkit-animation: card 7s ease infinite;
    -moz-animation: card 7s ease infinite;
    animation: card 7s ease infinite;
      }
      .namecard8{
        width:100%;
        margin:auto;
        background:white;
        padding:2em;
        background: linear-gradient(93deg, #FBA834, #50C4ED
, #50C4ED
);
    background-size: 600% 600%;

-webkit-animation: card 7s ease infinite;
    -moz-animation: card 7s ease infinite;
    animation: card 7s ease infinite;
      }
      .title{
      color:deeppink;
      }
      a{
        color:red;
      }
      .social-icons li {
  			display: inline-block;
  			margin: 0.15em;
  			position: relative;
  			font-size: 1em;
		}
      .profile{
			width: 100%;
        background-color: white;
        padding-top: 100%;
        background-size: cover;
        background-position: center;
      }
    </style>
  </head>
  <body>
    
    <div class="row">
      <div class="col-6">
    <div class="namecard2" style="margin: 20px">
      <div class="row">
        <div class="col-6">
          <div class="profile" style="background-image: url(https://media.discordapp.net/attachments/798210303846383676/798890182693879858/20210113_174107.jpg?width=636&height=585)"></div>
          <h4 style="color: white;">Contract</h4>
          <a href="https://www.facebook.com/profile.php?id=100014078888233"><img src="https://cdn.icon-icons.com/icons2/1826/PNG/512/4202110facebooklogosocialsocialmedia-115707_115594.png" style="width:50px"></a>
        </div>
        
        <div class="col-6">
      <h1 class="title" style="color: #FF9900;">
        Prenapat Pumjareon
      </h1>
      <p style="color: white;">
        ดีจ้าาา ชื่อพัดนะ เป็นคนพูดน้อย(ไม่)นิด แต่ถ้าสนิทกันจะพูดมากเป็นพิเศษ
ถ้าอยากคุยด้วย กรุณาเปิดประเด็นก่อนนาจาา //กราบ
      </p>
        </div>
      
      </div>
        </div>
    </div>
      <div class="col-6">
    <div class="namecard5" style="margin: 20px">
            <div class="row">
              <div class="col-6">
                <div class="profile" style="background-image: url(https://media.discordapp.net/attachments/798210303846383676/798890597607014450/FB_IMG_1610540757823.jpg)"></div>
        
                <h4>Contract</h4>
                <a href="https://www.facebook.com/profile.php?id=100002752237682"><img src="https://cdn.icon-icons.com/icons2/1826/PNG/512/4202110facebooklogosocialsocialmedia-115707_115594.png" style="width:50px"></a>
              </div>
              
              <div class="col-6">
            <h1 class="title" style="color: #FF9900;">
              Nanny Supsomboon
            </h1>
            <p>
              ดีจ้า ชื่อแนน เป็นคนพูดน้อย ฝากตัวด้วยน้า
            </p>
              </div>
            
            </div>
              </div>
    </div>
      
      
    </div>
    
    
    <div class="row">
      <div class="col-6">
    <div class="namecard7" style="margin: 20px">
                <div class="row">
                  <div class="col-6">
                    <div class="profile" style="background-image: url(https://media.discordapp.net/attachments/798210303846383676/798906359990845500/128894700_2884913175057979_8919135108555632621_o.png?width=585&height=586)"></div>
                
                    <h4>Contract</h4>
                    <a href="https://www.facebook.com/supawat.usanon.77"><img src="https://cdn.icon-icons.com/icons2/1826/PNG/512/4202110facebooklogosocialsocialmedia-115707_115594.png" style="width:50px"></a>
                  </div>
                  
                  <div class="col-6">
                <h1 class="title" style="color: #FF9900;">
                  Supawat Usanon
                </h1>
                <p>
                  สวัสดีชาวโลก
                </p>
                  </div>
                
                </div>
                  </div>
    </div>
      <div class="col-6">
    <div class="namecard1" style="margin: 20px">
                    <div class="row">
                      <div class="col-6">
                        <div class="profile" style="background-image: url(https://scontent.fbkk21-1.fna.fbcdn.net/v/t1.15752-9/138912618_1575472106175766_3226016303719592300_n.jpg?_nc_cat=110&ccb=2&_nc_sid=ae9488&_nc_eui2=AeEryMz71MCUvFlDPukvE9GanX-BOUPStoqdf4E5Q9K2irKHOQJmOWwJMJKcF_GaBm7MZ15MuizTF3TzmORpDtxH&_nc_ohc=Uf6BvVxX8QAAX_u2la5&_nc_ht=scontent.fbkk21-1.fna&oh=7ccdf34b051b38ce9de449cf15f375df&oe=60240A9F)"></div>
                        <h4>Contract</h4>
                        <a href="https://www.facebook.com/profile.php?id=100010527858286"><img src="https://cdn.icon-icons.com/icons2/1826/PNG/512/4202110facebooklogosocialsocialmedia-115707_115594.png" style="width:50px"></a>
                      </div>
                      
                      <div class="col-6">
                    <h1 class="title" style="color:#33FF33;">
                      Panas Charoenruk
                    </h1>
                    <p>
                      สวัสดีนะเราเอง
                    </p>
                      </div>
                    
                    </div>
                      </div>
    </div>
      
      
    </div>
    
    <div class="row">
      <div class="col-6">
    <div class="namecard4" style="margin: 20px">
                        <div class="row">
                          <div class="col-6">
                            <div class="profile" style="background-image: url(https://media.discordapp.net/attachments/798210303846383676/798891318034169876/image0.jpg?width=585&height=585)"></div>
                
                            <h4>Contract</h4>
                            <a href="https://www.facebook.com/jean.sinsuwan"><img src="https://cdn.icon-icons.com/icons2/1826/PNG/512/4202110facebooklogosocialsocialmedia-115707_115594.png" style="width:50px"></a>
                          </div>
                          
                          <div class="col-6">
                        <h1 class="title" style="color:#333399;">
                          Hima Sinsuwan
                        </h1>
                        <p>
                          สวัสดีครับ ชื่อหิมะ สินสุวรรณ ชื่อเล่นชื่อยีน จบจากเทพศิรินทร์ รุ่น134 งานอดิเรก เล่นเกม ฟังเพลง
                        </p>
                          </div>
                        
                        </div>
                          </div>
    </div>
      <div class="col-6">
    <div class="namecard6" style="margin: 20px">
      <div class="row">
        <div class="col-6">
          <div class="profile" style="background-image: url(https://media.discordapp.net/attachments/798210303846383676/798894407851573268/IMG_20210105_162809_528.jpg?width=329&height=584)"></div>
          <h4>Contract</h4>
          <a href="https://www.facebook.com/issarapong.damp/"><img src="https://cdn.icon-icons.com/icons2/1826/PNG/512/4202110facebooklogosocialsocialmedia-115707_115594.png" style="width:50px"></a>
        </div>
        
        <div class="col-6">
      <h1 class="title">
        Itsaraphong Watcharaprateep
      </h1>
      <p>
        ชื่อ อิสระพงษ์ วัชรประทีป ชื่อเล่น ดามพ์ จบจากมารีย์วิทยา นครราชสีมา รุ่น 37 ว่างๆชอบฟังเพลง คุยกับเพื่อน เล่นเกม
      </p>
        </div>
      
      </div>
        </div>
    </div>
      
      
    </div>
    
    <div class="row">
      <div class="col-6">
    <div class="namecard3" style="margin: 20px">
                                <div class="row">
                                  <div class="col-6">
                                    <div class="profile" style="background-image: url(https://media.discordapp.net/attachments/798888479949324298/798889908776599553/4bf64a10684fe8ba.jpg?width=585&height=585)"></div>
                                
                                    <h4>Contract</h4>
                                    <a href="https://www.facebook.com/profile.php?id=100004212908275"><img src="https://cdn.icon-icons.com/icons2/1826/PNG/512/4202110facebooklogosocialsocialmedia-115707_115594.png" style="width:50px"></a>
                                  </div>
                                  
                                  <div class="col-6">
                                <h1 class="title" style="color:white;">
                                  Pornpawee sophonariyanon
                                </h1>
                                <p>
                                  สวัสดีชาวโลก
                                </p>
                                  </div>
                                
                                </div>
                                  </div>
    </div>
      <div class="col-6">
    <div class="namecard8" style="margin: 20px">
      <div class="row">
        <div class="col-6">
          <div class="profile" style="background-image: url(https://media.discordapp.net/attachments/798210303846383676/798909902789017640/IMG_20200705_230557.jpg?width=439&height=585)"></div>
          
          <h4>Contract</h4>
          <a href=" https://www.facebook.com/0GuRockZaLnw0"><img src="https://cdn.icon-icons.com/icons2/1826/PNG/512/4202110facebooklogosocialsocialmedia-115707_115594.png" style="width:50px"></a>
        </div>
        
        <div class="col-6">
      <h1 class="title">
        Nattawit Rittidej
      </h1>
      <p>
        
      </p>
        </div>
      
      </div>
        </div>
    </div>
      
      
    </div>

</body>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</html>