How do people make sections in HTML pages?

Question

For example, the Android KitKat site, Transit.js and Apple's iPad site has these sections, headers and dividers that I'm looking for.

Screenshot of Android KitKat site Screenshot of Transit.js

How are these beautiful sections made? I see the all the time on various web pages. Some of them even have image backgrounds and some sort of parallax effect going on in the background. Others have the sections fitted exactly to the height of your screen and limit your scrolling.

Are they all designed individually, or do they use some sort of theme or css stylesheet to get started?

The CSS stylesheets suggest they're not using any plugins or templates, but many of these sites are built by huge companies. Is there something like Bootstrap or another CSS framework that can be used to get a similar effect?

EDIT: The answers by Frankenscarf & Dominik are helpful, but I'm really looking for a framework of sorts to help with this, so I haven't accepted an answer yet

NEWER EDIT: the One Page Scroll plugin was exactly what I was looking for

score 3 · Accepted Answer · edited May 23 '17 at 11:58

3

Many of them really used their own plugins because they have their own front-end developer, but for amateurs and other professionals that don't have that much experience with javascript there are some plugins out there called Parallax.js, jQuery Scrollsnap plugin.

Also, if you are a developer just right-click and Inspect the elements and have a look at how they achieved this. It's no crime to copy for learning. After doing so try to create something like this in your own way.

A good read, too, is another question on StackOverflow: read here. If you have any questions left. Ask in the comments.

edited May 23 '17 at 11:58

Community

1
1

answered Jan 27 '14 at 09:27

Nick Schmidt

1,427
1
13
22

Yep, I did look through their stylesheets but it does seem they did it themselves. I was just wondering if there was something I could use to do this without starting from scratch. Thanks for the heads up on those two plugins, great stuff! – Huey Jan 27 '14 at 09:29
1

Also have a look at the fiddle I put up some minutes ago: http://jsfiddle.net/m6nn8/ – Nick Schmidt Jan 27 '14 at 09:33

score 0 · Answer 2 · answered Jan 27 '14 at 09:34

Short answer, all 3 were more than likely designed from scratch.

That does not mean that someone hasn't created a theme or css framework similar. Both the KitKat and Transit sites are examples of modern, responsive design, meaning the one design adjusts smartly for the device viewing it.

Hope this helps.

score 0 · Answer 3 · answered Feb 09 '14 at 09:27

I've stumbled upon a few plugins that will probably be helpful to anyone looking to create this kind of look:

windows: a jquery plugin for 'full-screen scrolling windows'

cool kitten: a parallax scrolling responsive framework

stellar: a jquery plugin for parallax images

How do people make sections in HTML pages?

3 Answers3