Book Image

Web Design Blueprints

Book Image

Web Design Blueprints

Overview of this book

The book delivers simple instructions on how to design and build modern Web using the latest trends in web development. You will learn how to design responsive websites, created with modern Flat User Interface design patterns, build deep-scrolling websites with parallax 3D effects, and roll-your-own single-page applications. Finally, you'll work through an awesome chapter that combines them all. Each chapter features actual lines of code that you can apply right away.
Table of Contents (12 chapters)
Web Design Blueprints
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface
Index

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. Add the black class to the main HTML5 element. To the next section block, stratosphere, add the wet-asphalt class to its first child DIV element. In the following four DIV elements, add the classes color-4, color...