go to all blogs

Hello geeks,

Today, in this story I’m going to demonstrate how to create a full screen responsive landing page for a website using pure HTML, CSS and bit jQuery


What is landing page?

It is a part of a website which serves as the entry point for your website. Your device’ full screen is taken by that page as soon as you load the website and afterwards you see the rest of the site.


Landing Page

Photo by Lauren Mancke on Unsplash

I’ll be dividing this tutorial in 3 parts:

  1. Setting up HTML

  2. Adding CSS

  3. Little bit of jQuery ( for click to scroll part )


Setting up HTML


1<!DOCTYPE html>
2<html>
3 <head>
4 <title>FullScreenLandingPage</title>
5 <meta charset="utf-8" />
6 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 <link rel="stylesheet" type="text/css" href="index.css" />
8 </head>
9 <body>
10 <header>
11 <h1>Welcome to my LandingPage</h1>
12 <p>How are you doing?</p>
13 <span id="down">&#8595;</span>
14 </header>
15 </body>
16</html>

The main idea behind creating this is to put the text-content which you want to see on landing page inside <header> tag which is inside <body> tag.

Here I’m also adding the down-arrow symbol () on which if you click,will scroll you down to the rest of the web-page. I’m only focusing here for landing page. You may add rest of the content on your own.

If you save this much of code and open it in your browser it will look something like this(not what you wanted to see,right?


Styling the page


1header {
2 height: 100vh;
3 background-image: url(enteryourphotourlhere!);
4 /* flex-box thing */
5 display: flex;
6 flex-direction: column;
7 align-items: center;
8 justify-content: center;
9 background-size: cover;
10 margin-bottom: 30px;
11}

In order for your background-image to take height of entire screen,you must add height:100vh; rule. It’s telling the browser to take the entire 100% of available view-port height(vh = view-port height). Read about view-port here.

Now,in order for your text content to be in the middle of the background-image you’ll need to apply display:flex;.

  1. flex-direction:column = this will take care to align text content inside "header" to be in vertical fashion.

  2. align-items:center = this will center your text horizontally

  3. justify-content:center = this will center your text vertically


If you don’t know what flex-box technology is,check that out here.


If you save till this,you’ll see something like this:

Welcome to landing page


You’ll notice a little white-space around the image. In order to fix that and to make your font look more interesting,add this:

1* {
2 margin: 0px;
3 padding: 0px;
4 font-family: monospace;
5}

Now,let’s position our down-arrow near the bottom of the image. For that we must add this CSS rule for our down arrow which is a <span> element with ID “arrow”.

1#down {
2 position: absolute;
3 top: 85vh;
4 padding: 20px;
5 font-size: 2.5em;
6}
7#down:hover {
8 cursor: pointer;
9 background-color: #eee;
10 opacity: 0.8;
11}

We’re positioning that arrow “absolutely” 85% of view-port height from top of the page. Also,some :hover effect is added to make it look more good.

Here ends our CSS section.

jQuery(for click to scroll down part)


1<script type="text/javascript">
2
3 //scroll to top on page refresh (PART1)
4 window.onbeforeunload = function () {
5 window.scrollTo(0, 0);
6 }
7
8 //for arrow click part (PART2)
9 $(document).ready( function () {
10
11 $('#down').on('click',function () {
12 $("html").scrollTop(0);
13 $('html, body').animate({
14 scrollTop: $(where-you-want-to-scroll).offset().top
15 }, 1000);
16 });
17
18 });
19
20</script>

I’ll suggest you to ignore this part of tutorial if you are new to JavaScript/ jQuery.

What PART1 doing is,making sure when you refresh the page from any part of same page,you’ll see it always from top.

PART2 defines how you handle the ‘click’ event for that arrow and then scrolling the page till the section of your choice which you specify in scrollTop property.

Here,ends our jQuery part also.

Conclusion

This is all about what we wanted to create in this post.

Thank you for reading ! I hope you liked it. :)

Here’s my code-pen link to the same code described above:

Codepen link

Good bye ;)..