Color Palette

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod elementum pulvinar. Curabitur non erat quis sapien efficitur pellentesque. In venenatis lobortis arcu a mattis. Nullam quis gravida massa, luctus suscipit quam. Vivamus sollicitudin ornare commodo. Fusce pulvinar ornare suscipit. Nunc semper est ac gravida facilisis.

<style>#carret{position: relative; width: 79.9%; height: 60px; line-height: 0; float: left; border: 1px solid #999; display: inline-block;}#carret div.color-seleccionat, #final-palette div.color-seleccionat{position: relative; display: inline-block; color: #fff; text-shadow: 1px 1px 1px rgba(0, 0, 0, 1); width: 10%; height: 58px; line-height: 58px; text-align: center; float: left; cursor: pointer;}#carret div.color-seleccionat .delete-overlay, #final-palette div.color-seleccionat .delete-overlay{display: none; position: absolute; top: 0; left: 0; height: 58px; width: 100%;}#carret div.color-seleccionat:hover .delete-overlay, #final-palette div.color-seleccionat:hover .delete-overlay{display: block;}#carret div.color-seleccionat:hover .code-color, #final-palette div.color-seleccionat:hover .code-color{display: none;}#solicitar{width: 19%; height: 60px; border: 1px solid #bf2424; float: right; display: inline-block; line-height: 60px; text-align: center; font-size: 16px; text-transform: uppercase; transition: all 0.3s ease;}#solicitar:hover{color: #fff; background: #bf2424; transition: all 0.3s ease;}#carret-buit{position: relative; display: inline-block; line-height: 58px; padding-left: 5px; height: 58px; float: left;}/* Colors form request */#colors-form{position: fixed; top: 0; left: 0; z-index: 999999; height: 100%; width: 100%; background: rgba(255,255,255,0.95); display: none;}#colors-form .inner-colors-modal{margin: 0 auto; padding-top: 10%; text-align: center; max-width: 650px;}#colors-form .close-colors-form{position: fixed; z-index: 9999999; top: 50px; right: 50px; font-size: 70px; cursor: pointer;}#colors-form hr{border: 1px solid #bf2424; width: 100px; position: relative; left: 50%; margin-left: -50px; margin-bottom: 50px;}#colors-form input[name=colorsPhone],#colors-form input[name=colorsName]{width: 35%; float: left; height: 35px; font-size: 16px; transition: all 0.3s ease;}#colors-form input[type=email],#colors-form input[name=colorsBusiness]{width: 60%; margin-left: 5%; float: right; height: 35px; font-size: 16px; transition: all 0.3s ease;}#colors-form input[name=colorsPhone],#colors-form input[name=colorsBusiness]{margin-top: 10px;}#colors-form #final-palette{margin-top: 65px; height: 60px; width: 99.9% line-height: 60px; border: 1px solid #bbb;}#colors-form textarea{width: 100%; font-size: 16px; margin-top: 30px; transition: all 0.3s ease;}#colors-form button{height: 50px; width: 200px; border: 1px solid #bbb; float: right; background: transparent; font-size: 16px; text-transform: uppercase; transition: all 0.3s ease; cursor: pointer; margin-top: 20px;}#colors-form button:hover{background: #bf2424; color: #fff; transition: all 0.3s ease;}#colors-form input[type=text], #colors-form input[type=email], #colors-form textarea{padding-left: 5px;}#colors-form input[type=text]:focus,#colors-form input[type=email]:focus,#colors-form textarea:focus{border-color: #bf2424; transition: all 0.3s ease;}/* Responsive */@media only screen and (max-width: 980px){body{overflow: hidden;}#colors-form{overflow-y: auto; background: rgba(255,255,255,1);}/* Carret doble fila per smartphone */ #carret, #colors-form #final-palette{width: 100%; height: 118px; margin-top: 35px; border: none; display: inline-block;}#carret div.color-seleccionat, #final-palette div.color-seleccionat{width: 20%;}/* Padding modal */ #colors-form .inner-colors-modal{padding-left: 20px; padding-right: 20px;}/* Btn obrir modal */ #solicitar{width: 40%; float: right; display: block; margin-top: 15px;}/* Btn tancar petit i ajustat al marge */ #colors-form .close-colors-form{top: 20px; right: 20px; font-size: 40px;}}</style><div id="carret"><div class="seleccio"></div></div><a href="#" id="solicitar">Order</a><div id="colors-form"><p class="close-colors-form">×</p><div class="inner-colors-modal"><h2>Order Color Palette</h2><hr><form name="contactform" method="post" action="/solicitar_colors.php"><input type="text" class="form-control" name="colorsName" placeholder="Name"> <input type="email" class="form-control" name="colorsEmail" placeholder="Email"><br><input type="text" class="form-control" name="colorsPhone" placeholder="Phone Number"> <input type="text" class="form-control" name="colorsBusiness" placeholder="Business Name"><br><textarea id="send-palette" name="sendPalette" style="display: none;"></textarea> <div id="final-palette" style="width: 100%; height: 60px; line-height: 60px; border: 1px solid #bbb;"></div><textarea class="form-control" name="colorsText" rows="5" placeholder="Message..."></textarea> <button id="sendColors" type="submit">Order</button></form></div></div>

<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js></script><script>jQuery(function(e){function a(e){function a(e){return("0"+parseInt(e).toString(16)).slice(-2)}return e=e.match(/^rgb((d+),s*(d+),s*(d+))$/),"#"+a(e[1])+a(e[2])+a(e[3])}for(var c,f=0,o=["#f48fb1","#f06292","#ec407a","#e91e63","#d81b60","#c2185b","#ad1457","#880e4f","#ff80ab","#ff4081","#f50057","#c51162","#f3e5f5","#e1bee7","#ce93d8","#ba68c8","#ab47bc","#9c27b0","#8e24aa","#7b1fa2","#6a1b9a","#4a148c","#ea80fc","#e040fb","#d500f9","#aa00ff","#ede7f6","#d1c4e9","#b39ddb","#9575cd","#7e57c2","#673ab7","#5e35b1","#512da8","#4527a0","#311b92","#b388ff","#7c4dff","#651fff","#6200ea","#e8eaf6","#c5cae9","#9fa8da","#7986cb","#5c6bc0","#3f51b5","#3949ab","#303f9f","#283593","#1a237e","#8c9eff","#536dfe","#3d5afe","#304ffe","#e3f2fd","#bbdefb","#90caf9","#64b5f6","#42a5f5","#2196f3","#1e88e5","#1976d2","#1565c0","#0d47a1","#82b1ff","#448aff","#2979ff","#263238","#f48fb1","#f06292","#f48fb1","#f06292","#ec407a","#e91e63","#d81b60","#c2185b","#ad1457","#880e4f","#ff80ab","#ff4081","#f50057","#c51162","#f3e5f5","#e1bee7"],t=0;o.length>t;t++)e("#colors-container").append('<div class="palette" style="background: '+o[t]+'"><span class="code">'+o[t]+'</span><span class="close">×</span></div>');0==f&&e("#carret div.seleccio").append('<div id="carret-buit">Cart is empty.</div>'),e("div.palette").hover().mouseenter(function(){e(this).append('<div id="codeShown">'+a(e(this).css("backgroundColor"))+"</div>")}).mouseleave(function(){e("#codeShown").remove()}),e("div.palette").on("click",function(){e("#carret-buit").remove(),f<=9?(c=e(this).css("backgroundColor"),e("#carret div.seleccio").append('<div class="color-seleccionat" style="width: 10%;height:58px;display:inline-block;text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);line-height:58px;text-align:center;color:#fff;background:'+c+'"><span class="code-color">'+a(c)+'</span><div class="delete-overlay"><i class="fa fa-trash"></i></div></div>'),f+=1):alert("Oops! Your cart is full. Make some room in the cart before adding more colors to it.")}),e("#carret, #final-palette").on("click",".color-seleccionat",function(){e(this).remove(),0==(f-=1)&&e("#carret div.seleccio").append('<div id="carret-buit">Cart is empty.</div>')}),e("#solicitar").on("click",function(){e("#colors-form").fadeIn("fast"),e("#carret div.seleccio").appendTo(e("#final-palette")),e("#send-palette").html(e("#final-palette div.seleccio").html())}),e("p.close-colors-form").on("click",function(){e("#colors-form").fadeOut("fast"),e("#final-palette div.seleccio").appendTo(e("#carret"))})})</script><style>div#colors-container{width:100%;height:auto;background:#fff}*,:after,:before{box-sizing:border-box}body{margin:0}.palette{width:7.14%;height:100px;float:left;position:relative;-webkit-transform-origin:0 100%;transform-origin:0 100%;-webkit-transition:.1s;transition:.1s;z-index:5}.palette:hover{z-index:10;cursor:pointer;-webkit-transform:translateY(-10px);transform:translateY(-10px);box-shadow:0 5px 12px rgba(0,0,0,.3),0 4px 15px rgba(0,0,0,.3)}.palette #codeShown{position:absolute;height:100px;line-height:100px;text-align:center;width:100%;left:0;top:0;background:0 0;color:#fff;text-shadow:1px 1px 1px rgba(0,0,0,1)}.palette.open{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:scale(2.5) rotate(90deg);transform:scale(2.5) rotate(90deg);z-index:50}.palette.open:hover{z-index:55}.palette.open .close{display:block}.palette.open .code{opacity:1}.palette.open .code::after{opacity:1;color:transparent;text-shadow:none}.close{display:none;color:#fff;padding-left:3px;text-shadow:0 1px 0 rgba(0,0,0,.3);font-size:12px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.code{opacity:0;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);position:absolute;color:#fff;font-size:14px;left:0;top:50%;padding:10px;text-shadow:0 0 1px rgba(0,0,0,.5)}@media (max-width:640px){.palette{width:14.25%}}@media (max-width:480px){.palette{width:25%}}@media (max-width:320px){.palette{width:33%}}</style><div id=colors-container></div>