[snippet_preview_vc code="{``settings``:{``resources``:`{``}`,``title``:``Responsive Parallax Layout with Fixed Nav``},``code``:{``html``:``%3Chtml%3E%0A%3Chead%3E%0A%3Ctitle%3ECollapsing%20Header%20Effect%3C%2Ftitle%3E%0A%3C%2Fhead%3E%0A%3Cbody%3E%0A%3Cdiv%20id%3D%22container%22%3E%0A%3Cheader%3E%0A%3Ch1%3EAdventurer%20%26%20Co.%3C%2Fh1%3E%0A%3C%2Fheader%3E%0A%3Cdiv%20id%3D%22banner1%22%3E%0A%3Ch2%3Eexplore%20the%20unknown%3C%2Fh2%3E%0A%3C%2Fdiv%3E%0A%3Cdiv%20id%3D%22content%22%3E%0A%3Cp%3ELorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit.%20Sed%20suscipit%20nisi%20mi%2C%20ac%20hendrerit%20lorem%20venenatis%20sed.%20Sed%20molestie%20ut%20risus%20vitae%20euismod.%20Fusce%20convallis%20justo%20fermentum%20elit%20tincidunt%20ullamcorper.%20%3C%2Fp%3E%0A%3Cp%3EPellentesque%20mattis%2C%20lectus%20eu%20malesuada%20auctor%2C%20nulla%20lacus%20eleifend%20est%2C%20at%20consequat%20justo%20tellus%20in%20ex.%20Sed%20posuere%20a%20urna%20eu%20tincidunt.%20Phasellus%20nec%20orci%20sed%20felis%20vehicula%20aliquam%20vitae%20id%20quam.%20Pellentesque%20porta%20consequat%20diam%2C%20et%20mollis%20nunc%20efficitur%20id.%20Donec%20efficitur%20congue%20erat%2C%20quis%20pretium%20nunc%20pretium%20eget.%20Phasellus%20ultricies%20lectus%20non%20ante%20aliquet%2C%20et%20ultrices%20sapien%20eleifend.%20Donec%20sed%20tortor%20nec%20mauris%20blandit%20sodales.%3C%2Fp%3E%0A%3Cp%3ECurabitur%20hendrerit%20ipsum%20porta%20ultrices%20pulvinar.%20Curabitur%20egestas%20faucibus%20suscipit.%20Curabitur%20sollicitudin%2C%20quam%20nec%20suscipit%20dignissim%2C%20urna%20arcu%20molestie%20nibh%2C%20eu%20fermentum%20purus%20est%20ac%20nisl.%20Donec%20tempus%20cursus%20auctor.%20Aliquam%20sit%20amet%20fermentum%20lorem.%20Nullam%20at%20auctor%20risus.%20Praesent%20mattis%20lacus%20quis%20blandit%20dictum.%20Pellentesque%20porta%20et%20erat%20id%20tincidunt.%20Maecenas%20volutpat%20est%20sed%20cursus%20maximus.%3C%2Fp%3E%0A%3C%2Fdiv%3E%0A%3Cdiv%20id%3D%22banner2%22%3E%0A%3Ch2%3Eclimb%20higher%3C%2Fh2%3E%0A%3C%2Fdiv%3E%0A%3Cdiv%20id%3D%22content2%22%3E%0A%3Cp%3ELorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit.%20Sed%20suscipit%20nisi%20mi%2C%20ac%20hendrerit%20lorem%20venenatis%20sed.%20Sed%20molestie%20ut%20risus%20vitae%20euismod.%20Fusce%20convallis%20justo%20fermentum%20elit%20tincidunt%20ullamcorper.%20%3C%2Fp%3E%0A%3Cp%3EPraesent%20blandit%20id%20felis%20vel%20viverra.%20Maecenas%20nisl%20nulla%2C%20bibendum%20eget%20mi%20a%2C%20rutrum%20vehicula%20nunc.%20Aenean%20hendrerit%20malesuada%20eros%2C%20eget%20rhoncus%20lectus%20interdum%20vitae.%20Morbi%20at%20accumsan%20justo%2C%20feugiat%20molestie%20lorem.%20Integer%20quis%20nunc%20rutrum%2C%20aliquet%20nisi%20id%2C%20aliquam%20odio.%20Fusce%20posuere%20sapien%20in%20lobortis%20ullamcorper.%3C%2Fp%3E%0A%3Cp%3EQuisque%20luctus%20felis%20in%20efficitur%20molestie.%20Aliquam%20aliquam%20pretium%20dolor%20eget%20euismod.%20Nam%20tempor%20sed%20ex%20vitae%20fringilla.%20Vestibulum%20quis%20libero%20a%20metus%20pretium%20consequat.%20Suspendisse%20eros%20erat%2C%20pharetra%20ac%20lacus%20sit%20amet%2C%20lobortis%20suscipit%20nisi.%20Suspendisse%20interdum%20arcu%20magna%2C%20id%20placerat%20turpis%20suscipit%20eu.%20Nullam%20quis%20lacinia%20dui%2C%20a%20semper%20augue.%20%3C%2Fp%3E%0A%3Cp%3EInteger%20placerat%20scelerisque%20nisl%20consectetur%20finibus.%20Nulla%20facilisi.%0ADonec%20blandit%20elementum%20lacus.%20Sed%20fermentum%20neque%20et%20lacus%20interdum%20molestie.%20Fusce%20placerat%2C%20massa%20in%20convallis%20consequat%2C%20dui%20enim%20eleifend%20lorem%2C%20sit%20amet%20pellentesque%20urna%20lectus%20id%20lorem.%20Nam%20quis%20nunc%20eleifend%2C%20malesuada%20elit%20eu%2C%20ultricies%20metus.%20Cras%20dignissim%20ante%20at%20massa%20ultrices%2C%20in%20interdum%20turpis%20auctor.%20Aenean%20at%20justo%20arcu.%20Proin%20ipsum%20enim%2C%20faucibus%20lobortis%20rhoncus%20eu%2C%20venenatis%20sit%20amet%20urna.%20Donec%20vitae%20orci%20orci.%20In%20facilisis%20sapien%20vitae%20lorem%20finibus%20laoreet.%3C%2Fp%3E%0A%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E``,``js``:````,``css``:``%40import%20url('https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DMuli%26display%3Dswap')%3B%0A%0Abody%20%7B%0A%20margin%3A%200%3B%0A%20padding%3A%200%3B%0A%20font-family%3A%20'Muli'%2C%20serif%3B%0A%20font-size%3A%201.4em%3B%0A%20line-height%3A%201.65em%3B%0A%7D%0A%0Aheader%20%7B%0A%20margin%3A%200%3B%0A%20padding%3A%200%3B%0A%20height%3A%2070px%3B%0A%20background%3A%20%23333%3B%0A%20width%3A%20100%25%3B%0A%20z-index%3A%2010%3B%0A%20position%3A%20fixed%3B%0A%20top%3A%200%3B%0A%20box-shadow%3A%200px%203px%2010px%20%23aaa%3B%0A%7D%0A%0Aheader%20h1%20%7B%0A%20font%3A%202em%3B%0A%20text-transform%3A%20lowercase%3B%0A%20margin%3A%2016px%2030px%200%200%3B%0A%20text-align%3A%20right%3B%0A%20%20color%3A%20%23FFF%3B%0A%20%20text-shadow%3A%201px%201px%20%23000%3B%0A%7D%0A%0Ah2%20%7B%0A%20%20%20%20text-shadow%3A%202px%202px%20%23555%3B%0A%7D%0A%0A%23banner1%20%7B%0A%20background%3A%20url(https%3A%2F%2Fi.ibb.co%2FxjRpqG1%2Fmountains.jpg)%3B%0A%20background-size%3A%20cover%3B%0A%20width%3A%20100%25%3B%0A%20height%3A%20750px%3B%0A%20position%3A%20fixed%3B%0A%20top%3A%2050px%3B%0A%7D%0A%0A%23banner1%20h2%20%7B%0Atext-align%3A%20center%3B%0Acolor%3A%20%23FFF%3B%0Aposition%3A%20relative%3B%0Atop%3A%20280px%3B%0Afont-size%3A%204em%3B%0A%7D%0A%0A%23banner2%20%7B%0A%20background%3A%20url(https%3A%2F%2Fimages.pexels.com%2Fphotos%2F4827%2Fnature-forest-trees-fog.jpeg)%3B%0A%20background-size%3A%20cover%3B%0A%20width%3A%20100%25%3B%0A%20height%3A%20800px%3B%0A%20position%3A%20relative%3B%0A%20top%3A%20200px%3B%0A%7D%0A%0A%23banner2%20h2%20%7B%0Atext-align%3A%20center%3B%0Acolor%3A%20%23587863%3B%0Aposition%3A%20relative%3B%0Atop%3A%20200px%3B%0Afont-size%3A%204em%3B%0A%20text-shadow%3A%202px%202px%20%2388AF95%3B%0A%7D%0A%0A%23content%20%7B%0A%20width%3A%20100%25%3B%0A%20position%3A%20relative%3B%0A%20top%3A%20750px%3B%0A%20padding-top%3A%2020px%3B%0A%20background%3A%20%23FFF%3B%0A%20height%3A%201000px%3B%0A%7D%0A%0A%23content%20p%20%7B%0A%20padding%3A%2010px%20100px%3B%0A%20color%3A%20%23555%3B%0A%7D%0A%0A%23content2%20%7B%0A%20width%3A%20100%25%3B%0A%20position%3A%20relative%3B%0A%20padding%3A%2020px%200%3B%0A%20background%3A%20%2305170A%3B%0A%20height%3A%201000px%3B%0A%7D%0A%0A%23content2%20p%20%7B%0A%20padding%3A%2010px%20100px%3B%0A%20color%3A%20%23E0E0E0%3B%0A%7D``}}"]