Learn To Code A Google Ventures Style Header

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.

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.


About the Author Wilma Hamlin

Wilma Hamlin is a creative designer & writer. She writes for Crayonify. Being a designer as well she use to create amazing designs using many tools. In her lesuire time she love to read books and tries to learn new designs.

Leave a Comment:

8 comments
TutorialsRoom says

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

Reply
serg says

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

Reply
rajasegar says

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…

Reply
Josh Lake says

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.

Reply
Richard Carpenter says

Thanks for the comments much appreciated.

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

Reply
Troy says

Thank you for sharing this tutorial!

Reply
Harridi says

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

Reply
michael says

good tutorial always wanted to do a similar website

Reply
Add Your Reply

Popular posts

css.php