bloc zero
No code - just a bloc and two brics with color background.
bloc one
Section 1 before
background:url('./img/tracks.jpg') no-repeat;
position: fixed;
top:20px;
left:20px;
height:200px;
width:60%;
bloc two
section 2
position:relative;
background:blue;
bloc three
section 3 before
background:url('./img/mountains.jpg') no-repeat;
position: fixed;
top:240px;
left:60px;
height:360px;
width:92%;
bloc four
section 4
position:relative;
Background:purple;
bloc five
section 5 before
background:url('./img/forrest.jpg') no-repeat;
position: fixed;
top:360px;
left:100px;
height:360px;
width:80%;
bloc six
No added code
hero bloc
add section number one or seven to class to see background layer
section 7 before
background:url('./img/sanfran.jpg') no-repeat;
position: fixed;
top:400px;
left:220px;
height:300px;
width:60%;
notes bloc
desired page structure and notes:
Page structure starts with parallax hero bloc, then a static bloc, continues to alternates parallax & static blocs
NO global header (sticky header from hero in bloc1)
bloc1-hero - (12.jpeg) parallax background, gradient overlay (sticky nav bar)
bloc2-intro - static, purple color background
bloc3-about - (12.jpeg) parallax background, gradient overlay
bloc4-coach - static, no background img or color
bloc5-services-hero - (camera.jpeg) pararlax background, gradient overlay
bloc6-services - static, no background img or color
bloc7-tales - (7.jpeg) párallax background with overlays
bloc8-pricing - static, no background img or color
bloc9-contact-hero - (3.jpeg) parallax background, gradient overlay
bloc10-contact-form - static, no background img or color
bloc11-newsletter - (14.jpeg) parallax background, overlays
Bloc-placeholder - referenced coded parallax images, hide visibility
bloc12-footer (global footer) - static, no background img or color
Full "add code" used for this page:
<style>
.section-one {
position:relative;
}
.section-one:before {
content:'';
background:url('./img/tracks.jpg') no-repeat;
position: fixed;
top:140px;
left:20px;
height:200px;
width:60%;
}
.section-two {
position:relative;
background:blue;
}
.section-three {
position:relative;
}
.section-three:before {
content:'';
background:url('./img/mountains.jpg') no-repeat;
position: fixed;
top:380px;
left:60px;
height:360px;
width:92%;
}
.section-four {
position:relative;
background:purple;
}
.section-five {
position:relative;
}
.section-five:before {
content:'';
background:url('./img/forrest.jpg') no-repeat;
position: fixed;
top:420px;
left:100px;
height:360px;
width:80%;
}
.section-seven {
position:relative;
}
.section-seven:before {
content:'';
background:url('./img/sanfran.jpg') no-repeat;
position: fixed;
top:460px;
left:220px;
height:300px;
width:60%;
}
</style>
bloc seven
bloc eight
bloc nine
bloc ten
bloc eleven
bloc twelve
placeholder bloc for code images
