parallax.html

<html lang="en" dir="ltr">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0 " />
        <style>
            body,html{
                margin: 0;
                width:100%;
                height:100vh;
                font-family: sans-serif;
                font-weight: 400;
                font-size: 20px;
            }
            .img{
                position: relative;
                opacity: 0.70;
                background-position: center;
                background-size: cover;
                background-repeat: no-repeat;
                background-attachment: fixed;
            }
           .img1{
                background-image: url('img1.jpg');
                min-height: 100%;
           }
            .img2{
                background-image: url('img2.jpeg');
                min-height: 400px;
            }
            .img3{
                background-image: url('img3.jpeg');
                min-height: 400px;
            }
            .section{
                text-align: center;
                padding: 50px 80px;
                background: #B8C1C8;
            }
            .ptext{
                position: absolute;
                text-align: center;
                width: 100%;
                top: 50%;
                font-size: 3em;
                letter-spacing: 8px;
                text-transform: uppercase;
            }
        </style>
    </head>
    <body>
        <div class="img img1">
            <div class="ptext">
                <span class="para">
                    Parallax 
                </span>
            </div>
        </div>
        <section class="section">
            <h2>Section one</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor accusamus similique magni aperiam minima non suscipit a.
             Ipsam accusamus error ex suscipit debitis nesciunt cupiditate, fuga ea deserunt soluta vitae rem, officia laudantium nulla 
             consequatur incidunt non culpa voluptatem aliquam omnis odit? Tempora corrupti commodi atque! Cupiditate voluptatum ut ratione
              laboriosam ab veniam porro nihil, voluptates veritatis, earum aliquam aperiam esse incidunt nisi quis architecto tempore
               voluptatibus sed dicta ad facere minus expedita quae voluptatem. Iusto, tempora consequuntur! Officia asperiores quae ab 
               facere commodi fugit aspernatur dolores autem architecto corporis aliquid, perspiciatis animi sequi labore ratione dolore 
               adipisci? Animi deleniti maiores nihil, exercitationem repellendus dolorem quos minima tempore ratione a cupiditate nulla 
               illo odio libero. Et sit, recusandae tempora, ut totam quo dolorem consectetur aliquam expedita dolores provident vel? 
               Deleniti accusamus doloremque quae doloribus et, laborum laboriosam architecto necessitatibus unde temporibus illo, nam, 
               quidem nemo aspernatur mollitia. Fuga, quo sit?
            </p>
        </section>
        <div class="img img2">
            <div class="ptext" >
                <span class="para">
                    wonderful building
                </span>
            </div>
        </div>
        <section class="section">
            <h2>Section two</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor accusamus similique magni aperiam minima non suscipit a.
                Ipsam accusamus error ex suscipit debitis nesciunt cupiditate, fuga ea deserunt soluta vitae rem, officia laudantium nulla 
                consequatur incidunt non culpa voluptatem aliquam omnis odit? Tempora corrupti commodi atque! Cupiditate voluptatum ut ratione
                laboriosam ab veniam porro nihil, voluptates veritatis, earum aliquam aperiam esse incidunt nisi quis architecto tempore
                voluptatibus sed dicta ad facere minus expedita quae voluptatem. Iusto, tempora consequuntur! Officia asperiores quae ab 
                facere commodi fugit aspernatur dolores autem architecto corporis aliquid, perspiciatis animi sequi labore ratione dolore 
                adipisci? Animi deleniti maiores nihil.
            </p>
        </section>
        <div class="img img3">
            <div class="ptext">
                <span class="para">
                    colorful areas
                </span>
            </div>
        </div>
        <section class="section">
            <h2>Section three</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor accusamus similique magni aperiam minima non suscipit a.
                Ipsam accusamus error ex suscipit debitis nesciunt cupiditate, fuga ea deserunt soluta vitae rem, officia laudantium nulla 
                consequatur incidunt non culpa voluptatem aliquam omnis odit? Tempora corrupti commodi atque! Cupiditate voluptatum ut ratione
                laboriosam ab veniam porro nihil.
            </p>
        </section>
        <div class="img img1">
            <div class="ptext">
                <span class="para">
                    Parallax 
                </span>
            </div>
        </div>
    </body>
</html>