Sustainable/index.html at main · Parthakhil2901/Sustainable · 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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!--Original Design of website: Sheryians coding school
   Developer: Akhilesh Shukla
   Library: No library
   Created on: 22/10/2023-->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Avantus</title>
    <link rel="stylesheet" href="https://unpkg.com/sheryjs/dist/Shery.css" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="main">
      <div id="home">
        <div id="nav">
          <div id="nleft">
            <a class="nlink" href="#">Home</a>
            <a class="nlink" href="#">Pricing</a>
            <a class="nlink" href="#">Products</a>
          </div>
          <a class="nlink" id="centeratag" href="#">Avantus</a>
          <div id="nright">
            <a class="nlink" href="#"> Our Journey </a>
          </div>
        </div>
        <div id="hero">
          <div class="anim2" id="sustain">
            <h5>01.</h5>
            <h2>Sustainability</h2>
            <p>
              Preserve Earth, conserve resources, and foster lasting harmony for
              all
            </p>
            <div class="imgeff" id="susimagewrapper">
              <img src="Images/pinkgreenplant.jpg" alt="" />
            </div>
          </div>
          <div class="anim2" id="ephemeral">
            <div id="headings">
              <h1>Ephemeral</h1>
              <h1>Equillibrium</h1>
            </div>
            <div id="imgntext">
              <img src="Images/pinkplant.jpg" alt="plantimage" />
              <p>
                Temporary balance in constant flux, delicate equilibrium of
                fleeting moments.
              </p>
            </div>
          </div>
          <div class="anim2" id="visit">
            <div id="circlev">
              <i class="ri-arrow-down-line"></i>
            </div>
            <h3>Visit Our gallery</h3>
          </div>
        </div>
      </div>
      <div id="motive">
        <h3>Our motive</h3>
        <p>
          At Avantus, we are deeply committed to sustainability. We believe in a
          greener, more sustainable future,<span id="onespan"></span> and it`s
          at the core of everything we do. Our healthy practices are designed
          with environmental<span id="twospan"></span> responsibility in mind,
          from sourcing eco-friendly<span id="threespan"></span>
          to reducing our carbon footprint.
        </p>
      </div>
      <div id="pictures">
        <div id="firstpic">
          <div class="imgeff" id="picimg">
            <img src="Images/sea.jpg" alt="sea" />
          </div>
          <h1>Synergy.</h1>
          <p>
            Harmony in collaboration; combined efforts yield greater outcomes
            together.
          </p>
        </div>
        <div id="secpic">
          <div class="imgeff" id="picimg">
            <img src="Images/cloud.jpg" alt="sea" />
          </div>
          <h1>Harmony.</h1>
          <p>Harmony: a serene blend, unity, and balance in life's symphony.</p>
        </div>
      </div>
      <div id="banner">
        <div id="bimage">
          <img src="Images/bottle.jpg" alt="bottle" />
          <img src="Images/ladki.jpg" alt="Girl" />
        </div>
        <div id="btext">
          <h1>Biodegradable</h1>
          <h1>Packaging</h1>
          <p>
            "Eco-friendly, decomposes naturally, reduces waste, sustains
            environment, innovative packaging solution."
          </p>
        </div>
      </div>
      <div id="future">
        <video src="Images/back.mp4" autoplay muted loop></video>
        <div id="ftext">
          <h1>Think of the future</h1>
          <button>Join the movement</button>
        </div>
      </div>
    </div>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"
      integrity="sha512-16esztaSRplJROstbIIdwX3N97V1+pZvV33ABoG1H2OyTttBxEGkTsoIVsiP1iaTtM8b3+hu2kB6pQ4Clr5yug=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>

    <!-- Scroll Trigger is needed for Scroll Effects -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>

    <!-- Three.js is needed for 3d Effects -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.155.0/three.min.js"></script>

    <!-- ControlKit is needed for Debug Panel -->
    <script src="https://cdn.jsdelivr.net/gh/automat/controlkit.js@master/bin/controlKit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.esm.js"></script>
    <script
      type="text/javascript"
      src="https://unpkg.com/sheryjs/dist/Shery.js"
    ></script>
    <script src="script.js"></script>
  </body>
</html>