O'Reilly logo

Web Design Blueprints by Benjamin LaGrone

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Color classes

Let's add some color so that you can see this project start to take shape. Therefore, add a style element inside the header block, and inside it, add the color classes to assign as attributes to elements inside the HTML body. These classes come from the Flat UI color section of the previous chapter. The blue shades will work nicely for this project:

<head>
<style>
.black {
background-color: black;
}
.color-0 { 
background-color: #85C4ED;
}	
.color-1 { 
background-color: #58ADE3;
}
.color-2 { 
background-color: #3499DB;
}
.color-3 { 
background-color: #0F85D1;
}
.color-4 { 
background-color: #0665A2;
}
.wet-asphalt {
background-color:#34495e;
}
</style>	
</head>

Next, we need to assign these general color class attributes to some of our elements. ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required