responsive-web/index.html at main · Rahulkumar070/responsive-web · 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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.css"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="main">
      <div id="page1">
        <div id="nav">
          <h1>Logo</h1>
          <div id="nav1">
            <a href="">Shop</a>
            <a href="">Cart</a>
            <a href="">Favourite</a>
            <a href="">Wallet</a>
          </div>
          <a href=""><h3>Sign In</h3></a>
        </div>
        <div id="hero">
          <h1>
            A Occurence / object / sight that is both <br />a phenomenon and an
            anomaly.
          </h1>
          <h3>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad aperiam
            in dignissimos sit totam laudantium.
          </h3>
          <h4>Lorem ipsum, dolor sit amet consectetur adipisicing.</h4>
          <a href=""><h2>Click</h2></a>
        </div>
      </div>
      <div id="page2">
        <div id="pageone">
          <h1>Oranges</h1>
          <h3>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem
            unde molestias quia nesciunt corporis maiores modi repellat, impedit
            reprehenderit sunt accusamus atque harum ex sit rerum blanditiis.
            Eos, similique voluptas! Lorem ipsum dolor sit amet consectetur
            adipisicing elit. Iure esse asperiores hic voluptatem modi sunt
            temporibus qui, reprehenderit minima tenetur!
          </h3>
        </div>
        <div id="image">
          <img
            data-scroll
            data-scroll-speed="3"
            src="https://images.unsplash.com/photo-1543076659-9380cdf10613?q=80&w=3087&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
            alt=""
          />
        </div>
      </div>
      <div id="page3">
        <div id="three">
          <div id="imagethree">
            <img
              data-scroll
              data-scroll-speed="3"
              src="https://images.unsplash.com/photo-1625604029887-45f9c2f7cbc9?q=80&w=2864&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
              alt=""
            />
          </div>
        </div>
        <div id="threetext">
          <h1>Pineapple</h1>
          <h3>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem
            unde molestias quia nesciunt corporis maiores modi repellat, impedit
            reprehenderit sunt accusamus atque harum ex sit rerum blanditiis.
            Eos, similique voluptas! Lorem ipsum dolor sit amet consectetur
            adipisicing elit. Iure esse asperiores hic voluptatem modi sunt
            temporibus qui, reprehenderit minima tenetur!
          </h3>
        </div>
      </div>
      <div id="footer">
        <h1>Contact Us</h1>
        <div id="footer1">
          <h2>Email</h2>
          <a href="">abc@gmail.com</a>
        </div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.js"></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
      integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <script src="script.js"></script>
  </body>
</html>