CodeSoft-Task-2/index.html at main · ParavinMulla786/CodeSoft-Task-2 · 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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Fruit Shop Landing Page</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header id="header">
      <div class="header-content-div">
        <a href="#home-sec">
          <img
            src="https://i.ibb.co/KsztxWq/logo1.png"
            alt="Company Logo"
            id="header-img"
        /></a>
        <nav id="nav-bar">
          <a href="#about" class="nav-link">ABOUT</a>
          <a href="#varieties" class="nav-link">VARIETIES</a>
          <a href="#our-service" class="nav-link">OUR SERVICE</a>
          <a href="#benefits" class="nav-link">BENEFITS</a>
          <a href="#contact" class="nav-link">CONTACT</a>

        </nav>
      </div>
    </header>
    <main>
      <section id="home-sec" class="flexible home-sec">
        <div class="eye-grabber-img">
          <img
            src="https://i.ibb.co/T4czpqY/apples-red-fresh-mellow-juicy-perfect-whole-on-white-desk.jpg"
            alt="Image of Apples"
          />
        </div>
        <div class="eye-grabber">
          <h1>Fresh, Crispy, Heavenly.</h1>
          <h2>
            100% Organic, vivid varieties of apples grown in Kashmir aka The
            Heaven of Earth.
          </h2>
          <button class="btn" onclick="window.location.href = '#contact';">
            Buy Now
          </button>
        </div>
      </section>
      <section id="about" class="sec-padding">
        <h3 class="section-heading">ABOUT US</h3>
        <div class="sec-content-div flexible">
          <p>
            We are a group of people with decades of experience in growing and
            selling apples. We know what a good apple looks like and how they
            are grown. This essential fruit requires a temperate climate, loamy
            soil that is rich in organic matter apart from needing proper
            drainage and aeration facilities. Lucky for us we live in Kashmir
            which is proudly known as paradise of earth is also home to
            temperate fruits like apple for which the state is very famous
            across globe. The main factor which influence temperate fruit
            bearing trees is soil, climate and environment which are highly
            favorable and unparalleled in the province of Kashmir. Kashmiri
            apples a unique look, taste, flavor, size and color.
          </p>

<img
            src="https://i.ibb.co/SyKVC8M/about-img.jpg"
            alt="A man plucking apples from the tree"
          />
        </div>
      </section>
      <section id="varieties" class="sec-padding">
        <h3 class="section-heading">VARIETIES</h3>
        <div class="sec-content-div flexible">
          <div class="tile">
            <img
              src="https://i.ibb.co/t2x706V/amber.jpg"
              alt="photo of amber apples"
            />
            <h4>Amber Apple</h4>
            <p>
              This red, medium-sized fruit becomes fully ripe in mid-October. It
              is mostly grown in Shopian and Kulgam.
            </p>
          </div>
          <div class="tile">
            <img
              src="https://i.ibb.co/H4Cnh7v/american-trel.png"
              alt="photo of american trel apples"
            />
            <h4>American Trel <br />Apple</h4>
            <p>
              A small, rounded, very crispy and sweet fruit variety that ripens
              in mid-September.
            </p>
          </div>
          <div class="tile">
            <img
              src="https://i.ibb.co/jTDgqYB/red-delicious.png"
              alt="photo of red delicious apple"
            />
            <h4>Kashmiri Red <br />Apple</h4>
            <p>
              A very popular and widely cultivated variety of apple that ripens
              in mid-September. Its flesh is greenish white, grainy and juicy.
            </p>
          </div>
          <div class="tile">
            <img
              src="https://i.ibb.co/MSvg1QN/maharaja.png"
              alt="photo of Maharaej apples"
            />
            <h4>Maharaj Apple</h4>
            <p>
              A large apple with red and green color. It tastes a bit sour but
              sweetens with time and is available by late October.
            </p>
          </div>
          <div class="tile">
            <img
              src="https://i.ibb.co/zVR1LB2/hazal.png/"
              alt="photo of Hazratbael apples"
            />
            <h4>Hazratbel Apple</h4>
            <p>
              A quickly perishable variety that ripens in early July. It is the
              oldest variety of apples cultivated in the valley and is mostly
              consumed domestically
            </p>
          </div>
          <div class="tile">
            <img
              src="https://i.ibb.co/BNFrnZn/golden.png"
              alt="photo of Golden Delicious apples"
            />
            <h4>Golden Delicious <br />Green Apple</h4>
            <p>
              A variety with comparatively longer shelf life, it is crispy,
              juicy and has thick greenish-white flesh which turns golden upon
              ripening. It is available till January.
            </p>
          </div>
        </div>
      </section>
      <section id="our-service" class="sec-padding">
        <h3 class="section-heading">OUR SERVICE</h3>
        <div class="sec-content-div">
          <div class="bars">
            <div class="icon-container">
              <img src="https://i.ibb.co/w6H542X/Fresh.png" alt="" />
            </div>
            <div class="txt-container">
              <h5>Fresh</h5>
              <p>We deliver fresh apples with a 100% guarantee of freshness.</p>
            </div>
          </div>
          <div class="bars">
            <div class="icon-container">
              <img src="https://i.ibb.co/FKNq4Qr/delivered.png" alt="" />
            </div>
            <div class="txt-container">
              <h5>Fast</h5>
              <p>
                We deliver your orders as fast as possible, delivery procedure
                begins as soon as apple is plucked from tree.
              </p>
            </div>
          </div>
          <div class="bars">
            <div class="icon-container">
              <img src="https://i.ibb.co/HHQK1wV/happy.png" alt="" />
            </div>
            <div class="txt-container">
              <h5>Satisfying</h5>
              <p>
                We guarantee 100% customer satisfaction. We do our best to make
                your purchase experience smooth. But if we mess up somehow you
                will get compensated for every inconvenience.
              </p>
            </div>
          </div>
        </div>
</section>
      <section id="benefits" class="sec-padding">
        <h3 class="section-heading">BENEFITS</h3>
        <div class="sec-content-div flexible">
          <iframe
            id="video"
            width="560"
            title="Benefits of Apple"
            height="315"
            src="https://www.youtube.com/embed/W_JOJNztrnI"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen
          ></iframe>
        </div>
      </section>
      <section class="contact" id="contact">
        <h3 class="section-heading">CONTACT</h3>
        <div class="sec-content-div flexible">
          <h6>To make an order or just to know more contact us :</h6>
          <form
            id="form"
            action="https://www.freecodecamp.com/email-submit"
            method="POST"
          >
            <input
              type="email"
              name="email"
              id="email"
              placeholder="Your Email Address"
              required
            />
            <input type="submit" class="btn" id="submit" value="Know More" />
          </form>
        </div>
      </section>
    </main>
    <footer>
      Created by
      <a href="#">Paravin Mulla</a>
    </footer>
  </body>
</html>