Układ strony typowy dla portfolio

Cześć,
chciałbym się dowiedzieć jak nazywa się taki układ strony jak np. na stronach: gg.pl, az.pl? Chodzi o taki jednostronny układ strony typowy dla portfolio. Ciekawi mnie to.
Wie ktoś może jak taką stronę stworzyć? Jak podzielić stronę na kilka takich elementów?

Wie ktoś może jak taką stronę stworzyć?

Za pomocą elementów HTML, które układasz w edytorze jeden za drugim, w ten sposób jedne są wyżej, drugie niżej.

Jak podzielić stronę na kilka takich elementów?

wsadzić kawałki strony w kolejne odpowiednie tagi (p, div, h1, itp.) a potem wystylować za pomocą CSS.

Świetny Samiec napisał(a):

chciałbym się dowiedzieć jak nazywa się taki układ strony jak np. na stronach: gg.pl, az.pl? Chodzi o taki jednostronny układ strony typowy dla portfolio. Ciekawi mnie to.

Long Page Scrolling Design - w skrócie można rzec Scroll&Discover (http://www.dtelepathy.com/blog/inspiration/long-page-scrolling-designs).

Tak jak kolega napisał - najlepiej każdą sekcję włożyć w oddzielnego diva na całą długość ekranu, jeden pod drugim. Wewnątrz tego diva wrzucić drugiego określającego szerokość docelowej zawartości. A wewnątrz to wrzuć wedle uznania. Dobrze byłoby aby pierwszy div (wyświetlający się zaraz po załadowaniu strony) był jakimś bannerem bądź innym elementem bardziej prezentacyjnym niż informacyjnym, eg. https://slack.com/.

Dobrze byłoby aby pierwszy div (wyświetlający się zaraz po załadowaniu strony)

"pierwszy div" to strasznie nieprecyzyjne określenie. Pierwszy dostrzegany element na stronie to niekoniecznie pierwszy div w kodzie.

był jakimś bannerem bądź innym elementem bardziej prezentacyjnym niż informacyjnym, eg. https://slack.com/.

Nie wydaje mi się, że dobrze byłoby. Zresztą wstawiona przez ciebie strona wcale nie jest taka.
"The Sandwich Video team tried Slack. Turns out it really did change the way they communicate."
[dalej: informacyjny filmik tłumaczący czym jest Slack]
Slack is a platform for team communication: everything in one place, instantly searchable, available wherever you go.

dla mnie takie krótkie wytłumaczenie co to za program i do czego służy akurat jest bardzo informacyjne (w przeciwieństwie do wielu stron w internecie, które na serio są robione, że na początku strony ma być element prezentacyjny a nie informacyjny i wstawiają jakiś nic-nie-znaczący-obrazek-górskiego-krajobrazu-czy-kosmosu po to tylko, żeby po przewinięciu strony w dół pokazać userowi efekt parallax scrolling, tak jakbyśmy byli w 1982 roku, i było to faktycznie jakimś wielkim osiągnięciem technicznym i koncepcyjnym...

...a efekt jest taki, że ten "pierwszy div" na takich stronach i tak służy tylko do przewinięcia go w dół (więc dużo userów pewnie nawet nie zobaczy właściwej treści strony, jeśli zamkną okno po 3 sekundach...).

Jak dla mnie najpierw się powinno mysleć o treści, a nie o "bannerach" czy elementach "prezentacyjnych, nie informacyjnych". Oczywiście ta treść powinna być podana w krótki, zwięzły sposób (bo nikt też nie będzie czytał długich bloków tekstu na samym wstępie, wiadomo)... No ale tak naprawdę czasem w jednym, dwóch zdaniach można przekazać więcej niż ktoś się rozpisze w dwóch akapitach.

edit: tzn. piję do panującej obecnie mody na to, żeby na początku wstawiać jakieś g*wna do przewijania typu wielkie tła itp., a nie ogólnie do koncepcji bannerów/tytułów/headerów/logo na górze.

Pytanie: W jaki sposób rozciągnąć ten box na całą szerokość strony, pozostawiając go bez marginesów?

Mam taki układ strony:

Kod:

.content1{
     width:1200px;
     height: 500px;
     padding:20px 50px;
     background-color: #088D6C;
     margin:0 auto;
     box-sizing:border-box;
     font-size: 30px;
     -moz-box-shadow: 0 0 5px #888;
     -webkit-box-shadow: 0 0 5px#888;
     box-shadow: 0 0 5px #888;
}

Nadaj mu width na 100%, dzięki czemu zawsze dopasuje się do szerokości okna.