In this guide, you will create a website landing page. It is a tremendously popular method of building alleged single-page tasks.
You will see a few awesome methods:
Producing a page Intro
Making use of masks and shadows
Making a Contact Part
Making Use Of Google Maps
Utilising the Font Amazing toolkit
Much like the past guide, at the beginning, we are going to produce the fundamental structure of our task.
Open the index.html file in assembling your project folder (the folder for which you have unzipped MDB package) and paste the next rule below label.
Now we are 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 spot .container as part of your navbar to be able to focus backlinks.
We must make one change that is significant the Navbar rule.
Include the class .fixed-top towards the Navbar.
While you would expect, which makes our navbar stay glued to the top the display. It will likely be visible all of the right time, even if you scroll down your page.
Now you have for one thing dazzling. Let us develop a full web page back ground intro for our website landing page.
Paste this code underneath the navbar and prior to the closing label:
I’d like to explain how a rule above works.
.view is really a wrapper for our back ground image, which allows us to include a mask to it. As a result of this website builder mask we could make our image darker or lighter, which helps us to help make your articles more noticeable.
.mask may be the element with absolute place, rendering it protect our history image. And given that it covers the image, we could make use of it as being a mask and manipulate the colors.
We have additionally set for the .view element. We are going to require that in a moment.
You will notice that nothing has changed when you save the file and refresh your browser. That is because we require some CSS code making it work.
Firstly, we will make use of split CSS apply for our customized designs. Start the file style.css (within the «css» folder) and paste in code below:
We set height: 100% to all or any the parent components of our back ground image because just by doing so we could cover the whole display screen with the image
We set #intro to a proper path that is URL the image. You should use whatever image you need.
Then, we provide the value address to the background-size home. Which makes 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 while using the browsers.
Save the file andlet the secret happen. When you start your web browser you will notice an attractive image addressing your intro. There are some things which we’re able to improve, but we will look after that into the next concept.
To be able to replace the back ground image you simply need to alter the path that is URL. You are able to offer a web link towards the image in your path or server towards the supply file in your task’s files, as an example: url(«/img/imageName.png»);
One last tiny tip:
You should use whatever image you would like, but you can find a rules that are few you really need to follow.
Your image should be big sufficient to help keep the high quality but since tiny as possible so not to increase the web page loading time. That is why we recommend you ready your photo the following:
1. Resolution: 1920px / 1280px
2. JPEG extendable
3. The file is compressed (you may use the COMPRES JPG device)