<!doctype html>
<html lang="">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Devs with Style</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="favicon" href="favicon.ico">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">


  <style>
  @import url('https://fonts.googleapis.com/css?family=Roboto+Mono:100,100i,300,300i,400,400i,500,500i,700,700i');
  </style>

  <style>
  @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i');
  </style>

  <style>
  @import url('https://fonts.googleapis.com/css?family=Satisfy');
  </style>


<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>


</head>

<body>
  <!-- Add your site content here. Keep it pretty and use indentation :) -->


<!-- Color Palettes Hero -->  

<header>
    <h1> Color Palettes</h1>
</header>
  
  <div class="sticky-nav-wrapper">
      <nav class="main-nav">
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="https://webflow.com/blog/web-design-101-color-theory">Color Theory</a></li>
          <li><a href="https://material.io/design/color/the-color-system.html#tools-for-picking-colors">Tools For Picking Colors</a></li>
          <li><a href="https://material.io/tools/color/#!/?view.left=0&view.right=0&primary.color=FFEBEE">Color Tool</a></li>
          <li><a href="https://www.colorhexa.com/feebee">Color Encyclopedia</a></li>
          <li><a href="http://opencolor.tools/palettes/wesanderson/">Wes Anderson Palettes</a></li>
          <li><a href="https://github.com/kbroman/wesandersonJS">More Wes 
          Anderson Palettes JQuery</a></li>
        </li><a href="https://color.adobe.com/">Adobe Kuler</a></li>
        </ul>
      </nav>
  </div> 



<!-- Placescore Animation FUN! -->  

<div class="placescore">
  

</div>


<!-- purple color bg  -->
<div class="center-content">

  <div class="container">

    <div class="row">
      <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2">
          </div>
        </div>


  <!-- Color Palettes -->


<div class="palette-container">

  <h3 class="tagline"> For Devs with Style </h3>
    <div class="row">
     

      <div class="column" id="canvas" style="background-color:#fff;">
        <h2>Color Canvas Here!</h2>
        <p> Watch my background change and reveal the color codes to copy and paste!</p>
        <h4> hex </h4>
        <br>
        <input type="text" class="hex-code-input">
        <p class="hex-code"></p>

        <h4>  rgb </h4>
        <Br> 

        <input type="text" class="rgb-code-input">
        <p class="rgb-code"></p>

        <h4> hsl </h4>
        <Br> 
        <input type="text" class="hsl-code-input">
        <p class="hsl-code"> </p>
<!-- 
        <h4>  cymk </h4>
        <Br> 
        <input type="text" class=cymk-code-input">
        <p class="cymk-code"></p> -->

    </div>




    <div class="column" style="background-color:#fff;">
      <h2>Palettes</h2>
        <p>Hover your mouse over a color swatch & click to see what happens</p>



        <div style="background-color:white; onclick="myFunction()> 
          <div class="pink">Pink</div>

          <div class="labels-and-palettes">
            <div class="box box1" data-hex="#ffebee" data-hsl="351, 8, 96" data-rgb="254, 235, 238" data-cymk="0, 8, 7, 0"> </div>
            <div class="box box2" data-hex="#ffcdd2" data-rgb="255, 205, 210" data-hsl="354, 100, 90.2" data-cyml="text"></div>
            <div class="box box3" data-hex="#ef9a9a" data-rgb="239, 154, 154" data-hsl="0°, 72.6, 77.1"></div>
            <div class="box box4" data-hex="#e57373" data-rgb="229, 115, 115" data-hsl="0°, 68.7, 67.5"></div>
            <div class="box box5" data-hex="#ef5350" data-rgb="239, 83, 80" data-hsl="1.1°, 83.2, 62.5"></div>
            <div class="box box6" data-hex="#f44336" data-rbg="244, 67, 54"  data-hsl="4.1°, 89.6, 58.4"></div>
            <div class="box box7" data-hex="#e53935"></div>
            <div class="box box8" data-hex="#d32f2f"></div>
            <div class="box box9" data-hex="#c62828"></div>
            <div class="box box10" data-hex="#b71c1c"></div>

            <div class="vertical_line"></div>
   

            <div class="box box11" data-hex="#ff8a80"></div>
            <div class="box box12" data-hex="#FF5252"></div>
            <div class="box box13" data-hex="#ff1744"></div>
            <div class="box box14" data-hex="#d50000"></div>
          </div>
        </div>



  <!-- pink --> 

    <div style="background-color:white;">
      <div class="red">Red</div>

      <div class="labels-and-palettes">
        <div class="box box15" data-hex="#fce4ec"></div>
        <div class="box box16" data-hex="#f8bbd0"></div>
        <div class="box box17" data-hex="#f48fb1"></div>
        <div class="box box18" data-hex="#f06292"></div>
        <div class="box box19" data-hex="#ec407a"></div>
        <div class="box box20" data-hex="#e91363"></div>
        <div class="box box21" data-hex="#d81b60"></div>
        <div class="box box22" data-hex="#c2185b"></div>
        <div class="box box23" data-hex="#ad1457"></div>
        <div class="box box24" data-hex="#880e4f"></div>

       <div class="vertical_line"></div>

        <div class="box box25" data-hex="#ff80ab"></div>
        <div class="box box26" data-hex="#ff4081"></div>
        <div class="box box27" data-hex="#f50057"></div>
        <div class="box box28" data-hex="#c51162"></div>
      </div>
    </div>

  <!-- purple --> 

     <div style="background-color:white;">
      <div class="pink">Purple</div>

        <div class="labels-and-palettes">
          <div class="box box29" data-hex="#fce4ec"></div>
          <div class="box box30" data-hex="#f8bbd0"></div>
          <div class="box box31" data-hex="#f48fb1"></div>
          <div class="box box32" data-hex="#f06292"></div>
          <div class="box box33" data-hex="#ec407a"></div>
          <div class="box box32" data-hex="#e91363"></div>
          <div class="box box32" data-hex="#d81b60"></div>
          <div class="box box32" data-hex="#c2185b"></div>
          <div class="box box33" data-hex="#ad1457"></div>
          <div class="box box34" data-hex="#880e4f"></div>

        <div class="vertical_line"></div>

          <div class="box box35" data-hex="#ff80ab"></div>
          <div class="box box36" data-hex="#ff4081"></div>
          <div class="box box37" data-hex="#f50057"></div>
          <div class="box box38" data-hex="#c51162"></div>
     </div>
      </div>

  <!-- deep purple --> 

    <div style="background-color:white;">
      <div class="pink">Deep purple</div>

      <div class="labels-and-palettes">
        <div class="box box43" data-hex="#EDE7F6"></div>
        <div class="box box44" data-hex="#D1C4E9"></div>
        <div class="box box45" data-hex="#B39DDB"></div>
        <div class="box box46" data-hex="#9575CD"></div>
        <div class="box box47" data-hex="#7E57C2"></div>
        <div class="box box48" data-hex="#673AB7"></div>
        <div class="box box49" data-hex="#5E35B1"></div>
        <div class="box box50" data-hex="#512DA8"></div>
        <div class="box box51" data-hex="#4527A0"></div>
        <div class="box box52" data-hex="#311B92"></div>

        <div class="vertical_line"></div>

        <div class="box box53" data-hex="#B388FF"></div>
        <div class="box box54" data-hex="#7C4DFF"></div>
        <div class="box box55" data-hex="#651FFF"></div>
        <div class="box box56" data-hex="#6200EA"></div>
      </div>
  </div>

  <!-- indigo --> 

  <div style="background-color:white;">
    <div class="pink">Indigo</div>

      <div class="labels-and-palettes">
        <div class="box box57" data-hex="#E8EAF6"></div>
        <div class="box box58" data-hex="#D1C4E9"></div>
        <div class="box box59" data-hex="#9FA8DA"></div>
        <div class="box box60" data-hex="#7986CB"></div>
        <div class="box box61" data-hex="#5C6BC0"></div>
        <div class="box box62" data-hex="#3F51B5"></div>
        <div class="box box63" data-hex="#3949AB"></div>
        <div class="box box64" data-hex="#303F9F"></div>
        <div class="box box65" data-hex="#283593"></div>
        <div class="box box66" data-hex="#1A237E"></div>

        <div class="vertical_line"></div>

        <div class="box box67" data-hex="#8C9EFF"></div>
        <div class="box box68" data-hex="#536DFE"></div>
        <div class="box box69" data-hex="#3D5AFE"></div>
        <div class="box box70" data-hex="#304FFE"></div>
      </div>
    </div>


    <!-- blue --> 

    <div style="background-color:white;">
      <div class="pink">Blue</div>

      <div class="labels-and-palettes">
        <div class="box box71" data-hex="#e3f2fd"></div>
        <div class="box box72" data-hex="#bbdefb"></div>
        <div class="box box73" data-hex="#90caf9"></div>
        <div class="box box74" data-hex="#64b5f6"></div>
        <div class="box box75" data-hex="#42a5f5"></div>
        <div class="box box76" data-hex="#2196f3"></div>
        <div class="box box77" data-hex="#1e88e5"></div>
        <div class="box box78" data-hex="#1976d2"></div>
        <div class="box box79" data-hex="#1565c0"></div>
        <div class="box box80" data-hex="#0d47a1"></div>

        <div class="vertical_line"></div>

        <div class="box box81" data-hex="#82b1ff"></div>
        <div class="box box82" data-hex="#448aff"></div>
        <div class="box box83" data-hex="#2979ff"></div>
        <div class="box box84" data-hex="#2962ff"></div>
      </div>
  </div>

    <!-- cyan --> 

    <div style="background-color:white;">
      <div class="pink">Cyan</div>

      <div class="labels-and-palettes">
        <div class="box box85" data-hex="#e0f7fa"></div>
        <div class="box box86" data-hex="#b2ebf2"></div>
        <div class="box box87" data-hex="#80deea"></div>
        <div class="box box88" data-hex="#4dd0e1"></div>
        <div class="box box89" data-hex="#26c6da"></div>
        <div class="box box90" data-hex="#00bcd4"></div>
        <div class="box box91" data-hex="#00acc1"></div>
        <div class="box box92" data-hex="#0097a7"></div>
        <div class="box box93" data-hex="#00838f"></div>
        <div class="box box94" data-hex="#006064"></div>

        <div class="vertical_line"></div>

        <div class="box box95" data-hex="#84ffff"></div>
        <div class="box box96" data-hex="#18ffff"></div>
        <div class="box box97" data-hex="#00e5ff"></div>
        <div class="box box98" data-hex="#00b8d4"></div>
      </div>
  </div>

  <!-- teal --> 

    <div style="background-color:white;">
      <div class="pink">Teal</div>

      <div class="labels-and-palettes">
        <div class="box box100" data-hex="#e0f2f1"></div>
        <div class="box box101" data-hex="#b2dfdb"></div>
        <div class="box box102" data-hex="#80cbc4"></div>
        <div class="box box103" data-hex="#4db6ac"></div>
        <div class="box box104" data-hex="#26a69a"></div>
        <div class="box box105" data-hex="#009688"></div>
        <div class="box box106" data-hex="#00897b"></div>
        <div class="box box107" data-hex="#00796b"></div>
        <div class="box box108" data-hex="#00695c"></div>
        <div class="box box109" data-hex="#004d40"></div>

        <div class="vertical_line"></div>

        <div class="box box110" data-hex="#a7ffeb"></div>
        <div class="box box112" data-hex="#64ffda"></div>
        <div class="box box112" data-hex="#1de9b6"></div>
        <div class="box box113" data-hex="#00bfa5"></div>
      </div>
  </div>

  <!-- Green --> 

    <div style="background-color:white;">
      <div class="pink">Green</div>

      <div class="labels-and-palettes">
        <div class="box box114" data-hex="#e8f5e9"></div>
        <div class="box box115" data-hex="#c8e6c9"></div>
        <div class="box box116" data-hex="#a5d6a7"></div>
        <div class="box box117" data-hex="#81c784"></div>
        <div class="box box118" data-hex="#66bb6a"></div>
        <div class="box box119" data-hex="#4caf50"></div>
        <div class="box box120" data-hex="#43a047"></div>
        <div class="box box121" data-hex="#388e3c"></div>
        <div class="box box122" data-hex="#2e7d32"></div>
        <div class="box box123" data-hex="#1b5e20"></div>

        <div class="vertical_line"></div>

        <div class="box box124" data-hex="#b9f6ca"></div>
        <div class="box box125" data-hex="#69f0ae"></div>
        <div class="box box126" data-hex="#00e676"></div>
        <div class="box box127" data-hex="#00c853"></div>
      </div>
  </div>

<!-- Yellow --> 

    <div style="background-color:white;">
      <div class="pink">Yellow</div>

      <div class="labels-and-palettes">
        <div class="box box128" data-hex="#fffde7"></div>
        <div class="box box129" data-hex="#fff9c4"></div>
        <div class="box box130" data-hex="#fff59d"></div>
        <div class="box box131" data-hex="#fff176"></div>
        <div class="box box132" data-hex="#ffee58"></div>
        <div class="box box133" data-hex="#ffeb3b"></div>
        <div class="box box134" data-hex="#fdd835"></div>
        <div class="box box135" data-hex="#fbc02d"></div>
        <div class="box box136" data-hex="#f9a825"></div>
        <div class="box box137" data-hex="#f57f17"></div>

        <div class="vertical_line"></div>

        <div class="box box138" data-hex="#ffff8d"></div>
        <div class="box box139" data-hex="#ffff00"></div>
        <div class="box box140" data-hex="#ffea00"></div>
        <div class="box box141" data-hex="#ffd600"></div>
      </div>
  </div>

  <!-- Orange --> 

    <div style="background-color:white;">
      <div class="pink">Orange</div>

      <div class="labels-and-palettes">
        <div class="box box142" data-hex="#fff3e0"></div>
        <div class="box box143" data-hex="#ffe0b2"></div>
        <div class="box box144" data-hex="#ffcc80"></div>
        <div class="box box145" data-hex="#ffb74d"></div>
        <div class="box box146" data-hex="#ffa726"></div>
        <div class="box box147" data-hex="#ff9800"></div>
        <div class="box box148" data-hex="#f57c00"></div>
        <div class="box box149" data-hex="#ef6c00"></div>
        <div class="box box150" data-hex="#e65100"></div>
        <div class="box box151" data-hex="#ffd180"></div>

        <div class="vertical_line"></div>

        <div class="box box152" data-hex="#ffab40"></div>
        <div class="box box153" data-hex="#ff9100"></div>
        <div class="box box154" data-hex="#ff6d00"></div>
        <div class="box box155" data-hex="#ff6d00"></div>
      </div>
  </div>

</div>
    </div>

</div>

<footer>
      <div class="social-icons">
      <a href="https://www.facebook.com/kristenkellyxo"><i class="fab fa-facebook-square"></i></a>
      <a href="https://twitter.com/kristenkellyxo"><i class="fab fa-twitter-square"></i></a>
      <a href="https://www.instagram.com/kristenkelly.xo/"><i class="fab fa-instagram"></i></a>
    </div>
    <p>&copy;2018 <a href="">Kristen Kelly</a></p>

</footer>


<!-- jquery link -->
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script src="js/main.js"></script>




</body>


	/* ==========================================================================
	Base styles:
	========================================================================== */
	/* Fix to include padding and border in the total width for each element */

	/* header */

	header {
		background-attachment: fixed;
		background-image: url(../images/miami-palm-trees.jpg);
	/*	background:linear-gradient(to bottom, #FF5E3A, #FF2B67);
	*/	background-size: cover;
	height: 200px;

	min-height: 200px;
	padding:100px 1%;

	/*	text-align: center;*/
	/*	background-color: #f44336;*/	

	position: relative;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 300;
}



h1 {
	display: block;
	color: white;
	-webkit-margin-before: 0.67em;
	-webkit-margin-after: 0.67em;
	-webkit-margin-start: 0px;
	-webkit-margin-end: 0px;
	text-transform: uppercase;
	letter-spacing: 5px;
	font-size: 55px;
	text-align: center;
	color: #fff;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 500;
}

h2 {
	display: block;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 5px;


/
}

h3 { 
	display: inline-block;
	font-family: 'Satisfy', cursive;
	font-size: 35px;
	text-transform: none;
	color: #fff;

}

h4 	{
	display: inline-block;
	text-align: center;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 20px;
	text-transform: uppercase;
	color: #fff;
	background-color: #666666;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: rgba(0,0,0.5,0.5) 0px 1px 1px;
}

.placescore {
	position:relative;
	background:linear-gradient(to bottom, #FF5E3A, #FF2B67);


	margin:2em auto;

	width:10em;
	height:10em;

	color:white;

	border:.1em solid;

	border-radius:100%;

}

.placescore:after{
	position:absolute;
	content:'';

	width:1.75em;
	height:1.75em;

	top:.4em;
	left:3.1em;

	box-shadow: 0 1.75em white,
	0 3.75em white,
	0 5.75em white,

	2em 1.75em white,
	2em 3.75em white;


	border-radius:inherit;

	animation:move-dots 1.5s ease-out  infinite;

}

@keyframes move-dots{
	18.28%{
		box-shadow: 0 1.75em white,

		0 3.75em white,
		0 5.75em white,

		2em 1.75em white,
		2em 3.75em white;
	}
	28.57%{
		box-shadow: 0 1.75em white,
		0 3.75em white,
		2.2em 5.75em white,

		2em 1.75em white,
		2em 3.75em white;
	}
	42.85%{
		box-shadow: 0 1.75em white,
		0 5.95em white,
		2em 5.75em white,

		2em 1.75em white,
		2em 3.75em white;
	}

	57.14%{
		box-shadow: 0 3.95em white,
		0 5.75em white,
		2em 5.75em white,

		2em 1.75em white,
		2em 3.75em white;
	}
	71.42%{
		box-shadow: 0 3.75em white,
		0 5.75em white,
		2em 5.75em white,

		-.2em 1.75em white,
		2em 3.75em white;
	}
	85.71%{
		box-shadow: 0 3.75em white,
		0 5.75em white,
		2em 5.75em white,

		0 1.75em white,
		2em 1.55em white;
	} 
	100%{
		box-shadow: 0 3.75em white,
		0 5.75em white,
		2em 3.75em white,

		0  1.75em white,
		2em 1.75em white;
	}
}

/* purple bg */

html,
body {
	min-height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);
	background-size: cover;
}

	/*.center-content {
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		transform: translateY(-50%);
		}*/

		display: inline-block;
		background: #fff;
		padding: 50px;
		margin: 50px;
		font-family: 'Montserrat', sans-serif;
		box-shadow: 0 1px 3px rgba(#000, .12), 0 1px 2px rgba(#000, .24);
		overflow: hidden;
	}


	/* nav main styles */

	.sticky-nav-wrapper {
		height: 60px;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
	}

	nav {
		width: 100%;
		text-align: center;
		background-color: white;
		box-shadow: 0 3px 11px rgba(0, 0, 0, .1);
		transition: all 300ms ease-out;
	}

	nav ul {
		margin: 0;
		padding: 0;
	}

	nav li {
		display: inline-block;
	}

	nav a {
		display: inline-block;
		margin: 1rem;
		padding: .25rem 0;
		text-decoration: none;
		color: #888;
		transition: all .3s ease-in-out;
	}


	nav .active {
		border-bottom: 2px solid #F95758;
	}

	body {
		text-align: center;
	}


	/* sticky nav */

	.scrolled {
		position: fixed;
		top: 0;
		z-index: 1;
	}

	.sticky-nav-wrapper {
		top: 0;
		z-index: 40;
		height: 600px;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
	}

	nav {
		width: 100%;
		text-align: center;
		background-color: white;
		box-shadow: 0 3px 11px rgba(0, 0, 0, .1);
		transition: all 300ms ease-out;
	}

	nav ul {
		margin: 0;
		padding: 0;
	}

	nav li {
		display: inline-block;
	}

	nav a {
		display: inline-block;
		margin: 1rem;
		padding: .25rem 0;
		text-decoration: none;
		color: #888;
		transition: all .3s ease-in-out;
	}


	nav .active {
		border-bottom: 2px solid #F95758;
	}

	.scrolled {
		position: fixed;
		top: 0;
		z-index: 1;
	}


	/* body */

	body{
		margin: 0;
		padding: 0;
		font-family: sans-serif;
		font-size: 15px;
		line-height: 1.5;
		text-align: center;
	}

	section {
		display: flex;
		padding: 0px;
	}


	.div {
		margin: 0;
		padding: 0;
		border: 0;
		font: inherit;
		vertical-align: baseline;
		width: 100px;
	}

	*,
	box-sizing: inherit;


	* {
		box-sizing: border-box;
	}

	.row {
		display: flex;
	}

	/* Create two equal columns that sits next to each other */

	.column {
		flex: 50%;
		margin: 20px;
		padding: 30px;
		height: 850px; 
		margin-bottom: 100px;
		box-shadow: 0 8px 6px #000,

	}

	/*test*/ 

	#main {
		width: 100%;
		height: 100%;

		display: flex;
		flex-wrap: wrap;
		padding: 20px 20px 20px 20px;
		margin: 10px 20px 20px 10px;

	}

	.main-wrapper {
		width: 800px;
		height: 800px;

	}
	/* color labels */

	.labels-and-palettes {
		display: flex;
		height: auto;
		justify-content: center;
	}

	.color-labels {
		padding-top: 0px;
		border-right: 1px solid #E0E0E0;
		width: 100px;
		height: 50px;
		margin: auto;

	}

	.vertical_line {
		height:40px; 
		width:1px;
		background:#000;
		margin-left: 10px;
		margin-right: 10px;

	}



	li, ul {
		list-style-type: none;
	}

	/* boxes */

	.box {
		display: inline-flex;
		flex-direction: column;
		align-items: auto;

		color: white;
		font-size: 100px;
		text-align: center;

		text-shadow: 4px 4px 0 rgba(0,0,0.1);
		padding: 5px;
		position: relative;

		width: 35px;
		height: 35px;
		border: 1px solid #EEE;
		cursor: pointer;

	}

	.box:hover {
		border-radius: 50%;
	}

	/* box titles */

	.pink {
		text-align: left;
	} 

	.red {
		text-align: left;
	}




	/* box color styles */

	/* red */

	.box1 {
		background: #ffebee;

	}
	.box2 {
		background: #ffcdd2;

	}
	.box3 {
		background: #ef9a9a;
	}

	.box4 {
		background: #e57373;
	}

	.box5 {
		background: #ef5350;
	}

	.box6 {
		background: #f44336;
	}

	.box7 {
		background: #e53935;
	}
	.box8 {
		background: #d32f2f;
	}
	.box9 {
		background: #c62828;
	}

	.box10 {
		background: #b71c1c;
	}

	.box11{
		background: #ff8a80;;
	}

	.box12 {
		background: #FF5252;

	}

	.box13 {
		background: #ff1744;
	}

	.box14 {
		background: #d50000;
	}


	/* pink */

	.box15 {
		background: #fce4ec;
	}

	.box16 {
		background: #f8bbd0;
	}
	.box17 {
		background: #f48fb1;
	}
	.box18 {
		background: #f06292;
	}

	.box19 {
		background: #ec407a;
	}
	.box20 {
		background: #e91363;
	}
	.box21 {
		background: #d81b60;
	}
	.box22 {
		background: #c2185b;
	}
	.box23 {
		background: #ad1457;
	}

	.box24 {
		background: #880e4f;
	}

	.box25 {
		background: #ff80ab;
	}

	.box26 {
		background: #ff4081;
	}

	.box27 {
		background: #f50057;

	}
	.box28 {
		background: #c51162;

	}

	/* purple*/

	.box29 {
		background: #F3E5F5;
	}
	.box30 {
		background: #E1BEE7;
	}
	.box31 {
		background: #CE93D8;
	}
	.box32 {
		background: #BA68C8;
	}
	.box33 {
		background: #AB47BC;
	}
	.box34 {
		background: #9C27B0;
	}
	.box35 {
		background: #8E24AA;
	}
	.box36 {
		background: #7B1FA2;
	}
	.box37 {
		background: #6A1B9A;
	}

	.box38 {
		background: #4A148C;
	}

	.box39 {
		background: #EA80FC;
	}
	.box40 {
		background: #E040FB;
	}
	.box41 {
		background: #D500F9;
	}
	.box42 {
		background: #AA00FF;
	}

	/* deep purple*/

	.box43 {
		background: #EDE7F6;
	}
	.box44 {
		background: #D1C4E9;
	}
	.box45 {
		background: #B39DDB;
	}
	.box46 {
		background: #9575CD;
	}
	.box47 {
		background: #7E57C2;
	}
	.box48 {
		background: #673AB7;
	}
	.box49 {
		background: #5E35B1;
	}
	.box50 {
		background: #512DA8;
	}
	.box51 {
		background: #4527A0;
	}

	.box52 {
		background: #311B92;
	}

	.box53 {
		background: #B388FF;
	}
	.box54 {
		background: #7C4DFF;
	}
	.box55 {
		background: #651FFF;
	}
	.box56 {
		background: #6200EA;
	}


	/* Indigo */ 
	.box57 {
		background: #E8EAF6;
	}
	.box58 {
		background: #C5CAE9;
	}
	.box59 {
		background: #9FA8DA;
	}

	.box60 {
		background: #7986CB;

	}
	.box61 {
		background: #5C6BC0;
	}
	.box62 {
		background: #3F51B5;
	}
	.box63 {
		background: #3949AB;
	}
	.box64 {
		background: #303F9F;
	}
	.box65 {
		background: #283593;
	}
	.box66 {
		background: #1A237E;
	}
	.box67 {
		background: #8C9EFF;
	}
	.box68 {
		background: #536DFE;
	}
	.box69 {
		background: #3D5AFE;
	}
	.box70 {
		background: #304FFE;
	}


	/* Blue */ 

	.box71 {
		background: #e3f2fd;
	}
	.box72 {
		background: #bbdefb;
	}
	.box73 {
		background: #90caf9;
	}

	.box74 {
		background: #64b5f6;

	}
	.box75 {
		background: #42a5f5;
	}
	.box76 {
		background: #2196f3;
	}
	.box77 {
		background: #1e88e5;
	}
	.box78 {
		background: #1976d2;
	}
	.box79 {
		background: #1565c0;
	}
	.box80 {
		background: #0d47a1;
	}
	.box81 {
		background: #82b1ff;
	}
	.box82 {
		background: #448aff;
	}
	.box83 {
		background: #2979ff;
	}
	.box84 {
		background: #2962ff;
	}
	

	/* Cyan */ 

	.box85 {
		background: #e0f7fa;
	}
	.box86 {
		background: #b2ebf2;
	}
	.box87 {
		background: #80deea;
	}

	.box88 {
		background: #4dd0e1;

	}
	.box89 {
		background: #26c6da;
	}
	.box90 {
		background: #00bcd4;
	}
	.box91 {
		background: #00acc1;
	}
	.box92 {
		background: #0097a7;
	}
	.box93 {
		background: #00838f;
	}
	.box94 {
		background: #006064;
	}
	.box95 {
		background: #84ffff;
	}
	.box96 {
		background: #18ffff;
	}
	.box97 {
		background: #00e5ff;
	}
	.box98 {
		background: #00b8d4;
	}

	/* Teal */ 

	.box100 {
		background: #e0f2f1;
	}
	.box101 {
		background: #b2dfdb;
	}
	.box102 {
		background: #80cbc4;
	}

	.box103 {
		background: #4db6ac;

	}
	.box104 {
		background: #26a69a;
	}
	.box105 {
		background: #009688;
	}
	.box106 {
		background: #00897b;
	}
	.box107{
		background: #00796b;
	}
	.box108 {
		background: #00695c;
	}
	.box109 {
		background: #004d40;
	}
	.box110 {
		background: #a7ffeb;
	}
	.box111 {
		background: #64ffda;
	}
	.box112 {
		background: #1de9b6;
	}
	.box113 {
		background: #00bfa5;
	}
	

	/* Green */ 

	.box114 {
		background: #e8f5e9;
	}
	.box115 {
		background: #c8e6c9;
	}
	.box116 {
		background: #a5d6a7;
	}

	.box117 {
		background: #81c784;

	}
	.box118 {
		background: #66bb6a;
	}
	.box119 {
		background: #4caf50;
	}
	.box120 {
		background: #43a047;
	}
	.box121{
		background: #388e3c;
	}
	.box122 {
		background: #2e7d32;
	}
	.box123 {
		background: #1b5e20;
	}
	.box124 {
		background: #b9f6ca;
	}
	.box125 {
		background: #69f0ae;
	}

	.box126 {
		background: #00e676;
	}
	.box127{
		background: #00c853;
	}
	
	/* Yellow */ 

	.box128{
		background: #fffde7;
	}
	.box129 {
		background: #fff9c4;
	}
	.box130 {
		background: #fff59d;
	}

	.box131 {
		background: #fff176;

	}
	.box132 {
		background: #ffee58;
	}
	.box133 {
		background: #ffeb3b;
	}
	.box134 {
		background: #fdd835;
	}
	.box135{
		background: #fbc02d;
	}
	.box136 {
		background: #f9a825;
	}
	.box137 {
		background: #f57f17;
	}
	.box138 {
		background: #ffff8d;
	}
	.box139 {
		background: #ffff00;
	}
	
	.box140 {
		background: #ffea00;
	}
	.box141{
		background: #ffd600;
	}
	
	/* Orange */ 

	.box142{
		background: #fff3e0;
	}
	.box143 {
		background: #ffe0b2;
	}
	.box144 {
		background: #ffcc80;
	}

	.box145 {
		background: #ffb74d;

	}
	.box146 {
		background: #ffa726;
	}
	.box147 {
		background: #ff9800;
	}
	.box148 {
		background: #fb8c00;
	}
	.box149 {
		background: #f57c00;
	}
	.box150{
		background: #ef6c00;
	}
	.box151 {
		background: #e65100;
	}
	.box152 {
		background: #ffd180;
	}
	.box153 {
		background: #ffab40;
	}
	.box154 {
		background: #ff9100;
	}
	.box155 {
		background: #ff6d00;
	}



	* {
		box-sizing: border-box;
	}

	.colorpicker {
		height: 100px;
		width: 100px;

	}

	/* shadow triangle */

	span {
		display: inline-block;   
		transform: scaleX(2.5);
		color: #c0c5ce;
		text-shadow: 
		0 2px 2px rgba(192,192,206,0.7), 
		0 10px 4px rgba(0,0,0,0.5);
		font-size: 32px;
	}
	span:hover {
		transition: all 0.2s ease;
		transform: scaleX(2.5) translateY(4px);
		text-shadow:     
		0 1px 1px rgba(0,0,0,0.5);
	}


	footer {
	/*	background-color: #f44336;
	*/	
	background: linear-gradient(to bottom, #FF5E3A, #FF2B67);
	box-shadow:inset 0 15px 5px -16px #111;
	padding: 30px;
	text-align: center;
	font-family: 'Roboto Condensed', sans-serif;
	text-transform: uppercase;
	align-items: 100%;


}

	footer a {
	font-size: 18px;
}

	.social-icons a {
	color: #ffebee;
	font-size: 20px;
	margin: 5px;
}


/* Responsiveness */
	img {
	max-width: 100%;
}

	@media (max-width: 960px)

    /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */

html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */

[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */

a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */

abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */

b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */

dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9/10.
 */

img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari.
 */

figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */

pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */

/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */

button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */

button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */

input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  box-sizing: content-box; /* 2 */
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */

textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */

optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}
console.log ('loaded');

$('.box').on('click', function(){
	console.log ('clicked'); 
	var hex = $(this).data('hex');
	console.log('hex: ', hex);
	$('.hex-code').text(hex);
	$('.hex-code-input').val(hex);
	$('#canvas').css( 'background', hex );

	var rgb = $(this).data('rgb');
	console.log('rgb: ', rgb);
	$('.rgb-code').text(rgb);
	$('.rgb-code-input').val(rgb);

	var hsl = $(this).data('hsl');
	console.log('hsl: ', hsl);
	$('.hsl-code').text(hsl);
	$('.hsl-code-input').val(hsl);

	var cymk = $(this).data('cymk');
	console.log('cymk: ', cymk);
	$('.cymk-code').text(cymk);
	$('.cymk-code-input').val(cymk);


});

$(document).ready(function() {
  $('.slider-container').unslider({
    'arrows': false,
    'nav': false,
    'animation': 'vertical',
    'autoplay': true,
    'delay': 5000
  });
});


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.