Maecenas rhoncus, neque facilisis rhoncus tempus, elit ligula varius dui, quis amet. Phasellus congue, leo sed ultricies tristique, nunc libero tempor ligula, at varius mi nibh in nisi. Duis euismod, augue et tempus consequat, lorem mauris porttitor quam, consequat ultricies mauris mi a metus. Aliquam placerat, velit a fermentum fermentum, mi felis vehicula justo, a dapibus quam augue non massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. This is the second wide section with full-size background, plus, there are two additional blocks (panels):
This blue section consists of four elements with glyph icons provided by the bootstrap: Pellentesque porttitor elit suscipit massa laoreet metus. Sed interdum metus et ligula venenatis, at rhoncus nisi molestie. There are two columns, the image is in the first columnm and centered text is in the right column: The greeting text is aligned vertically by center. The first section is full-sized greeting page: There are links to different sections of the page Section 1 – Home Here is the markup:īasically, this is UL-LI-based menu (as usual). Now we can begin with adding new elements to the page. This is the minimal markup which allows us to use the responsive nature of the Bootstrap. In order to understand what we intend to do – please have a look at the demo.įor a start – prepare a skeleton markup: index.htmlīootstrap one-page template with Parallax effect | Script Tutorials We will see the use of different backgrounds when scrolling the page. In order to make it more interesting, we’ll create the demonstration with one of the interesting effects – Parallax. Last time, when we wrote about the bootstrap, we received many positive comments, so I decided to prepare another lesson on using this framework today. In particular it concerns the markup and styles. This allows to save time and create excellent results in a short period of time.
It is no secret that the bootstrap is used on many websites now. Bootstrap one-page template with Parallax effectīootstrap tutorial / parallax scrolling tutorial.
0 kommentar(er)
