What is a parallax webpage?
By incorporating layers of images that move at different speeds as the user scrolls, parallax websites offer a sense of depth and engagement that traditional sites often lack.
Structure of code:
1.<!DOCTYPE html>:
This declares the document type and version of HTML being used.
2.<head>:
This section contains metadata about the HTML document, such as character encoding, viewport settings, and links to external resources like stylesheets and fonts.
3.<body>:
This section contains the main content of the webpage.
4.</body>:
Closes the body tag.
5.</html>:
Closes the body tag.
Here comes html code to create a parallax webpage:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Parallax webpage using HTML</title> </head> <body> <span class="border"> Greenery </span> </div> </div> <section class="section section-light"> <h2>Section One</h2> <p> Our Planet Earth, the blue gem of our solar system, is the only known celestial body that supports life. <p> </section> </div> <section class="section section-dark"> <h2>Section Two</h2> <p> A clean environment reduces the spread of diseases, while a green environment helps to maintain biodiversity and balance in the ecosystem. </p> </secton> </div> <section class="section section-dark"> <h2>Section Three<s2> <p> Through consious efforts and sustainable practices, we can ensure a healthier and more balanced ecosystem for future generations. <p> </section> <span class="border"> Go green!! </span> </div> </div> </body> </html>
Output:
