Open
main.css
.Add some whitespace surrounding the header with
padding
, and also set the header color to#333
, as follows:.blog-header { padding: 30px 15px; background-color: #333; }
To make the logo look prominent, we will set it with Varela Round font, which is the same font family we used for the headings. We also make it bigger and transform the letters all to uppercase, as follows:
.blog-name { font-family: "Varela Round", Arial, sans-serif; font-weight: 400; font-size: 42px; text-align: center; text-transform: uppercase; }
The logo link color currently is
#2a84bf
, which is the common color we set for links<a>
. This color does not suit well with the background color. Let's change the color to white instead, as follows:.blog-name a { color: #fff; }
Set the search input styles, as follows:
.search-form input { height: 36px; background-color: #ccc; color: #555; ...
Responsive Web Design by Example : Beginner's Guide
By :
Responsive Web Design by Example : Beginner's Guide
By:
Overview of this book
Table of Contents (16 chapters)
Responsive Web Design by Example Beginner's Guide Second Edition
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Free Chapter
Responsive Web Design
Web Development Tools
Constructing a Simple Responsive Blog with Responsive.gs
Enhancing the Blog Appearance
Developing a Portfolio Website with Bootstrap
Polishing the Responsive Portfolio Website with LESS
A Responsive Website for Business with Foundation
Extending Foundation
Pop Quiz Answers
Index
Customer Reviews