The Simple Web (Copy 13561)

✨ นางสาวปัณณพร จึงเปี่ยมสุข

<html>
  
  <head>
    <title> การบ้าน </title>
    
    <style>
      body{
        margin: 0;
        padding: 0;
        height: 450px;
        display: flex;
        justify-content: center;
        align-items:center;
        background: hsl(0,50%,50%);
      }
      .body-pic{
        background:green;
        height:0;
      }
      
      /*สีพื้นหลัง ---------------------------- start*/
    
      .bg-color-manual{
        position:absolute;
        right:0px;
        bottom:0px;
      }
      .manual-bgCOLOR{
        padding: 15px;
        border-radius: 6px;
        cursor :pointer;
        transition: 0.5s;
      }
      .bgCOLOR:not(:last-child){
        margin-right: 0;
      }
      .bgCOLOR1{
        border: 2.5px solid hsl(37, 90%, 61%);
        background:hsl(37, 90%, 61%);
      }
      .bgCOLOR2{
        border: 2.5px solid hsl(204, 51%, 55%);
        background:hsl(204, 51%, 55%);
        
      }
      .bgCOLOR3{
        border: 2.5px solid hsl(282, 39%, 58%);
        background:hsl(282, 39%, 58%);
      }
      .bgCOLOR4{
        border: 2.5px solid hsl(6, 78%, 66%);
        background:hsl(6, 78%, 66%);
      }
      .bgCOLOR5{
        border: 2.5px solid hsl(168, 55%, 54%);
        background:hsl(168, 55%, 54%);
      }
      .bgCOLOR:hover{
        background:#fff9;
      }
      .pom input{
        display: none;
      }
      /*สีพื้นหลัง ----------------------------------------- end*/

.slider{
        width: 660px;
        height: 400px;
        border-radius: 10px;
        overflow: hidden;
      }
      .slides{
      width: 500%;
      height: 400px;
      display: flex;
      }
      .slides input{
        display: none;
      }
      
      .slide{
        width:20%;
        transition: 3s;
      }
      
      .slide img{
      width: 660px;
      height: 400px;
      }
      /*css manual slide*/
      .navigation-manual{
        position: absolute;
        width: 660px;
        margin-top: -40px;
        display: flex;
        justify-content: center;
        
      }
      .manual-pic{
        border: 2.5px solid #C0914A;
        padding: 6px;
        border-radius: 6px;
        cursor :pointer;
        transition: 0.5s;
      }
      
      .manual-pic:not(:last-child){
        margin-right: 30px;
      }
      
      .manual-pic:hover{
        background: #C0914A;
      }
      
      #pic1:checked ~ .first{
        margin-left:0;
      }
      #pic2:checked ~ .first{
        margin-left:-20%;
      }
      #pic3:checked ~ .first{
        margin-left:-40%;
      }
      #pic4:checked ~ .first{
        margin-left:-60%;
      }
      #pic5:checked ~ .first{
        margin-left:-80%;
      }
      
      
      /*box-text*/
      .main{
        padding:1em;
        background:yellow;
        margin:auto;
        font-size:20px;
        position:absolute;
        top:20px;
      }
      
      p{
        color: #FFFAF1;
      }
      
    </style>
    
  </head>

<div class="main">
      <p>
        การท่องเที่ยว คือการเดินทาง การมองหาสิ่งที่ไม่เคยเห็น หรือ ความแปลกตา ที่สวยงามในตัวของมันเอง
      </p>
    </div>

<div class="pom">
        <input type="radio"  id="c1">
        <input type="radio"  id="c2">
        <input type="radio"  id="c3">
        <input type="radio"  id="c4">
        <input type="radio"  id="c5">
    </div>
    <div class="bg-color-manual">
      <label id="color1" for="c1" class="bgCOLOR1 manual-bgCOLOR bgCOLOR"></label>
  		<label id="color1" for="c2" class="bgCOLOR2 manual-bgCOLOR bgCOLOR"></label>
      <label id="color1" for="c3" class="bgCOLOR3 manual-bgCOLOR bgCOLOR"></label>
      <label id="color1" for="c4" class="bgCOLOR4 manual-bgCOLOR bgCOLOR"></label>
      <label id="color1" for="c5" class="bgCOLOR5 manual-bgCOLOR bgCOLOR"></label>
    </div>
   

    <script>
      const change = document.getElementById('c1');
      const body = document.body;
      
      c1.addEventListener('click', changeBG);
      
      function changeBG() {
        const col = getChoose();
        
        const colorString = `hsl(66, 64%, 65%)`;
        
        body.style.background = colorString;
      }
      function getChoose(){
        
      }
    </script>
  </body>
  
</html>