Learn To Code A Google Ventures Style Header

In todays tutorial I’ll be showing you how to code a header just like google ventures. If you’re unfamiliar with it check it out “Google Ventures“.

In Blog, HTML & CSS

Creating The Markup

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="header">
    <div class="container">
        WEBSITE TITLE AND NAVIGATION WILL GO HERE
    </div><!--container ends-->
</div><!--header ends-->

<div id="hero-back"></div><!--hero back ends-->

<div id="hero">
    <div class="header-container">
        HEADER CONTENT WILL GO HERE
    </div><!--header container ends-->
</div><!--hero ends-->

<div id="content">
    <div class="container">
        CONTENT WILL GO HERE
    </div><!--container ends-->
</div><!--content ends-->

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.

1
2
3
4
5
<div id="header">
    <div class="container">
        <h1>YOUR TITLE GOES HERE</h1>
    </div><!--container ends-->
</div><!--header ends-->

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!--SIMPLE RESET-->
* {
    margin:0;
    padding:0;
}

<!--SET BODY FONT-->
body {
    font-family:Arial, Helvetica, sans-serif;
}

<!--H1 HEADING STYLES-->
h1 {
    letter-spacing:-1px;
    color:#000;
    font-size:30px;
}

<!--HEADER STYLES-->
#header {
    width:100%;
    position:fixed;
    top:0;
    margin-top:35px;
}

<!--CONTAINER STYLES-->
.container {
    width:960px;
    margin:auto;
    line-height:18px;
    font-size:12px;
}


Coding And Styling The Hero Image

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

1
2
3
4
5
6
7
8
9
<div id="hero-back"></div><!--hero back ends-->

<div id="hero">
    <div class="header-container">
        <h2>This Is The Hero Content Area</h2><!--HERO TITLE-->
        
        <p>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.</p><!--HERO PARAGRAPH INTRO-->
    </div><!--header container ends-->
</div><!--hero ends-->

The CSS for the markup above looks like this.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!--H2 STYLES-->
h2 {
    margin-bottom:10px;
    font-size:22px;
    color:#000;
}

<!--HERO BACKGROUND COLOUR-->
#hero-back {
    background:#000;
}

<!--HERO AND HERO-BACK STYLES-->
#hero, #hero-back {
    width:100%;
    position:fixed;
    top:0;
    height:470px;
    z-index:-2;
}

<!--HERO IMAGE BACKGROUND-->
#hero {
    min-width:960px;
    background:url(hero.jpg) top center no-repeat;
}

<!--HEADER CONTAINER-->
.header-container {
    width:960px;
    margin:auto;
    line-height:18px;
    font-size:12px;
    padding-top:150px;
    text-align:center;
    color:#fff;
}

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="content">
        <div class="container">
            <h2>This Is The Content Area 1</h2>
            <p>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.</p>
            
            <h3>This Is The Content Area 2</h3>
            <p>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.</p>
            
            <h3>This Is The Content Area 3</h3>
            <p>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.</p>
            
            <h3>This Is The Content Area 4</h3>
            <p>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.</p>
            
            <h3>This Is The Content Area 5</h3>
            <p>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.</p>
            
            <h3>This Is The Content Area 6</h3>
            <p>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.</p>
            
            <h3>This Is The Content Area 7</h3>
            <p>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.</p>
        </div><!--container ends-->
    </div><!--content ends-->

The CSS looks like this.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!--H3 STYLES-->
h3 {
    margin-top:30px;
    margin-bottom:10px;
    font-size:18px;
}

<!--CONTENT STYLES-->
#content {
    margin-top:470px;
    z-index:2;
    background:#fff;
    padding-top:20px;
    position:relative;
}

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.


  1. August 6, 2012 at 5:15 AM

    I love this effect!
    A always, to the homepage of http://www.tutorialsroom.com :)

  2. serg
    August 7, 2012 at 4:44 AM

    wow this is a very nice explanation! Thank you for sharing!

  3. August 8, 2012 at 6:04 AM

    This is just great, i would love to see how the gallery is coded with variable height images, can we expect another tut on this…

  4. August 8, 2012 at 7:52 AM

    Cheers for posting this tutorial, it is going to be a great help to me and will defiantly be used in my web design work. I think that it looks really effective when the background to the header is fixed and doesn’t scroll, I feel that this gives across a very professional high quality feel to the website. I have seen this effect used a lot recently on single paged websites with having fixed backgrounds between each area of content.

    I was wondering whether this would still work if you wanted to have a slider as the background? I feel that this may work really well to allow it to look more interesting.

    Thanks again, and I look forward to more tutorials and posts to come.

  5. Wilma Hamlin
    August 8, 2012 at 5:21 PM

    Thanks for the comments much appreciated.

    I’m sure implementing a slider with the same effect would be easier enough to do

  6. Troy
    August 11, 2012 at 5:38 PM

    Thank you for sharing this tutorial!

  7. Harridi
    September 15, 2012 at 9:12 AM

    Thanks for making this cool tutorial.
    One question, I wonder what is “hero-back” for?

  8. michael
    November 19, 2012 at 10:41 AM

    good tutorial always wanted to do a similar website

Give Us Your Feedback

Here on Photoshop Plus we use something called Gravatar, its a little image which will appear next to your name when you comment on a blog. Using a gravatar will help us recognise genuine comments from the spam comments.


Don't forget to leave a comment on this post, we appreciated your feedback good or bad.

There's currently 8 Comments On Learn To Code A Google Ventures Style Header, why not add yours!

Leave a Reply

Your email address will not be published. Required fields are marked *

Auto Scroll To The Top
css.php