A Pen by frank.

index.html

<div id="nav">
  <h1>Color Palette</h1>
<ul>
	<li><img src="http://placehold.it/90x50"/></li>
	<li><img src="http://placehold.it/90x50"/></li>
	<li><img src="http://placehold.it/90x50"/></li>
	<li><img src="http://placehold.it/90x50"/></li>
	<li><img src="http://placehold.it/90x50"/></li>
	<li><img src="http://placehold.it/90x50"/></li>
	<li><img src="http://placehold.it/90x50"/></li>
	<li><img src="http://placehold.it/90x50"/></li>
</ul>
</div>
<div id="nav2">
<ul>
	<li><img src="http://placehold.it/90x50"/></li>
	<li><img src="http://placehold.it/90x50"/></li>
	<li><img src="http://placehold.it/90x50"/></li>
	<li><img src="http://placehold.it/90x50"/></li>
	<li><img src="http://placehold.it/90x50"/></li>
	<li><img src="http://placehold.it/90x50"/></li>
	<li><img src="http://placehold.it/90x50"/></li>
	<li><img src="http://placehold.it/90x50"/></li>
</ul>
</div>
<div id="nav3">
<ul>
	<li><img src="http://placehold.it/90x50"/></li>
	<li><img src="http://placehold.it/90x50"/></li>
	<li><img src="http://placehold.it/90x50"/></li>
	<li><img src="http://placehold.it/90x50"/></li>
	<li><img src="http://placehold.it/90x50"/></li>
	<li><img src="http://placehold.it/90x50"/></li>
	<li><img src="http://placehold.it/90x50"/></li>
	<li><img src="http://placehold.it/90x50"/></li>
</ul>
</div>
<div id="nav4">
<ul>
	<li><img src="http://placehold.it/90x50"/></li>
	<li><img src="http://placehold.it/90x50"/></li>
	<li><img src="http://placehold.it/90x50"/></li>
	<li><img src="http://placehold.it/90x50"/></li>
	<li><img src="http://placehold.it/90x50"/></li>
	<li><img src="http://placehold.it/90x50"/></li>
	<li><img src="http://placehold.it/90x50"/></li>
	<li><img src="http://placehold.it/90x50"/></li>
</ul>
</div>

script.js

$(document).ready(function(){
   $("h1").animate({left:'50px'});
});

SCSS-colou-pattern.markdown

SCSS colou pattern

A Pen by frank on CodePen.

License.

SCSS-colour-pattern.markdown

SCSS colour pattern

A Pen by frank on CodePen.

License.

style.scss

@import "compass";
$color:#eb3929;
$color2:#2c9bb5;
$mainWidth:960px;
$margin:0 auto;
$display:inline-block;
$white:#fefdfd;
$opaque:0;
$textShadow:4px 4px 1px $color,4px -4px 1px $color,-4px 4px 1px $color, -4px -4px 1px $color;

#nav{
  width:$mainWidth;
  margin:$margin;
  h1{
    position:fixed;
    color:lighten($color2,30%);
    text-transform:uppercase;
    text-shadow:$textShadow;
    top:32%;
    left:32%;
    font:{
       size:5em;
       weight:bold;
       family:'Open Sans', sans-serif;;
    }
  }
  
  ul{
  background-color:$color2;
    padding:1%;
    li{
      background-color:$color;
      margin:1%;
      display:$display; 
      height:50px;
      width:90px;
      img{opacity: $opaque;}
	  img:hover{opacity:1;}
    }
     li:nth-of-type(even){
      background-color:$white;
    }
  }
}

#nav2{
  width:$mainWidth;
  margin:$margin;
  
  ul{
  background-color:$color;
    padding:1%;
    li{
      background-color:$color2;
      margin:1%;
      display:$display; 
      height:50px;
      width:90px;
	  img{opacity: $opaque;}
	  img:hover{opacity:1;}
    }
    li:nth-of-type(odd){
      background-color:$white;
    }
  }
}

#nav3{
  width:$mainWidth;
  margin:$margin;
  
  ul{
  background-color:$color2;
    padding:1%;
    li{
      background-color:$color;
      margin:1%;
      display:$display; 
      height:50px;
      width:90px;
	  img{opacity:$opaque;}
	  img:hover{opacity:1;}
    }
    li:nth-of-type(odd){
      background-color:$white;
    }
  }
}

#nav4{
  width:$mainWidth;
  margin:$margin;
  
  ul{
  background-color:$color;
    padding:1%;
    li{
      background-color:$color2;
      margin:1%;
      display:$display; 
      height:50px;
      width:90px;
	  img{opacity: $opaque;}
	  img:hover{opacity:1;}
    }
    li:nth-of-type(even){
      background-color:$white;
    }
  }
}