color palette

Browse more Jquery Examples
<!DOCTYPE html>
<html>
<head>
<title>color palette</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script>
$(document).ready(function() {
   $(".box").click(function(){ 
     var x = $(this).css("background-color")
     $("h1,p").css({"color": x });
     
   });
   
   $(".box3").click(function(){
    $(".colorbox").toggleClass("left")     
   });
});

</script>
<style>
div {
    height:30px;
    width:30px;
    float:left;
    margin: 0px;
}

.box1{ background-color:red;}
.box2{ background-color:yellow;}
.box3{ background-color:black;
position: relative;
}
.box4{ background-color:blue; clear:both;
}
.box5{ background-color:green;}
.colorbox{
   width:100px;
   position:absolute;
   top:50%;
   left: -20% ;
   transform = translateY(-50%);
   transition : all 2s ;
}

.left{
    left:0%;
}
span{
    color:#fff;
}
.inner-box3{
    position: absolute;
    top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}
</style>
</head>
<body>
    <h1>Color Palette</h1>
    <p>choose your color</p>
<div class="colorbox">
<div class="box box1" >
    
</div>
<div class="box box2" >
    
</div>
<div class=" box3">
  <span class="inner-box3"><i class="fas fa-palette"></i></span>
</div>
<div class="box box4">
</div>
<div class="box box5">
</div>
</div>
</body>
</html>
color palette

Follow

Newsletter
