123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!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
  });
});



            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console