In this tutorial, you will create a squeeze page. It is a tremendously way that is popular of alleged single-page tasks.
You will see a few awesome strategies:
Producing a page Intro
Utilizing masks and shadows
Developing a Contact Part
Making Use Of Bing Maps
Utilising the Font Superb toolkit
Much like the tutorial that is previous at first, we will produce the fundamental framework of our project.
Start the index.html file in any project folder (the folder in which you have unzipped package that is MDB and paste the next rule below label.
Now we are visit our main web site going to produce a navigation club. Head to Navbar Docs and copy the code for fundamental Navbar. Then paste it between starting s tags.
Make every effort to put .container within your navbar so that you can focus backlinks.
We must make one significant modification to the Navbar rule.
Include the class .fixed-top towards the Navbar.
While you would expect, which makes our navbar adhere to the top the display. It is visible most of the right time, even though you scroll down your page.
Now you must for one thing dazzling. Why don’t we produce a complete web page history intro for the website landing page.
Paste this rule underneath the navbar and prior to the closing tag:
I would ike to explain how a code above works.
.view is a wrapper for the back ground image, which lets us put in a mask to it. By way of this mask we are able to make our image darker or lighter, which helps us in order to make your articles more noticeable.
.mask may be the element with absolute place, that makes it protect our background image. And given that it covers the image, we are able to utilize it as being a mask and manipulate the colors.
We have additionally set for the .view element. We are going to require that in an additional.
You will notice that nothing has changed when you save the file and refresh your browser. That is it work because we need some CSS code to make.
Firstly, we are going to make use of a split CSS apply for our custom designs. Open the file style.css (into the “css” folder) and paste in code below:
We set height: 100% to all or any the parent aspects of our history image because just by doing so we are able to protect the screen that is entire the image
We set #intro to an effective path that is URL the image. You can make use of whatever image you need.
Then, we supply the value address to the background-size home. That produces the image address every one of the available area on the display.
The CSS prefixes -webkit- , -moz- and -o- make sure our rule works correctly with all the current browsers.
Save the file andlet the secret happen. When you start your web browser you will observe an attractive image addressing your intro. There are many things which we’re able to enhance, but we will care for that in the next tutorial.
So that you can replace the back ground image you merely need certainly to alter the path that is URL. It is possible to offer a web link into the image on the server or course towards the source file in your task’s files, as an example: url(“/img/imageName.png”);
One last tip that is small
You need to use whatever image you need, but you can find a rules that are few you ought to follow.
Your image should be big sufficient to help keep the product quality but since tiny as possible so not to increase the web web web page loading time. That is why we recommend you prepare your photo the following:
1. Resolution: 1920px / 1280px
2. JPEG extendable
3. The file is compressed (you may use the COMPRES JPG device)