We are reader-supported. When you buy through links on our site, we may earn an affiliate commission. Learn more.

Learn To Code A Google Ventures Style Header

Creating The Markup

The markup is pretty much the same as if you were coding any other website, and looks like this.

[code type=html]

HEADER CONTENT WILL GO HERE

CONTENT WILL GO HERE


[/code]

I’ll walk you through each section below.

Coding And Styling The Header

Create a new HTML document in your favorite code editor. Inside the body tag create two DIV tags, one with an ID of “Header” and one with a CLASS of “Container”. Inside the container DIV create a heading wrapped in a H1 tag.

[code type=html]


[/code]

Inside a stylesheet add the following CSS styles. The important set of styles to take note of are the styles within the “Header” DIV.

[code type=css]

* {
margin:0;
padding:0;
}


body {
font-family:Arial, Helvetica, sans-serif;
}


h1 {
letter-spacing:-1px;
color:#000;
font-size:30px;
}


#header {
width:100%;
position:fixed;
top:0;
margin-top:35px;
}


.container {
width:960px;
margin:auto;
line-height:18px;
font-size:12px;
}
[/code]

Coding And Styling The Hero Image

Underneath the ending “Header” tag add 3 more DIV’s “Hero-Back”, “Hero” and “Header-Container”.

[code type=html]

This Is The Hero Content Area

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


[/code]

The CSS for the markup above looks like this.

[code type=css]

h2 {
margin-bottom:10px;
font-size:22px;
color:#000;
}


#hero-back {
background:#000;
}


#hero, #hero-back {
width:100%;
position:fixed;
top:0;
height:470px;
z-index:-2;
}


#hero {
min-width:960px;
background:url(hero.jpg) top center no-repeat;
}


.header-container {
width:960px;
margin:auto;
line-height:18px;
font-size:12px;
padding-top:150px;
text-align:center;
color:#fff;
}
[/code]

Coding And Styling The Content

Create a further 2 DIV’s called “Content” and “Container”. Inside the “Container” DIV add a some content, enough to make the browser scroll.

[code type=html]

This Is The Content Area 1

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

This Is The Content Area 2

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

This Is The Content Area 3

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

This Is The Content Area 4

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

This Is The Content Area 5

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

This Is The Content Area 6

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

This Is The Content Area 7

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


[/code]

The CSS looks like this.

[code type=css]

h3 {
margin-top:30px;
margin-bottom:10px;
font-size:18px;
}


#content {
margin-top:470px;
z-index:2;
background:#fff;
padding-top:20px;
position:relative;
}
[/code]

Check Out The Demo

Save your HTML file then give it a whirl.

Conclusion

Thanks for taking part in this article, if you have any questions feel free to post them up on our Facebook Fan Page Or Tweet them via twitter @photoshop_plus.


Author: Tom ClaytonTom loves to write on technology, e-commerce & internet marketing. Tom has been a full-time internet marketer for two decades now, earning millions of dollars while living life on his own terms. Along the way, he’s also coached thousands of other people to success.