[Solved] divide my site into blocks

by


The example sites you’ve shown are of a parallax style. Here’s a very basic template to get you started. The keys in this example are the height of each ‘block’ being the height of the screen 100vh (100% of viewport height) and the background of the second block being fixed (doesn’t scroll with page). This example doesn’t use any animations or scroll speed offsets that help make some of the good designs so compelling. If you’re not a coder you can find many wordpress themes that utilize parallax, all you have to do is install one and fill in the content.

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
.section {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}
.section:nth-child(1) { background-color: hsla(0, 0%, 50%, 1); }
.section:nth-child(2) { background: url("https://i.imgur.com/hHBx4Ji.jpg") no-repeat fixed center; }
.section:nth-child(3) { background-color: hsla(50, 30%, 70%, 1); }
<div class="section">block 1</div>
<div class="section">block 2</div>
<div class="section">block 3</div>

fiddle

https://jsfiddle.net/Hastig/hL7mu7mt/

solved divide my site into blocks