Parallax-CSS/index.html at main · Ananta2003/Parallax-CSS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Parallax Website</title>
</head>
<body>
    <section class="pimg1">
        <div class="ptext">
            <span class="title1">PARALLAX WEBSITE</span>
        </div>
    </section>
    <section class="section Mtext1">
        <h2>Section One</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio consectetur, eaque doloribus eius odit laborum. Doloremque assumenda, eaque aut dicta blanditiis sapiente fuga minus, cum necessitatibus, ex cumque magnam asperiores culpa atque provident laudantium rerum facilis officia accusantium! Eum asperiores, accusantium distinctio saepe, magnam natus ducimus harum at ipsum eos qui officia fugiat reprehenderit? Corrupti ducimus, deleniti omnis ab labore fuga quas dolorem placeat ad magni vero culpa dolore dignissimos eaque aliquid cum saepe molestias rerum officiis earum nobis similique ullam? Voluptatum recusandae totam perspiciatis pariatur libero labore qui beatae. Laborum tempore dignissimos qui totam delectus pariatur animi molestiae eveniet.</p>
    </section>

    <!-- section2 -->

    <section class="pimg2">
        <div class="ptext">
            <span class="title2">EXPLORE NATURE</span>
        </div>
    </section>
    <section class="section Mtext2">
        <h2>Section Two</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio consectetur, eaque doloribus eius odit laborum. Doloremque assumenda, eaque aut dicta blanditiis sapiente fuga minus, cum necessitatibus, ex cumque magnam asperiores culpa atque provident laudantium rerum facilis officia accusantium! Eum asperiores, accusantium distinctio saepe, magnam natus ducimus harum at ipsum eos qui officia fugiat reprehenderit? Corrupti ducimus, deleniti omnis ab labore fuga quas dolorem placeat ad magni vero culpa dolore dignissimos eaque aliquid cum saepe molestias rerum officiis earum nobis similique ullam? Voluptatum recusandae totam perspiciatis pariatur libero labore qui beatae. Laborum tempore dignissimos qui totam delectus pariatur animi molestiae eveniet.</p>
    </section>

    <!-- Section3 -->

    <section class="pimg3">
        <div class="ptext">
            <span class="title3">LOOK DEEP INTO NATURE</span>
        </div>
    </section>
    <section class="section Mtext3">
        <h2>Section Three</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio consectetur, eaque doloribus eius odit laborum. Doloremque assumenda, eaque aut dicta blanditiis sapiente fuga minus, cum necessitatibus, ex cumque magnam asperiores culpa atque provident laudantium rerum facilis officia accusantium! Eum asperiores, accusantium distinctio saepe, magnam natus ducimus harum at ipsum eos qui officia fugiat reprehenderit? Corrupti ducimus, deleniti omnis ab labore fuga quas dolorem placeat ad magni vero culpa dolore dignissimos eaque aliquid cum saepe molestias rerum officiis earum nobis similique ullam? Voluptatum recusandae totam perspiciatis pariatur libero labore qui beatae. Laborum tempore dignissimos qui totam delectus pariatur animi molestiae eveniet.</p>
    </section>
</body>
</html>


<!-- Learning :
    1:  <section> means that the content inside is grouped (i.e. relates to a single theme), and should     appear as an entry in an outline of the page.

    <div>, on the other hand, does not convey any meaning, aside from any found in its class, lang and title attributes.


    2.Property "background-attachment:"fixed""= Makes the website images fixed and above contnt moves over it which is an intresting CSS property.

    3.Span is an Inline Container not Block Container like h1 and p tags.


    PARALLAX EFFECT:-
            Its a effect where background img remains same.
            we use [background-attachment: fixed;]tag in this
    -->